August 17, 2021 Smashing Newsletter: Issue #314
This newsletter issue was sent out to 178,681 subscribers on Tuesday, August 17, 2021.
Editorial
We all learn in different ways. Some of us might prefer articles, tutorials and documentation; others learn better from video courses and — ahem — online workshops. But what about trying something entirely different for a change? What about learning CSS/JavaScript from CSS/JavaScript games?
In this newsletter, we feature some of the front-end games that will help you become better at your craft while also having fun along the way.
As a quick side note, if you are interested in accessibility, we are running a free accessibility workshop on How to Find, Fix and Prevent Accessibility Errors with our friends at Deque.
Join our free online workshop on how to find and fix accessibility issues.
And if you are into Next.js, our friends over at Netlify run a free virtual event on Architecting With Next.js showcasing best practices for running Next.js in production.
And if you do prefer to read articles after all, here’s a weekly update of our popular articles last week:
- HTTP/3 From A To Z: Core Concepts
A deep-dive into HTTP/3, what it is and why we need it. - Free Open-Source Icons
Free icons for flags, health, weather, science and tourism. - Useful Figma Plugins And Tools
A productivity boost for Figma tooling. - Handling Mounting/Unmounting Of Nav Routes
How to mount and unmount navigation in React Native. - How To Develop Your Business’ Technology Roadmap
Ensure that projects safely reach their final destination.
Happy learning, everyone!
— Vitaly (@smashingmag)
1. JavaScript Games For Beginners And Advanced
Do you want to learn JavaScript but you don’t know where to start? Or maybe you already know your way around JavaScript and want to get better and more efficient at writing code? Then one of the following games will have you covered.
First off: JSRobot. Inspired by classic platform games, your mission in this game is to use JavaScript to control a robot to collect coins, avoid obstacles, and reach the flag at the end of the level. Great for beginners.
Elevator Saga is a little game to put your existing knowledge to the test. You’ll write a program that controls the movement of elevators to transport people in the most efficient way possible. But beware, the challenges can get quite tricky as you proceed.
Also aimed at more advanced JavaScript developers is the open-source sandbox game Screeps. To control a colony in a world filled by you and fellow players, you’ll be programming your unit’s AI with JavaScript. The programmable world lives a continuous life 24⁄7 in real-time even when you’re offline. And if you want to dig even deeper, the game’s engine is available on GitHub to tinker with.(cm)
2. Learn Flexbox The Fun Way
What do frogs, zombies, and towers have in common? Well, they are your best friends when learning Flexbox. Because, let’s be honest: Flexbox is very powerful once you understand it, but getting there can be quite hard. So let’s make learning a bit more fun.
In the game Flexbox Froggy, you help a little frog and its friends find their lilypads by, you guessed it, writing CSS. The game consists of 24 levels that take you from the very basics of Flexbox positioning to more advanced challenges.
If zombies are more down your alley, Flexbox Zombies is for you. Each section of the game unravels part of the plot, introduces a new Flexbox concept, and presents so-called “zombie survival challenges” that help you solidify your new skills.
Last but not least, you might also want to take a look at Flexbox Defense. Inspired by tower defense games, your job is to stop incoming enemies from getting past your defenses — by positioning your towers with CSS, of course. All three games run right in your browser. Happy flexbox’ing! (cm)
3. CSS Grid, CSS Selectors, And Other Competitions
Do you want to take your CSS skills to the next level? These three little games help you do just that — quite literally. In Grid Garden, you’ll become the proud owner of a carrot garden. 28 levels are waiting for you in which you need to take good care of your crop with the help of CSS grid.
If you feel your CSS selectors skills could need some polishing, CSS Diner is for you. Plates, apples, pickles — in each of the 32 challenges, you’ll need to use a different CSS selector to select specific items on a table.
And if you’re up for some competition, be sure to also check out CSSBattle. In the CSS golfing game, you’ll be using your CSS skills to visually replicate targets with smallest possible code to get to the top of the leaderboard. Each of the challenges is dedicated to a specific topic like visibility, display, transition, or z-index. (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.
For example, we have Rémi Parmentier’s workshop on building modern HTML emails. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.
- Designing The Perfect Web Forms UX
with Vitaly Friedman. August 18 & 20. - Designing The Perfect Navigation UX
with Vitaly Friedman. August 31 – Sep 1. - Architecting Design Systems Workflow
with Nathan Curtis. September 2–10. - Vue.js: The Practical Guide Dev
with Natalia Tepluhina. September 14-28. - Jump to all online workshops →
5. A Tale Of Service Workers And Dragons
Offline support, performance improvements, background sync, caching — Service Workers enable all sorts of amazing things. However, there are quite some pitfalls you might run into when working on a PWA. Pitfalls, or let’s call them “dragons”, shall we? Because these are the nasty creatures that you’ll need to battle in the game Service Workies.
Your companion on the adventure is Kolohe, a Service Worker himself, who is threatened by dragons. Together with him, you’ll level up your skills and learn to battle those beasts that make a Service Worker’s, and lastly a progressive web app’s, existence unnecessary hard. A fantastic way to get a step closer to Service Worker mastery. (cm)
6. A Gaming Community For Advanced Developers
You code and play and get noticed by potential employers at the same time. What might sound to be too good to be true is actually part of the concept of CodinGame.
The platform offers free games and challenges for more than 25 languages and a community where like-minded coding enthusiasts can meet, compete, ask for help, and learn from each other — in multiplayer programming games and international contests. To get noticed by companies as you play and strengthen your developer profile, you can choose who can see your profile and set your conditions. Great for advanced developers! (cm)
7. Achieve Mastery Through Challenge
Some of us like to take on increasingly difficult challenges to get better at something, others prefer training through repetition and by improving their solutions. Codewars caters to both learning types. The platform helps you improve your skills by solving real programming tasks of many types and difficulty levels and for a huge variety of languages, including JavaScript, TypeScript, Python, Ruby, Go, and many more.
What makes Codewars special is the sense of community on which it is based: Users are authoring the challenges, while at the same time helping others with their solutions and giving constructive feedback, so that on your way to mastery, you’ll be a learner and a teacher at the same time. (cm)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.