We are definitely in December - you can tell because everyone is starting to come out with their year-end roundups.
We’ve got a number of those in this week’s newsletter, as well as some really interesting looks at new Angular and React functionality, a roundup of reactions on the big Edge news, and more.
Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
Programming CSS
A look at how you might think about CSS in analogues of more traditional programming languages and concepts. Frankly I think in the end we need to acknowledge that CSS is attacking a different domain than those languages and therefore has different choices and mental models, but if this helps someone who’s coming from a programming background start to get their head around it, great!
An Introduction and Guide to the CSS Object Model (CSSOM)
I’m including this in the CSS section of the newsletter, but most of the code within this is actually JavaScript. This is a guide to the browser’s APIs for reading and manipulating styles with JavaScript. It’s a fascinating look into what is exposed, how, and how you can mess it up. :P
A CSS Venn Diagram
Excellent walkthrough of how to create a Venn Diagram using just HTML and CSS. Utilizes CSS Shapes, custom properties, and CSS Grid.
CSS Text Shadows From CodePen
In the inspiration and examples camp, this is a slew of examples of utilizing CSS text shadows to create different effects. Each is in a codepen, so you can fork and tinker to your heart’s content.
JavaScript
This year in JavaScript: 2018 in review and npm’s predictions for 2019
The year-end reviews have started, and this is a good one to look at! Some fascinating data points from npm; I love their look at ‘share of registry’ downloads across frameworks; when I’ve dug into data like this before trying to judge relative popularity, accounting for overall registry growth has always been a problem. Also, if you like this stuff, you might be interested in an interview I did with Laurie Voss about npm & the future of the web.
big ol’ ball o’ javascript’
A thoughtful reaction to a post about the challenges with the trend towards “full stack” development and the way front-end development often gets devalued or at least de-emphasized. Worth reading, even if this isn’t a challenge for you or your organization. (Also worth reading the original postthat sparked it)
What is the Shadow DOM?
This completely blew my mind. I had no idea that there was a specified API for manipulating the Shadow DOM, though a little bit of looking around turned up the info that this is one of 4 related specifications around web components. The current state of the world here is pretty early, but I can easily imagine declarative react/vue-like frameworks designed for creating explicitly shadow-dom components that then gives us true reusable components that can be embedded in any web site or application. Super cool!
Why Do React Hooks Rely on Call Order?
Fascinating dive into the thinking behind the new Hooks API for React. Written by the always thoughtful Dan Abramov, this goes through a number of other proposed alternative proposals and what the drawbacks were with those that led the team to choose the Hooks approach.
Metaprogramming, Higher-Order Components and Mixins with Angular Ivy
I don’t follow Angular goings-on nearly as closely as I do React and Vue, but occasionally something crosses my radar that is too interesting to pass by. This one takes a look at how the new Ivy renderer will enable much more dynamic and enable features like higher order components and mixins that are challenging to do today in Angular.
Other Awesome
A Recap of Frontend Development in 2018
Another roundup of all the stuff that happened in the frontend world this year. Things go so fast it feels like some of this stuff happened decades ago, but in reality it hasn’t been very long. WebAssembly 1.0, the massive growth of TypeScript, and babel 7.0 are all on my top list, but there’s much more in here.
The State of UX in 2019
Another roundup/reflection post, this one focused on particularly UX design. It’s long, but even if you’re not in design I recommend checking out and thinking about a couple of the points (you can navigate using the dots on the right -- took me a while to notice). First, the bullet point on Impact (“Design is not saving the world”) highlights how tech companies are increasingly powerful and how that impacts our moral responsibilities working in this industry. The following bullet point on ‘Behavior’ takes a look at the tech industry obsession with engagement, and some of the negative consequences it can have. Take the time and read these, and think about them - we are blessed to work in this industry that can have such impact, but with great power comes great responsibility.
Prototypes and production
A perspective on the differences between creating production code and prototype code. I think the conversation is more nuanced than this gets into - what constitutes production quality will likely vary a lot depending on your product and stage in the market - but this is a good look at some of those concerns.
Browser Diversity Commentary, Regarding the Edge News
Roundup of commentary on the recent news that Microsoft is abandoning their efforts to have an independent browser engine and will be building the next version of Edge on top of Chromium. Really feels to me like a short term gain and long term loss for the ecosystem.
The “D” in the DOM
A look into the concept of DOM as “Document”, and what the implications are for how we write our HTML. It doesn’t matter if our HTML is being written by hand, generated on the server, or dynamically updated on the client via javascript, it is still being parsed by the browser as a document, and that has implications for how it behaves, particularly with more programmatic readers like screen readers.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)