Diederik

🍔

Bookmarks

May 2020

📰 The Other Crisis - Jon Leighton

The Other Crisis 24 May 2020 Right now the world is grappling with COVID-19, but over the past year or so I’ve spent quite a bit of time trying to make sense of…

https://jonleighton.name/articles/2020/the-other-crisis/

1️⃣1️⃣🐭 minimal-eleventy-starter/README.md at master · EvaldasBurlingis/minimal-eleventy-starter · GitHub

This starter boilerplate was built to allow you to start a new eleventy project in seconds. It doesn't have any prebuilt styles, so you don't need to delete a bunch of things to make it work for you. This starter is a bare minimum to start and can be easily modified.

The design system platform for collaborative teams.

InVision Design System Manager connects design and code so teams can work smarter, faster, and more in sync.

📱 Nat Eliason is Living in The Matrix - Superorganizers

Nat reveals the Roam setup that he uses to run his life

🎬 My 2019 Movie Diary, Finally

It’s the weekend so I’m sneaking in an incredibly tardy housekeeping post here: a full wrap-up of my movie watching from 2019. Like my monthly roundups, I’ve…

Building a new Dark UI

Dark modes have become a very popular feature for apps and operating systems in recent years, and many users prefer the inverted colors because they're easier on the eyes. Our new dark UI looks gorgeous and has a few extra tricks up its sleeve too - here's how we made it.

Wat is energiebalans?

Eten en drinken geeft je lichaam energie, bijvoorbeeld om je warm te houden, om eten te verteren en om te bewegen. Vergelijk je lichaam maar met een oplaadbare batterij. De batterij laadt op door voeding. Hij loopt weer leeg door de energie uit je eten te gebruiken.

📰 De lessen die we kunnen leren van het boek de Tao van Poeh

De Amerikaanse schrijver Benjamin Hoff schreef het boek de Tao van Poeh begin jaren tachtig. Het werd een ware bestseller die in meerdere talen vertaald is en ook als je het boek vandaag leest, is het nog steeds actueel. Het taoïsme is een Chinese filosofie die ons leert hoe we in harmonie met het universum kunnen leven en ons uitleg geeft over het bestaan. Hoff laat zien dat Tao-wijzen niet altijd uit het Verre Oosten hoeven te komen. Ook Winnie de Poeh is een ware Tao-meester, en zo belandde de Tao van Poeh als bijbel op menig nachtkastje.

https://www.rituals.com/nl-nl/mag-spirituality-mindfulness-tao-of-pooh.html

🎨 Happy Hues

Curated colors in context.

Introducing Sass Modules

Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features.

🎨 Color Theme Switcher

Last year, the design gods decided that dark modes were the new hotness. "Light colors are for suckers", they laughed, drinking matcha tea on their fixie bikes or whatever.

✨ Top 40 Favorite Designer Portfolio Sites in 2020

This is a curated collection of my all-time favorite designer portfolio sites ever featured on Typewolf

🎨 Color Ninja

Color Ninja is here to make your life easier by helping you discover and create beautiful color combinations. Rather than generate superficial color palettes, Color Ninja helps you make your own with all the primary color schemes: triad, tetrad, analogous, complementary, split complementary, brightness, shades, tones, and tints.

✨ Placeholder BAMBOO BAG

Made from renewable bamboo fiber which is completely biodegradable

📱 Timemator 2 - Automatic Time-Tracking

Timemator automatically captures everything you do on your Mac.

✨ 🌘 Dark Mode Design

Handpicked website inspiration

📸 Burst from Shopify

Free Stock Photos: High-Res Images for Websites & Commercial Use

🗺 over-view.com

A new perspective of how we change the Earth

💡 The Technium: 68 Bits of Unsolicited Advice

It’s my birthday. I’m 68. I feel like pulling up a rocking chair and dispensing advice to the young ‘uns. Here are 68 pithy bits of unsolicited advice which I offer as my birthday present to all of you.

🦠 "Wiskundige en expert ‘complexe systemen’ maakt het #coronavirus inzichtelijk met zijn berekeningen

Wiskundige en expert ‘complexe systemen’ @BSlagter maakt het #coronavirus inzichtelijk met zijn berekeningen en legt uit wat we echt moeten doen als we niet een tweede piek besmettingen willen. “Op slot was de enige optie, want wat maakt ons anders dan Italië?”

Apr 2020

🎧 ✉️ What's Spinning

A weekly music discovery newsletter, keeping you up to date on your favorite Spotify playlists.

🦠 Stay at Home, Be Healthy & Productive

A curated collection of tips, interviews, and resources to guide you in your remote work through these turbulent times

Design Principles

An open source collection of Design Principles and methods.

🔩 Linear

The issue tracking tool you'll enjoy using

🦠 Apple and Google can save us from this lockdown. Will they?

Proper contact tracing might be impossible without Apple and Google’s support.

🎬 Cinetree - Filmhuis voor thuis

Films die langer bijblijven dan dat ze duren.

🎬 Picl — Nu in het filmtheater. Nu bij jou thuis.

Zie films uit het filmtheater direct bij jou thuis Mis nooit meer een film en bekijk het aanbod van jouw filmtheater nu ook gewoon thuis.

Mar 2020

1️⃣1️⃣🐭 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

📰 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…

https://decorrespondent.nl/11050/met-deze-tips-hou-je-thuiswerken-langer-dan-een-week-uit/311532650-ebbee0c7

👀 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?

🦠 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…

https://benediktlehnert.github.io/?ref=heydesigner

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…

https://thenextweb.com/growth-quarters/2020/03/17/tips-for-working-from-home/

📰 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.…

https://developerbacon.ca/articles/how-to-animate-css-and-svg-s-with-anime-js/

✨ 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…

https://9elements.com/blog/pure-css-diagonal-layouts/

📰 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…

https://css-tricks.com/a-complete-guide-to-data-attributes/

📰 Plus

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…

https://rangle.io/design-systems/

📰 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…

https://www.smashingmagazine.com/2020/01/migration-from-wordpress-to-jamstack/

📰 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…

https://uxdesign.cc/how-to-redesign-step-by-step-guide-869379604734

📱 ✉️ Slick Inbox

Alternatief voor Stoop (gebruik ik momenteel)

✨ 🖼 Earth View from Google

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

📱 WordPress To App

We convert your WordPress website into a native mobile app for Android and 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,…

https://webflow.com/blog/ux-design-process

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.bg

Remove Image Background 100% Automatically and Free

✉️ 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."

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.

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…

http://www.raptitude.com/2010/07/your-lifestyle-has-already-been-designed/

📰 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…

https://alistapart.com/article/making-room-for-variation/

📰 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…

https://www.abc.net.au/news/2019-12-06/how-climate-change-has-impacted-your-life/11766018

🔩 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..

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.

1️⃣1️⃣🐭 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…

https://dev.to/_marcba/how-i-made-30000-in-3-months-by-quitting-my-job-487k

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…

https://medium.com/@adamshriki/choosing-the-right-ui-component-for-communication-with-your-users-523499c39490

🔠 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

https://24ways.org/2019/a-modern-typographic-scale/

UX Flowchart Cards — Wireframe Kits on UI8

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

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

https://gizmodo.com/what-will-the-internet-look-like-in-2030-1837984973

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

https://www.antonsten.com/uxstrategy/

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

https://addyosmani.com/blog/lazy-loading/

📰 Why Static?

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

https://why-static.netlify.com/

Mar 2019

📰 Simple & Boring | CSS-Tricks

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

https://css-tricks.com/simple-boring/

📰 Scaling a Design Team and Culture – Designing Nubank – Medium

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

https://medium.com/nubank-design/scaling-a-design-team-and-culture-bde035f50e5c

📰 How to simplify your design

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

https://uxplanet.org/how-to-simplify-your-design-69d97fde11b9?ref=heydesigner

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.

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).