A learning path to cover all important web development concepts to build a world-class modern website ultimately.
Preparing for interview is harder than working on daily basis in terms of number web development concepts you have to learn, to understand how things work, and to explain them fluently to others.
Mastering following webdev concepts is critical to become a senior web developer and opens up the opportunity to work at abstract level.
Web browser is the heart of web development, the main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window.
Today’s browsers are fully-functional software suites that can interpret not only HTML document, but may also be a PDF, image, or some other type of content hosted on web servers. Many browsers offer plug-ins which extend the capabilities of the software.
Nowadays, most browsers support the same set of features and rarely deviate from their common roadmap; the main difference between web browsers is a thing called browser engine (also known as a layout engine or rendering engine).
You might be used to working with one of the most popular browsers such as Chrome, Firefox, Edge or Safari, but that does not mean that there aren’t different browsers out there.
Web browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones. In 2019, an estimated 4.3 billion people used a browser. The most used browser is Google Chrome, with a 64% global market share on all devices, followed by Safari with 17%.
Knowing how browsers work under the hood is very useful not just for interview but also web performance optimizations.
Application programming interface (API) is a computing interface to a software component or a system, that defines how other components or systems can use it. Web APIs refer to 3 categories of APIs that you often deal with: browser APIs, third-party APIs, and first-party APIs.
Browser APIs built into the browser that sits on top of the JavaScript language and allows you to do a wide variety of things in your code:
Third-party APIs built into third-party platforms that allow you to use some of those platform’s functionality in your own web pages.
First-party APIs are those APIs developed internally, these APIs are often developed as part of a protocol or project development lifecycle, included as a means to support further integration of services or systems for other APIs or clients.
Web APIs are often assumed to refer to APIs of web services over HTTP using RESTful or GraphQL. But they are also used to refer to subset of software entities like components, modules, libraries, etc.
Web rendering is a process of generating HTML output which is ready to be rendered by web browser and viewable by user, this process can happen anywhere and anytime depending on your strategy.
Picking a rendering strategy is getting hard recently, it is not a binary decision between server-side rendering (SSR) and client-side rendering (CSR) anymore, many more hybrid solutions are emerging and really changing the landscape of web rendering.
Your chosen strategy can be pure or hybrid. This is a difficult decision to make and will put great impact on following dimensions:
There is no silver bullet solution to web rendering, keep learning and don’t afraid to pivot some strategies to see what works for you and what doesn’t.
Taking security seriously from the beginning is underrated by newbie web developers. This responsibility often belongs to DevOps developer in the team. If you’re the solo web developer running serious web apps then you MUST take the responsibility to protect your users’ data by applying best practices for following common web securities vulnerabilities.
It’s important to protect following data types: Name, Address, Date of Birth, Email, User Name, Password, Social Security Number, Credit Card or Debit Card Number, Medical Information, Financial Information, Account Information, Phone Numbers, Intellectual Property, etc.
Security is an ongoing, and ever-changing, practice that you must observe to ensure your project is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.
In order to build a secure application, from an pragmatic point of view, it is important to identify the attacks which the application must defend against, according to its business and technical context:
WebAssembly (Wasm) technology is trending, even still at early experimental stage, it creates so much excitement from community and opens a lot of opportunities to make web platform even greater than ever.
In a nutshell, WebAssembly is a low-level assembly-like near-native performance language that can be run in modern web browsers, designed as a portable target for compilation of high-level languages like C++ or Rust, and plays nicely with other technologies in the web platform.
Relative to Javascript, WebAssembly offers predictable performance. It is not inherently faster than Javascript, but it can be faster than JavaScript in the correct use cases such as computationally intensive tasks, like nested loops or handling large amounts of data. Therefore, WebAssembly is a compliment to JavaScript, and not a replacement.
It’s all about performance! JavaScript is a high-level programming language which makes it hard to achieve near-native performance like C/C++ which is important in cases of porting video games, video editing, 3D rendering to web apps.
WebAssembly will, over time, allow many languages to be compiled to the Web ultimately; developing web apps will be more powerful and productive when we can write in high-level non-JavaScript languages like Python, C++, Dart as long as they are compiled to WebAssembly.
Web storage consists of JavaScript APIs that allow you to store data on the client and then retrieve it when needed. This lets you persist data for long-term storage, save sites or documents for offline use, retain user-specific settings for your site, and more:
Cookies: earliest form of client-side storage commonly used on the web, being outdated, having a number of technical and user experience problems, and inability to store complex data.
Web Storage API: simple syntax for storing and retrieving smaller, data items consisting of a name and a corresponding value. All of your web storage data is contained within two object-like structures inside the browser — sessionStorage and localStorage.
IndexedDB API: a complete database system for storing complex data, can be used for things from complete sets of customer records to even complex data types like audio or video files.
Cache API: designed for storing HTTP responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection. Cache is usually used in combination with the Service Worker API, although it doesn’t have to be.
Performance plays a major role in user experience, retaining users, and improving conversions. Anything you can do to improve performance will be helpful to your users.
Part of good user experience is ensuring the content is quick to load and responsive to user interaction. Most of optimizations include performance APIs, testing and analysis tools, and performance bottleneck gotchas.
More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations.
The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent’s capability, size, and pixel density is possible.
JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience.
By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience.
Less important optimization focus for improved performance is including external CSS and fonts.
There are many different things a developer can do to improve performance, but how fast is fast enough? Avoid over early optimizations.
Web apps are client–server computer programs that the clients (including the user interface and client-side logic) runs in a web browser like email client, online retail sales, online banking, and online auctions.
Single-Page Application (SPA) is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.
At their heart, Progressive Web Apps are just web applications. Using progressive enhancement, new capabilities are enabled in modern browsers. Using service workers and a web app manifest, your web application becomes reliable and installable. If the new capabilities aren’t available, users still get the core experience.
This is the final part of the Cracking the Frontend Interview 6-part series which is a complete guide to the process of making yourself ready for the next awesome job! Thank you for reading and good luck on your interview.
Talent is not something we are born with. Talent is something which we strive for and develop. You have the talent for this job. My wishes are with you.
Reread this post multiple times to familiarize all keywords and concepts, keep digging deep on unfamiliar ones by searching Google or reading following excellent resources: