Editor's Pick
Front End Interview Handbook - Front End interview preparation materials for busy engineers
Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas.
HTML
HTML popover Attribute
Modals have been an important part of websites for two decades. Unfortunately most developers don't know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute -- let's check it out.
Myth: "HTML was invented by Tim Berners-Lee"
The truth? He copied someone else's work.
While this article is true, it doesn't really explain itself well...SGML was invented at IBM before it became an ISO standard. It's purpose is right in the name, Standard ~Generalized~ Markup Language. HTML is an ~application~ of SGML. XML is another application of SGML. It's fair to say Tim invented the HTML application.
JavaScript
awesome-grid: A curated list of grid(table) libraries and resources that developers may find useful
A curated list of data grid/table libraries and resources that developers may find useful. This list focuses on JavaScript-based data grid libraries and not CSS-based grid systems for page layout. The list is ordered alphabetically by category.
CSS in React Server Components
You can’t make an omelette without cracking a few eggs, and when the core React team unveiled their vision for the future of React, some of my favourite libraries got scrambled. In this blog post, we’re going to explore the compatibility issues between React Server Components and CSS-in-JS libraries like styled-components. You’ll understand what the issue is, what the options are, and what’s on the horizon.
Wedges - An open-source collection of UI components for React
Wedges is a professionally designed design system for Figma and an ever-expanding, open-source React UI library that combines Radix UI primitives and Tailwind CSS. Its goal is to simplify the process of building beautiful, functional and accessible user interfaces.
With Wedges, you get a range of pre-built, customizable components that are easy to use and integrate into your React projects. It also comes with full TypeScript support, ensuring type safety and developer-friendly experience.
craft.js - a React framework for building powerful & feature-rich drag-n-drop page editors
Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task.
There're existing libraries that come with a fully working page editor out of the box with a user interface and editable components. However, if you wish to make customisations such as modifying the user interface and its behavior, it will most definitely involve modifying the library itself.
Craft.js solves this problem by modularising the building blocks of a page editor. It ships with a drag-n-drop system and handles the way user components should be rendered, updated and moved - among other things. With this, you'll be able to build your own page editor exactly how you want it to look and behave.
Comparing the Popover API and the <dialog> element
One of the most recent additions to web standards is the Popover API, which appears somewhat similar to the HTMLDialogElement API. In certain instances, the distinction between these two can be rather unclear, making it confusing for developers to choose the right one for a given task.
This article aims to address the key similarities and differences between the Popover and HTMLDialogElement APIs. We will briefly describe each API, cover some of their different use cases, implement the APIs to create some common utilities seen on the web, and discuss when to use each API.
Tom Select - vanilla JavaScript select control
Tom Select is a dynamic, framework agnostic, and lightweight (~16kb gzipped) <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on. Tom Select was forked from selectize.js with four main objectives: modernizing the code base, decoupling from jQuery, expanding functionality, and addressing issue backlogs.
The Supersonic Plugin For Scroll Based Animation
Once upon a time, I suddenly realized that I need to animate 1000 pictures of my cat Bartholomew with scrolling. Moreover, it had to work on mobiles as is, without any additional rules. And work fast without killing the browser. And be highly customizable to fit any needs.
Other solutions did not go well, so I decided to write my own (of course, I did).
Miscellaneous
Front End Interview Handbook - Front End interview preparation materials for busy engineers
Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas.
Questions for potential employers: A big collection of useful questions to ask potential employers.
This is a big collection of questions I've gathered over the years that have proven to be useful when interviewing, including why you might want to ask the question. Remember, in any interview you're trying to get to know the company and the people you might be working with as much as they're trying to get to know you. Maybe more.