DEV Community: Stephanie Eckles

Announcing Modern CSS Challenges

Stephanie Eckles — Tue, 28 Jun 2022 15:39:48 +0000

Over the past few years, I've heard feedback that folks wish there was a learning journey available for using the Modern CSS tutorials to build up their CSS skills.

Today I'm very excited to share the pre-launch of Modern CSS Challenges - an educational companion to the tutorials available on ModernCSS.dev! This free series of challenges will push you to use your existing CSS knowledge while also expanding your awareness and ability to use modern CSS features.

I've created this resource as guided practice for building very real-world components. You'll work on responsive design, using custom properties, building scalable layouts, and more. All the while ensuring that you're including features critical for accessibility.

⭐️ As you progress through the challenges, bonus challenges will be unlocked to learn advanced skills and practice cutting-edge CSS.

While free challenges include access to the basic solution, I'm also creating a thorough video series that you'll be able to purchase either per challenge or as package deals. Videos will include full transcripts with code snippets so you can opt to read the content, too.

Sign-up for launch notifications

I'm working through fine-tuning the challenge content and videos, and hope to launch in the next couple months!

I'll also be sharing a discount code for the videos and offering early access via my newsletter.

PS - are you looking for hands-on learning to update your CSS skills? Join my comprehensive virtual CSS workshop starting July 11! Register and learn more about the workshop.

Announcing 12 Days of Web

Stephanie Eckles — Sun, 05 Dec 2021 15:39:28 +0000

12daysofweb.dev is a year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.

Between December 13-24, I'll be releasing a new article. You can subscribe to receive daily email updates so you don't miss one!

You're sure to learn something new about web technologies, and hopefully even be surprised about what the native web can offer. We'll be covering HTML elements you may not have used, web APIs you may have missed, and modern CSS features that you can start using today.

Head over to 12daysofweb.dev to subscribe, and please share this project!

About the author

Hey! I'm Stephanie Eckles @5t3ph, author of ModernCSS.dev, SmolCSS.dev, 11ty.Rocks, and more open source resources for front-end developers.

Keeping Up With CSS

Stephanie Eckles — Fri, 22 Oct 2021 13:43:08 +0000

The following was originally sent out in my weekly newsletter.

If you're reading this, you're probably at least a little bit interested in CSS 😉 And you may have noticed it's moving a record pace in the last couple of years. Chris Coyier did a real quick round-up of some things on their way and even newly supported or with experimental status. Also at the recent TPAC (Technical Plenary and Advisory Committee - aka the W3C Annual Conference) Miriam Suzanne shared a ~6min presentation on the specs she's working on: cascade layers, container queries, and scope.

A frequent question I'm asked is how to keep up with the changes in CSS. Before we get into tactics, keep in mind: while the changes can seem overwhelming, the actual stage of a spec mean that it could be a long ways off before support is great enough to start using the new hotness. That said, if you are interested about something, it's not futile to generate excitement about it! As I've heard Jen Simmons say, browser makers are listening.

// Detect dark theme var iframe = document.getElementById('tweet-1397620650513104900-182'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1397620650513104900&theme=dark" }

Also check out this perspective-altering Twitter thread from Brad Frost. TL;DR - it's not about learning everything right now, it's about having awareness of what's possible to help you develop a solution when you need it!

Did you know the CSSWG posts all their work as issues on GitHub? So one way to discover the status of something is to search there. Then you can actually use the emoji reacts on comments or even add your own comment if you have helpful feedback on the proposal. You can also add your own issue for discussion. And, you can subscribe to issues to keep track of ones you're really interested in.

You can also follow the CSS Working Group on Twitter and/or subscibe to their blog RSS.

I rely a lot on a few folks to surface what's going new and upcoming as well as early demos and explainers. In particular, the following individuals come to mind to follow on Twitter:

I also subscribe to several newsletters, with the following being my favorites for CSS news:

What's missing from my list of folks or sources to follow? I've grown my network a lot this past year but I'm sure I'm missing some amazing content! Comment and let me know!

I'm the author of ModernCSS.dev, an in-depth tutorial series intended to help you upgrade your CSS toolbox.

Build Tools and Extensions I Use In Front-End Projects

Stephanie Eckles — Mon, 06 Sep 2021 20:57:11 +0000

Build Setup

TL;DR - I use Eleventy and Sass CLI, and have created a few other build helpers.

I have fallen in love with the static site generator Eleventy - so much so, that I even own the domain 11ty.Rocks.

Eleventy is a key part of my setup now for every project. The great thing about it is that you can mold it to what works for you, including adding onto its build process.

For an 11ty overview, check out my post about 11ty features.

I typically start a new project from my 11ty Sass Skeleton Starter which includes build processing steps using the Sass CLI.

Another step of my build process related to CSS is using postcss to process my styles with autoprefixer and cssnano. You'll see that in the postbuild step of the skeleton starter.

Interested in using Sass via CLI build commands, but not using 11ty? Here's my gist on a setup which includes Sass processing and Browsersync without a static site generator or task runner.

I've also created a package to help me with developing accessible color palettes called a11y-color-tokens which I use for more complex projects.

Check out 🔗 my full list of front-end resources I've created for developers

VSCode Extensions

My top extensions that I appreciate no matter what language I'm writing (which for me currently means CSS, HTML, JS, C#) include:

Do you do code streaming or recordings? You may be interested in how I setup VSCode for streaming and recording

Let's Build a Jamstack App Together!

Stephanie Eckles — Tue, 01 Jun 2021 13:07:10 +0000

Join me on Twitch as we build an RSS Reader using Eleventy and Modern CSS

We'll start from absolute zero and create project requirements, architect the Eleventy (11ty) project, design in the browser using modern CSS, and all the other bits required to get a project launched.

Building an RSS feed reader will let us explore:

Setting up an 11ty static site project
Creating data sources
Using modern CSS to create a functional UI
Possibly serverless functions (TBD pending "app" architecture)
Other features as determined by the chat participants

In our first stream we created a feature list which you can feel free to comment on!

Stream Schedule

There will be two streams this week - follow on Twitch for go-live notifications:

Tuesday, June 1 - 1 PM CT - check local time
Thursday, June 3 - 9 AM CT - check local time

Sometimes I need to change stream times which I announce over on Twitter.

To find out about future streams, and keep updated on my many other projects, subscribe to my newsletter.

Roundup of my Accessibility Resources

Stephanie Eckles — Sat, 22 May 2021 15:17:16 +0000

May 20 was Global Accessibility Awareness Day (#GAAD) and turns out - I created quite a bit of content about digital accessibility (a11y) last year!

CSS and Accessibility

CSS can strongly impact accessibility. Learn ways you can use CSS to improve accessibility by reviewing this tutorial covering:

Focus Visibility
Focus vs. Source Order
Zoom and Reflow
Sizing Targets
Respecting User Settings

Color Contrast and Interactive Elements

Despite high general awareness of color contrast for a11y, what can be missed is how to handle contrast across states of interactive elements, like buttons.

Learn more about button contrast and generate an accessible palette with the help of ButtonBuddy.dev

Practice Evaluating Inaccessible Experiences

So, what does an inaccessible experience look like?

Try out evaluating this test site (motion warning).

And then practice identifying and submitting a review of issues by opening a PR into the project.

Automate Generating Accessible Color Palettes

Selecting a color contrast safe palette used to be what I spent a significant amount of time on.

The a11y-color-tokens package automates developing contrast safe text and background color pairs.

More info and package download >

Create Accessible, Cross-Browser Form Styles

Forms rule the web, & can quickly create accessibility issues, too. HTML semantics & carefully applied CSS are required for accessible form inputs.

Learn how to develop cross-browser, accessible form styles with my full egghead.io video course.

Learn About Common a11y Failures

On the podcast I co-host - Word Wrap - we did a two-part mini-series on a11y topics you might be missing that apply to all websites.

Drop a comment of your favorite accessibility resources, or something you learned from these!

Have you experimented with CSS container queries?

Stephanie Eckles — Sun, 02 May 2021 16:26:55 +0000

CSS container queries have landed as an experiment in Chrome Canary! You can enable them under chrome://flags.

Have you had a chance to experiment with them yet? How do you feel about them being available in CSS?

Resources if you're just hearing about them now:

Miriam Suzanne is the proposal author, and you should start with her explainer
Check out her CodePen collection of demos
You might like highlights from my Twitch stream of exploring them for the first and second time
A quick start guide from David A. Herron
Ahmad Shadeed's excellent overview with practical examples
And links to more within Stu Robson's repo Awesome-Container-Queries

ModernCSS.dev First Birthday Stream + Giveaway

Stephanie Eckles — Fri, 09 Apr 2021 13:56:28 +0000

Happy first birthday to ModernCSS.dev! 🎉

This past year, my life was literally changed thanks to writing the ModernCSS series. And it all started on April 9, 2020 with my breakout article: Keep the Footer at the Bottom: Flexbox vs. Grid

Thanks to all of you who have supported the series!

Celebration Activities: CSS AMA Stream + Giveaway

I'd love for you to join me today at noon central (check your local time) for a CSS AMA stream over on Twitch. You can ask about a ModernCSS article, or anything else CSS-related! The stream will last about 45 minutes.

Join Twitch stream or watch replay

Birthday Giveaway

I'm also going to be giving away a one-year egghead membership to one lucky person who shares their favorite episode of ModernCSS + a tip they learned. Post on Twitter with the article link and hashtag #ModernCSSBirthday, or drop a comment here if you aren't on Twitter. Links must be posted by Saturday, April 10 at 6 AM Central after which a random winner will be selected.

More To Be Shared...

...over on my Twitter throughout the day, so follow if you aren't already - @5t3ph

Fresh on ModernCSS: Episode 27

Today we're kicking off the celebration with the newest episode: #27 - Modern CSS Upgrades To Improve Accessibility. I do my best to design accessible tutorials and callout any accessibility specifics. Writing this dedicated article on specific WCAG Success Criteria and how modern CSS helps provide solutions was really important to me to have as part of the series. I hope you learn some new techniques, and get some new resources to help you make the web more accessible!

Psst... there's a bonus new release linked in the tutorial 🔍

One way to help support my content creation is to buy me a coffee. You can also select mentoring and front-end review options.

ModernCSS.dev One Year Stats and Reflections

Over half a million people have read ModernCSS articles in the past year, and the site now averages 60K unique visitors per month. Now the reality is that most of those visits are in and out - a quick scan, maybe a copy/paste, and move on. Over half of visitors make it about half-way through an article, and about 14% at least scroll to the bottom. Of those, only 4.5% are spending time really reading the content and possibly going through the tutorial exercise.

My top articles are pretty consistently led with my 4-part mini-series related for form-field styling, here's part one about radio button styling. After that, folks seem to be interested most in making equal height elements, creating "back-to-top" links, my guide to centering in CSS, and my guide to button styling.

Quick reminder: registration is open for my July CSS workshop in partnership with Smashing Conferences!

Guess what? Someone out there is waiting to hear your unique perspective about a topic that will finally make an idea click or help them solve a problem. DEV is a great place to start writing, particularly using the #todayilearned or #showdev topics if you want to test it out and start small. And if you have a bigger idea, consider pitching it! I've had great experiences working with CSS-Tricks, Smashing Magazine, and egghead - plus they all pay for articles 😉

Hope to see you on the stream, and your entries for the giveaway!

ONE WEIRD TRICK JS DEVS aren't teaching you about

Stephanie Eckles — Thu, 01 Apr 2021 15:20:00 +0000

Semantic HTML.

Accessibility starts with semantic HTML.

That's it. That's the trick.

Places to start learning:

If you like videos and recognize the web is made of forms, check out my two-hour egghead video course: "Accessible Cross-Browser CSS Form Styling"

Developing For Imperfect: Future Proofing CSS Styles

Stephanie Eckles — Mon, 29 Mar 2021 22:29:12 +0000

This is episode #26 in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

How do we plan future-proof styles in a world with an infinite degree of device and user ability variance? Let's explore how things can break and how modern CSS provides solutions.

This episode will cover handling for:

variable content length and overflow
unpredictable media sizes
internationalization
accessibility-related user settings

We'll explore creating a robust comment thread component.

Continue reading the full article on ModernCSS.dev >

My Top CSS Tips As Shared on Twitter - Part 2

Stephanie Eckles — Sat, 20 Mar 2021 13:51:12 +0000

Hi! I'm @5t3ph on Twitter (and most other places on the web) and here are more of my top shared CSS tips!

I've also released a dedicated project for modern CSS snippets, so be sure to also check out SmolCSS.dev!

"The One About Centering"

// Detect dark theme var iframe = document.getElementById('tweet-1355858619716100098-489'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1355858619716100098&theme=dark" }

"PhotoShop" Effects with `mix-blend-mode`

// Detect dark theme var iframe = document.getElementById('tweet-1356221007770472450-684'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1356221007770472450&theme=dark" }

The `ex` Unit

// Detect dark theme var iframe = document.getElementById('tweet-1361384737227608068-211'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1361384737227608068&theme=dark" }

Updating Custom Properties With JS

// Detect dark theme var iframe = document.getElementById('tweet-1357670558981357568-780'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1357670558981357568&theme=dark" }

Visualizing the `place-` Shorthand Properties

// Detect dark theme var iframe = document.getElementById('tweet-1363607183263416330-149'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1363607183263416330&theme=dark" }

SmolCSS Avatar List Component

Lots of tips packed into this component, be sure to click through to learn more!

// Detect dark theme var iframe = document.getElementById('tweet-1363468765099225088-585'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1363468765099225088&theme=dark" }

SmolCSS "Smol Stack" Layout

// Detect dark theme var iframe = document.getElementById('tweet-1363106377074376707-745'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1363106377074376707&theme=dark" }

Nevertheless, 5t3ph Coded and (Mostly) Conquered Imposter Syndrome

Stephanie Eckles — Mon, 08 Mar 2021 18:00:04 +0000

Last year I wrote my first Nevertheless post, and I recently re-read it to reflect on my career progress then versus now (if you're interested in my "origin" story, head over to that post!)

At the end of that post, I had listed one goal that I was starting with for 2020:

...for my own wellbeing, I made a goal for 2020 to produce a web development series for beginners. As of this writing, I have published 12 episodes 🎉 I'm still getting used to the video format but you never know until you try, right? And based on reception on DEV, it seems it might have been the right time to appeal to beginners.

Of course, we had started to hear about COVID. Myself and my family were prepared to take it very seriously, but we hadn't been impacted by restrictions or any local cases at the time I published that.

But that initial goal became a catalyst for a whole pack of side projects over the last year. Coding for fun was a welcome distraction as I navigated pandemic life as a full-time working mom of two.

Those side projects + the pandemic causing more companies to be remote-friendly led to a major job change. Suddenly, my geographic boundaries that I thought I was career-trapped in were dropped (as mentioned in my first post, I live in "flyover country" aka not Silicon Valley, or NYC, or insert-whatever-other-hot-at-the-moment-US-tech-city).

And gosh darn it - I'm proud of my career and personal growth over the last 12 months! I've discovered that I was harboring a lot of doubt despite doing a lot of work that I was proud of at my previous jobs. And I realized it had more to do with being in an environment where although my direct team members supported me, the corporate and "midwest culture" barriers kept me locked into imposter syndrome for nearly 13 years of my career.

When I started making that video series for my first goal, I just wanted to help anyone who happened to wander across it. And those first videos are definitely rough production value, but I'm happy with the overall flow of the course and the content. I've had a few reviews that have let me know it did help some folks get started with web development! 😊

Along the way, I got back into Twitter (@5t3ph) which I'd kind of taken a 4-year hiatus from while I was figuring out life again as a working mom of two.

And I discovered several conversations were still happening - nearest to my heart was whether CSS was a programming language and related disdain for it. But at this point, I had some more years under my belt of working with folks with varied skillsets, and in particular, those who were hired as full-stack and absolutely wanted to avoid CSS. And what I knew is that a lot of those feelings were from trying to do things with less modern CSS.

So - ModernCSS.dev was born, which is my blog about modern CSS solutions for old CSS problems. It features in-depth, long-form tutorials that are intended to be practical examples of using modern CSS. I try to write them in a way that is understandable and helpful for a wide range of skillsets. And I emphasize any accessibility considerations throughout solutions as well.

I also have been blogging other things here on DEV and currently have 89 published posts (including the beginner's video series transcript and cross-posts of ModernCSS articles).

In April 2020, I serendipitously happened to respond to a Twitter thread from Joel Hooks - who I didn't realize was a co-founder of egghead - with a link to ModernCSS. This led to me becoming an egghead instructor which really let me improve my screencasting skills. I recently released my first full course there: Accessible Cross-Browser CSS Form Styling.

Another premise that flowed from creating ModernCSS tutorials was how important play is in my own work. Without allowing space to play, I would not have achieved an understanding of all kinds of development concepts, from CSS to JS to React to APIs to databases.

And I noticed that while we have some awesome environments that encourage play to learn, like CodePen, those tools usually are focused on one small experience. Or things that are too experimental (or inaccessible) to be used in more practical scenarios that we actually encounter for everyday work.

Since I'd been on the web awhile, I got to thinking about a pioneering project from when I was learning about CSS which was CSS Zen Garden. I did some research to see if any comparable project existed, and finding that it didn't, I created StyleStage.dev. Style Stage is a modern CSS showcase styled by community contributions. There's lots of info about what it is and how it works on the main page and it's always open to more contributors! But the idea is that it provides a way for you to think about styling of a page holistically, and to learn about and practice modern CSS. The project launched after a week of work in July 2020, and at this moment, there are 54 styles!

I've talked about Style Stage quite a bit, most recently in this recorded Twitch stream if you'd like to learn more about what it is and how to contribute!

Style Stage was one of my first Eleventy projects, and Eleventy became an enabler for basically all of the projects that followed. Eleventy (11ty) is a static site generator and if you want to learn more - guess what? I have a whole side project about it, haha! Check out 11ty.Rocks for resources that can help you get started or advance your existing projects.

In the midst of doing those projects, my confidence was growing. Folks were liking what I was putting out there, including some that I had admired a long time (which left me pretty starstruck - like what? Me? Former farm girl? 😱).

For much of my career, I thought that if I couldn't make something perfect I had no business releasing it. This is extremely flawed logic, and is why we often talk about imposter syndrome.

But as I built a flow of creating projects, I also started to embrace instantly releasing them which I highly recommend to help you get past imposter syndrome. Yes, it's extremely scary at first! But - the more you do it, the less scary it becomes.

Eleventy let me boilerplate certain aspects, and I created additional tools to help me create color palettes and social share images. Those freed me to focus on architecting my idea and preparing content and design and ensuring accessibility. Then - out the door it went!

I also decided to submit my writing to some additional publications (because it sure doesn't hurt to get paid sometimes!), which was a wonderful experience to work with talented editors:

Create Responsive Image Effects With CSS Gradients And aspect-ratio - Smashing Magazine
CSS-Tricks author profile - 3 articles
Use the Intersection Observer API For Analytics Events - egghead

And as I created content and tried out various formats, I was able to learn more about appealing to different learning styles. This led to the following projects:

SmolCSS.dev - Minimal snippets for modern CSS layouts and components
ButtonBuddy.dev - Learn about accessible button contrast then generate your own accessible button color palette

I've also had the privilege to speak at some events and on streams:

CSS Masters - discussing Style Stage and some of my background and approach to CSS
LondonCSS - Talk focusing on Style Stage
Colbyashi Maru - Twitch stream with Colby Fayock where SmolCSS.dev originated

I will be teaching a workshop for Smashing Conference in July called "Level-Up With Modern CSS" that is now available for early-bird registration!

More past and upcoming events are listed on my main site

Oh, and I co-host a podcast called Word Wrap with my long-time friend and a super excellent developer, Claire Lipskey.

Whew! Thank you for attending my self-retro 🤣 If you still want to know more, I recently talked with Toddy Libby on the Front End Nerdery podcast (also available as a video).

I would LOVE to know what your accomplishments were this year and how you have worked to kick imposter syndrome to the curb!