New Video: You should give a $h!t about no-JS!? https://www.youtube.com/watch?v=naqTYJdz5g8 #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
Recent searches
Search options
#frontenddeveloper
7 posts6 participants0 posts today
️ New Article: The CSS @layer at-rule https://ift.tt/tGbCKJO #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttThe CSS @layer at-ruleYou’ve probably already seen me mention that I’m building a UI library for people who love HTML, powered by modern CSS and Web Components.
I’ve been giving a lot of thought to how to make CSS files modular in the UI library without requiring any sort of build system.
Today I want to talk about how the CSS @layer at-rule makes this a lot easier! Let’s dig in…
The challenge I’m expecting the library to have just two required CSS files…
️ New Article: Mixing colors with CSS https://ift.tt/MYU7ODy #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttMixing colors with CSSI’m working on a UI library for people who love HTML, powered by modern CSS and Web Components.
Unlike previous projects of mine, I’m not using Sass at all. I want the whole thing to work with plain old vanilla CSS.
One of my favorite things I used to use Sass for was darkening or lightening a color to get the :hover color. I gave that up when I switched to a build-free process.
I continued building my custom blog theme Today I finished the single blogpost template part.
The header, cards, and single-post pages are nearly finished. The homepage, footer, still need some work. Accessibility (A11y) is also a priority.
And ofcourse everything is becoming a WordPress theme eventually.
GitHub: https://github.com/Rosita311/RulesbyRosita-theme
Live: https://rosita311.github.io/RulesbyRosita-theme/
GitHubGitHub - Rosita311/RulesbyRosita-theme: Ik bouw mijn eigen WordPress thema.Ik bouw mijn eigen WordPress thema. Contribute to Rosita311/RulesbyRosita-theme development by creating an account on GitHub.
️ New Article: The duality of creating change https://ift.tt/L9W2ZTH #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttThe duality of creating changeHuman culture—and in particular American culture—is littered with stories about great individuals who did great things.
The hero. The rugged individual.
But the reality is that change requires community. One person can’t actually change all that much by themselves.
What one person can do, though, is create that first ripple. They can inspire others. They can start the movement.
And, crucially, they need to invite others. I’m reminded of this short talk by Derek Sivers from many years ago…
️ New Article: Why care about the no-JS experience? https://ift.tt/t9YzxTZ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttWhy care about the no-JS experience?Earlier this week, I wrote about how I’m building a UI library for people who love HTML. I also published a YouTube video about it.
I got a lot of excited responses and comments about it, but also a noteworthy handful asking something along the lines of this…
People should not be prioritizing no-JS users. No one turns off JavaScript.
Today, I wanted to talk about why that’s wrong, and why you should care about the no-JS experience.
️ New Article: Ship faster, reduce costs, and build better systems https://ift.tt/f4XCxp2 #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttShip faster, reduce costs, and build better systemsI just opened up a few spots for my subscription front-end engineering service.
Last year, I started offering this as a way for organizations and small teams to get expert on-demand web development for a simple fixed monthly price.
Here’s how it works…
Request as many tasks as you want. You get unlimited projects, unlimited tasks, and unlimited expert guidance. Get code in days, not weeks. I work on one active request at a time, and ship at least one meaningful deliverable a week on average.
️ New Article: Fair-Code https://ift.tt/EDtXBm3 #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttFair-CodeIn response to my article yesterday about how open source is kind of broken, one of my readers introduced me to the idea of fair-code.
Fair-code is not a software license. It describes a software model where software:
is generally free to use and can be distributed by anybody has its source code openly available can be extended by anybody in public and private communities is commercially restricted by its authors Fair-Code is more-or-less open source, except the author of the code has sole control over commercialization.
New Video: HTML is better than React!? https://www.youtube.com/watch?v=_gZjjg0xu9A #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
For the peepz who don't want to, or can't (or what ever) use Javascript. I build a non-JS fallback menu and darkmode. (I hope it stays intact in WordPress 
)
GitHub: https://github.com/Rosita311/RulesbyRosita-theme
Live: https://rosita311.github.io/RulesbyRosita-theme/
️ New Article: Open source is kind of broken https://ift.tt/KljweJQ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttOpen source is kind of brokenYesterday, I mentioned that I’m working on a Web Component UI library for people who love HTML.
One thing I’ve been mindful of as I work through this project is how very broken and exploitative the open source ecosystem is, both as a maintainer of and consumer of open source projects.
I want to explore this a bit more, and offer some thoughts. Let’s dig in!
I owe my career to open source!
It’s been a while — hard to find time to work on the theme, but here’s a quick update:
Blog cards are done, archive and page templates mostly finished.
Homepage template still needs a redesign.
Started on the single post template (that one is messy).
Some links lead to different HTML templates.
Will be turned into a full PHP-based WordPress theme.
GitHub: https://github.com/Rosita311/RulesbyRosita-theme
Live: https://rosita311.github.io/RulesbyRosita-theme/
️ New Article: A Web Component UI library for people who love HTML https://ift.tt/EGaozFM #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttA Web Component UI library for people who love HTMLI’m building a Web Component UI library for people who love HTML.
Framework agnostic. Easily customizable. Use with pre-built styles or go “naked” and roll-your-own.
Today, I wanted to talk about what that looks like, and why I think it’s a better approach than other options. Let’s dig in!
Toggle Tabs To help make this click, we’re going to look at a common-but-complex UI component: toggle tabs.
With this pattern, you have a nav menu that toggles the visibility of some content.
️ New Article: An HTML Web Component library https://ift.tt/KdbWn64 #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttAn HTML Web Component libraryToday, I’ve been thinking about how the industry could use a progressively enhanced HTML Web Component library. Something that’s less a whole framework and more like Legos you can mix-and-match as needed.
Let’s dig in!
The idea I’m imagining a system that includes…
Base styles for all of the common HTML elements. Loads of utility classes for nudging and tweaking things. Group classes for styling more complex UI elements without a million little classes.
New Video: How to build scalable CSS architecture with HUG CSS https://www.youtube.com/watch?v=kKdH6QLQGFk #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
New Video: Episode 160 - A formula for debugging https://www.youtube.com/watch?v=nQeCKzycrmo #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
New Podcast: 
️ New Article: Detecting media query changes with JavaScript https://ift.tt/lb2Rt5X #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttDetecting media query changes with JavaScriptOne of my favorite things about CSS is how it just automatically does stuff that you need to manually do in JavaScript.
A good example of that is detecting changes to media queries. Let’s dig in!
An example: prefers-reduced-motion The Reduced Motion media query provides a way for people who experience motion sickness and vertigo to specify that they’d like to reduce the motion of an interface.
It’s an operating system setting (in macOS, it’s under Accessibility in System Preferences), and you can detect it using a CSS media query.
️ New Article: Looping HLS video https://ift.tt/19vVIdQ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttLooping HLS videoHLS, or HTTP Live Streaming, is an efficient video streaming protocol that can adapt to network conditions.
I was recently working on a project where I needed to use an HLS format video (the .m3u8 file extension) for a background video: muted, autoplaying, and automatically looping.
Here’s how I would normally include that with an .mp4 video…
<video muted loop autoplay tabindex="-1" aria-hidden="true" src="https://assets.afcdn.com/video49/20210722/v_645516.m3u8" > </video> But HLS is a live streaming format.
️ New Article: Shut up, you're being an asshole https://ift.tt/muOW6rI #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttShut up, you're being an assholeYesterday, I watched a Thought Slime video on how fascists waste your time.
The big takeaway from the video, at the 32:10 mark, is that your response to any fascists saying anything anywhere should always be…
Shut up, you’re being an asshole.
Anything else results in lots of circular arguments and goal shifting.
When fascists do any of their bullshit online, they’re not trying to win an argument.