Chris Kitchens

Usually a Developer.. studied engineering, left college to learn. Now I do math with colors in javascript!

[Sara Soueidan is on Bluesky @SaraSoueidan]

This is brilliant: https://t.co/d7alPuVCsL

"The colors in the HTML snippet above comes from within the font itself, the code is plain text, and requires no JavaScript."

—
That's syntax highlighting built into a font!
Not every day do you come across something this creative.

[shadcn @shadcn]

Shipped a little something to make working with colors easier. Tailwind colors in every format: hsl, hex, rgb, and className. Click to copy!

[CSS Day conference @CSSDayConf]

CSS Day 2024 is next week, June 6 & 7!

We're completely sold out, but you can watch all talks remotely, if you join us as a Remote Participant member on YouTube. See you next week! #CSSDay

[Ana Tudor 🐯 (find me on Bluesky/ Mastodon) @anatudor]

No text duplication outline shadow wave demos. No JS, no images save for CSS gradients. SVG filter magic 🪄 + some CSS trickery 😎 do it all!

✨ https://t.co/VGkoI6BTmF
✨ https://t.co/gnXq1jrsU5

#CodePenChallenge

[CodeNewbie @CodeNewbies]

Exploring Asynchronous JavaScript: Callbacks, Promises, and Async/Await

Dive into the pros and cons of your favorite asynchronous options!

#CodeNewbie
https://t.co/GH7wCS1tUl

[K.O.O @Dominus_Kelvin]

Found this nice website showing component libraries for @vuejs

https://t.co/GDo3cpbHkn

My favourite is @primevue of course

[Sarah Drasner @sarah_edo]

I’m SO excited to be speaking at @RenderATL this year! I’ll be talking about “the Promise of WebAssembly”

You should come too!

🍑 https://t.co/IRtXjtA5Gq

[Erik @erikdevries_nl]

I'm very excited about this new feature I'm working on for https://t.co/aLKTn8wZ5J

Soon you will be able to create primary and secondary color scales simultaneously to explore nice color combinations for your UI design 🤩

[Ana Tudor 🐯 (find me on Bluesky/ Mastodon) @anatudor]

Using clip-path involves duplicating the text.

You can get this effect without any text duplication. All it takes is updating a gradient stop position from the cursor y coordinate + a simple SVG filter using this technique https://t.co/tTa3xRE5qh

[Chris Coyier @chriscoyier]

The fact that you can get anywhere near the game of Wordle with 43 lines of HTML and 63 lines of CSS is a wonderful showcase of power they have.

https://t.co/LK2ZLaq1Fy

by @scottjehl

[jhey ʕ•ᴥ•ʔ @jh3yy]

Nifty CSS Trick 👇

You can create that little transitioning grid highlight effect by using a fixed pseudoelement on the body and focus-within

:root { --grid--accent: transparent; }
:root:focus-within { --grid-accent: white; }

Use focus-within like state and update the custom property that defines the color of that square 🤙

It's like using :has() creating a neat little highlight effect when anything is focussed ✨

(Uploaded the video again to see if the compression on this one doesn't butcher it 🤞)

[Chris Kitchens @imchriskitchens]

@rupali_codes Complicated math - yes ✅
Simple math - sometimes 😅

[Felix Lee @felixleezd]

My favorite color generator tool as a designer. ✨💙

You'll love it → https://t.co/byuImFmRey

[Chris Sev @chrissev]

github's released a new font

and that font has a better site than most companies

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! ✨

You can lean into form control state and layered backgrounds to create input status strokes 😎

input:valid { --valid: 1; }
input {
background: var(--bg) padding-box, ...,
var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 /
100% 100% border-box;
}

The trick is to layer up backgrounds using background-clip to leave a border space 🤏

Applying a transparent border gives you the space for the layered background to transition in 🎞️

Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0.

To respect people's animations preferences, we can wrap that transition in a media query 🤙

@​media (prefers-reduced-motion: no-preference) {
input { transition: background-position: 0.5s; }
}

Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too!

Hope you find it useful!

p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨

@CodePen link below! 👇

[Kent C. Dodds 🐨 @kentcdodds]

I present to you: the titles of every exercise in https://t.co/pPQmnZS6rR:

🔭 Full Stack Foundations
- Styling
- Routing
- Data Loading
- Data Mutations
- Scripting
- Search Engine Optimization
- Error Handling

📝 Professional Web Forms
- Form Validation
- Accessibility
- Schema Validation
- File Upload
- Complex Structures
- Honeypot
- Cross-Site Request Forgery
- Rate Limiting

💾 Data Modeling Deep Dive
- Database Schema
- Data Relationships
- Data Migrations
- Seeding Data
- Generating Seed Data
- Querying Data
- Updating Data
- SQL
- Query Optimization

🔐 Web Authentication
- Cookies
- Session Storage
- User Session
- Password Management
- Login
- Logout and Expiration
- Protecting Routes
- Role-Based Access
- Managed Sessions
- Email
- Verification
- Reset Password
- Change Email
- Enable Two Factor Auth
- Verify 2FA Code
- Disable Two Factor Auth
- OAuth
- Connection Errors
- Third Party Login
- Connection Management
- Redirect Cookie

🧪 Full Stack Testing
- End-to-End
- E2E Mocking
- Authenticated E2E
- Unit Testing
- Component Testing
- Hooks
- Testing Remix
- HTTP Mocking
- Authenticated Integration
- Custom Assertions
- Test Database

Mind you, these exercises have anywhere from 1 to 5 steps (most are around 3). This is a lot of material. And it's all self-paced with excellent instructions. Each exercise has a blog post of background information (often with links to other blog posts).

This will satisfy your brain's need for learning for a loooooooong time.

[Wes Bos @wesbos]

CSS Nesting just landed in Firefox 117 which puts it at 100% browser support!

You can start using it today — here are 11 examples on how it works 👇

[CodePen.IO @CodePen]

"glowy hover effect" by Ines

https://t.co/Ua26FlE7cG

[Sarah Drasner @sarah_edo]

People sometimes ask how I learn many new things. There isn’t one answer, but a big part is doing things the hard way:

- Writing notes (even rewriting a design doc/documentation that exists to internalize it)

- Writing out code blocks rather than copy/paste or autocomplete

[Chris Kitchens @imchriskitchens]

@sarah_edo The ability to make comparisons with things you already understand really helps to build a mental model of new concepts and ideas. I draw a lot of pictures when I take notes.