Issue 56 July 5th 2024

Editor's Pick

Deep Dive Into Modern Web Development

Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript in one go! This course will introduce you to modern JavaScript-based web development. The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js.

The course is totally free of charge. You can get a certificate and even the University of Helsinki ECTS credits for free. The course is worth 5-14 credits, and the content is the same as in the Full stack course held at the Department of Computer Science at the University of Helsinki in Spring 2023.

CSS

Notes on implementing dark mode

The internet is awash with tutorials on how to implement dark mode, so I won’t cover the basics, but while those tutorials will get you to a rudimentary dark mode implementation, I found that every one I read lacked the refinements necessary to get to a great dark mode implementation, with many of the fine details easy to get wrong. Here I’ll cover the big ones that are commonly missing.

Clipping in CSS and SVG — The clip-path Property and <clipPath> Element

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started.

CSS Surprise Manga Lines

When a manga or anime character is surprised, lines focus on and highlight their face. Is it possible to create a similar effect with HTML and CSS?

Fluid Breakout Layout with CSS Grid

Using CSS Grid, we can define a universal fluid layout that handles multiple 'breakout' elements.

CSS mesh gradients

A collection of 208 vanilla CSS mesh gradients free for you to use in any of your projects. Browse our generated meshes or create your own custom mesh with our App.

prefers-reduced-motion: Sometimes less movement is more

The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often desire animations to be kept to a minimum.

JavaScript

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Learn how the browser event loop, task queue, microtask queue, and Web APIs work together to enable non-blocking, asynchronous JavaScript.

Ecma International approves ECMAScript 2024: What’s new?

On 26 June 2024, the 127th Ecma General Assembly approved the ECMAScript 2024 language specification, which means that it’s officially a standard now. This blog post explains what’s new.

DGM.js | An infinite canvas with smart shapes

A multi-purpose infinite canvas library supporting smart shapes, real-time collaboration, hand-drawn styles, image exports, and more.

Signals Unleashed: The Full Guide

This video is your one-stop guide to Signals in Angular (as of 17.3).

Miscellaneous

Pipes

Pipes is a spiritual successor to Yahoo! Pipes, but if you did not know that site, you can think of Pipes as a visual programing editor specialized on feeds, or a visual shell, or simply as a glorified feed configurator.

Pipes gives you blocks that can fetch and create feeds, and manipulate them in various ways. Think filtering, extracting, merging and sorting. All you need to do is to connect those blocks with each other. Data just flows through such a pipe, it flows from block to block. At the end Pipes gives you a new feed, which you can give to other programs that support open web standards - such a program could be your feed reader.

New Web Development. Or, why Copilots and chatbots are particularly bad for modern web dev

The paradigm shift that web development is entering hinges on the fact that while React was a key enabler of the Single-Page-App and Component era of the web, in practice it normally tends to result in extremely poor products. Built-in browser APIs are now much more capable than they were when React was first invented.

React has been great for commodifying developers. By forcing all web development into the same shape and size, you make recruitment easier and can more easily force the structure of your development teams to conform to your organisation’s whims. This was great during the period when investors considered developer headcounts and escalating team sizes to be a positive signal for their investment, but it’s no longer useful now that the same crowd arbitrarily considers those same measures to be a negative signal.

Things You Should Never Do As A Software Engineer

Here are some of the things that software developers should avoid when coding to improve their work performance and mental health.

Chaos Engineering in Frontend Development: A Comprehensive Guide to Enhancing Application Resilience

In the dynamic world of web development, ensuring the resilience and reliability of frontend applications has become increasingly critical. As user expectations soar and application complexity grows, developers must adopt robust strategies to maintain high-quality, fault-tolerant systems. Enter Chaos Engineering – a discipline traditionally associated with backend systems and infrastructure, now making significant inroads into frontend development.

This comprehensive guide explores how applying Chaos Engineering principles to frontend applications can dramatically enhance their resilience, improve user experience, and help teams build more robust web applications.