piccalil Registration and Sign Up Information | piccalil

Piccalilli Newsletter - Issue #54

                Published on the 8th of September 2020
              

View this in your browser

Howdy ??

Apologies for the short break this newsletter has been on. I've had a heck of a busy period recently with a big house move going on. We're all settled here now so I thought I'd put together another fancy websites special to get us back underway.

Let's dive in!

Hannah Blair - personal site

A Windows 95 style desktop with a window displaying info about Hannah

I'm extremely into this Windows 95 aesthetic. The attention to detail in this recreation of the classic operating system as the basis of their site is exquisite. Nice work, Hannah!

Jasmine Deporta - personal site

A 50:50 split image with two cursors that mirror each other

The reflection/duplication setup on this site both messes with your eyes and blows your mind. It's a fantastic, creative site, by Jasmine. I'm obsessed with their type choices too.

Etcetera Type

?? Motion Warning ??

Huge black type specimens on a red background

Speaking of type, this site is a beaut. The bold colours and massive, interactive type specimen pages are a real treat.

Postcards from isolation

?? Motion Warning ??

A monochrome site has some 3D skewed art in a window

I love a creative, collaborative, art project at the best of times, but this one, related to COVID-19 isolation is very apt and very good.

Cumbskees - Game

?? Motion And Sound Warning ??

Super colourful game where you have to find snacks

This is absolutely bonkers and great fun-a perfect closer for this issue. Be careful it doesn't overheat your laptop though!!

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #53

                Published on the 11th of August 2020
              

View this in your browser

Howdy ??

We've got a nice mixed-bag of lush websites, cool-as-heck demos and even a VS Code theme today. Let's dive in ?????

Soot Theme

A black and grey theme on a very bright pink background

I've really wanted a monochrome theme for coding for a long time because I spend the vast majority of time in IA Writer-especially now as I'm producing more education content. I find monochrome stuff much less intensive on my eyes when I stare at it for a long time. I couldn't find a theme that I liked, so I made one!

Take Me On

?? Motion Warning ??

A very sketchy-style UI with the main part being my face, half normal and half sketch

Adam here yet again with a demo that makes your jaw hit the floor. This one-along with being expertly created-is super fun, too.

Download animation

A little box with a parachute on its way down, showing 80% complete

This is so excellently done by Aaron. It's a very charming demo indeed!

localghost

A a site with a full screen blue to purple gradient with pixel art styling

I'm a big fan of Sophie and an even bigger fan of their new personal site! I love the pixel art so much. The theme toggle is top-notch, too.

Glass

A glass sphere

Y'all know me by now: I'm a sucker for photorealism with CSS. This is a great example of that, by Oscar.

Patrick Heng

?? Motion Warning ??

A very bright red background with Patrick Heng in huge text, surrounded by circles

We close out with an absolute stunner of a website. There's just so much good stuff on it, so go ahead and play to your heart's content. The squidgyness of the whole UI is my favourite part. Nice work, Patrick!

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

Today is definitely the last day that you can get a massive 50% discount off the full ?160 price-point of Learn Eleventy From Scratch, because you're a subscriber. Use the code FIFTY_ISSUES at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #50

                Published on the 21st of July 2020
              

View this in your browser

Howdy ??

Here we are at a really big milestone for this newsletter. It's issue 50! I can't believe how far this project has come in little over a year. You can see how it looked on Issue 1 here.

To celebrate 50 issues of this newsletter and to say thank you for being a subscriber, I'm giving a massive 50% discount away on the Learn Eleventy From Scratch course. Use the code FIFTY_ISSUES at the checkout to get it for ?80, instead of ?160!

Anyway: enough nostalgia. Let's dig into this all-star issue of Piccalilli!

Style Stage

A very bold homepage which features "Style Stage" in massive letters

This is such an excellent project, which is crafted with expert attention to detail, by Steph. CSS is extremely powerful and projects like this do a great job of demonstrating that, just like CSS Zen Garden did back in the old days.

You can also see my Lobster-based abomination on there too.

Ana Rodrigues's Blog

Ana's blog homepage with sketch effect boxes on a grid background

The look and feel of Ana's blog is exquisite. The sketchy bordered boxes is a lovely touch. Ana is a great writer, so you should definitely subscribe to their RSS.

CSS leaning card effect

Characters from the Good Place on cards, leaning against a surface with perspective

Lynn here yet again with the goods. This is a lush effect that they have created with CSS. I just had to get Lynn in issue 50!

Flowers and filters

A super glitchy purple piece of generative art

Speaking of Piccalilli all-stars: here's Cassie with a great collection of generative art. It's lovely, tranquil work.

How To Make A Dribbble Shot

A generic product design with instructions on the left how to make it Dribbble-worthy

This is loads of fun, by Olivia. A justified poke at Dribbble culture too ??

Zig-zag gradient lab

Zig-zags on the right with some controls on the left

Super friend of the newsletter, Michelle here with a handy tool for making zig-zags with CSS. It's very nicely done indeed.

PopCSSicles

?? Motion Warning ??

Lots of multicoloured popsicles made with CSS

It wouldn't be right to not feature Adam in issue 50 and here he is, with the sole motion warning, blowing our minds, as usual.

ScrollTrigger - Highlight Text

A paragraph of text that has some words highlighted

Last up, another great example of GSAP's ScrollTrigger being handy. The auto-highlighting of text can be super useful and I'll be playing with it. Nice work, as always, by Ryan.

Thank you

I just want to add a little note of thanks here before we wrap up. This whole thing started from a single Twitter thread. I was sick of the front-end discourse being all about JavaScript and boring software engineering stuff, so I decided to do something about it. I had no idea that it would result in Piccalilli being what it is today.

This success hasn't happened because of me though-it's down to all of you. You've all showed me support by subscribing to and sharing this newsletter, reading my tutorials or buying my content. It's that support that enables this project to keep growing and improving and let me tell ya: big exciting things are happening behind the scenes.

All I can say is thank you. You're all the best I can't wait to curate another 50 issues for you all ??

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a massive 50% discount off the full ?160 price-point of Learn Eleventy From Scratch, because we made it to issue 50. Use the code FIFTY_ISSUES at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #48

                Published on the 7th of July 2020
              

View this in your browser

Howdy ??

Some news this week is that after taking it easy for a couple of weeks, I'm starting to work on new content for this site, including Learn CSS From Scratch!

I've got a good issue for you this week, as we creep ever-closer to the big one: Issue 50.

Vienna Calling

An 8-bit style look and feel website

I adore the look and feel of this site. The attention to detail-even though it's 8-bit style-is stunning. I really like the little touch with the camera integration on the CFP section too.

I'm also speaking at this event, so pop along!

viewBox

?? Motion Warning ??

The viewBox logo, full constructed

More stunning work by Cassie here. It's a lush animation that I only half understand, because SVG is like magic for me. Luckily, I'll learn more because I insta-subscribed to their new newsletter which starts tomorrow!

CSS collector's cabinet

A cabinet full of whimsical collectables including a pokeball, a skull and a cactus

It'll get to the point where I'll rename this newsletter the Lynn Showcase because yet again they have knocked it out of the goddamn park. This is truly stunning.

Thomas Rumbold - Personal Site

A website that is an empty terminal with green text

Good gosh this is excellent, by Thomas. It's a unique concept for a personal site and I very much enjoy playing with it.

Gradient text overlay

?? Motion Warning ??

fossheim.io with a rainbow gradient

Sarah checking in again with more awesome stuff. This gradient is very stylishly done and the motion is butter smooth.

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a cool ?50 discount off the full ?160 price-point of Learn Eleventy From Scratch. Use the code 11TY_PICCALILLI_PAL at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #55

Published on the 15th of September 2020

View this in your browser

Howdy ??

It's Issue 55 today and with that nice, solid number, I feel like I can draw a line in the sand which I've been wanting to draw for a little while now.

I'm changing how this newsletter works. It hasn't evolved much since Issue 1-I found some stuff I liked and shared it with you. After curating 54 of those though, I've felt myself getting a bit bored of the workflow and got lazy in my curation. I love finding new stuff and sharing it, but I want to shake things up around here.

A new format and schedule

The new newsletter format is a letter, just like this. It'll be like I'm writing an email to you, personally, every week with my thoughts of what's going on in the web and stuff I've found that I think you, a valued subscriber, will like. I'll also talk more about educational content that's being added or worked on too to give you more of a look behind the curtain.

The concept is that you can read the whole thing in a few minutes, each week, so I'm not taking up too much of your time. I'll also be publishing it on a Friday, which means Issue 56 will be published on Friday September 25th. I think this format will be a nice week closer, rather than an opener.

Why the change?

A combination of not feeling the format for a while and a sudden increase of spam reports has made me think that the change is needed now rather than the future. I'll admit my last few issues have been a bit sloppier than usual, so apologies for that.

Of course, you can always unsubscribe and resubscribe whenever you like. There's always a couple of links at the bottom of each issue of the email.

Wrapping up

That's all for now. I hope you will like this new format and the newer era of this newsletter. There's more than 5,000 of you all now, so thank you for your support and hopefully, I'll catch you next week.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #51

                Published on the 28th of July 2020
              

View this in your browser

Howdy ??

I hope you're all good on this rather bleak Tuesday (well, here in Cheltenham, anyway). Let's brighten up your day with some nice stuff from around the web!

Remember: to celebrate passing 50 issues of this newsletter and to say thank you for being a subscriber, I'm giving a massive 50% discount away on the Learn Eleventy From Scratch course. Use the code FIFTY_ISSUES at the checkout to get it for ?80, instead of ?160! This expires at the end of the week.

Pure CSS - Sticky-Stacked Cards

A stack of card elements with one scrolling into the stack

This is a very clever trick, by Nils. It's nice to see cool tricks often solved with heaps of JavaScript, solved with CSS, too.

Mandala maker

A Mandala that I made

I bloody love Mandalas-they speak to my obsession with symmetry and order. I've been having fun playing with this generator, especially. Nice work, Amit!

CSS Night Train

?? Motion Warning ??

A night train animation that is masked by the shape of a single light beam

This is a very lush animation by Aysenur. The aesthetic is outstanding, as is the parallax.

Animals sequence

?? Motion Warning ??

A Puffin made out of flat shapes

This is another very nice animation-based demo. The motion is extremely smooth, but that's no surprise, because it's GSAP. Lovely stuff by Abdul.

Ice lollies

A collection of Ice lollies

Last up are some fantastic Ice Lollies, by Ellie. As always, I'm very partial to some CSS art and these are very nicely done.

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a massive 50% discount off the full ?160 price-point of Learn Eleventy From Scratch, because we made it to issue 50. Use the code FIFTY_ISSUES at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #56

Published on the 25th of September 2020

View this in your browser

Howdy ??

It's been a bit of a.week, here in the UK as COVID-19 looks to be getting a grip on us again. I hope my fellow UK folks are getting on as well as they can be right now.

This week, I've been mainly tying up some loose ends before I get into a very busy period. I've also started streaming again, which included the start of the redesign process of this site. I started critiquing what I currently have, which you can watch here. I'm also going to be producing quite a lot more content for the site now, such as some meaty tutorials, so keep your eyes peeled fo that stuff.

I've found some pretty fun stuff on the internet that you mike like. Firstly, I really like this CSS 3D room. It's pretty mesmerising. It works best in Chromium browser, though.

Staying with demos, this night drive is cool, as is this funky twist on the <details> element.

Gabrielle has launched a beautiful new site that I really like. I am obsessed with the type and colours. It's a rare nice looking dark mode site, too.

Josh has also written an incredibly interactive tutorial on spring physics. Josh is one of my favourite educators. They always produce incredible material.

Finally, this demo made me laugh out loud.

I hope you have a great weekend and I'll catch you next week!

Take it easy, Andy

Piccalilli Newsletter - Issue #52

                Published on the 4th of August 2020
              

View this in your browser

Howdy ??

I hope you're doing good. It's Tuesday afternoon here, I've been in meetings most of the day, and y'know what, I wanna share some cool-as-heck stuff with you, so let's dive in.

The girl with a pearl CSS earring

CSS art that looks like an oil painting of a woman

This is stunning, by Louise. I absolutely love this sort of CSS art and I know that this took them ages to put together. It was well worth the effort though, as it's up there with some of the best CSS art I've ever seen.

Netlify - Thanks a million site

?? Motion Warning ??

A very green landing page for Netlify

This is exceptional work by the good folks at Netlify. They've recently hit 1 million developers who use the service, so they created this great site to celebrate. There's some stunning animation on there and that's no surprise, because the legendary Sarah Drasner has something to do with it! Props to Zach and Hugues, too.

Jack in a box

A 3D Jack in a Box

Mr Steve here with a lovely bit of animation that uses Three JS and TweenMax which are both extremely beyond my tiny brain's capability. As always with Steve's work, it is expertly delivered.

Websites that spark joy

?? Motion Warning (for the sites that feature on there) ??

A landing page featuring lots of whimsical sites

This is a fantastic collection of whimsical sites, by Max. We need a more whimsical web and hopefully, this site will inspire you to make your own weird personal site. I know it certainly makes me want to re-design mine!

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a massive 50% discount off the full ?160 price-point of Learn Eleventy From Scratch, because we made it to issue 50. Use the code FIFTY_ISSUES at the checkout.

Until the next issue, take it easy.

Andy

Howdy 👋

It’s been inevitable for a while now, but today, I am closing the Piccalilli Newsletter.

Thank you for your support as a subscriber, but the current setup is just not compatible with the future of Piccalilli.

This is because I launched a new membership system which has a newsletter as a member perk. As outlined in this post, I want the quality of the newsletter to be much higher, but that will require a lot more time invested in it. This is why it is now a premium perk, rather than a free subscription.

This newsletter is what started Piccalilli and I’m pretty sad to see it go. Over 10,000 of you have signed up to it in the last couple of years which is incredible. That’s not bad for something that started as a humble tweet. Thank you to each and every one of you that have helped project Piccalilli into what it is today.

There will forever be an archive of issues, here and I really hope to see some of y''all in the Piccalilli Members areas, such as the Discord group.

You can also sign up to be updated whenever a new tutorial, course, blog post or quick tip are published here.

Just as a matter of formality: your information has now been deleted inline with GDPR regulations.

Until next time we speak,
Take it easy 💜

Piccalilli Newsletter - Issue #48

                Published on the 7th of July 2020
              

View this in your browser

Howdy ??

Some news this week is that after taking it easy for a couple of weeks, I'm starting to work on new content for this site, including Learn CSS From Scratch!

I've got a good issue for you this week, as we creep ever-closer to the big one: Issue 50.

Vienna Calling

An 8-bit style look and feel website

I adore the look and feel of this site. The attention to detail-even though it's 8-bit style-is stunning. I really like the little touch with the camera integration on the CFP section too.

I'm also speaking at this event, so pop along!

viewBox

?? Motion Warning ??

The viewBox logo, full constructed

More stunning work by Cassie here. It's a lush animation that I only half understand, because SVG is like magic for me. Luckily, I'll learn more because I insta-subscribed to their new newsletter which starts tomorrow!

CSS collector's cabinet

A cabinet full of whimsical collectables including a pokeball, a skull and a cactus

It'll get to the point where I'll rename this newsletter the Lynn Showcase because yet again they have knocked it out of the goddamn park. This is truly stunning.

Thomas Rumbold - Personal Site

A website that is an empty terminal with green text

Good gosh this is excellent, by Thomas. It's a unique concept for a personal site and I very much enjoy playing with it.

Gradient text overlay

?? Motion Warning ??

fossheim.io with a rainbow gradient

Sarah checking in again with more awesome stuff. This gradient is very stylishly done and the motion is butter smooth.

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a cool ?50 discount off the full ?160 price-point of Learn Eleventy From Scratch. Use the code 11TY_PICCALILLI_PAL at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #52

                Published on the 4th of August 2020
              

View this in your browser

Howdy ??

I hope you're doing good. It's Tuesday afternoon here, I've been in meetings most of the day, and y'know what, I wanna share some cool-as-heck stuff with you, so let's dive in.

The girl with a pearl CSS earring

CSS art that looks like an oil painting of a woman

This is stunning, by Louise. I absolutely love this sort of CSS art and I know that this took them ages to put together. It was well worth the effort though, as it's up there with some of the best CSS art I've ever seen.

Netlify - Thanks a million site

?? Motion Warning ??

A very green landing page for Netlify

This is exceptional work by the good folks at Netlify. They've recently hit 1 million developers who use the service, so they created this great site to celebrate. There's some stunning animation on there and that's no surprise, because the legendary Sarah Drasner has something to do with it! Props to Zach and Hugues, too.

Jack in a box

A 3D Jack in a Box

Mr Steve here with a lovely bit of animation that uses Three JS and TweenMax which are both extremely beyond my tiny brain's capability. As always with Steve's work, it is expertly delivered.

Websites that spark joy

?? Motion Warning (for the sites that feature on there) ??

A landing page featuring lots of whimsical sites

This is a fantastic collection of whimsical sites, by Max. We need a more whimsical web and hopefully, this site will inspire you to make your own weird personal site. I know it certainly makes me want to re-design mine!

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a massive 50% discount off the full ?160 price-point of Learn Eleventy From Scratch, because we made it to issue 50. Use the code FIFTY_ISSUES at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #53

                Published on the 11th of August 2020
              

View this in your browser

Howdy ??

We've got a nice mixed-bag of lush websites, cool-as-heck demos and even a VS Code theme today. Let's dive in ?????

Soot Theme

A black and grey theme on a very bright pink background

I've really wanted a monochrome theme for coding for a long time because I spend the vast majority of time in IA Writer-especially now as I'm producing more education content. I find monochrome stuff much less intensive on my eyes when I stare at it for a long time. I couldn't find a theme that I liked, so I made one!

Take Me On

?? Motion Warning ??

A very sketchy-style UI with the main part being my face, half normal and half sketch

Adam here yet again with a demo that makes your jaw hit the floor. This one-along with being expertly created-is super fun, too.

Download animation

A little box with a parachute on its way down, showing 80% complete

This is so excellently done by Aaron. It's a very charming demo indeed!

localghost

A a site with a full screen blue to purple gradient with pixel art styling

I'm a big fan of Sophie and an even bigger fan of their new personal site! I love the pixel art so much. The theme toggle is top-notch, too.

Glass

A glass sphere

Y'all know me by now: I'm a sucker for photorealism with CSS. This is a great example of that, by Oscar.

Patrick Heng

?? Motion Warning ??

A very bright red background with Patrick Heng in huge text, surrounded by circles

We close out with an absolute stunner of a website. There's just so much good stuff on it, so go ahead and play to your heart's content. The squidgyness of the whole UI is my favourite part. Nice work, Patrick!

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

Today is definitely the last day that you can get a massive 50% discount off the full ?160 price-point of Learn Eleventy From Scratch, because you're a subscriber. Use the code FIFTY_ISSUES at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #54

                Published on the 8th of September 2020
              

View this in your browser

Howdy ??

Apologies for the short break this newsletter has been on. I've had a heck of a busy period recently with a big house move going on. We're all settled here now so I thought I'd put together another fancy websites special to get us back underway.

Let's dive in!

Hannah Blair - personal site

A Windows 95 style desktop with a window displaying info about Hannah

I'm extremely into this Windows 95 aesthetic. The attention to detail in this recreation of the classic operating system as the basis of their site is exquisite. Nice work, Hannah!

Jasmine Deporta - personal site

A 50:50 split image with two cursors that mirror each other

The reflection/duplication setup on this site both messes with your eyes and blows your mind. It's a fantastic, creative site, by Jasmine. I'm obsessed with their type choices too.

Etcetera Type

?? Motion Warning ??

Huge black type specimens on a red background

Speaking of type, this site is a beaut. The bold colours and massive, interactive type specimen pages are a real treat.

Postcards from isolation

?? Motion Warning ??

A monochrome site has some 3D skewed art in a window

I love a creative, collaborative, art project at the best of times, but this one, related to COVID-19 isolation is very apt and very good.

Cumbskees - Game

?? Motion And Sound Warning ??

Super colourful game where you have to find snacks

This is absolutely bonkers and great fun-a perfect closer for this issue. Be careful it doesn't overheat your laptop though!!

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

Until the next issue, take it easy.

Andy

Howdy 👋

It’s been inevitable for a while now, but today, I am closing the Piccalilli Newsletter.

Thank you for your support as a subscriber, but the current setup is just not compatible with the future of Piccalilli.

This is because I launched a new membership system which has a newsletter as a member perk. As outlined in this post, I want the quality of the newsletter to be much higher, but that will require a lot more time invested in it. This is why it is now a premium perk, rather than a free subscription.

This newsletter is what started Piccalilli and I’m pretty sad to see it go. Over 10,000 of you have signed up to it in the last couple of years which is incredible. That’s not bad for something that started as a humble tweet. Thank you to each and every one of you that have helped project Piccalilli into what it is today.

There will forever be an archive of issues, here and I really hope to see some of y''all in the Piccalilli Members areas, such as the Discord group.

You can also sign up to be updated whenever a new tutorial, course, blog post or quick tip are published here.

Just as a matter of formality: your information has now been deleted inline with GDPR regulations.

Until next time we speak,
Take it easy 💜

Piccalilli Newsletter - Issue #50

                Published on the 21st of July 2020
              

View this in your browser

Howdy ??

Here we are at a really big milestone for this newsletter. It's issue 50! I can't believe how far this project has come in little over a year. You can see how it looked on Issue 1 here.

To celebrate 50 issues of this newsletter and to say thank you for being a subscriber, I'm giving a massive 50% discount away on the Learn Eleventy From Scratch course. Use the code FIFTY_ISSUES at the checkout to get it for ?80, instead of ?160!

Anyway: enough nostalgia. Let's dig into this all-star issue of Piccalilli!

Style Stage

A very bold homepage which features "Style Stage" in massive letters

This is such an excellent project, which is crafted with expert attention to detail, by Steph. CSS is extremely powerful and projects like this do a great job of demonstrating that, just like CSS Zen Garden did back in the old days.

You can also see my Lobster-based abomination on there too.

Ana Rodrigues's Blog

Ana's blog homepage with sketch effect boxes on a grid background

The look and feel of Ana's blog is exquisite. The sketchy bordered boxes is a lovely touch. Ana is a great writer, so you should definitely subscribe to their RSS.

CSS leaning card effect

Characters from the Good Place on cards, leaning against a surface with perspective

Lynn here yet again with the goods. This is a lush effect that they have created with CSS. I just had to get Lynn in issue 50!

Flowers and filters

A super glitchy purple piece of generative art

Speaking of Piccalilli all-stars: here's Cassie with a great collection of generative art. It's lovely, tranquil work.

How To Make A Dribbble Shot

A generic product design with instructions on the left how to make it Dribbble-worthy

This is loads of fun, by Olivia. A justified poke at Dribbble culture too ??

Zig-zag gradient lab

Zig-zags on the right with some controls on the left

Super friend of the newsletter, Michelle here with a handy tool for making zig-zags with CSS. It's very nicely done indeed.

PopCSSicles

?? Motion Warning ??

Lots of multicoloured popsicles made with CSS

It wouldn't be right to not feature Adam in issue 50 and here he is, with the sole motion warning, blowing our minds, as usual.

ScrollTrigger - Highlight Text

A paragraph of text that has some words highlighted

Last up, another great example of GSAP's ScrollTrigger being handy. The auto-highlighting of text can be super useful and I'll be playing with it. Nice work, as always, by Ryan.

Thank you

I just want to add a little note of thanks here before we wrap up. This whole thing started from a single Twitter thread. I was sick of the front-end discourse being all about JavaScript and boring software engineering stuff, so I decided to do something about it. I had no idea that it would result in Piccalilli being what it is today.

This success hasn't happened because of me though-it's down to all of you. You've all showed me support by subscribing to and sharing this newsletter, reading my tutorials or buying my content. It's that support that enables this project to keep growing and improving and let me tell ya: big exciting things are happening behind the scenes.

All I can say is thank you. You're all the best I can't wait to curate another 50 issues for you all ??

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a massive 50% discount off the full ?160 price-point of Learn Eleventy From Scratch, because we made it to issue 50. Use the code FIFTY_ISSUES at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #51

                Published on the 28th of July 2020
              

View this in your browser

Howdy ??

I hope you're all good on this rather bleak Tuesday (well, here in Cheltenham, anyway). Let's brighten up your day with some nice stuff from around the web!

Remember: to celebrate passing 50 issues of this newsletter and to say thank you for being a subscriber, I'm giving a massive 50% discount away on the Learn Eleventy From Scratch course. Use the code FIFTY_ISSUES at the checkout to get it for ?80, instead of ?160! This expires at the end of the week.

Pure CSS - Sticky-Stacked Cards

A stack of card elements with one scrolling into the stack

This is a very clever trick, by Nils. It's nice to see cool tricks often solved with heaps of JavaScript, solved with CSS, too.

Mandala maker

A Mandala that I made

I bloody love Mandalas-they speak to my obsession with symmetry and order. I've been having fun playing with this generator, especially. Nice work, Amit!

CSS Night Train

?? Motion Warning ??

A night train animation that is masked by the shape of a single light beam

This is a very lush animation by Aysenur. The aesthetic is outstanding, as is the parallax.

Animals sequence

?? Motion Warning ??

A Puffin made out of flat shapes

This is another very nice animation-based demo. The motion is extremely smooth, but that's no surprise, because it's GSAP. Lovely stuff by Abdul.

Ice lollies

A collection of Ice lollies

Last up are some fantastic Ice Lollies, by Ellie. As always, I'm very partial to some CSS art and these are very nicely done.

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a massive 50% discount off the full ?160 price-point of Learn Eleventy From Scratch, because we made it to issue 50. Use the code FIFTY_ISSUES at the checkout.

Until the next issue, take it easy.

Andy

Piccalilli Newsletter - Issue #49

                Published on the 7th of July 2020
              

View this in your browser

Howdy ??

Holy moly, we are very close to issue #50 and let me tell you, I am cooking you up a treat for that one on so many fronts.

Let's not dilly-dally, though, and dive right into this week!

pxl

A pixel generated version of the piccalilli pepper logo

This is rad, by Jhey. I've been messing around with it for hours. It's great how you can export as CSS too. Check out the source because it's really fancy.

Pure CSS ??

A ?? emoji made with CSS

As I said last time they were on here: CurleyWebDev is one to watch. This is another great example of their extreme talent with CSS. Go follow them!

Awful Buttons

An outrages ballooned button sits atop of a normal button

These are indeed awful, but as always, everything Adam touches is absolute gold. Lovely motion on these hover states!

Christopher Kirk-Nielsen - personal site

?? Motion Warning ??

An extremely 80s homepage with Chris in huge, shiny letters

We really are in a golden year for personal site redesigns and I am very on board with it. Chris is checking in here with an absolute stunner. It's really good to see real attention go into focus states too.

Mickey Mouse - single element

Mickey Mouse

This is brilliant, by Jon. I'm a big fan of single element CSS art and this one is up there with some of the best I've seen.

That's all, folks

Thanks for stopping by this week. Maybe you could share this newsletter with a pal? Just forward this email, or share the link.

A reminder: you can get a cool ?50 discount off the full ?160 price-point of Learn Eleventy From Scratch. Use the code 11TY_PICCALILLI_PAL at the checkout.

Until the next issue, take it easy.

Andy

Start Searching Today!

piccalil Sign Up Information

Email Address

Post-Registration Data

Validation

Membership Emails

Piccalilli Newsletter - Issue #54

Hannah Blair - personal site

Jasmine Deporta - personal site

Etcetera Type

Postcards from isolation

Cumbskees - Game

That's all, folks

Piccalilli Newsletter - Issue #53

Soot Theme

Take Me On

Download animation

localghost

Glass

Patrick Heng

That's all, folks

Piccalilli Newsletter - Issue #50

Style Stage

Ana Rodrigues's Blog

CSS leaning card effect

Flowers and filters

How To Make A Dribbble Shot

Zig-zag gradient lab

PopCSSicles

ScrollTrigger - Highlight Text

Thank you

That's all, folks

Piccalilli Newsletter - Issue #48

Vienna Calling

viewBox

CSS collector's cabinet

Thomas Rumbold - Personal Site

Gradient text overlay

That's all, folks

Piccalilli Newsletter - Issue #55

A new format and schedule

Why the change?

Wrapping up

Piccalilli Newsletter - Issue #51

Pure CSS - Sticky-Stacked Cards

Mandala maker

CSS Night Train

Animals sequence

Ice lollies

That's all, folks

Piccalilli Newsletter - Issue #56

Piccalilli Newsletter - Issue #52

The girl with a pearl CSS earring

Netlify - Thanks a million site

Jack in a box

Websites that spark joy

That's all, folks

Piccalilli Newsletter - Issue #48

Vienna Calling

viewBox

CSS collector's cabinet

Thomas Rumbold - Personal Site

Gradient text overlay

That's all, folks

Piccalilli Newsletter - Issue #52

The girl with a pearl CSS earring

Netlify - Thanks a million site

Jack in a box

Websites that spark joy

That's all, folks

Piccalilli Newsletter - Issue #53

Soot Theme

Take Me On

Download animation

localghost

Glass

Patrick Heng

That's all, folks

Piccalilli Newsletter - Issue #54

Hannah Blair - personal site