#CodeNewbie - TechHub

6 posts6 participants0 posts today

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Minification doesnt matter much https://ift.tt/3dcpUof #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttMinification doesnt matter muchYears ago, I was staunchly in the “minify your code, even if you use gzip” camp. But these days, I’ve switched teams! I did some tests on the bundled version of Kelp UI. Unminifed: 58.2kb Minified: 43kb Unminified + gzipped: 8.2kb Minified + gzipped: 7.4kb I don’t think making your code unreadable for humans and harder to debug is worth saving 0.8kb of file size. Both versions are far less than a single HTTP round trip.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Compounding performance issues https://ift.tt/B245hQr #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttCompounding performance issuesAbout a month ago, I wrote a series of articles about modular CSS, compression algorithms like gzip and brotli, and why modular files and compression don’t play well together. Based on all of this, I ended up including both pre-built and modular versions of the CSS and JavaScript files in Kelp, my UI library for people who live HTML. The big tipping point for me came from running a handful of performance tests with the fully concatenated versus modular versions of Kelp, hosted on my own server instead of through the CDN.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: The :has() CSS pseudo-class https://ift.tt/4MY82ew #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttThe :has() CSS pseudo-classI finally got a chance to work with the :has() CSS pseudo-class as part of Kelp, my UI library for people who love HTML. Today, I wanted to quickly look at what it is and how it works. Let’s dig in! If an element has a child or sibling, style the element CSS has long had all sorts of interesting selectors for targeting attributes that start or end with certain letters (^= and $=, respectively), or that have a certain parent/child (.

Code Labs Academy @codelabsacademyupdates@mastodon.social

Considering a tech career switch at 35, 45, or beyond?

The UK tech market has 916k+ open roles, and companies want your experience—not just your code.

Here's a practical 5-step roadmap to go from mid-career to junior developer in under a year.

Read more: https://codelabsacademy.com/en/blog/mid-career-coding-bootcamp-uk/

codelabsacademy.comMid-Career Coding Bootcamp Guide for UK Professionals (2025)Thinking of a tech career at 35, 40 or 50? Discover UK salaries, success-story proof and a five-step action plan to go from novice to junior developer in 2025.

#CareerChange #CodingBootcamp #MidCareerSwitch

Connect2Learn @Connect2learn09@mastodon.social

Beginner Coding Projects You Can Build Today
Want to sharpen your coding skills?
Start with simple, fun projects like calculators, to-do apps, and mini games.
Learn by doing — that’s the best way to code!
For more information, visit our website: https://lms.connect2learn.live/
#CodingForBeginners #LearnToCode #CodingProjects #CodeNewbie #Connect2Learn

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: How to automatically create a release for a pull request using a bash script https://ift.tt/j1z2CSe #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttHow to automatically create a release for a pull request using a bash scriptLast month, I did some testing on Kelp’s performance and found that because compression algorithms rely on repeated patterns, smaller modular files reduce the effectiveness of gzip and brotli. Based on this, I’m release two versions of Kelp: a pre-bundled version and one with modular files. Rather than trying to remember to… Bump the version, Run the build, Then add and push the files… I decided to create a little bash script to automate the process.

Grass Coder @grasscoder@mastodon.social

Tired of struggling in coding interviews?
“The Ultimate 5-Step Problem Solving Framework To Master Interviews” offers a practical, repeatable method for technical problem-solving.
Works in interviews
Works in real-world coding
Read it here: https://grasscoder.com/the-ultimate-5-step-problem-solving-framework-to-master-interviews/
#CodeNewbie #SoftwareDev #TechTips #Interviews

Grass Coder | Your Coding Companion | Learn To Code · 6dThe Ultimate 5-Step Problem Solving Framework To Master Interviews | Grass Coder | Your Coding Companion | Learn To CodeTable of ContentsThe 5-Step Problem Solving FrameworkStep 1: Understand the Problem CompletelyStep 2: Explore Concrete ExamplesStep 3: Break Down the

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Boats and Community https://ift.tt/dBSn0F2 #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttBoats and CommunityBack when I was in school for Anthropology, I had a professor who taught half the year, and spent the other half doing research projects for the United Nations (UN). He told us this story about how one year, the UN learned about a fishing village in Southeast Asia that used wooden dugout canoes to fish. Every year or two, the boats would rot out and have to be replaced.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Mutual Reciprocity https://ift.tt/8EmtLg3 #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttMutual ReciprocityGrowing up, we’re taught that before money, people used to barter for everything. You want fish. The person selling fish wants tomatoes, which you don’t have. The person with tomatoes wants corn and not fish, so you trade your corn for some tomatoes that you trade for some fish. Money, we’re told, was created to make this whole exchange easier. Except… that’s a myth. Well, at least partially. That kind of barter was common among people who didn’t interact very much, and money does make that kind of exchange easier.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Stop animating everything! https://ift.tt/B8lkYbC #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttStop animating everything!Earlier this week, a friend shared a “really cool website” from a design and dev agency (I’m not going to link to it, don’t ask). Nearly every single element on the page was animated in some way. Every heading animates it’s letters as it scrolls into the viewport. Images spin and slide and flash. Card components have a subtle bouncing effect. They use a custom cursor that has a very distinct “flip” when you hover over interactive elements.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: The Goldilocks tooling zone https://ift.tt/0QVGTSM #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttThe Goldilocks tooling zoneI have a strong nostalgia for the web of yesteryear. I love how weird the web was, and I miss the simplicity of opening up a text editor, checking the file in a browser, and then dropping it on on a server with FTP and instantly seeing my changes live on the web. But… there’s no world where I’d want that to be my everyday flow in 2025. I don’t want to handwrite dozens or hundreds of HTML files.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: The build vs. buildless tension https://ift.tt/qvLB0CV #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttThe build vs. buildless tensionA big goal of Kelp is easy customization without a build step. Leaning on the power of the modern web, I want you to be able to customize the hell out of it without ever having to jump into the command line, without ever installing any dependencies, and without every running a build. But finding the right balance of developer experience and web performance with that setup is hard, and I’m not sure what the right structure is.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: How to generate an ID from element text https://ift.tt/z1YgI8C #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttHow to generate an ID from element textNearly every example I see of how to generate an element ID from text with JavaScript removes completely valid non-latin characters: emoji, Cyrillic characters, latin characters with accent marks, Chinese characters, Kanji, and so on. Today, I wanted to share the script I use to generate valid ID strings… without the colonialism. Let’s dig in! When and why you’d need this Kelp has two components that generate anchor links from a heading element’s ID.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Getting the index in a for...of loop https://ift.tt/x9jMfoY #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttGetting the index in a for...of loopI love for...of loops! I find them nice and simple. They’re more clear than an old-school forloop, and in my opinion easier to read than an Array.prototype.forEach() method (or the NodeList equivalent). const wizards = ['Merlin', 'Gandalf', 'Radagast']; for (const wizard of wizards) { console.log(wizard); } But sometimes, you need the index of the item you’re looping over, and the for...of loop doesn’t give you that. Historically, that means I’ve had to rely on the .

teddymatayoshi @teddymatayoshi@mastodon.social

CSS Art – CSS shape() & Gradients: Create an Isometric Hot Air Balloon – Part 1
https://pyxo.me/05f1dd #pyxofy #cssart #codenewbie

Pyxofy · Jul 12CSS Art - CSS shape() & Gradients: Create an Isometric Hot Air Balloon - Part 1Colorful hot air balloons against a sky blue background are majestic! Learn, step by step, how to create one using the CSS shape() function.

Pyxofy @pyxofy@mastodon.social

CSS Art – CSS shape() & Gradients: Create an Isometric Hot Air Balloon – Part 1
https://pyxo.me/05f1dd #pyxofy #cssart #codenewbie

Pyxofy · Jul 12CSS Art - CSS shape() & Gradients: Create an Isometric Hot Air Balloon - Part 1Colorful hot air balloons against a sky blue background are majestic! Learn, step by step, how to create one using the CSS shape() function.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Spreading Joy https://ift.tt/FVsSb9e #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttSpreading JoyYears ago, I had an atypical level of friendliness for someone from New England. I would say “hi” to everyone, compliment strangers on their outfits, ask about their day, and so on. It wasn’t performative. I really felt like everyone had an interesting story. But somewhere between Trump v1 and covid, that just completely disappeared on me. A less kind world I watched the world become more mean and selfish and unkind.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Short-wave radio: the original internet https://ift.tt/M8ZHBTQ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttShort-wave radio: the original internetThe 99-Percent Invisible Podcast is always great, but a recent episode about short-wave radio really caught my attention. Short-wave radio is a band of radio that uses waves that are, as the name implies, really short. Shorter than AM/FM radio. Because long waves generally travel farther, a lot of folks wrote short-wave radio bands off under the assumption that they wouldn’t travel very far at all and were basically useless.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

New Video: Is this REALLY the best way to structure web components!?! https://www.youtube.com/watch?v=AwAcchY28yA #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

YouTubeIs this REALLY the best way to structure web components!?!By Go Make Things

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: text-decoration-style in WebKit https://ift.tt/iyTIAjv #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.tttext-decoration-style in WebKitKelp uses a dotted underline for its links. (Like all things in Kelp, this can be customized with a CSS variable.) The dots are more subtle than a solid underline, but still provide a visual affordance other than color. This is an important guideline in how Kelp focuses on accessibility at its core. But of course, Safari fucks things up a bit! The text-decoration property is a shorthand property that combines text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness into a single declaration.

Drag & drop to upload