Mar 2020

Get Static | CSS-Tricks

If you are in charge of a web site that provides even slightly important information, or important services, it’s time to get static. I’m thinking here of sites for places like health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering, and I’m sure there are more that haven’t occurred to me. As much as you possibly can, get it down to static HTML and CSS and maybe a tiny bit of enhancing JS, and pare away every byte you can

#eleventy #jamstack

Met deze tips hou je thuiswerken langer dan een week uit - De Correspondent

Week één zit erop, en dat thuiswerken blijkt behoorlijk pittig, hè? Je collega houdt nét een ander werkschema aan dan jij – waardoor jullie uiteindelijk allebei…


Why Radio Buttons and Checkboxes Can't Co-Exist

Radio buttons and checkboxes have long been components that cause users confusion. These components are often used in the same context, but look completely different. Designers and developers know the difference, but that’s because they learned it through their work. What about users who were never taught the difference?

#accessibility #ux #forms

Corona in context: een gids die je helpt de pandemie te begrijpen - De Correspondent

In deze gids delen we de belangrijkste inzichten uit onze eigen journalistiek over de pandemie. Ook gidsen we je naar de belangrijkste journalistiek, academische publicaties en andere relevante bronnen die we elders tegenkomen.


Google Says Start With Fewer Pages For New Sites

Google's John Mueller said he would "recommend erring on the side of having fewer pages, especially when starting up a new site." He said that having too many pages makes it hard for Google to "find the unique value of each page."


Benedikt Lehnert – OMG I’m working remotely, now what?!

Benedikt Lehnert OMG I’m working remotely, now what?! Best practices and tips to help you stay sane, focused and boost your productivity while working from…


Why Svelte is our choice for a large web project in 2020

Svelte is a JavaScript framework for building user interfaces. Its compiler architecture enables amazing tradeoffs for UX and DX. Svelte might be worth your attention, especially if you pine for the web of yore and future.


7 tips for my fellow humans stuck working from home

Well, hello there, fellow human! How are you? Let me guess, working from home? Or as the cool kids say, ‘WFH.’ It’s lonely, I know. The great news is that you…


How to animate CSS and SVG's with AnimeJS | Developer Bacon

Installation Before we get into the animating we should install Animejs. npm install animejs yarn add animejs Now to import Animejs into your JavaScript file.…


James Warner

I'm a UI / UX Designer and Web / Game Developer. I enjoy creating awesome experiences ...


Feb 2020

CSS Tutorial: Create Diagonal Layouts Like It's 2020

TL/DR: Diagonal layouts are great. You can build them easily with CSS. Take a look at this CodePen to see how it works. Layouts with diagonal sections are quite…


A Complete Guide to Data Attributes | CSS-Tricks

Table of Contents Introduction Syntax Styling with data attributes Accessing data attributes in JavaScript Introduction HTML elements can have attributes on…



Design systems hub We've built, optimized and scaled design systems for our international clients. This hub shares our expertise and approaches, plus advice on…


How Smashing Magazine Manages Content: Migration From WordPress To JAMstack

About The Author Sarah Drasner is an award-winning Speaker, Head of Developer Experience at Netlify, Vue core team member, and Staff Writer at CSS-Tricks. Sarah…


How to redesign, step by step guide - Avoid pitfalls and deliver value fast.

Change is not an event; it’s a process Let’s clarify one thing from the start; this article is not a strick walkthrough. When designing a product today, it’s…


Slick Inbox

Alternatief voor Stoop (gebruik ik momenteel)

#mail #ios

Earth View from Google

Earth View is a collection of thousands of the most striking landscapes found in Google Earth.

#images #inspiration

WordPress To App

We convert your WordPress website into a native mobile app for Android and iOS.

#wordpress #ios

Website Header Design in 2020

According to Google, it takes only 50 ms to form an opinion about a website and some opinions develop within the incredible 17 ms.


UX design process: a simple (but complete) guide | Webflow Blog

The UX design process begins at understanding the objectives of a business and how best to serve a target audience. By comprehending the psychology of a user,…


Even with a design system, you still need a designer

But, as awesome as USWDS (The U.S. Web Design System) is, there are still many considerations on what makes a good design. Using a design system doesn’t guarantee a successful design or user experience, but it can be a helpful tool for solving a design problem.



Remove Image Background 100% Automatically and Free

#tool #images

Buttondown - The easiest way to run your newsletter.

Buttondown is a small, elegant tool for producing newsletters. The minimalist interface makes it easy for you to write great emails; the automation acts like the editorial assistant you wish you had, by checking for typos, broken links, or malformed images; the portable subscription widget makes it really easy to grow your audience from wherever.


Jan 2020

Simple Image Placeholders with SVG - Cloud Four

"So I made a tiny, dependency-free library called Simple SVG Placeholder. It generates data URIs for placeholder img elements."

#svg #placeholder

The Complete Beginner’s Guide to Design Systems - DesignXplorer

More companies are focusing on Design System, as it is a powerful way to help skyrocket the development of products and services. This time our topic is — Design System, and we are going to try and answer some common questions surrounding this subject.


Multi-line gradient links | Zell Liew

When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients.

#css #links #gradient

Why design systems fail and how to make them work in 2020

After shutting down our first design system late 2018 we built a new and improved design system from the ground up.


Your Lifestyle Has Already Been Designed

Well I’m in the working world again. I’ve found myself a well-paying gig in the engineering industry, and life finally feels like it’s returning to normal after…


Making Room for Variation – A List Apart

Making a brand feel unified, cohesive, and harmonious while also leavingroom for experimentation is a tough balancing act. It’s one of the mostchallenging…


See how climate change has impacted the world since your childhood - ABC News

Email Global warming is already changing the world before our eyes — let's see what has happened in your lifetime. When were you born? From top to bottom, these…


Roam Research – A note taking tool for networked thought.

As easy to use as a document. As powerful as a graph database. Roam helps you organize your research for the long haul.


Tiny Helpers

A collection of free single-purpose online tools for web developers..

#plugin #tool

Elastic UI Framework

The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics.


Visual Studio Code extensions to help your productivity - DEV Community 👩‍💻👨‍💻

I'm going to share some extensions I use to make my experience more productive and helpful.


Eleventy Walk Through

This guide is meant to provide some step by step instructions for using Eleventy, and provide additional reference information.


How I Made 30000€ In 3️⃣ Months By Quitting My Job 👨‍💻 - DEV Community 👩‍💻👨‍💻

What made me quit I was working for a company (name omitted on purpose) that was (and is) still running on really old technology. Perl, Vanilla PHP, jQuery and…


2x Grid – Carbon Design System

The 2x Grid is the geometric foundation of all the visual elements of IBM Design, from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making.


Choosing the right UI component for communication with your users

Why do we need this? Communicating with users is crucial. Messages can be delivered in many ways and by different mediums. Different stakeholders in the company…


Instagram Font Generator (𝘤𝘰𝘱𝘺 ⒶⓃⒹ 𝙥𝙖𝙨𝙩𝙚) — Meta Tags

T̨͈͗̌ͥḣ̖̻͛̓ỉ͔͖̜͌s̠҉͍͊ͅ M͉̅ͮ͒ͤẹ̿͋̒̕t̲̂̓ͩ̑ā̤̓̍͘ T̨͈͗̌ͥā̤̓̍͘ĝ̽̓̀͑s̠҉͍͊ͅ F̘͍͖ͫ͘o̯̱̊͊͢ṇ̤͛̒̍t̲̂̓ͩ̑ G̩̱ͩ̏͜ẹ̿͋̒̕ṇ̤͛̒̍ẹ̿͋̒̕r̴̨̦͕̝ā̤̓̍͘t̲̂̓ͩ̑o̯̱̊͊͢r̴̨̦͕̝ ỉ͔͖̜͌s̠҉͍͊ͅ ♡


Designing accessible color systems

Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens.


Chicago Design System

The Chicago Design System is the public visual identity of the City of Chicago. It is an inclusive, equitable, cost saving system for City communication and for public use to show civic pride.


Dekks | Next Generation Presentations

For creators, by creators 👈 The all-in-one presentation toolkit for creative troops and solo forces. Create, share and view ideas in a new and powerful way.


The ultimate guide for mobile developers, who want to design - DEV Community 👩‍💻👨‍💻

Well yes, we can learn anything we want. To help you get started, I will share some resources that helped me at the beginning of my journey: books, case studies, and tutorials.


Dec 2019

9 web design trends for 2020 | Webflow Blog

Design is about how it works. So with this year’s web design trends, we’re looking past the grids and gradients to focus on what really matters.


A Modern Typographic Scale ◆ 24 ways

A Modern Typographic Scale via Instapaper https://ift.tt/2rZ5jrq


UX Flowchart Cards — Wireframe Kits on UI8

Wireframe Kits via Instapaper https://ift.tt/2QbUDxQ

#ux #wireframes

Spotify Design - Reimagining Design Systems at Spotify

Reimagining Design Systems at Spotify via Instapaper https://ift.tt/2S8UIVK


What Will the Internet Look Like in 2030?

What Will the Internet Look Like in 2030? via Instapaper https://ift.tt/31ENqKA


Apr 2019

What’s a UX Strategy? — Anton Sten — UX-Lead

What’s a UX Strategy? - Anton Sten - UX-Lead via Instapaper http://bit.ly/2ITAlHi


The Place of UX - Signal v. Noise

The Place of UX via Instapaper http://bit.ly/2Zy8yC8


How to Delete Commit History in Github – TecAdmin

Delete Commit History in Git Repository


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

Native image lazy-loading for the web! via Instapaper http://bit.ly/2G6VbRN


Why Static?

Why Static? via Instapaper https://ift.tt/2Vd3ssD


Mar 2019

Simple & Boring | CSS-Tricks

Simple & Boring | CSS-Tricks via Instapaper https://ift.tt/2us932j


Scaling a Design Team and Culture – Designing Nubank – Medium

Scaling a Design Team and Culture – Designing Nubank – Medium via Instapaper https://ift.tt/2W4Yyh6


How to simplify your design

How to simplify your design – UX Planet via Instapaper https://ift.tt/2HzsL4I


Nov 2017

How the minmax() Function Works

One incredibly useful new feature introduced with the CSS Grid Layout Specification is the minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.

#cssgrid #minmax

A Complete Guide to Grid | CSS-Tricks

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).