Friday Frontend: Corporate Mega-Conference Edition
This week we had not one but two corporate megaconferences - both Google IO and Microsoft Build took place, with the companies competing with jaw-dropping AI demonstrations and lots of great web platform improvements. It is great to see the extent to which Microsoft in particular has embraced Open Source in the last few years.
KBall from ZenDev
CSS & SCSS
Some beautiful examples and inspiration of how CSS grid allows us to bring editorial design from print and integrate it into the web. I particularly love the idea of “defining empty spaces with the same intensity that we define full spaces”.
A walkthrough on using CSS Grid to build a layout and make it responsive, showing how to can use
auto-fill to add quite a bit of responsiveness before you even think about a media query.
Very cool and simple css mechanism to create a unique experience that guides your users to important parts of your website. Sure, you could use this for evil, but used properly custom cursors for different parts of your site can set you apart and help users understand what is important.
This type of in-page CSS visualization can be really helpful when you’re struggling to get something to lay out quite right and can’t figure out why, or you’re still trying to wrap your head around the box model. You can get most of the way there with Chrome or Firefox developer tools, but sometimes it’s nice to just see it all right in front of you.
Way out, early days, “unofficial proposal draft” spec level, but I love to see the ongoing innovation on the web platform. CSS Environment Variables were first introduced as a non-spec feature from Apple as a way to deal with things like “the Notch”, but now it’s looking like it may become a standard and powerful way to deal with both browser and author-defined variables. Neat!
Regular expressions are an extremely powerful tool, especially for text munging and analysis. They don’t get used that frequently in pure front-end development, but every now and then I run into a problem where they are the perfect solution. If you’re not already comfortable with using RegExp, this is a detailed and thorough guide to get you up and running.
VueMastery.com just finished publishing the last recorded talks from VueConf.US. You can find every single talk at this link. I particularly enjoyed the talks by Rachel Nabors, Sarah Drasner, John Lindquist, and Miriam Suzanne, but they were all excellent. Go watch!
Massive and thorough. If you’re looking for an end-to-end practice project to learn how to use GraphQL with the Apollo ecosystem, this looks like a good option. It uses React for the front-end, though the author also points out that adapting Apollo and GraphQL to Vue or Angular is straightforward as well.
We linked out to this survey in a previous newsletter, now the results are in! Some fascinating details about what tools and methodologies front-end developers are using today. Still a long way to go on CSS Grid adoption, but we’ve made some serious progress! And check out the rapid rise of React and Vue. Very cool to see these powerful tools taking off.
Sarah Drasner had a great tweet about how 90% of animation is tinkering and tweaking timings until your eyes bleed - having tools like this speeds that tinkering process up dramatically, maybe taking it down to only 70 or 80%
Google IO 2018 was this week, and along with the somewhat jaw-dropping announcement/demo of Google Duplex, there were a ton of talks relevant to us as web developers. Harry Manchanda put together this youtube playlist of all of the web development-focused talks from IO.
At the same time as Google IO, just a few hundred miles up the coast Microsoft was hosting it’s own megaconference. While I don’t have a similarly curated playlist of talks, I did find this list of *all* of the talks that happened, and a quick scan through finds some extremely relevant talks on PWAs, Angular, and TypeScript. Enjoy!
Ever go to print a page from a website and discover that what you’ve printed bears essentially no relationship to what you saw on the website? Turns out, styling for print has a lot in common with styling for the web, but you need to be cognizant of the differences of the medium and either maintain a separate print stylesheet make sure you’re writing things like media queries with print in mind. Check out this comprehensive guide on Smashing Mag!