Collective #656
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_WOTW.jpg)
Inspirational Website of the Week: Studio Sentempo
Harmonious, unique typography and stunning effects combined with thoughtful details. Our pick this week.
Get inspired![Collective 643 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C643_Divi.jpg)
Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_cassie.jpg)
Swipey image grids
Cassie evans shows how to make use of the features of SVG for building interesting UIs.
Read it![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_snippets.jpg)
Vanilla JavaScript Code Snippets
A guide to vanilla JavaScript code snippets — with resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_Kaboom.jpg)
Kaboom!!!
Kaboom.js (beta) is a JavaScript library that helps you make games fast and fun! Read more about it in this article.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_pagespeed.jpg)
Fixing a slow site iteratively
Learn how to improve site performance step-by-step in this article by Kealan Parr.
Read it![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_imagegallery.jpg)
Building a Simple Image Gallery with Eleventy
Learn how to use the Image plugin with Eleventy to build a simple gallery. By Raymond Camden.
Read it![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_browser.jpg)
Web Browser Engineering
In this book Pavel Panchekha and Chris Harrelson explain how to build a basic but complete web browser, from networking to JavaScript, in a thousand lines of Python.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_dicewars.jpg)
Minimum Viable Dice Wars
Learn how to code a minimum viable version of Dice Wars.
Read it![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_toggle.jpg)
An accessible toggle
Kitty Giraudel shares a HTML + CSS only implementation of an accessible toggle that you can copy in your own projects and tweak at your own convenience.
Read it![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_snowflake.jpg)
Paper Snowflakes: Combining Clipping and Masking in CSS
Michelle Barker explains how she built the paper snowflakes demo.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_software.jpg)
Prescriptive software is better than descriptive software
Kilian Valkhof explains what the advantages of prescriptive software are.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_inspect.jpg)
Inspect Element As A Way To Feed Your Curiosity
A really great idea: inspect elements in the DevTools to learn new things and make yourself a better front-end developer.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_mario.jpg)
Mario Carrillo
The cool temporary site by Mario Carrillo.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_TS.jpg)
Integration Tests with Jest, Supertest, Knex, and Objection in TypeScript
Learn how to set up and tear down a database for integration tests using Jest and Supertest in a TypeScript API. By Tania Rascia.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_terminal.jpg)
Lipgloss
Style definitions for nice terminal layouts. Built with TUIs in mind.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_coolify.jpg)
Coolify: Heroku & Netlify alternative
An open-source, hassle-free, self-hostable Heroku and Netlify alternative.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_sorttable.jpg)
Sortable Table Columns
Adrian Roselli dives into accessible sortable table columns that are usable.
Read it![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_calc.jpg)
Classic Windows Calculator
A cool calculator made by Jon Kantner.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_mergearray.jpg)
3 Ways to Merge Arrays in JavaScript
Read how to merge arrays in JavaScript using the spread operator, array.concat() and array.push().
Read it![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_ReactD3.jpg)
React + D3.js
Amelia Wattenberger on using D3.js inside of a React.js application.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/Screen-Shot-2021-04-08-at-17.06.52.jpg)
SvelteKit is in public beta
After five months and hundreds of commits, you’re finally invited to try out the SvelteKit beta.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_Deletionday.jpg)
Deletion Day
Although it’s from April 4th, there’s lots of valuable information here: Deletion Day challenges the prevailing notion that “more is more”. In a culture that strives for permanence, we celebrate ephemerality, growth, and change.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_colors.jpg)
Poulette, the color palette
Proof of concept for a color mixer interface.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_globe.jpg)
How to Create a Globe and Add Cities using Three.js
A coding session where you’ll learn how to create a globe and add cities to it with Three.js.
Check it out![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/04/C656_layout.jpg)
Preview to Full Content Page Transition
An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view.
Check it out