Onur Şuyalçınkaya
Software Engineer
Home
1
Writing
2
Journey
3
Stack
4
Workspace
5
Bookmarks
6
Online
X (Twitter)
GitHub
LinkedIn
Medium
Instagram
Soundcloud
YouTube
Bluesky
Read.cv
Pinterest
Bookmarks
RSS feed
Apps & Tools
142 bookmarks
Art & Prints
64 bookmarks
Books & Magazines
14 bookmarks
Design
82 bookmarks
Fonts
68 bookmarks
Frontend
223 bookmarks
Icons
27 bookmarks
Portfolio
184 bookmarks
Reading
168 bookmarks
Tweets
45 bookmarks
VS Code
27 bookmarks
Wallpapers
30 bookmarks
Websites
204 bookmarks
Reading
Reading
Mod Musings Creative Studio Tour — mod musings
modmusings.com
After a year of design and building, the Mod Musings Studio is now complete. Take a tour of my creative zen workshop.
My Homelab Setup
arslan.io
I replaced my existing Homelab setup from the ground up with Unifi's latest Gateways, Switches APs, and Cameras. Here is what I did and how it ended up.
CSS-only logo marquee | Component Recipes with HTML, CSS and TailwindCSS – Frontend.FYI
frontend.fyi
Bringing back some nostalgia
Stepper Component / Taner
tanerr.dev
This is a copy-paste React component made with Framer Motion.
Vitsoe vs USM shelving
arslan.io
I have an extensive Vitsoe 606 shelving setup but plan to extend certain places with USM cabinets. What are the main differences?
Great animations
emilkowal.ski
What it takes to craft great animations.
I built a teenage engineering computer-1 — James Rodkey
jamesrodkey.com
I built a computer in the teenage engineering computer-1 case. Here’s what I think of it.
Dogfooding Windows - Horse Browser
browser.horse
How I built a PC from scratch to debug and dogfood my indie browser start-up, Horse Browser, using Teenage Engineering case
Noah Liebman | Making room for long list markers with `subgrid`
noahliebman.net
Using CSS subgrid to make room for long list markers without relying on fixed padding values
Cataloging the modern furnishings of Apple Store Boardrooms - 9to5Mac
9to5mac.com
The iconic wood tables that fill every Apple Store have long been globally admired as symbols of tasteful interior design....
The Path To Awesome CSS Easing With The linear() Function — Smashing Magazine
smashingmagazine.com
With the new CSS `linear()` easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what we can expect from `linear()`, including handy tools to get your hands on it today.
The Apple Store Glossary
departmentmap.store
Where’s the Forum? What do Creative Pros do? This is a resource to help you learn more about Apple Stores.
Building an interactive 3D event badge with React Three Fiber – Vercel
vercel.com
See a full working demo of how we built the interactive Vercel Ship '24 badge using React Three Fiber and react-three-rapier.
React 19 - Part 2: The Code; How it works under the hood!
cmrg.me
It's time to talk code! The setup, and the implementation details. What is an RSC payload? A RSA call?
React 19 - Part 1: The Backstory; My journey writing a framework from scratch!
cmrg.me
Come with me to explore my two months of frustration and joy writing a framework from scratch. I will show you how React works under the hood and how to write your own framework.
Please stop using middleware to protect your routes
pilcrowonpaper.com
Stop overthinking and over-abstracting.
Instant Search Params with React Server Components
buildui.com
Avoiding Hydration Mismatches with useSyncExternalStore
tkdodo.eu
Avoiding hydration mismatches can usually be done in two ways - suppressing the warning or spawning an effect. But is there a third option ... ?
Building a drawer component
emilkowal.ski
Modern optimization strategies for loading web fonts
codewithshripal.com
Modern strategies for loading web fonts to have better performance, UX and SEO score of your website.
How I built my course platform
emilkowal.ski
I've recently launched an early version of my animations course. This post is meant to give you a behind-the-scenes look at the tech stack, design process, and more.
How to Internationalize your Next.js app with next-intl in App Router
hygraph.com
In this guide, we’ll walk you through how to set up internationalization into your Next.js application utilizing the next-intl library.
Interaction to Next Paint (INP): What It Is & How to Improve It
nitropack.io
Improve INP, optimize responsiveness, and fix slow interactions. Learn how to reduce input delay, avoid long tasks, and more. Fix your INP score and pass Core Web Vitals.
CSS :has() Interactive Guide
ishadeed.com
Everything you need to know about CSS :has() selector.
Preventing Hidden Mobile Image Requests Using HTML & CSS
evoluted.net
In this post, we show you how to prevent requests for hidden images on mobile using just HTML and CSS. Read the Full Post Now!
Accessing localhost on an iPhone
joshwcomeau.com
Learn how to set up an ideal workflow for debugging your development server on your iPhone. This may not be the most exciting topic I've written about, but it's probably one of the most useful!
Next.js App Router migration: the good, bad, and ugly
flightcontrol.dev
We rebuilt the Flightcontrol dashboard with Next.js App Router and this post shares the good and bad experiences from it.
Designing better target sizes
ishadeed.com
An interactive guide on designing better target sizes on the web.
How Core Web Vitals affect application SEO: Understanding Google page experience ranking and Lighthouse scores – Vercel
vercel.com
Understand your application's Google page experience ranking and Lighthouse scores.
GatsbyJS Core Web Vitals: How To Go Green With Lighthouse v9
donovannagel.com
The Core Web Vitals performance requirements have been really hard on Gatsby and other JS bundled sites. Here's how to optimize Gatsby for it.
Create an Infinite Horizontal Scroll Animation with Tailwind CSS - Cruip
cruip.com
In this tutorial, we will show you how to create a cool infinite horizontal animation using only CSS. This effect can be used to display a variety of
The Grug Brained Developer
grugbrain.dev
Mastering Raycast: An In-Depth Guide - Felix Vemmer
felixvemmer.com
An in-depth exploration of Raycast, highlighting its standout features, powerful extensions, and a detailed comparison with Alfred.
Why I Won’t Use Next.js
epicweb.dev
From the perspective of web standards to concerns about increasing complexity, Kent C. Dodds shares his opinions on why he won't use Next.js.
Creating an RSS Feed in your Next.js Project
dev.to
Keep Your Audience Informed Hey there! Are you looking to keep your users up-to-date with...
Live updating page views with Supabase and Next.js
maxleiter.com
My personal website
State of HTML 2023 now open! • Lea Verou
lea.verou.me
Create beautiful carousels with scroll snap CSS property
nikitahl.com
You can create beautiful carousels with a fancy and smooth snap effect by implementing a CSS-only solution.
Handling Text Over Images in CSS - Ahmad Shadeed
ishadeed.com
Learn how to handle text over images in CSS by taking accessibility in mind
Making Sense of React Server Components
joshwcomeau.com
This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server. This is a significant paradigm shift, and it's caused a whole lot of confusion in the React community. In this tutorial, we'll explore this new world, and build an intuition for how it works, and how we can take advantage of it.
Building a toast component
emilkowal.ski
Dark Mode: How Users Think About It and Issues to Avoid
nngroup.com
Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.
JavaScript: async/await with forEach()
codeburst.io
async/await is freaking awesome, but there is one place where it’s tricky: inside a forEach()
Things you forgot (or never knew) because of React - Josh Collinsworth blog
joshcollinsworth.com
If you don't often look beyond established comfortable defaults, you might be surprised to learn just how far the world of frontend has moved away from React, and how big that gap continues to grow.
Use CSS Variables instead of React Context
epicreact.dev
How and why you should use CSS variables (custom properties) for theming instead of React context.
Deploy a Next.js 13 app to AWS with Amplify Hosting | Amazon Web Services
aws.amazon.com
Today, AWS Amplify Hosting announces Next.js 12 and 13 support. Your app can take advantage of Next.js features including server-side rendering (SSR), API routes, middleware, incremental static regeneration (ISR), and image optimization. In combination with Next.js feature support, Amplify Hosting is improving the experience of running Next.js apps on AWS: Faster builds. Next.js apps deploy […]
Using with Preprocessors - Tailwind CSS
tailwindcss.com
A guide to using Tailwind with common CSS preprocessors like Sass, Less, and Stylus.
Scaling Content at Coinbase
coinbase.com
Digital Asset Management with Multi-Party Computation MPC (Whitepaper)
Introducing Valibot, a 1kb Zod Alternative
builder.io
Valibot is a schema library for validating structural data, comparable to Zod, Ajv, Joi and Yup. The big innovation of Valibot is the modular design of the API and an optimization of the source code for compression.
Tremor journal • Build yourself a google analytics alternative
tremor.so
Set up an open-source alternative to Google analytics in 5 minutes with Tinybird and Tremor
Mod Musings Creative Studio Tour — mod musings
modmusings.com
After a year of design and building, the Mod Musings Studio is now complete. Take a tour of my creative zen workshop.
CSS-only logo marquee | Component Recipes with HTML, CSS and TailwindCSS – Frontend.FYI
frontend.fyi
Bringing back some nostalgia
Vitsoe vs USM shelving
arslan.io
I have an extensive Vitsoe 606 shelving setup but plan to extend certain places with USM cabinets. What are the main differences?
I built a teenage engineering computer-1 — James Rodkey
jamesrodkey.com
I built a computer in the teenage engineering computer-1 case. Here’s what I think of it.
Noah Liebman | Making room for long list markers with `subgrid`
noahliebman.net
Using CSS subgrid to make room for long list markers without relying on fixed padding values
The Path To Awesome CSS Easing With The linear() Function — Smashing Magazine
smashingmagazine.com
With the new CSS `linear()` easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what we can expect from `linear()`, including handy tools to get your hands on it today.
Building an interactive 3D event badge with React Three Fiber – Vercel
vercel.com
See a full working demo of how we built the interactive Vercel Ship '24 badge using React Three Fiber and react-three-rapier.
React 19 - Part 1: The Backstory; My journey writing a framework from scratch!
cmrg.me
Come with me to explore my two months of frustration and joy writing a framework from scratch. I will show you how React works under the hood and how to write your own framework.
Instant Search Params with React Server Components
buildui.com
Building a drawer component
emilkowal.ski
How I built my course platform
emilkowal.ski
I've recently launched an early version of my animations course. This post is meant to give you a behind-the-scenes look at the tech stack, design process, and more.
Interaction to Next Paint (INP): What It Is & How to Improve It
nitropack.io
Improve INP, optimize responsiveness, and fix slow interactions. Learn how to reduce input delay, avoid long tasks, and more. Fix your INP score and pass Core Web Vitals.
Preventing Hidden Mobile Image Requests Using HTML & CSS
evoluted.net
In this post, we show you how to prevent requests for hidden images on mobile using just HTML and CSS. Read the Full Post Now!
Next.js App Router migration: the good, bad, and ugly
flightcontrol.dev
We rebuilt the Flightcontrol dashboard with Next.js App Router and this post shares the good and bad experiences from it.
How Core Web Vitals affect application SEO: Understanding Google page experience ranking and Lighthouse scores – Vercel
vercel.com
Understand your application's Google page experience ranking and Lighthouse scores.
Create an Infinite Horizontal Scroll Animation with Tailwind CSS - Cruip
cruip.com
In this tutorial, we will show you how to create a cool infinite horizontal animation using only CSS. This effect can be used to display a variety of
Mastering Raycast: An In-Depth Guide - Felix Vemmer
felixvemmer.com
An in-depth exploration of Raycast, highlighting its standout features, powerful extensions, and a detailed comparison with Alfred.
Creating an RSS Feed in your Next.js Project
dev.to
Keep Your Audience Informed Hey there! Are you looking to keep your users up-to-date with...
State of HTML 2023 now open! • Lea Verou
lea.verou.me
Handling Text Over Images in CSS - Ahmad Shadeed
ishadeed.com
Learn how to handle text over images in CSS by taking accessibility in mind
Building a toast component
emilkowal.ski
JavaScript: async/await with forEach()
codeburst.io
async/await is freaking awesome, but there is one place where it’s tricky: inside a forEach()
Use CSS Variables instead of React Context
epicreact.dev
How and why you should use CSS variables (custom properties) for theming instead of React context.
Using with Preprocessors - Tailwind CSS
tailwindcss.com
A guide to using Tailwind with common CSS preprocessors like Sass, Less, and Stylus.
Introducing Valibot, a 1kb Zod Alternative
builder.io
Valibot is a schema library for validating structural data, comparable to Zod, Ajv, Joi and Yup. The big innovation of Valibot is the modular design of the API and an optimization of the source code for compression.
My Homelab Setup
arslan.io
I replaced my existing Homelab setup from the ground up with Unifi's latest Gateways, Switches APs, and Cameras. Here is what I did and how it ended up.
Stepper Component / Taner
tanerr.dev
This is a copy-paste React component made with Framer Motion.
Great animations
emilkowal.ski
What it takes to craft great animations.
Dogfooding Windows - Horse Browser
browser.horse
How I built a PC from scratch to debug and dogfood my indie browser start-up, Horse Browser, using Teenage Engineering case
Cataloging the modern furnishings of Apple Store Boardrooms - 9to5Mac
9to5mac.com
The iconic wood tables that fill every Apple Store have long been globally admired as symbols of tasteful interior design....
The Apple Store Glossary
departmentmap.store
Where’s the Forum? What do Creative Pros do? This is a resource to help you learn more about Apple Stores.
React 19 - Part 2: The Code; How it works under the hood!
cmrg.me
It's time to talk code! The setup, and the implementation details. What is an RSC payload? A RSA call?
Please stop using middleware to protect your routes
pilcrowonpaper.com
Stop overthinking and over-abstracting.
Avoiding Hydration Mismatches with useSyncExternalStore
tkdodo.eu
Avoiding hydration mismatches can usually be done in two ways - suppressing the warning or spawning an effect. But is there a third option ... ?
Modern optimization strategies for loading web fonts
codewithshripal.com
Modern strategies for loading web fonts to have better performance, UX and SEO score of your website.
How to Internationalize your Next.js app with next-intl in App Router
hygraph.com
In this guide, we’ll walk you through how to set up internationalization into your Next.js application utilizing the next-intl library.
CSS :has() Interactive Guide
ishadeed.com
Everything you need to know about CSS :has() selector.
Accessing localhost on an iPhone
joshwcomeau.com
Learn how to set up an ideal workflow for debugging your development server on your iPhone. This may not be the most exciting topic I've written about, but it's probably one of the most useful!
Designing better target sizes
ishadeed.com
An interactive guide on designing better target sizes on the web.
GatsbyJS Core Web Vitals: How To Go Green With Lighthouse v9
donovannagel.com
The Core Web Vitals performance requirements have been really hard on Gatsby and other JS bundled sites. Here's how to optimize Gatsby for it.
The Grug Brained Developer
grugbrain.dev
Why I Won’t Use Next.js
epicweb.dev
From the perspective of web standards to concerns about increasing complexity, Kent C. Dodds shares his opinions on why he won't use Next.js.
Live updating page views with Supabase and Next.js
maxleiter.com
My personal website
Create beautiful carousels with scroll snap CSS property
nikitahl.com
You can create beautiful carousels with a fancy and smooth snap effect by implementing a CSS-only solution.
Making Sense of React Server Components
joshwcomeau.com
This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server. This is a significant paradigm shift, and it's caused a whole lot of confusion in the React community. In this tutorial, we'll explore this new world, and build an intuition for how it works, and how we can take advantage of it.
Dark Mode: How Users Think About It and Issues to Avoid
nngroup.com
Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.
Things you forgot (or never knew) because of React - Josh Collinsworth blog
joshcollinsworth.com
If you don't often look beyond established comfortable defaults, you might be surprised to learn just how far the world of frontend has moved away from React, and how big that gap continues to grow.
Deploy a Next.js 13 app to AWS with Amplify Hosting | Amazon Web Services
aws.amazon.com
Today, AWS Amplify Hosting announces Next.js 12 and 13 support. Your app can take advantage of Next.js features including server-side rendering (SSR), API routes, middleware, incremental static regeneration (ISR), and image optimization. In combination with Next.js feature support, Amplify Hosting is improving the experience of running Next.js apps on AWS: Faster builds. Next.js apps deploy […]
Scaling Content at Coinbase
coinbase.com
Digital Asset Management with Multi-Party Computation MPC (Whitepaper)
Tremor journal • Build yourself a google analytics alternative
tremor.so
Set up an open-source alternative to Google analytics in 5 minutes with Tinybird and Tremor
Load more