Piccalilli Newsletter - Issue #28

Welcome

Salut! 👋

This week, there’s lots of fancy stuff to get our teeth stuck in to, so let’s crack on!

If you’re enjoying reading this newsletter as much as I’m enjoying creating it, please share it with your pals. It’ll be really appreciated if you do.

Enjoy!

Front-End Challenges Club

📣 Introducing Front-End Challenges Club 📣

I’ve created a brand new project where I set a challenge every two weeks, then the following week, I publish my solution to the challenge to help you learn and master front-end development best practices.

The aim of the game with this project is for you to learn best practices in:

  • Semantic HTML
  • CSS
  • JavaScript
  • Progressive Enhancement
  • Accessibility
  • Inclusivity

Launch membership costs either $10 per month or $70 for a year, so go ahead and sign up!

CSS Trick

FitText in CSS

⚠️ Requires Chromium 79+ (I used Chrome Canary) ⚠️

Uncle Dave made a legendary jQuery plugin called FitText and has now recreated it with CSS, using Custom Properties and the new min and max functions, which you can read about here and here.

The code sample in the demo is editable, too, so you can mess around with it.

Fancy

Sandwich - Agency Site

⚠️ Motion Warning ⚠️

At first glance, this is a typical agency site. But look closely and there’s loads of fine details to uncover.

Art

A tribute to Peter Max

I’m a big Peter Max fan. I spent a lot of time studying pop art when I studied art, so this brings that all right back.

Kristopher has done a stunning tribute piece here, using all sorts of fancy-assed CSS tricks!

Pure CSS Avatar

This is absolutely stunning, by Mert. The colours and style are right up my street.

Fun

Trailing Loader

⚠️ Motion Warning ⚠️

This is a cool as heck little loader by my pal, Joni. The animation is as smooth as butter.

🍬 Candy Clicker

The Keyframers here with another awesome demo. I love the physics of the emoji treats on this one.

Julia Muzafarova

⚠️ Motion Warning ⚠️

Julia is a CSS animation legend with the most hearted CodePen in 2018.

I got to see them speak at FrontEndConf in Moscow and although the talk was in Russian, I was completely in awe.

Their website is stunning, too.

Sponsors

My Upcoming Course: Let’s Build A Landing Page

I’m creating a course to teach you how to build a landing page from scratch, using semantic HTML, modern CSS and modern JavaScript.

It’s going to be using all the latest and greatest CSS tools that we have now so that we can achieve a progressively enhanced, accessible and performant end-product.

It should be landing either late this year, or very early 2020. Sign up for updates.

Thank you

That’s all, folks

If you have any comments, feedback or submissions, please get in touch via Twitter or Email.

If you have written a handy CSS utility, CSS trick or tutorial, you can submit a link over at https://submissions.piccalil.li ➡

You can also support this newsletter by sponsoring it.

Until the next issue, take it easy 🙂