CategoryJavaScript

October 22, 2021 — It’s impressive how quickly a real-time multi-user application can be built with Colyseus — once you figure out how to properly describe the schema. This article highlights the process, technical decisions and lessons learned behind building the real-time game Autowuzzler. Learn how to share game state across multiple clients in real-time with Colyseus, do physics calculations with Matter.js, store data in Supabase.io and build the front-end with SvelteKit. Read more…

October 21, 2021 — The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why there’s no reason not to use it today to make your sites more accessible. Read more…

October 1, 2021 — Many websites have some sort of search feature because it helps users navigate through their content easily. Implementing it the right way can be tricky and might not give a good user experience. In this tutorial, Miracle Onyenma will be integrating Algolia, a popular and powerful search service for the best experience on our Nuxt site. Read more…

September 17, 2021 — Gatsby Functions provide front-end developers a way to write and use server-side code without the hassle of maintaining a server. If making money from open-source is of interest to you and your site isn’t built using Gatsby, Paul Scanlon brings you an approach that may well be the answer you were looking for. Read more…

September 13, 2021 — There are way too many options in Web Animations API to pick them up that easily. There’s no middle ground between simple transitions and complex animations. You’re either fine with what CSS Transitions and Animations provide or you suddenly need all the power you can get. Learning how timing works and how to control the playback of several animations at once makes for a solid foundation on which to base your projects on. Read more…

September 9, 2021 — When paired with ISR and Next.js’ API routes, SWR can be used to create a responsive user experience. In this article, Sam Poder explains what SWR is, where to use it (and where not), and how to build a website by using Incremental Static Regeneration. This approach ensures that users still have a good experience, that the site is fast and that the data is kept up to date. Read more…

September 2, 2021 — 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…

September 1, 2021 — What exactly is a displacement filter? In this article, Dirk Weber will be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, Dirk has divided the article into three parts in which you’ll be exploring how the feDisplacementMap works, methods to create fancy displacement maps in SVG, and methods to animate the filter and create dramatic visual effects. Read more…

August 31, 2021 — By combining some React APIs, we can accurately manage “simple” states. With Next.js though, we can quickly find situations where we need to accommodate many other requirements. This article is intended to be used as a primer for managing complex states in a Next.js app. These strategies should fit the vast majority of apps around with little to no adjustments. Let’s have a look at some patterns to accomplish all that. Read more…

August 18, 2021 — 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…