Links
Interesting articles, tools, and resources I've found around the web.
Xcode 26.3 unlocks the power of agentic coding
Xcode 26.3 introduces support for agentic coding, a new way in Xcode for developers to build apps, powered by coding agents from Anthropic and OpenAI.
- ai
- agents
- apple
Data Fetching Patterns in React Server Components
Learn about the most common data fetching patterns in React Server Components
- react
- server components
- rsc
- data fetching
Itsyhome - Control HomeKit from your menu bar
A free macOS menu bar app for controlling your HomeKit smart home devices. Cameras, lights, thermostats, locks, fans, blinds, and more — always one click away.
- home automation
- macOS
- apps
Introducing: React Best Practices - Vercel
We've encapsulated 10+ years of React and Next.js optimization knowledge into react-best-practices, a structured repository optimized for AI agents and LLMs.
- react
- nextjs
- ai
- agents
Introducing Moltworker: a self-hosted personal AI agent, minus the minis
Moltworker is a middleware Worker and adapted scripts that allows running OpenClaw (formerly Moltbot and Clawdbot) on Cloudflare
- ai
The Super Mario Galaxy Movie Direct 1.25.2026
Nintendo Direct featuring an exclusive look at the Super Mario Galaxy Movie.
- nintendo
- video games
- movies
The Incredible Overcomplexity of the Shadcn Radio Button
Radio buttons are built into web browsers. Why are we using a UI library that wraps another UI library that rebuilds radio buttons from scratch? Why does rendering a radio button require multiple dependencies and several kilobytes of JavaScript? How did we make a built-in browser control so complicated?
- shadcn
- design system
Browsers are cooked. MCP UI with Kent C. Dodds
Scott and Wes sit down with Kent C. Dodds to break down MCP, context engineering, and what it really takes to build effective AI-powered tools. They dig into practical examples, UI patterns, performance tradeoffs, and whether the future of the web lives in chat or the browser.
- video
- ai
- mcp
- ui
Apple Creator Studio
With an Apple Creator Studio subscription, get intelligent tools in Final Cut Pro, Logic Pro, and Pixelmator Pro, plus premium productivity content.
- apple
I used Claude to vibe-code my wildly overcomplicated smart home
Home On.
- ai
- home automation
Open-Source Shadcn UI Blocks, Templates and Components
Explore the Shadcn UI ecosystem with blocks, templates, and components you can preview and copy. Browse production-ready layouts, sections, and UI assets built for Shadcn UI.
- component-library
- design-system
Moltbot — Personal AI Assistant
Moltbot — The AI that actually does things. Your personal assistant on any platform.
- tech
- ai
The Case for Versioning Independent UI Components
Today, most components are versioned as part of an entire project (e.g. component-library). This conflicts with the idea of composing modular UI applications.
- versioning
- ui
- components
Front-of-the-front-end and back-of-the-front-end web development
The Great Divide is real, and I’m pleased that the terms “front-of-the-front-end” and “back-of-the-front-end” have gained traction ever since I quipped about them on the Shop Talk Show. A few of my clients have actually moved away from a culture of “we only hire full-stack developers” and have instead adopted the labels “front-of-the-front-end” and “back-of-the-front-end” to help them better organize their teams and refine their hiring practices.
- development
- frontend
- backend
- javascript
- css
- html
The iconic watches that inspired Apple Watch faces
The Apple Watch is more than merely a smartwatch. In my review of the Apple Watch Series 6, I described how it sits at the confluence of design, technology, lifestyle, and watchmaking.
- apple
- design
- watch
A Deep Dive Into CSS Grid minmax()
There are a lot of tutorials and guides out there that teach CSS grid in general, and I wrote about it multiple times. However, I noticed that there is a misunderstanding of the minmax() function as most of the articles are generic or don’t provide enough explanation and real-world use-cases.
- css
- development
Creating an Apple App Clip with React Native
- development
- react
- react-native
- apple
a11yresources - A growing list of accessibility tools and resources
Articles Accessibility Testing is like Making Coffee In accessibility testing, and when making coffee, we are shooting for the smoothest experience.
- accessibility
- development
The Widening Responsibility for Front-End Developers
This is an extended version of my essay “When front-end means full-stack” which was published in the wonderful Increment magazine put out by Stripe. It’s also something of an evolution of a couple other of my essays, “The Great Divide” and “Ooops, I guess we’re full-stack developers now.”
- development
- frontend
Full bleed layout using simple CSS
There are many different ways to achieve the same layout in CSS and HTML. Some are now frowned upon, like tables or floats, and others tend to overlap somewhat, but have a clear specific purpose, like Flexbox and Grid.
- css
- development
Beautiful CSS 3D Transform Perspective Examples
CSS 3D transforms create depth and visually interesting elements on your page using perspective. Copy over the examples and make them your own!
- css
- 3d
- development
Madefor: Wix’s Custom Typeface
Madefor combines wide geometric proportions, clean curves, and flaring grotesk terminals as best seen in the flagship Display cut. The curvy, playful ‘s’ particularly shows off those features, while the pipe-bend short terminals of ‘f’, ‘j’, ‘t’ and ‘y,’ and the subtle asymmetry in the bowls of ‘b’, ‘d’, ‘g’, ‘p’, and ‘q’ showcase Madefor’s fresh and distinct appearance.
- typography
- design
Cloudflare and the Wayback Machine, joining forces for a more reliable Web
Cloudflare now populating and using the Internet Archive’s Wayback Machine in its content distribution network application Cloudflare and the Internet Archive are now working together to help make the web more reliable.
- history
- technology
How to use CSS masking
When you clip an element using the clip-path property the clipped area becomes invisible.
- css
Cyberpunk 2077 Assets — Logos and Vectors
It’s finally here! I’ve added half again as many logos as well as updated many existing logos as new reference material has surfaced. I’ve put in quite a few hours, scouring for typefaces that may or may not exist, giving up and making things from scratch, and of course, finding that perfect reference to make something perfect.
- design
- gaming
Announcing TypeScript 4.0
Daniel Today we are thrilled to announce the availability of TypeScript 4.0!
- development
- typescript
Proportional Resizing with CSS Variables
For this snippet, I want to share with you something I do while resizing elements in the browser DevTools. Let’s suppose that you’re implementing a design in HTML & CSS, and you want to experiment with an icon’s width and height.
- css
- development
React Spectrum Libraries
GitHub React Spectrum
- react
- development
Microsoft Analyzed Data on Its Newly Remote Workforce
Photography by Coolcaesar
- work
Going our Separate Waze
Established in 2006, Waze is one of the most popular navigation apps in the world, with 130 million users in over 180 countries and is, in part, fueled by its community of users who report, in real time, traffic and road conditions (along with the very helpful police-up-ahead reports so that you can slow your speeding, which you shouldn’t be doing).
The Comeback of Fun in Visual Design
It's finally here. A swing of the pendulum. A reemergence of fun in visual design.
- apple
- design
Fucking SwiftUI
FAQ Frequently asked questions about SwiftUI. Yes.
- apple
- development
- xcode
- swift
Apple Is Pulling Away From the Competition
For the second year in a row, Apple held a developers conference that should frighten its competitors. Relying on a nearly maniacal obsession with the user experience, Apple is removing oxygen from every market that it plays in.
- apple
No - Safari 14 Does Not Block Google Analytics
Let me start by proclaiming with clarity and sincerity: No, Safari 14 (or any other version of Safari) will not block Google Analytics from loading and running on a website. In the midst of Apple's yearly Worldwide Developers Conference, the company showcased some of the privacy improvements to the upcoming version of the Safari web browser (version 14).
- apple
- privacy
- safari
Applause for Apple’s IDFA Decision
Some of the biggest news to come out of Apple’s Worldwide Developers Conference (WWDC) yesterday is about consumer privacy. Apple has announced that it is putting control of personal data tracking in the hands of users.
- apple
- privacy
CSS background-repeat: round
The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years.
- css
Inclusively Hiding & Styling Checkboxes and Radio Buttons
Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don’t. So we’ve been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image — SVG, of course, being the more flexible, powerful, and accessible replacement.
- css
- svg
- accessibility
Meet Face ID and Touch ID for the web - WWDC 2020 - Videos - Apple Developer
Face ID and Touch ID provide a frictionless experience when logging in — and now you can use them on your websites in Safari with the Web Authentication API. Discover how to add this convenient and secure login alternative to your website.
- apple
- development
- wwdc-2020
- safari
Maintaining a secure Apple environment: A discussion with NASA
In a government security discussion last year, Josh Harvey and Allen Golbig of NASA joined a room full of fellow IT admins to share their knowledge around securing and managing Apple devices in a government agency.
- apple
- nasa
Grid for layout, Flexbox for components
My brother is a fresh computer engineering graduate and he is currently finishing his internship in front-end development. He learned about both CSS grid and flexbox, but I noticed a pattern that I see a lot on the web.
- css
- development
Shape Divider App
We created this free tool to make it easier for designers and developers to export a beautiful SVG shape divider for their latest project. We hope you enjoy this tool.
- svg
- design
- tools
SimCity developer’s forgotten oil refinery simulator is now playable online
Screenshot: SimRefinery SimRefinery, an all-but-forgotten oil refinery simulator from the studio behind SimCity, has been rediscovered and uploaded to the web as a playable game, ArsTechnica reports.
- gaming
- retro
Ikea releases instructions on how to build homemade forts for children
—
- fun
- kids
Let's Take a Deep Dive Into the CSS Contain Property
Compared to the past, modern browsers have become really efficient at rendering the tangled web of HTML, CSS, and JavaScript code a typical webpage provides. It takes a mere milliseconds to render the code we give it into something people can use.
- css
- development
Stencil Icons
In the last ten years, developers have been on a quest to find the best way to implement icons in a digital product. We've wandered through low fidelity gifs, elaborately Photoshopped png sprites, icon fonts (remember those?), SVG sprites, and finally inline SVGs.
- development
- iconography
Everything I Learned About min(), max(), clamp() In CSS
CSS Comparison Functions (min(), max(), clamp()) become supported in Firefox on 8 April 2020, which means that they are now supported in all major browsers. Those CSS functions will provide us with ways to have dynamic layouts and more flexible design components.
- development
- css
Rebuilding our tech stack for a new Facebook.com
Facebook.com launched in 2004 as a simple, server-rendered PHP website. Over time, we’ve added layer upon layer of new technology to deliver more interactive features.
- development
Static Hoisting
Since I published my 2019 in Review, detailing the industry trend towards static hosting and the rise of Jamstack CDNs like Vercel, a question has persistently come up: how is this different from a server and a traditional CDN on top?
- development
- jamstack
GitHub Codespaces
Is Codespaces available to everyone? Codespaces will be available to a small group of GitHub users while in limited beta.
- development
New media queries you need to know
Media queries are some of the best features cascading style sheets have to offer. They let us alter the styles applied to our documents based on the device viewing them, and the context they’re viewed in.
- css
- development
SVG, Favicons, and All the Fun Things We Can Do With Them
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs.
- development
- favicon
- icons
The title ‘Front-End Developer’ is obsolete.
That title is from the opening tweet of a. I wouldn’t go that far, myself.
- development
- frontend
98.css
A design system for building faithful recreations of old UIs. Intro
- funny
- design
- css
CSS Variables for React Devs
This is a controversial opinion, but I rather like CSS-in-JS. But!
- react
- css
Manage HTML DOM with vanilla JavaScript
74 — Resize the width of a text box to fit its content automaticallyintermediate Hit the Subscribe button for the latest news on my tools. No spam.
- development
- html
- javascript
Creating a Pencil Effect in SVG
Dragons Abound produces maps in SVG, which is a vector graphics format. Vector graphics have a lot of features (such as lossless zoom) that are nice for maps. And vector graphics are good for producing crisp, well-defined lines like an ink stroke:
- svg
- illustration
Margin considered harmful
We should ban margin from our components. Hear me out. Margin breaks component encapsulation.
- development
- design
- css
Get Static
Published 4 days ago 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.
- development
Emojis as Favicons
Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons.
- development
- emoji
- fun
Through a design system, darkly
This is a piece of writing that was posted on . The early discussion around design systems often focused on them as a solution to a problem of inconsistency: that due to a lack of documentation, standards, and governance, a product’s interfaces were often built and designed in inconsistent, confusing ways.
- development
- design
Accessible SVGs: Inclusiveness Beyond Patterns
About The Author Carie Fisher is a digital accessibility developer and trainer who is passionate about inclusive front-end code and promoting diversity in tech. More about Carie …
- development
npm is joining GitHub
I’m excited to announce that GitHub has signed an agreement to acquire npm. npm is a critical part of the JavaScript world.
- development
JavaScript Libraries Are Almost Never Updated Once Installed
Cloudflare helps run CDNJS, a very popular way of including JavaScript and other frontend resources on web pages. With the CDNJS team’s permission we collect anonymized and aggregated data from CDNJS requests which we use to understand how people build on the Internet.
- development
- javascript
Two Steps Forward, One Step Back
3/6/2020 If you've ever seen code that looks like this, I'm sorry:
- development
- css
- javascript
Coronavirus awareness icons
Together with kind contributors, Iconfinder is giving away more than 200 free vector icons related to hygiene and awareness about the virus spread. The icons can be used for hand-washing instructions, hygiene recommendations, and other initiatives fighting the virus spread.
- design
- icons
When 255 × 0 does not Equal Zero
March 3, 2020 First, a caveat: I am not an expert in color management and monitor display profiles. I also only understand the surface-level differences between the default color space of sRGB on the web and other newer models.
- css
- development
Currying in CSS?
There were lots of interesting discoveries found whilst developing Utopia. This one came when declaring CSS custom properties.
- css
- development
Stop using isLoading booleans
- development
- reactjs
Faux Code Generator
- design
What Does A Foldable Web Actually Mean?
About The Author Frederick O’Brien is a freelance journalist who conforms to most British stereotypes. His interests include American literature, graphic design, sustainable … More about Frederick …
- development
- devices
Smithsonian Releases 2.8 Million Images Into Public Domain
- history
Booklets.io – Bite Sized Learning
- learning
Redux Toolkit
Simple Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more. Opinionated
- reactjs
- redux
- development
- tools
Weaving a Line Through Text in CSS
Earlier this year, I came across this demo by Florin Pop, which makes a line go either over or under the letters of a single line heading. I thought this was a cool idea, but there were a few little things about the implementation I felt I could simplify and improve at the same time.
- css
- development
Open source parallel processing for Gatsby
・5 min read To help the greater Gatsby ecosystem shorten the time it takes from commit to deploy, today I've just submitted a freshly baked Pull Request as my first larger contribution to the Gatsby open source project.
- gatsbyjs
- development
While You Weren't Looking, CSS Gradients Got Better
One thing that caught my eye on the list of features for Lea Verou's conic-gradient() polyfill was the last item: Supports double position syntax (two positions for the same color stop, as a shortcut for two consecutive color stops with the same color)
- development
- css
The Intelligence Coup of The Century
Warning: This graphic requires JavaScript. Please enable JavaScript for the best experience.
- encryption
- technology
- history
State of Remote Work 2020
Top insights and data from one of the largest remote work reports. When some people think of the workplace of the future, they envision futuristic-style holograms having a meeting or robots cooking lunch for everyone in the office.
- work-life
What Bloomberg’s $11 million Super Bowl ad would cost you on your budget
Warning: This graphic requires JavaScript. Please enable JavaScript for the best experience.
- money
Fox redesigns its NFL graphics for the point-your-phone-at-the-TV era
Block & TackleBlock & Tackle is John Teti’s column about pro football Super Bowl LIV: A graphical review
- design
- tv
Memoizing React components
Alright what is Memoization first? In computing, memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.
- development
- react
Micro-Frontend Composition Patterns
Photo by Andrew Buchanan on Unsplash
- development
Animating CSS Width and Height Without the Squish Effect
Being able to animate the CSS width and height properties would be super useful. Unfortunately at the moment it’s a sure-fire way to get your browser to scream in agony. In this 5 minute tutorial we’ll explore using the transform property to simulate animating the width of an element.
- css
- development
Introducing Yarn 2!
・15 min read Hi everyone! After exactly 365 days of very intensive development, I'm extremely happy to unveil the first stable release of Yarn 2.
- development
React-spring visualizer
I am a big fan of react-spring, a spring-physics based animation library. It has quickly become my go-to library for UI animation in React projects. However, as a newbie to spring-based animations, I've had a hard time visualizing which effect the settings would have.
- react
- animation
- development
- tool
Guide to Internal Communication, the Basecamp Way
The how, where, why, and when we communicate. Long form asynchronous? Real-time chat?
- communication
- development
- work-life
Gradient Magic - Fantastic and Unique CSS Gradients
A Free Gallery of Fantastic and Unique CSS Gradients.
- css
- design
Using easing for more than just CSS transitions
We can define easing curves for the transitions and animations on our websites to give them a more natural and subtle feel. But it’s not just animations that benefit from easing curves. Any time there is a transition between two states an easing curve will make that feel more natural and less harsh.
- css
- development
Move Fast & Don’t Break Things
An annotated transcript of my 2019 conference talk. Throughout the last year I presented an evolving talk about web performance called Move Fast & Don’t Break Things at several conferences, including Performance Now() Amsterdam, An Event Apart Seattle, Smashing Conf Toronto, An Event Apart Chicago, and Smashing Conf NYC.
- development
Isocity
IsoCity An isometric city builder in JavaScript
- javascript
How to undo (almost) anything with Git
One of the most useful features of any version control system is the ability to “undo” your mistakes. In Git, “undo” can mean many slightly different things. When you make a new commit, Git stores a snapshot of your repository at that specific moment in time; later, you can use Git to go back to an earlier version of your project.
- development
- git
Smart home security: Apple, others, working on open standard
While Apple has so far touted HomeKit as the best way to ensure security and privacy of smart home devices, the company has now agreed to work with other tech giants on an open standard for smart home security.
- apple
- automation
- smart-home
A love letter to spreadsheets
But hear me out—spreadsheets are magical, beautiful tools for everyone, including creatives. At Dropbox, we’re designing enlightened ways of working, so in service of investigating what exactly that means, I’d like to share my thoughts on one of my favorite ways to work as a program manager.
- design
Dynamic, Date-Based Color with JavaScript, HSL, and CSS Variables
This is the third post in a three-part series about Tinnitus Tracker, my new live music diary. Sometime during the development of Tinnitus Tracker, it occurred to me that color would be a good way to give its many entries—which span nearly three decades—a sense of time and place.
- color
- css
- design
- javascript
Happy Hues - Curated colors in context.
Red is a very emotionally & visually intense color that can actually have a physical effect on people by raising their metabolism, respiration, heart rate, as well as making them hungry. That combined by with the fact that red is very attention grabbing, you see red used in the branding of pretty much all fast food chains.
- design
- color
7 Uses for CSS Custom Properties
Custom properties (also known as CSS variables) allow us to store property values for re-use in our stylesheets. If you’re relatively new to them, you might wonder when you might use them over and above preprocessor variables (if indeed you use a preprocessor).
- css
- development
Why JavaScript Tooling Sucks
JavaScript Tooling Sucks because it is stacks on stacks of brittle abstraction I'll break the writing style of this column so far by relating a recent incident. I can do this because I don't have an editor tut-tutting at me.
- development
- javascript
Optional chaining helps to avoid "undefined is not a function" exceptions
This post is part of my Today I learned series in which I share all my learnings regarding web development. I was reading the MDN docs for optional chaining and came across a fact I didn't know about it.
- development
- javascript
Why CSS HSL Colors are Better!
Introduction One of the most fundamental concepts in CSS is colors. It’s a basic concept everywhere, but in this article, we’ll be focusing on its representation when targeting browsers.
- css
The Thermodynamics Behind the Mac Pro, the Hypercar of Computers
Kelsey McClellan Spend a few tens of thousands on optional upgrades, and the new Mac Pro becomes a list of superlative performance specs.
- apple
- design
Testing Custom React Hooks with Jest
Hooks in React are a new, popular, and extensible way to organize side-effects and statefulness in React components. By composing the base hooks provided by React, developers can build their own custom hooks for use by others.
- development
- react
- testing
How I created 488 "live images
I've recently been going down a rabbit hole of making improvements to my CanIUse embed. To give a bit of a background, it is an interactive embed I created to easily embed data from caniuse.com in my blog posts and anywhere else.
- development
- automation
React Christmas
Bekk is getting in the Christmas spirit with 24 days of articles.
- react
Twelve Days of Front End Testing
Amy Kapernick Anyone who’s spoken to me at some point in November may get the impression that I’m a bit of a grinch. But don’t get me wrong, I love Christmas, I love decorating my tree, singing carols, and doing Christmas cooking - in December.
- development
- frontend
Toolbox Pro Review: A Must-Have Companion Utility for Shortcuts Power Users
Toolbox Pro is a new kind of "headless" app – a utility whose sole purpose is to complement and extend Apple’s Shortcuts app with over 50 new actions, providing a native implementation of functionalities that Apple hasn’t brought to Shortcuts yet.
- apps
- automation
- ios
Making instagram.com faster: Code size and execution optimizations (Part 4)
In recent years instagram.com has seen a lot of changes — we’ve launched stories, filters, creation tools, notifications, and direct messaging as well as a myriad of other features and enhancements. However, as the product grew, a side effect was that our web performance began to slow. Over the last year we made a conscious effort to improve this. This ongoing effort has thus far resulted in almost 50% cumulative improvement to our feed page load time.
- development
React is Fiction
You don't know it but you are an author. You write stories every day. You build narratives, characters and plots -- but you aren’t writing a novel, you’re writing components. I came to engineering from the world of creative writing and what surprised me the most is how similar code is to fiction. React itself follows tenants of creative writing and when you lean into those rules, you create solid component architecture. Inn this talk you’ll learn how to write React like its fiction and what you can gain by doing so.
- development
A Business Case for Dropping Internet Explorer
The distance between Internet Explorer (IE) 11 and every other major browser is an increasingly gaping chasm. Adding support for a technologically obsolete browser adds an inordinate amount of time and frustration to development.
- development
- business
Building a Scrapbook Layout with CSS Grid
My son was recently tasked with the responsibility of looking after his pre-school class teddy bear for the week, which comes with the obligation to take said teddy bear out on adventures and add your memories to a scrapbook.
- css
- development
Beautiful Drone-Lit Landscapes by Reuben Wu
I’ve featured Reuben Wu’s work here before so when I saw via Colossal that he’s got some new stuff going on, I immediately went to check it out. In his Aeroglyphs, Lux Noctis, and Field of Infinity projects, Wu achieves a minimalist sci-fi lighting effect by using drones to light desolately beautiful natural landscapes.
- photography
Top-level await · V8
Published · tagged with ECMAScript Top-level await enables developers to use the await keyword outside of async functions. It acts like a big async function causing other modules who import them to wait before they start evaluating their body.
- javascript
- development
Introducing Sass Modules | CSS-Tricks
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.
- development
- css
Adaptive Photo Layout with Flexbox | CSS-Tricks
Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere.
- photography
- design
- css
Zomato’s new Sushi Design System
Say hello to Sushi — Zomato’s all-new design system that we’ve built from the ground up.
- design
Visual Regression Testing in Design Systems
We spend a lot of time internally—and externally, with our clients—talking about the value of having fast and frequent feedback loops during our development process. Typically, our projects use continuous integration tools coupled with code quality and code testing suites.
- design
- testing
iPhone 11 Pro Preview: The Camera Hardware Changes
Last year, before the iPhone XS hit the store shelves, we took a look at the changes in camera hardware on the iPhone XS compared to the iPhone X.
- apple
- iphone
- photography
An efficient way to structure React Native projects | Cheesecake Labs
Let’s discuss a structure to start new projects or when you need to scale large projects. We will use React Native as a basis for this architecture, but the concepts can be leveraged in projects using other frameworks.
- react-native
- atomic-design
The Ultimate Guide to handling JWTs on frontend clients (GraphQL)
JWTs (JSON Web Token, pronounced 'jot') are becoming a popular way of handling auth. This post aims to demystify what a JWT is, discuss its pros/cons and cover best practices in implementing JWT on the client-side, keeping security in mind.
- development
- authentication
- security
Caniuse and MDN compatibility data collaboration – Mozilla Hacks - the Web developer blog
Web developers spend a good amount of time making web compatibility decisions. Deciding whether or not to use a web platform feature often depends on its availability in web browsers. A brief history of compatibility data
- development
- browsers
- resources
Why is React doing this?
I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach.
- react
- vue
- svelte
- development
Handling API request race conditions in React
Many blog articles talk about loading api/async data in a React apps, with componentDidMount, useEffect, Redux, Apollo… Yet, all those articles are generally optimistic, and never mention something important to consider: race conditions could happen, and your UI may end up in an inconsistant state.
- react
- development
- api
All the New ES2019 Tips and Tricks | CSS-Tricks
The ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially available in node, Chrome, Firefox, and Safari you can also use Babel to compile these features to a different version of JavaScript if you need to support an older browser.
- javascript
- development
Specimens for Design Systems - @lekoarts/gatsby-theme-specimens
Leverage the wide variety of powerful React components of @lekoarts/gatsby-theme-specimens to build your design system. Display your colors, typography or any other design tokens with ease and focus on the design system itself, not on how to showcase it.
- gatsbyjs
Top Static Site Generators for 2019
World of static sites has grown beyond HTML, CSS and occasional JS and much of it is owed to static site generators. Even if you are not entirely sold to the JAMstack idea, there is no doubt static sites are making a comeback, big time!
- development
- jamstack
- static-site-generator
Turning Weather into Music with Dark Sky and Spotify for Tycho
Yesterday, Tycho and I released Forecast, an app which uses your local weather forecast to generate a unique Spotify and Apple Music playlist.
- animation
- music
- design
- development
The untold story of America’s brilliant national parks branding
Today, the national parks are represented in our visual culture primarily through photographs posted on social media. But long before people posted selfies in Yellowstone, designers were depicting the glories of the nature reserves through maps and brochures that aimed to woo travelers and convince them to visit the American outdoors.
- design
- branding
- books
Introducing the New React DevTools – React Blog
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! What's changed? A lot has changed in version 4!
- react
- development
Introducing Storybook Design System
Storybook is the most popular component explorer on the planet.
- design
- react
- development
Ooops, I guess we're full-stack developers now.
I’ve spent my whole career self-identifying as a front-end developer and trying to help others become better at it.
- development
- talks
Paaatterns! for Free
When you need a strong visual style, but the deadline is close, try using our patterns – interesting hand-crafted shapes and well-chosen colors will help when there are out of ideas. Want more resources?
- design
Build your design system with these 8 real-world lessons
Hearing all the hype about design systems can give you the impression that you just create a design system and *poof* everything comes together. Maybe you write a blog post about it and then you never have to think about design systems again.
- design
Introducing Duotone
Duo-tone or duo-not. There is no try.
- icons
- design
Ugly Gerry
Gerrymandering is ugly. A font created by your congressional districts.
- typography
Tokyo subway’s humble duct-tape typographer
Some of Shuetsu Sato's hand-made signage at Nippori Station (image: Wikimedia / Mayuno)
- typography
Chris Coyier: Thinking like a Front-end Developer
Let’s take a peek at what front-end development has become these days. Starting from what the role is, where we sit, and the expectations of us. Then we’ll get into the problems we face, how to approach them, and the tools we have at our disposal. We’ll look at how Gutenberg might fit into our lives as front-end developers.
- developer
- video
- front-end
Cinemaps: An Atlas of 35 Great Movies
From Quirk Books: Acclaimed artist Andrew DeGraff has created beautiful hand-painted maps of all your favorite films, from King Kong and North by Northwest to The Princess Bride, Fargo, Pulp Fiction, even The Breakfast Club—with the routes of major characters charted in meticulous cartographic detail.
- movies
- posters
- painting
- design
Opening Day at Disneyland: Photos From 1955
During the week of July 17, 1955, Walt Disney’s new theme park, named “Disneyland,” opened to the public in Anaheim, California. The 17th, a Sunday, was intended to be an “international press preview,” limited to selected invitees who could ride the attractions, witness the parades, and take part in the televised dedication of the park.
- disney
- history
- photography
Lovely Panoramic Paintings of US National Parks
Heinrich C. Berann’s panoramic paintings of US National Parks aren’t just art and aren’t just maps but sit somewhere delightfully in the middle.
- painting
Manmade Patterns and Uncanny Shadows Photographed From Above by JP and Mike Andrews
U.K.-based brothers JP and Mike Andrews began taking aerial photographs of the Earth after a year-long trip experiencing the incredible landscapes found in the Australian Outback. Using a drone, the pair have continued to capture natural and manmade scenes across the world, stumbling upon unique patterns that can only be discerned from above.
- photography
Really Good Emails
The web’s best, and most attractive, curated collection of over 4206 emails, showing off both design and code. Check out ecommerce, fashion, retention, or brands like Pinterest, Apple, Postmates, and Invision.
- development
- design
The 2019 Audubon Photography Awards: Winners
Birds make fascinating subjects, as the winners and honorable mentions of this year's contest, our 10th, make clear. They're at once beautiful and resilient, complex and comical.
- photography
How using component-based design helps us build faster
Infrastructure To understand the impact of a component-based design and how it enables us to develop faster on the Twitter web codebase, we'll need to take a step back. Not too long ago when you opened up Twitter it was a lot more square, from borders to buttons to avatars.
- design
- development
Notre-Dame came far closer to collapsing than people knew. This is how it was saved.
The employee monitoring the smoke alarm panel at Notre-Dame cathedral was just three days on the job when the red warning light flashed on the evening of April 15: "Feu." Fire. It was 6:18 on a Monday, the week before Easter. The Rev. Jean-Pierre Caveau was celebrating Mass before hundreds of worshipers and visitors, and the employee radioed a church guard who was standing just a few feet from the altar.
- history
Frontend Design, React, and a Bridge over the Great Divide
Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products' user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development.
- development
- design
Extending Atomic Design
Atomic design is now over 6 years old (which is nuts!). I'm thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens.
- design
- development
Ikea releases free 'Soffa Sans' font made of couches
Ikea has released a free font called Soffa Sans, inspired by all the memes born from its online “Design your own sofa” planner. The tool allows for customers to design the layouts and configurations of Ikea’s couches, from the Vimle sectionals to the Vallentuna modular sofa series.
- typography
Why Did I Have Difficulty Learning React?
Just over six months into a job doing React development, I've been trying to figure out why it has taken me so long to feel comfortable with it. (Comfortable feels a bit too ambitious of a word. Maybe competent?
- development
- react
Revisiting the iconography of Apple Maps
A few years ago we published a post examining the point of interest (POI) icons within Apple Maps titled More Than You Ever Wanted to Know About Apple's Spotlight Location Icons.
- apple
- design
5 ES2019 features you can use today - LogRocket Blog
ECMAScript 2015, also known as ES6, was a major release that took six years to finalize. Since then, Technical Committee 39 (TC39), the body in charge of developing the ECMAScript standard, has been releasing a new edition of the standard every year.
- javascript
- development
Announcing styled-components v5: Beast Mode 💪🔥
Announcing styled-components v5: Beast Mode 💪🔥 50% faster server-side rendering, 20% faster client-side rendering, 19% smaller bundle size, RTL support and no breaking changes! 😍💯🎉💅
- react
Initial Thoughts on iPadOS: A New Path Forward
When I published my Beyond the Tablet story a few weeks ago, I was optimistic we'd get a handful of iPad-related features and optimizations at WWDC. I did not, however, foresee an entire OS designed specifically around iPad.
- apple
- ios
- ipados
The problem with web components
Web components are becoming increasingly popular within the web community. They offer a way to standardise and encapsulate JavaScript-enhanced components without a framework. However, web components have a number of drawbacks.
- development
The perils of functional CSS
Blog Functional CSS is a contentious topic, and one that regularly generates heated comment thread debate. In such situations, it can be tricky to tease out the hyperbole from the measured opinion.
- css
- development
National Park Typeface
A typeface designed to mimic the National Park Service signs that are carved using a router bit.
- typography
Apple’s new typeface is available for use right now
It’s a pretty exciting week this one. Hovis have sent the bread-hungry boy up that hill on his bike again, Donald Trump’s chowing down on halibut with the Queen and Friday afternoon sees the 2019 FIFA Women’s World Cup kicking off at Paris’ Parc des Princes.
- typography
- apple
SF Symbols
SF Symbols provides a set of over 1000 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes.
- apple
Reducing motion with the picture element
I was just talking with Dave about the accessibility of moving images on the web, and he said: hm… I wonder if you could use picture + prefers-reduced-motion? He then sends the following code:
- accessibility
- development
Best practices for building a large scale react application
Back to all posts This article describes the steps to building a large scale React application. While making a Single Page App with React, it is very easy for your code-base to become unorganized.
- react
Uibot — Infinite UI designs
What if we could replace the process of designing UIs with, well, bots? What if you could have an infinite amount of UI designs to choose from — would that lead to new directions that you wouldn't otherwise explore?
- design
Code as Documentation: New Strategies with CSS Grid
I work for Supercool, a fast-moving design agency that makes custom built sites for arts clients, powered by the off-the-shelf system, Craft CMS; it's high-spec graphic design with relatively demanding typography and art direction.
- css
- development
Life at Litmus: How Remote Work Makes It Easier to Balance Family and Career
“Why do you want to work remote?” That was the question I heard over and over when interviewing at Litmus. And truthfully, the last thing I wanted to say was to have more time with my family.
- work
- life
The State of Fluid Web Typography
Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues.
- typography
- development
Apple has a plan to make online ads more private
For years, the web has been largely free thanks to online ads. The problem is that nobody likes them. When they’re not obnoxiously taking over your entire screen or autoplaying, they’re tracking you everywhere you go online.
- apple
- privacy
Airline Logos
Mid-century airline vibes seem to be all the rage these days, with the new TWA Hotel opening up at JFK airport amid much fanfare. The red and gold TWA logo is timeless, and it’s etched in tile on the hotel pool, graces the hottest toiletry kit you’ve ever seen, and even got its own font treatment by Pentagram.
- design
- logos
- retro
Google Fonts is Adding font-display
At Google I/O this week, Anna Migas shared a photo of an Addy Osmani and Katie Hempenius session that dropped a font loading bombshell on the world.
- development
- typography
Building a pure CSS animated SVG spinner
In this article I’ll show you how to level up your loading indicators with a pure-CSS animated SVG loader inspired by Google’s Chrome and YouTube spinner. What are we making? A good loading indicator helps users feel a sense of progress, and the spinner which Google uses for Chrome and YouTube is one of my favourites.
- animation
- development
- svg
Designing a Dark Theme for OLED iPhones
Why using black backgrounds for your true-dark theme is a bad idea Vidit Bhargava
- development
- design
What to Expect From Marzipan
It’s clear that this year’s WWDC is going to be a doozy. We’ve written here previously with our thoughts about Dark Mode, now it’s time to talk about iOS apps coming to the Mac. Of course I’m talking about Marzipan, a technology Apple introduced with few details during last year’s Keynote.
- macos
- apple
Breaking to a new row with flexbox
Here’s the challenge: if you want to create a flexbox layout with several rows of items, how do you control which item ends up in which row? Presume you want to create a layout that looks something like this, with three stacked items and alternating full-width items:
- css
- development
Introducing GitHub Package Registry
Today, we’re excited to introduce GitHub Package Registry, a package management service that makes it easy to publish public or private packages next to your source code. GitHub Package Registry is fully integrated with GitHub, so you can use the same search, browsing, and management tools to find and publish packages as you do for your repositories.
- development
Our favorite tips and tricks for making the most out of Apple HomeKit
HomeKit has made waves for being the easiest to use home automation platform, while still being extremely powerful. These are AppleInsider's top tips you may not know for getting the most out of your HomeKit setup.
- apple
- homekit
- home-automation
Responsible JavaScript: Part I
By the numbers, JavaScript is a performance liability. If the trend persists, the median page will be shipping at least 400 KB of it before too long, and that’s merely what’s transferred. Like other text-based resources, JavaScript is almost always served compressed—but that might be the only thing we’re getting consistently right in its delivery.
- javascript
- optimization
Automate React Native Deployment - Part 1
React Native has its frustrating quirks and time-consuming challenges, as any library as heavy as React Native might. Automating deployment has been one of those challenges.
- react-native
This macOS tool automatically opens all Apple News links in Safari
- apple
- macos
Making Web Components for Different Contexts
- development
Microsoft is adding the Linux command line to Windows 10
Microsoft is reaching out to Linux developers in a way that the company never has before. "The Bash shell is coming to Windows. Yes, the real Bash is coming to Windows," said Microsoft's Kevin Gallo on stage at today's Build 2016 keynote.
- microsoft
- windows
- development
Google Doodle Honors Eddie Aikau
- surfing
Building the New facebook.com with React, GraphQL and Relay
- react
Watch: The Electric Acid Surfboard Test, Starring Stephanie Gilmore
- surfing
Retroflag GPi
- gaming
- nintendo
Why Notre-Dame Was a Tinderbox
- animation
- history
An exclusive look at an original iPhone prototype
- apple
- iphone
Captain Marvel
- movies
CSS Scroll Snap — How It Really Works
- css
Apple Hosts Stanley Cup, NHL Commissioner Gary Bettman, All-Stars Connor McDavid and Auston Matthews
- apple
- hockey
Tim Cook
- privacy
- apple
2019 CSS Wishlist
- css
Remove Image Background
- utilities
Animation principles for UX and UI designers
- animation
- ux
- design
What do you name color variables?
- css
Proof That iOS Still Hasn’t Gotten Undo Right
- ios
- ux
Night Sight: Seeing in the Dark on Pixel Phones
- photography
- android
Creating iOS 12 Shortcuts with JavaScript and Shortcuts JS 🧞
- ios
- javascript
- shortcuts
How We Used Gatsby.js to Build a Blazing Fast E-Commerce Site
How We Used Gatsby.js to Build a Blazing Fast E-Commerce Site Flamingo has landed! Harry’s, Flamingo’s parent company, serves over one million female customers.
- gatsbyjs
Your Source Maps are Broken. Here's How to Fix Them
- development
Litmus Behind the Scenes: Managing our Remote Engineering Team
- workplace
What’s new in Storybook 4.0 React Native
- react-native
Getting Started with React Hooks
- react
Here Are All of the Apple Logos Included in the October 30 Event Invites
- apple
Apple fixes its new bagel emoji with cream cheese and a doughier consistency
- emoji
- apple
- design
10 Console tricks, to debug like a Pro.
- development
- javascript
Apple Frames: A Shortcut for Framing Screenshots from Every Apple Device
- apple
- shortcuts
- ios
We use too many damn modals.
- ux
Star Wars 'The Mandalorian' image, list of directors revealed
- star-wars
- tv
HomeKit support rolling out for Netatmo Welcome security camera
- homekit
- internet-of-things
Lego Apple Park
- apple
- lego
Announcing Gatsby 2.0.0 🎉🎉🎉
We’re incredibly pleased to announce the 2nd major release of Gatsby! Gatsby is a blazing fast modern website and app generator. Thousands of developers use Gatsby to create amazing blogs, apps, marketing and ecommerce sites, documentation, and more!
- gatsbyjs
iPhone XS: Why It’s A Whole New Camera
- ios
- apple
- iphone
- photography
Adding Device Frames to iPhone XS and XS Max Screenshots With Shortcuts
- ios
- shortcuts
Learn Siri Shortcuts Part 3: Magic Variables, Menu Action, and More!
- ios
- shortcuts
How to Create Siri Shortcuts Beyond Your iPhone
- ios
- shortcuts
Making IFTTT Work With Apple’s New Shortcuts App
- ios
- shortcuts
Watch 48 Minutes of Cyberpunk 2077 Gameplay in 4K
- gaming
Advanced Effects With CSS Background Blend modes
- css
Data Science on Your iPad
- ios
- ipad
Does It Mutate?
- javascript
Apple Is Rebuilding Maps From the Ground Up
- apple
- ios
Canner
- cms
- static-site
Harnessing the Power of Animated Vector Drawables
- animation
- ux
- design
Shortcuts: A New Vision for Siri and iOS Automation
- apple
- ios
- siri
Mythically Massive and Powerful Waves
Are you a mountains or a beach person? I prefer the beach — the ocean in particular, even though it scares the hell out of me sometimes. Photographer Rachael Talibart captures the power of the sea with her photos of waves kicked up by storms.
- photography
Javascript ES6 — Iterables and Iterators
- javascript
Let’s Fall in Love With React Fiber
- react
Dynamic Bézier Curves
- animation
- ux
Painless HTML Email coding
- email-development
Filidorwiese/Spriteling
- sprites
- animation
Wired Elements
- web-components
- ui
How You Can Develop Progressive Web Apps That Feel native
- progressive-web-apps
Building a Progressive Web App In React
- progressive-web-apps
- react
How to Use React’s New Context API to Easily Manage modals
- react
- ux
Swipe Views With CSS Snap Points: Building a More Efficient Mobile Web Navigation
- css
- progressive-web-apps
- mobile
My 9.7 iPad (2018) Review: Drawn, Written, Edited, and Produced With an iPad
- ios
- ipad
Storybook Tutorial
- react
- development
Working With the New CSS Typed Object Model
- css
- development
System Fonts in CSS
- typography
- development
Charles for iOS
- development
- ios
New Things CSS Grid Brings to The Table
- css
- development
Bringing Interactive Examples to MDN – Mozilla Hacks : The Web Developer Blog
- development
- tools
Gestalt
- react
- ui
Variable Fonts (Beta)
- typography
Awaity.js
- javascript
Progressive Web Apps (PWAs) Are Coming to a Safari Near you
- apple
- safari
CCOSTAN/Home-AssistantConfig
- home-automation
Don’t Take Design Critique as An insult
- design
Life on an iPad
- ios
- ipad
Writer, Sometimes Designer, Web + Email Advocate.
- development
React.js Frequently Faced Problems
- development
- react
Inside the Federal Bureau of Way Too Many Guns
- government
The House That Spied on Me
- internet-of-things
- privacy
- automation
Shipping System Fonts to GitHub.com
- development
- fonts
Using Prettier to Format Your JavaScript Code
- development
- tools
Everything Easy Is Hard Again
- development
- design
Unseen 1960s Photos of London's East End
- photography
Branded in Memory: NFL Edition
- sports
- nfl
- logos
- design
The \"Philly Special\" Stuns Belichick (Super Bowl LII)
- sports
- eagles
- nfl
Drawing From The Past
- design
- icons
- sports
Get Started With Motion Design in 9 steps
- ux
- animation
How to Be a Product Designer
- design
Behold, the 157 New Emoji for 2018
- emoji
The Best UX Is No User Interface at All
- ux
- design
How I Design With CSS Grid
- css
- design
React’s New Context API
- react
- javascript
Smart Homes and Vegetable Peelers
- internet-of-things
- smart-home
Integrating imperative APIs into a React application
- react
- javascript
The Power of RAW on iPhone, Part 2: Editing RAW
- photography
- iphone
Modern CSS Explained for Dinosaurs
- css
Website Sameness™
- design
Recreating the GitHub Contribution Graph With CSS Grid Layout
- css
Why Your App Looks Better In Sketch
- apps
- design
- ios
Introducing Haiku
- design
Forecast: Podcast MP3 Encoder With Chapters
- podcasts
- apps
- macos
Rico’s Cheatsheats
- development
The Story of CSS Grid, from It’s Creators
- css
Overcast 3
- apps
- ios
Animista
- animation
- css
Wait! Animate
- animation
- css
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
- css
RDM
- apps
- macos
Google and Monotype Release Noto Font for All Languages
- fonts
Samsung is in Trouble
- news
Text Spinners
- css
Gmail is going responsive...finally!
Have you ever opened an email on your phone and something about the formatting just looks … off? Maybe the text is hard to read, or the buttons and links too small to tap. That’s because many emails are still formatted for computers' larger screens, which means reading them on mobile can be a hassle.
- email-development
- gmail