Front-end development is exciting and fast-moving. With newer CSS properties, we can brush the dust off our old techniques and give them another look. For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave pseudo-elements behind in some scenarios, thanks to newer CSS properties.
Read more…
Being able to look past the apparent simplicity, break down a component into its constituent parts, ask key questions, and even consider future uses, are all skills that will serve any developer well when building websites In this article, we’ll walk through the process of taking a seemingly simple design for a text-and-media component and deciding how best to translate it into code, keeping in mind the needs of both users and content authors.
Read more…
There are plenty of interactive ways to learn new web development skills. We learn better by playing games. So we’ve collected interactive coding tools and games to help you learn CSS, JavaScript, SQL, React, Vim, regular expressions, Jamstack and pretty much everything in-between. Louis shares a comprehensive, categorized list of such tools covering a variety of different development technologies.
Read more…
Refactored codebase should result in similar or improved performance and improved codebase health. After all, if deploying the refactored codebase causes loading or performance issues, it will result in less traffic and revenue. Luckily, there are many optimization techniques we can apply to tackle potential file size and performance issues.
Read more…
In this article, we will code a Gantt chart as a reusable Web component. We will focus on the architecture of the component, rendering the calendar with CSS Grid and managing the state of the draggable tasks with JavaScript Proxy Objects.
Read more…
Embedding code examples with third-party scripts often leads to tracking or cookies. We always wanted to have a simple website with a good UX, so setting cookies for no reason wasn’t an option for us. Now, with Indiepen, we are proud to introduce a privacy-friendly alternative.
Read more…
After analyzing CSS and its weaknesses, and management giving a green light to the refactoring project, it’s time to get to work. A team needs to agree on the internal code standards and best practices, plan out the refactoring strategy, and outline individual tasks. We need to set up a visual regression testing suite, and a maintenance plan to enforce the new standards and best practices in the future.
Read more…
What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? It’s important to note that there are still significant differences between relative and absolute units. CSS relative units are sized according to other style definitions defined by parent elements or are affected by the size of a parent container. As for absolute units, we will dive in and see how they are affected by other things, such as the screen and the device’s operating system. In this article, Elad Shechter explains why CSS absolute units aren’t so absolute.
Read more…
In this three-part series, Adrian Bece is going to go through the CSS refactor process from the beginning to the end, starting with knowledge on how to approach it and some general pros and cons of refactoring, then moving onto the refactoring strategies themselves and ending with some general best practices on CSS file size and performance. CSS refactoring is not an easy task — it needs to be done in a way that doesn’t create problems. First we need to analyze the existing codebase, audit CSS codebase health, discover weaknesses, agree on the approach, and convince management to invest time and resources into the process.
Read more…
