theAdhocracy
Craft CMS has the ability to accept environment variables as well as aliases. It can be worthwhile understanding how these two seemingly similar concepts differ, and when you might want to use one over the other.
Josh breaks down why and how you can use CSS variables more easily in React, specifically using styled-components. Honestly it feels a little terrifying how much is needed just to get basic …
I keep running into the same problem: how to set a style attribute in the CMS and have that be dynamically rendered on the front-end, without relying on inline styles. Turns out it's a great use case for CSS variables!
CSS variables (aka CSS custom properties) do not have access to the cascade. That means they can't fall back to earlier rules, so if your variable is invalid, the browser will simply unset …
var is globally scoped and hoisted, which can lead to unintended side effects. let is block-scoped and can never be redeclared within that scope – much harder to break, but need to be careful about …
Max has a pretty brilliant colour theme switcher on his website. I agree with him that "dark mode" is only the tip of the iceberg and with CSS variables we can now theme sites very easily. There are …
I'm always interested to see how other people utilise styled-components and the tips Josh shares offer exactly that kind of insight. I fundamentally disagree with his take on descendent selectors …
Heydon's video is an excellent overview of their much-loved owl selector and "stack" layout pattern. I actually didn't realise that Heydon was the original "inventor" of the owl, though it makes a …
I've always thought the utility of Tailwind was promising, but it bugged me that the way it worked was so counter to both best practices and the web stack's architecture. Well, introducing …
Migrating assets to a new CMS can be a complete pain, but working out which files go with each page or article on a website doesn't have to be a nightmare if you start with a solid foundation. For me, that means tightly coupling my folder structure on the server with my content structure on the website, a workflow that Craft is particularly nifty at automating.
I was recently given a new laptop at work (🥳), but failed to realise that my Git author details weren't syncing correctly with GitHub for almost a month... 🤦 Rather than simply accept those white squares, I decided to rewrite the repository history. The process turns out to be quite simple, but I still hit several snags so figured it could be useful to document my fixes and errors.
In which I begin by questioning why microformats are defined on the class attribute, instead of somewhere more bespoke, and end up concluding that I don't understand what microformats are actually for... and I'm not sure anyone else does, either.
Static sites don't make search functionality easy, but luckily there are some excellent services that do. I've been messing around with Algolia and finally have it working with Craft and Gatsby the way I want it... on the backend, at least.
Notes from the fully remote React Summit 2020 (or at least the talks I tuned in for). Lots covered, from static-site generators and the Jamstack through to React state management and accessibility. What a fun day!
Looks like CSS is getting extensibility built-in with a new @property element (works like @media – also looks like we're getting CSS.registerProperty() in JavaScript …
Having hooked up Algolia with my Gatsby build pipeline and populated a search index from my Craft CMS API, the next step was the build a frontend UI to enable users to actually query my posts. It turned out to be a pretty simple process.
Notes from the 2020 Jamstack Conf. Some interesting dives in the Jamstack community and various applications of Jamstack technologies, with tweet threads as usual.
I think there's some real merit to Andy's ideas behind Cube CSS. It's a middle-ground between everything-in-JS or BEM that throw out the cascade entirely and the free-for-all that can happen if you …
Jeremy has been updating The Session to use variable font sizes with the new CSS clamp() property. He offers some interesting ideas on how best to do …
Noah explains what it's like working in web design with colour vision deficiency (CVD). Gives a great overview of what CVD covers and why some people can see more/fewer colours than the average …
I always forget what closures are, even if I continue to use them. The article makes a case for considering closures as stateful functions which is quite neat. Basically, closures allow a …
Another month, another big and fully remote JavaScript conference. JSNation fit into my schedule a little less (and didn't quite overlap with my interests as neatly) but it was a fun event with some interesting talks on topics that are often only on my periphery. Much to think about!
A simple and informative example of how the new CSS clamp property can be used to create fluid layouts (in this case, specifically a fluid type …
Styled Components have tripped me up a few times today, but I ended up learning some useful tricks as a result.
I've been saying for a couple of years that we are on the brink of a "fluid design" revolution in front-end development, similar to what happened around the late 2000s with "responsive design". …
A lovely overview of much of the new CSS that has landed (or is landing) in browsers recently, and how that relates to component-led …
Need to self-host your front end away from the "modern" services like Netlify or Vercel? As both continue to get a little sketchier with time, it's definitely something I'm having to …
A superb breakdown of the changes being made in React 18+ around the new React Server Components paradigm. Josh has a knack for explaining complex problems in simpler ways, and this is no exception; …
If you ever wanted to make a cool, animated flag from scratch on the web, Josh has you covered. But the article is also full of clever tricks for animation in …