Web engineers are expected to be self-directed in skill acquisition on these subjects, in addition to the shared core skills. Quarterly reviews will include a skills self-assessment and goal setting for the next quarter.
- HTML tag semantics and use
- HTML accessibility
- CSS and LESS
- Important Web APIs
- Angular 1.x, particularly writing effective directives, filters, and services
- Angular 2.x, including TypeScript
- React, including Redux
- BDD testing, mainly with Protractor
- Unit testing web with Karma
- Unit testing node.js with Mocha or similar
- Package management and npm
- Node.js fundamentals
- JS build processes, Grunt and how the dominatr-grunt build process works
- Deployment to S3/CloudFront for static hosting
- Install and use of KeystoneJS
- Deployment with Elastic Beanstalk
- MongoDB and Mongoose fundamentals
- SQL fundamentals
Unless otherwise requested by a client:
- Firefox/Chrome/Safari/Edge current stable versions
- Mobile Safari current stable
- Chrome for Android and iOS current stable
Most browser deficiencies (HTML5 tags, etc.) can be patched with simple JS includes (polyfills). Use those before you write custom code for individual browsers.
source directory, and build out what you need to a root
Most Angular projects should start by using a yeoman generator from dominatr, so just go ahead and use the directory structure that is generated.
Progressive enhancement & graceful degradation
CSS solutions can and should be used when you can degrade the design competently for browsers that don't support them. Gradients should degrade to appropriate solid colors, and shadows and rounded corners should always be for visual flair and not functional necessity. If an effect is absolutely needed in all renderings, whether due to the nature of the design or a client's desires, be prepared to build something a bit less elegant to enable it.
_escaped_fragment_ to build your app in a way that can serve static HTML snapshots (read more), but this won't necessarily work for every layout.
When possible, use icon fonts or SVG images to account for the increasingly resolution-independent mobile web. If you have to work with rasterized imagery, use spritemaps to combat images loading slowly on hover states, minimize HTTP requests, and generally eliminate the need for pre-loading. Be prepared to build spritemaps at multiple DPIs, and ensure that when one gets swapped out for another (like via a media query), the graphics don't shift around. Work with the design team to get the assets in the format you need, if you're having trouble manipulating the PSDs.
Be wary of CSS3 font inclusion when they aren't "for the web" fonts. Cross-browser line heights will be a nightmare. If possible, convince a client or designer not to use a desktop font (ex. use Arial/Helvetica, but NOT HelveticaNeue).