#330: Advent Calendars On Front-End and UX

With a little surprise, JavaScript, web performance and a treasure chest of useful resources. Issue #330 • December 7, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Smashing Friends, With the holidays upon us, we’ve prepared a little surprise for you. Well, we don’t only mean that with today’s special holiday-themed newsletter, but also something brand new that we’ve been quite busy with working on in the past months. Now it’s [almost ready]( and you are the first to learn about it, of course! Oh my, we couldn’t be more excited! 🙌 [Dark, food-themed design with silverware and dishes presenting recipes for Smart Interface Design Patterns.]( Meet [Smart Interface Design Patterns]( our shiny new video course + live UX training. That’s a whopping 6h-long video course with 25 video lessons packed with valuable techniques, guidelines and best practices for common components in modern interfaces — all curated by yours truly over the last 10 years. [Watch an intro + free lesson]( (20 mins). Most videos are all ready to go, and we are working on a few new additions and fine details just before the launch in early January 2022. You can [get notified when it’s ready]( and get a special smashing friends’n’family discount, of course. We are very excited to have you on board! Also, don’t forget to join us next week for a [Smashing Hour with Henri Helvetica]( it’ll be a casual friendly chat on everything pizza, web performance and jogging! Wednesday, December 15, 8–9 AM PT ([check your time zone](. [Register for the meeting](. We’re looking forward to meeting you there! Stay smashing, everyone! — Vitaly ([@smashingmag]( --------------------------------------------------------------- 1. Daily JavaScript And CSS Challenges There’s no better way to learn than through real-world projects and components. So why not dedicate December to improving your skills? [Advent of JavaScript]( helps you do just that by delivering a daily new JavaScript challenge to your inbox leading up all the way to Christmas Eve. [Advent of JavaScript]( The challenges are tailored to beginner and intermediate developers and each one of them comes with a brief, ways to push yourself, and steps to help you get started. The HTML and CSS you’ll need is already included so that you can entirely focus on the JavaScript. If you’re looking to improve your CSS skills, the companion calendar [Advent of CSS]( has got you covered. It is based on the same idea as Advent of JavaScript and each challenge includes a Figma file and a style guide to get you going. Now, are you ready to take on the challenge? (cm) --------------------------------------------------------------- 2. Save Christmas From The Grinch Christmas is in danger and there are only two who can save it from the grinch’s malicious activities: the elf McSkidy and, well, you. That’s the storyline of [Advent of Cyber]( the cyber security advent calendar by the folks at Try Hack Me. Each day leading up to Christmas, a new beginner-friendly security exercise will be released to teach you the basics of cyber security. [Advent of Cyber]( The daily tasks break down common security topics into bite-sized walkthroughs and challenges and contain supporting material and video tutorials. Among the topics are Web Exploitation, Network Exploitation, OSINT, Cloud Hacking, and Defensive Blue Teaming. At the end of the competition, there’s a certificate waiting for you, and, if you’re lucky, you can win a prize, too. Will you and McSkidy be successful? (cm) --------------------------------------------------------------- From our sponsor Automatically Transform And Optimize Images And Videos On Your WordPress Website [Automatically Transform And Optimize Images And Videos On Your WordPress Website]( From media upload to image optimization, video transcoding and transformations through delivery via global CDNs, everything is offered from within [Cloudinary’s award-winning plugin]( making automating your image, video, and rich media workflow easy and fast. --------------------------------------------------------------- 3. A Treasure Chest Of Useful Resources The love to learn and the love to share is what fuels [Bekk Christmas](. For the fifth time already, the team at Norwegian consultancy Bekk shares a curated selection of articles, tutorials, podcasts, talks, and other resources every day up to December 24. Things they learned this year and that are just too good not to be shared. [Bekk Christmas]( The topics are all related to technology, design, and strategy, so whether it’s JavaScript, UX, security, or machine learning, every day is like opening a treasure chest filled to the top with useful resources. Perfect while you’re commuting, relaxing, or for a coffee break. And if that’s not enough for you yet, good news, you can still browse the calendars from previous years. (cm) --------------------------------------------------------------- 4. Upcoming Front-End & UX Workshops You might have heard it: we run [online workshops around front-end and design]( be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with [personal and inclusive events](. As always, here’s an overview of our [upcoming workshops]( - [Accessible Front-End Patterns Masterclass]( Dev with Carie Fisher. Jan 20 – Feb 3 - [New Adventures In Front-End, 2022 Edition]( Dev with Vitaly Friedman. Feb 3–17 - [Front-End Testing Masterclass]( Dev with Gleb Bahmutov. Feb 8–16 - [Jump to all online workshops →]( --------------------------------------------------------------- 5. A Submarine Programming Adventure So imagine this: You’re on a ship at sea when suddenly the alarm goes off. Apparently, one of the Elves tripped and the sleigh keys went overboard. Christmas is in danger! Before you know it, you find yourself inside a submarine that the Elves keep for emergencies like these, and, well, this is the beginning of your mission: You need to earn fifty stars by December 25th in order to save Christmas. How? By solving programming puzzles. That’s what [Advent of Code]( is all about. Created by Eric Wastl, the advent calendar presents you two new programming puzzles each day, each one worth one star. No worries, you don’t need to have a degree in computer science to succeed. As Eric claims, a little programming knowledge and some problem-solving skills will get you very far. Good luck! (cm) --------------------------------------------------------------- 6. An Advent Calendar For Speed Geeks Even if you’re just a little bit into performance optimization, [The Web Performance Calendar]( is for you. For the 13th year in a row, it makes December the favorite time of the year for speed geeks and anyone who wants to give their site a speed boost. [The Web Performance Calendar]( Organized by Stoyan Stefanov, the Web Performance Calendar publishes a new article every day. They are written by developers from across the globe and each one of them shines a light on performance, by sharing insights into new tools or presenting useful techniques, for example. This year, there’s also an “[oldies but goodies]( selection of articles from past years to ensure that you don’t run out of reading material this holiday season. (cm) --------------------------------------------------------------- From our sponsor [Build Fast And Secure Sites In Record Time With Cloudflare Pages]( [Build Fast and Secure Sites in Record Time With Cloudflare Pages]( [Sign up]( for free here! --------------------------------------------------------------- 7. Advent In HTMHell HTML is the backbone of every site and while it might seem easy to master, the deeper you dig, there are quite a few pitfalls and bad practices lurking behind the corner. Let’s make them visible! [HTMHell Advent Calendar]( For his [HTMHell Advent Calendar]( Manuel Matuzović collects articles, talks, and tools that focus on HTML and that help you make the web a bit better, baby step by baby step. A new resource is waiting behind each virtual door, up to December 24th, tips for improving the accessibility of SVG images just like interesting insights into the usage of HTML, for example. But we don’t want to spoil it for you. Go see for yourself. (cm) --------------------------------------------------------------- 8. Thoughts From The PHPamily PHP celebrated its 25th anniversary last year and currently powers 78.2% of the open web. But PHP is more than a language. Behind it, there’s a community of passionate developers that spans the entire globe, the PHPamily. The annual [24 Days in December]( calendar is a place to share this passion. [24 Days in December]( Leading up to December 24, the calendar shares a story from one of the members of the PHP community every day. It could be a guide or tutorial, an opinion piece about the current state of PHP, something they built or learned — in a nutshell: a snapshot of what moves the PHPamily. A true classic. (cm) --------------------------------------------------------------- #9. New On Smashing Job Board - [UX/UI Designer (d/f/m)]( at Ableton AG (Berlin, Germany) - [Front-End React Engineer Level 3]( at Preava, Inc. (Remote, Europe) - [Usability Test Specialist]( at Baymard Institute (Remote) --------------------------------------------------------------- #10. Recent Smashing Articles - [Designing Better Links For Websites And Emails: A Guideline]( - [How To Protect Your API Key In Production With Next.js API Route]( - [Smashing Podcast Episode 44 With Chris Ferdinandi: Is The Web Dead?]( - [How To Protect Your API Key In Production With Next.js API Route]( - Read more of the [latest articles on Smashing Magazine →]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](