A tutorial site focused on creating high quality web development blog posts and books
August 17, 2019 • ☕️☕️ 8 min read
Frontend development has been flooded with insane amount of technologies
Frontend development has been flooded with insane amount of technologies! The big decision, then, is what to focus on. What are the critical skills you need to master, and what order should you tackle them.
The life of a frontend developer has been both easier and overwhelmed these days. There are many tools and frameworks out there to help you bootstrap a website in matter of hours. It’s is both exciting and intimidating to me, there’s always a tantalizing thought that the framework I’m using turns out to be a bad decision or it’s going to die soon.
The easy way to fix this is to focus on transferable knowledge first and then pick supporting bundle of choice. Switching cost will be low if you already have senior knowledge on web fundamentals.
Learning HTML is only important to learn if you feel it’s important to learn. There’s nothing fancy with HTML, just many many tags and attributes to remember. Nowadays, it’s possible to build a working website without learning HTML properly by using frameworks.
DOM (Document Object Model) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.
HTML DOM is a standard object model and programming interface for HTML. It defines: HTML elements as objects, properties of all HTML elements, methods to access all HTML elements, events for all HTML elements.
Web browser uses an internal model similar to the DOM to render a document such as a HTML page, . The nodes of every document are organized in a tree structure, called the DOM tree, with the topmost node named as “Document object”. When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen.
Browser engine (also known as a layout engine or rendering engine) is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user’s device. Common engines are: Trident, Tasman, Gecko, WebKit, KHTML, Presto.
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
CSS Preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. Sass is the most popular one.
PostCSS is a tool for transforming styles with JS plugins, it is not a CSS preprocessor but can be used as one. PostCSS can transform styles in any syntax, not just CSS. If there is not yet support for your favorite syntax, you can write a parser and/or stringifier to extend PostCSS.
CSS framework is a software framework that is meant to allow for easier, more standards-compliant web design using the CSS. Most of these frameworks contain at least a grid. Bootstrap seems to be the most popular CSS framework for responsive developing, some love it and some hate it. I simply don’t use it!!!
BEM (Block Element Modifier) is a naming convention for CSS and HTML to make your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
But the core language and standard libraries are actually pretty small compared to languages like Python and Java that have more features and larger standard libraries. Eventually you’ll need the ecosystem. But knowing the core language features that are implemented in most browsers is a great start.
React is my favorite choice because I can easily extend to mobile with React Native and desktop with Electron. As an indie maker who has very limited resources I really love universal solutions. To me, performance is not my priority right now, the medium performance release is still better than no release at all.
Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Virtual DOM was created to solve the problems of needing to frequently update the DOM in a more performant way. A virtual DOM can be thought of as a copy of the original DOM. This copy can be frequently manipulated and updated, without using the DOM APIs. Once all the updates have been made to the virtual DOM, we can look at what specific changes need to be made to the original DOM and make them in a targeted and optimized way.
React needs to use along with many other libraries and tools to work properly. You can setup all by yourself by configuring bundlers, transpilers, loaders, routers, css processors and many more to have the hardcore experience. Or just use supporting React frameworks like: Create React App, Next, Gatsby.
Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
Next is a framework that most notably allows you to write server-rendered React apps easily, automatic code splitting, filesystem based routing, hot code reloading and universal rendering.
Gatsby is a React-based, GraphQL powered, static site generator. Gatsby has been growing over time, and I’m glad to see it in use by a huge number of sites like marketing sites, blogs, and generated static pages.
I often use Gatsby for blogs and landing pages, Next for my SaaS website and Create React App for admin website.
Progressive Web App (PWA) describes a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web.
Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more.
Bundlers (Webpack, Rollup, Parcel) pick our code, understand its relationships, glues it all together in one or more files in a logical order, and there you have it: ready for use in a browser, with less headache.
Testing is checking your web application for potential bugs before its made live or before code is moved into the production environment. Depend on your resources, you could implement a collection of following type of tests: unit, functionality, usability, interface, security etc. using following testing frameworks (Jest, Enzyme, Mocha, Cypress).
Security is a big topic, here are a few things to get you started: using HTTPS only, lock same origin if possible, don’t mix HTTP and HTTPS, often run security audit etc.
Performance includes both objective measurements like time to load, frames per second, and time to interactive, and subjective experiences of how long it felt like it took the content to load. It is all about ensuring the content is quick to load and responsive to user interaction. Lighthouse is an open-source, automated tool for improving the quality of web pages, it has audits for performance, accessibility, progressive web apps, and more.
Accessibility refers to the experience of users who might be outside the narrow range of the “typical” user, who might access or interact with things differently than you expect. Specifically, it concerns users who are experiencing some type of impairment or disability.
Responsive is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)