magnASCII.io Simone Magnaschi
Senior Full Stack Web Dev
Bookmarks tagged with #webdev.
Show all

Poline

poline is lightweight, dependency free and fast JavaScript function written in TypeScript. It draws lines between anchors over polar coordinates to generate pleasing color palettes.
Saved on: 2025-06-19

Y2Z/monolith

⬛️ CLI tool and library for saving complete web pages as a single HTML file - Y2Z/monolith
Tags: #tools #webdev
Saved on: 2024-03-25

Correctly Configure (Pre) Connections – Harry Roberts – Web Performance Con

We’re probably familiar with preconnect, but are we getting it right?
Saved on: 2023-12-10

Pacchetto di CSS: 2023!

Il 2023 è stato un anno fantastico per CSS. Scopri quali contenuti sono arrivati quest'anno a Chrome e alla piattaforma web.
Tags: #css #webdev
Saved on: 2023-12-08

HTML DOM — Phuoc Nguyen

Tags: #webdev
Saved on: 2023-11-06

Accessible Palette: stop using HSL for color systems

Accessible Palette is an app for building color systems with consistent lightness and predictable contrast ratios across color levels.
Saved on: 2023-08-29

The ideal viewport doesn’t exist

Before you settle on basing design decisions on a handful of strict breakpoints, make sure you consider the vast fragmentation of screen sizes and browser viewports.
Tags: #webdev
Saved on: 2023-08-22

htmx ~ Locality of Behaviour (LoB)

Carson Gross explores the Locality of Behaviour (LoB) principle, which emphasizes making the behavior of code units obvious on inspection to enhance maintainability. He discusses the tradeoffs between LoB and other software design principles like DRY and SoC, offering insights on balancing clarity, abstraction, and maintainability in modern development.
Saved on: 2023-08-16

A Blog Post With Every HTML Element

Patrick Weaver’s Website
Tags: #webdev
Saved on: 2023-08-13

Patterns

Saved on: 2023-06-29

Build your own web framework - Vercel

Build your own web framework that deploys to edge and serverless infrastructure.
Saved on: 2022-07-30

SPA Alternative

In this essay, Carson Gross explores alternatives to Single Page Applications (SPAs), advocating for an 'HTML-Centric' development approach. He highlights the drawbacks of SPA complexity and the benefits of embracing HTML as the core medium for web development, offering a simpler, more efficient way to build applications without sacrificing interactivity. Carson discusses how tools like htmx enhance HTML's capabilities and encourages developers to reconsider the dominant SPA paradigm with technical bravery.
Saved on: 2022-07-20

SPAs: theory versus practice | Read the Tea Leaves

I’ve been thinking a lot recently about Single-Page Apps (SPAs) and Multi-Page Apps (MPAs). I’ve been thinking about how MPAs have improved over the years, and where SPAs still have an …
Saved on: 2022-06-28

Making the world’s fastest website, and other mistakes - DEV Community

Crazed developer attempts real ecommerce without front-end JavaScript to prove that y’all playin’
Saved on: 2022-06-09

Magical SVG Techniques — Smashing Magazine

SVGs are scalable, flexible, and, most importantly, lightweight. And, well, they have even more to offer than you might think. Smart SVG techniques, from generative SVG grids to SVG paths with masks, grainy SVG gradients, cut-out effects and fractional SVG stars. Let’s look at some magical SVG techniques that you can use right away.
Saved on: 2022-05-27

IndigoStack

Indigo — the native macOS app which will revolutionise the way you configure and run local web servers on your Mac.
Saved on: 2022-05-24

Setting Up CloudFront to Host Your Web App | CSS-Tricks - CSS-Tricks

Let's walk through how to CloudFront can be used to host an entire web app and have it forward non-cacheable requests to our web server.
Tags: #webdev
Saved on: 2022-04-29

Super — Build websites with Notion

Create a custom website in less than a minute with instant page loads, SEO optimization, and customized theming. All your content is kept and managed in Notion so you can focus on creating while Super handles the rest.
Tags: #tools #webdev
Saved on: 2022-04-05

Shoelace: A forward-thinking library of web components.

Hand-crafted custom elements for any occasion.
Saved on: 2022-04-04

Web Designer & Developer Toolkit by Addy Codes – Curated tools & resources

Discover hundreds of web design & development resources in this carefully curated collection.
Tags: #tools #webdev
Saved on: 2022-03-21

Google Tag Manager, la nouvelle arme anti adblock

Un blog sur le capitalisme de surveillance, avec un zoom sur le tracking publicitaire
Tags: #webdev
Saved on: 2022-02-21

Munter/subfont: Command line tool to optimize your webfont loading. Aggress

Command line tool to optimize your webfont loading. Aggressive subsetting based on your font use, self-hosting of Google fonts and preloading - Munter/subfont
Tags: #tools #webdev
Saved on: 2022-02-18

A guide to designing accessible, WCAG-conformant focus indicators

— The personal website of Sara Soueidan, inclusive Web UI engineer
Saved on: 2021-11-07

Best practices for using third-party embeds

This document discusses performance best practices that you can use when loading third-party embeds, efficient loading techniques and the Layout Shift Terminator tool that helps reduce layout shifts for popular embeds.
Tags: #webdev
Saved on: 2021-10-18

Increment: Frontend

Saved on: 2021-10-05

A Complete Guide To Accessibility Tooling — Smashing Magazine

In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered HTML Emails and SVG Generators. This time we look into different kinds of tools to help you streamline your accessibility testing process. Don’t miss the next one.
Saved on: 2021-06-17

Delba de Oliveira

Saved on: 2021-06-14

wickedblocks

A collection of hundreds of fully responsive Talwind blocks & components. Ready to copy-paste into your Tailwind project.
Saved on: 2021-05-25

Links on Performance | CSS-Tricks

Making GitHub’s new homepage fast and performant — Tobias Ahlin describes how the scrolling effects are done more performantly thanks to IntersectionObserver
Saved on: 2021-05-25

Lightning-Fast Web Performance: an online lecture series from Scott Jehl

An online lecture course by Scott Jehl.
Saved on: 2021-05-20

DOM Events

A visualizer to help you learn how the DOM Event system works through exploration
Tags: #webdev
Saved on: 2021-05-19

HTML Tips

In this article I’ll share some tips and advice about HTML.
Tags: #webdev
Saved on: 2021-05-06

Tiptap

A suite of open source content editing and real-time collaboration tools for developers building apps like Notion or Google Docs.
Saved on: 2021-04-23

permission.site

Tags: #webdev
Saved on: 2021-03-26

HTTPWTF

HTTP is fundamental to modern development, from frontend to backend to mobile. But like any widespread mature standard, it's got some funky skeletons in the...
Tags: #webdev
Saved on: 2021-03-04

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
Tags: #webdev
Saved on: 2021-03-03

The great SameSite confusion

In this post, I dissect a common misconception about the SameSite cookie attribute and I explore its potential impact on Web security. TL;DR ¶ The SameSite cookie attribute is not well understood. Conflating site and origin is a common but harmful mistake. The concept of site is more difficult to apprehend than meets the eye. Some requests are cross-origin but same-site. SameSite only has effects on cross-site requests. SameSite paints a target on your subdomains’ back. Misguided practitioners may unduly eschew SameSite=Strict. The advent of SameSite ¶ You undoubtedly have heard of the SameSite cookie attribute. It made headlines when, in February 2020, Chrome started rolling out changes to SameSite’s default behaviour. Intended as a defence-in-depth mechanism against cross-site attacks, such as cross-site request forgery (CSRF) and cross-site script inclusion (XSSI), SameSite had been lying dormant at the heart of implementing browsers since its inception in 2016.
Saved on: 2021-02-05

7 bite-sized tips for reliable web automation and scraping selectors

If you’re like most developers, you’ve probably encountered Cascading Style Sheet (CSS) selectors for styling webpages. For example, the following CSS rule combines a paragraph element selector p…
Tags: #webdev
Saved on: 2021-02-02

Sign-in form best practices

Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
Tags: #webdev
Saved on: 2021-01-25

React Authentication: How to Store JWT in a Cookie | by Ryan Chenkie | Medi

If that’s the case, there’s a decent chance that your API is secured somehow. Maybe you’re making authentication and authorization happen with JSON Web Tokens. If so, there’s also a decent chance…
Saved on: 2021-01-22

How We Improved SmashingMag Performance — Smashing Magazine

In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board. Hopefully, this little case-study will be useful to you, and perhaps there are one or two techniques that you might be able to apply to your project right away. In the end, performance is all about a sum of all the fine little details, that, when added up, make or break your customer’s experience.
Saved on: 2021-01-22

Maximally optimizing image loading for the web in 2021

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the...
Saved on: 2021-01-20

You want overflow: auto, not overflow: scroll | Kilian Valkhof

Every now and then a web developer using a Mac discovers that their beautiful design is littered with scroll bars on other platforms. Either because someone points it out to them or because they attach a mouse to their mac which makes scroll bars appear. Often, MacOS hiding scroll bars by default is blamed for
Tags: #css #webdev
Saved on: 2021-01-07

How to Favicon in 2021: Six files that fit most needs — Martian Chronicles,

Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.
Tags: #webdev
Saved on: 2020-12-23

Polypane, the perfect browser for web developers and designers

The browser for ambitious web developers. Build better websites in less time with a stand-alone browser that makes your site more responsive, more accessible and faster.
Tags: #tools #webdev
Saved on: 2020-11-12

Stupid solutions: Live server push without JS

So in my post Is this evil? I covered a way of tracking users with CSS. While thinking about those weird ways of using the web I also started thinking about pushing live data to clients without JS. Or at least maintaining a connection. So WebSockets requires JS. WebRTC requires JS. Even HLS (video streaming), which would otherwise be super cool, with captions for accessibility. But no. Or rather, maybe on Apple platforms. Eh. Not good enough.
Saved on: 2020-09-29

Workers Durable Objects Beta: A New Approach to Stateful Serverless

Durable Objects provide a truly serverless approach to storage and state: consistent, low-latency, distributed, yet effortless to maintain and scale. They also enable coordination and real-time collaboration between clients.
Saved on: 2020-09-29

The Ultimate Guide to Web Performance 🚀

There's so many ways to speed up your site. Don't you wish every web performance tip was in one place...
Saved on: 2020-09-25

How I Redesigned My Laravel Blog (Again) - Christoph Rumpel

Every few years, I feel the pressure to redesign my blog. Design trends change fast, and so does my taste. Once I don't like my site anymore, I cannot let go. I need to work on a new redesign. This article is about the latest redesign of my Laravel blog.
Saved on: 2020-09-17

Tailwind CSS Resources you wish you had.

Background story This week I decided to take a look at Tailwind CSS and create a simple e-...
Saved on: 2020-09-16

State of Self-Serve Website Building in 2020

The landscape has changed for self-serve business website design and hosting. Our review of three most practical DIY approaches, suitable for a simple static website up-to a full Content Management System (CMS).
Tags: #webdev
Saved on: 2020-09-11

A high-performance blog template for 11ty

I'm excited to announce the beta-release of eleventy-high-performance-blog–a high-performance blog template for 11ty based on this very...
Saved on: 2020-09-07

Blade UI Kit

A set of renderless components to utilise in your Laravel Blade views. Built for the TALL stack. Completely open-source.
Saved on: 2020-09-03

Legacy to Laravel: How to Modernize an Aging PHP Application | Tighten

Many of our clients have legacy PHP apps and want to move to Laravel. We’re often asked "should we rewrite or refactor?" While full rewrites are appealing, they’re also risky. Here’s our approach to gradually refactoring legacy code that lets you start using Laravel right away.
Saved on: 2020-09-02

Caching is hard, draw me a picture | APIs You Won't Hate - A community that

Another guest post from our friend Darrel Miller. This is my attempt to make the HTTPbis caching rules more accessible and hopefully shine a light on how powerful HTTP caching can be. I’ve been working on a Pluralsight course that talks about how to use the Microsoft HttpClient library. One of the areas I cover is how to take advantage of HTTP caching. In the process I have been doing quite a bit of reading of the HTTPbis spec document on caching. It isn’t the easiest of specifications to re
Tags: #webdev
Saved on: 2020-09-01

How to Use AVIF: The New Next-Gen Image Compression Format — Lightspeed

How to Use AVIF: The New Next-Gen Image Compression Format August 5, 2020 Dan Klammer Performance Designer Dan Klammer (@danklammer) on Twitter November 2, 2021 Update: Firefox 93 now supports the...
Tags: #webdev
Saved on: 2020-08-24

Learn Playwright & Checkly - Browser Automation

Learn more about Playwright automation & monitoring with Checkly. Explore how to automate your web with a reliable, programmable monitoring workflow.
Tags: #webdev
Saved on: 2020-08-19

Chrome Music Lab

Music is for everyone. Play with simple experiments that let anyone, of any age, explore how music works.
Tags: #music #webdev
Saved on: 2020-08-05

Pagination and Scroll Restoration with Turbolinks · Gray Matter

a blog by gray kemmey on (mostly programming) matter
Tags: #webdev
Saved on: 2020-07-23

Things I wish I’d known about CSS | Dave Smyth

Dave Smyth’s personal site.
Tags: #css #webdev
Saved on: 2020-07-17

How OAuth 2.0 Works

OAuth provides third party applications limited access to user resources without compromising the user's data. Find out exactly how in this blog.
Saved on: 2020-07-16

Nodesign.dev | Design less develop more.

The ultimate collections of illustrations, art, pictures, fonts, images, icons, css frameworks, favicon generators, color palettes, backgound generators, ui inspirations and many more nodesign tools.
Tags: #webdev
Saved on: 2020-06-08

Throttling and Debouncing. Avoiding unnecessary API calls. - DEV Community

The problem There are sometimes that we need to perform actions on certain events controll...
Saved on: 2020-04-08

Pavithra Kodmad su Twitter: "Hey twitter friends, can you link me to articl

Hey twitter friends, can you link me to articles in the frontend and web dev space that are timeless and changed your perspective in some way. It maybe a gist, a readme, a tutorial or even a video. Looking to read some good content. RT for reach? 🙌
Tags: #webdev
Saved on: 2020-01-23

Developers: Get Ready for New SameSite=None; Secure Cookie Settings

UPDATE (10/28/2019): We've revised the 2nd and 3rd bullet points in the section "How to Prepare; Known Complexities" below. In May, Chrome ...
Saved on: 2019-10-24

🤯 HEAD - A simple guide to HTML elements

A simple guide to HTML elements
Tags: #webdev
Saved on: 2019-10-01

Menus with "Dynamic Hit Areas" | CSS-Tricks

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should
Tags: #css #ux #webdev
Saved on: 2019-09-24

Account Suspended

Tags: #webdev
Saved on: 2019-09-02

Why is modern web development so complicated? A long yet hasty explanation:

Modern frontend web development is a polarizing experience: many love it, others despise it. I am a huge fan of modern web development, though I would describe it as “magical” — a…
Tags: #webdev
Saved on: 2019-08-08

The CSS background-image property as an anti-pattern

The CSS background-image property allowed us to do some amazing things, but in most cases, it's time to leave it behind.
Saved on: 2019-07-28

Going serverless with Hugo and Netlify - Freek Van der Herten's blog on PHP

Our team releases a lot of open source packages. All of our packages are well documented. For the smaller packages, we use a simple readme on GitHub. The bigger packages, like medialibrary and event projector get documented on our documentation site. We recently moved our site from a Digital Ocean…
Saved on: 2019-07-18

The Evolution of Spotify Home Architecture

Emily Samuels and Anil Muppalla discuss the evolution of Spotify's architecture that serves recommendations (playlist, albums, etc) on the Home Tab.
Saved on: 2019-06-19

How to Section Your HTML | CSS-Tricks

The sectioning elements in HTML5 are , , , and . is also kind of a sectioning element since
Saved on: 2019-06-19

Extract critical CSS | web.dev

Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.
Saved on: 2019-06-05

Building a stateless API proxy - Thea Flowers

How to make an access-limiting proxy for any API
Saved on: 2019-05-30

The Sass Ampersand | CSS-Tricks

The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a
Tags: #css #webdev
Saved on: 2019-05-28

HTTP headers for the responsible developer - Twilio

Guide to using HTTP headers for a better web. Learn about HTTPS, HSTS, CSP, Cacheable, immutable resources, serving WebP images, Feature-Policy and more.
Tags: #https #webdev
Saved on: 2019-05-08

Uppy 1.0: Your best friend in file uploading — Uppy

Today, after three years of development, we are launching version 1.0 of Uppy,
Saved on: 2019-04-29

ds160 - Overview

ds160 has 2 repositories available. Follow their code on GitHub.
Saved on: 2019-04-22

TwirPHP: A modern RPC framework for PHP

In the last couple years RPC started to become popular again as a communication mechanism for web-based APIs. It’s not a new concept at all, but it changed a lot over the years: the technology evolved, new IDLs and frameworks (like protobuf and gRPC) appeared. TwirPHP tries to bring this new tech to PHP by porting Twirp, Twitch’s “simple RPC framework built on protobuf”.
Saved on: 2019-04-20

How to properly set up ESLint with Prettier for Vue or Nuxt in VSCode

Writing tech tutorials is hard because certain configurations might stop working after several months. As I’m also working on other things I don’t always have time to check if this is still working…
Tags: #webdev
Saved on: 2019-04-15

NoCoffee – Vision Simulator for Chrome

Vision problems are more pervasive than most of us realize. Upwards of 285 million people worldwide are visually impaired. Many more have low or moderate visual difficulties. The number in the U.S.…
Saved on: 2019-04-12

Accessibility Insights

Solve accessibility issues before they reach your customers.
Saved on: 2019-04-12

dequelabs/axe-core: Accessibility engine for automated Web UI testing

Accessibility engine for automated Web UI testing
Saved on: 2019-04-12

AddyOsmani.com - Native image lazy-loading for the web!

In this post, we’ll look at the new loading attribute which brings native and
Tags: #webdev
Saved on: 2019-04-08

Rich text / HTML editors and frameworks

Rich text / HTML editors and frameworks. GitHub Gist: instantly share code, notes, and snippets.
Tags: #tools #webdev
Saved on: 2019-04-03

delight-im/PHP-I18N: Internationalization and localization for PHP

Internationalization and localization for PHP
Tags: #php #webdev
Saved on: 2019-03-29
❤️
</>
2025