Tag: 2019

Thank You (2019 Edition)

One of our yearly traditions here is to thank all y’all CSS-Tricks readers at the passing of a new year. It means a lot to me that people come here and read the words I write, and the words of all our staff and guest authors that contribute here as well.

Thank you!

Plus, we dig into the numbers this time of year. I’ve always tried to be open about the analytics on this site. Looking at them year after year always serves up a good reminder: niche blogging is a slow game. There’s no hockey-stick growth around here. Never has been, never will be. The trick is to build slowly over time, taking care of the site, investing in it, working hard, and with some luck, numbers trend upward. This year, overall traffic didn’t even do that. Sometimes you gotta fight for what you’ve got! Growth came in other areas though. Let’s take a gander.

It was January 1st, 2019 that the current design of this site (v17) debuted, so this entire year overlaps perfectly with that. I’ll certainly be tempted to release major iterations with that same timing in the future for comparison sake.

Overall numbers

Google Analytics is showing me 90.3 million pageviews, which is a bit of a decline from 2018 at over 91 million. A 1% decline. Not a big problem, but of course I’d way rather see a 1% increase instead. We’ll take that as a kick in the butt to produce a stronger year of content to hopefully more than win it back.

Looks like we published 726 articles over the year, which includes link posts and sponsored links. A good leap from 636 last year and 595 the year before that. Clearly quantity isn’t the trick to traffic for us.

I don’t know that we’ll slow down necessarily. I like the fact that we’re publishing multiple times a day with noteworthy links because I like to think of us as a timely industry publication that you can read like a daily or weekly newspaper in addition to being an evergreen reference. I don’t think we’ll invest in increasing volume, though. Quality moves the needle far more than quantity for this gang.

There is a bunch of numbers I just don’t feel like looking at this year. We’ve traditionally done stuff like what countries people are from, what browsers they use (Chrome-dominant), mobile usage (weirdly low), and things like that. This year, I just don’t care. This is a website. It’s for everyone in the world that cares to read it, in whatever country they are in and whatever browser they want to. We still track those numbers (because Google Analytics automatically does), so we can visit them again in the future and look historically if it gets interesting again. Taking a quick peak, however, it’s not much different than any other year.

Performance numbers are always fascinating. Google Analytics tells me the average page load time is 5.32s. On my fast home internet (even faster at the office), the homepage loads for me in 970ms, but it’s more like 30 seconds when throttled to “Slow 3G.” “Fast 3G” is 8 seconds. Sorta makes sense that most visitors are on faster-than-3G connections since the traffic is largely skewed toward desktop. No cache, we’re talking 54 requests (including ads) and 770KB (fits on a floppy). It’s good enough that I’m not itching to dig into a performance sprint.

Top posts of the year

You’d think we would do a section like this ever year, but because of our URL structure, I haven’t had easy access to figure this out. Fortunately, in March 2019, Jacob Worsøe helped us add some Custom Dimensions to our Google Analytics so we can track things like author and year with each pageview.

That means we can find things, like the most popular articles written in 2019, rather than just the most popular articles looked at in 2019 — regardless of when they were was written. Here’s a graph Jacob sent:

Here’s that list in text:

  1. The Great Divide
  2. Change Color of SVG on Hover
  3. New ES2018 Features Every JavaScript Developer Should Know
  4. An Introduction to Web Components
  5. Where Do You Learn HTML & CSS in 2019?
  6. The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
  7. Look Ma, No Media Queries! Responsive Layouts Using CSS Grid
  8. How to Section Your HTML
  9. Prevent Page Scrolling When a Modal is Open
  10. CSS Animation Libraries

8.25% of traffic came from articles written this year. If you look at where these articles fall on the list of all URLs in 2019 (not just those published in 2019), the top article starts at #75! Hard to compete with older articles that have had time to gather SEO steam. This kind of thing makes me want to get re-focused on referential content even more.

Interesting that our top article was editorial, but everything else is referential. I like a little editorial here and there, but clearly our bread and butter is how-to technical stuff.

Search

There are two aspects of search that are interesting to me:

  1. What do people search for right here on the site itself?
  2. What search terms do people use on Google to find this site?

On-site search is handled by Jetpack’s Elasticsearch feature, which I’m still quite liking (they are a sponsor, but it’s very true). This also means we can track its usage pretty easily using the analytics on my WordPress.com dashboard. I also installed a Search Meter plugin to track search form entries. I can look at Google searches through the SiteKit plugin, which pulls from Google Search Console.

Here are all three, with duplicates removed.

Jetpack Search Data Search Meter Search Data Google Search Data
1 amazon (?!) flexbox flexbox
2 flexbox grid css grid
3 css tricks flex css tricks
4 flexbox guide animation css important
5 css grid svg css triangle
6 css flex position mailto link
7 grid guide css grid vertical align css
8 css important css css comment
9 the great divide border css shapes
10 css shapes background css background image opacity

There is a bit of a fat head of traffic here with our top 10 pages doing about 10% of traffic, which syncs up with those big searches for stuff like flexbox and grid and people landing on our great guides. If you look at our top 100 pages, that goes out to about 38% of traffic, and articles past that are about 0.1% of traffic and go down from there. So I’d say our long tail is our most valuable asset. That mass of articles, videos, snippets, threads, etc. that make up 62% of all traffic.

Social media

It’s always this time of year I realize how little social media does for our traffic and feel stupid for spending so much time on it. We pretty much only do Twitter and it accounts for 1% of the traffic to this site. We still have a Facebook page but it’s largely neglected except for auto-posting our own article links to it. I find value in Twitter, through listening in on industry conversations and having fun, but I’m going to make a concerted effort to spend less time and energy on our outgoing social media work. If something is worth tweeting for us, it should be worth blogging; and if we blog it, it can be auto-tweeted.

But by way of numbers, we went from 380k followers on @css to 430k. Solid growth there, but the rate of growth is the same every year, to the point it’s weirdly consistent.

I also picked up an Instagram account this year. Haven’t done much there, but I still like it. For us, I think each post on Instagram can represent this little opportunity to clearly explain an idea, which could ultimately turn into a nice referential book or the like someday. A paultry 1,389 followers there.

Newsletter

I quite like our newsletter. It’s this unique piece of writing that goes out each week and gives us a chance to say what we wanna say. It’s often a conglomeration of things we’ve posted to the site, so it’s an opportunity to stay caught up with the site, but even those internal links are posted with new commentary. Plus, we link out to other things that we may not mention on the site. And best of all, it typically has some fresh editorial that’s unique to the newsletter. The bulk of it is done by Robin, but we all chip in.

All that to say: I think it’s got a lot of potential and we’re definitely going to keep at it.

We had the biggest leap in subscribership ever this year, starting the year at 40k subscribers and ending at 65k. That’s 2.5× the biggest leap in year-over-year subscribers so far. I’d like to think that it’s because it’s a good newsletter, but also because it’s integrated into the site much better this year than it ever has been.

Comments

Oh, bittersweet comments. The bad news is that I feel like they get a little worse every year. There is more spam. People get a little nastier. I’m always teetering on the edge of just shutting them off. But then someone posts something really nice or really helpful and I’m reminded that we’re a community of developers and I love them again.

4,710 approved comments. Up quite a bit from 3,788 last year, but still down from 5,040 in 2017. Note that these are approved comments, and it’s notable that this entire year we’ve been on a system of hand-approving all comments before they go out. Last year, I estimated about half of comments make it through that, and this year I’d estimate it at more like 30-40%. So, the straight-up number of comments isn’t particularly interesting as it’s subject to our attitude on approval. Next year, I plan to have us be more strict than we’ve ever been on only approving very high-quality comments.

I’m still waiting for WordPress to swoon me with a recommitment to making commenting good again. 😉

Forums

There were a couple of weeks just in December where I literally shut down the forums. They’ve been teetering on end-of-life for years. The problem is that I don’t have time to tend to them myself, nor do I think it’s worth paying someone to do so, at least not now. Brass tacks, they don’t have any business value and I don’t extract enough other value out of them to rationalize spending time on them.

If they just sat there and were happy little forums, I’d just leave them alone, but the problem is spam. It was mostly spam toward the end, which is incredibly tedious to clean up and requires extra human work.

I’ve kicked them back on for now because I was informed about a spam-blocking plugin that apparently can do incredible work specifically for bbPress spam. Worth a shot!

Interestingly, over the year, the forums generated 7m pageviews, which is 7.6% of all traffic to the site. Sorta makes sense as they are the bulk of the site URLs and they are user-generated threads. Long tail.

Goal review

Polish this new design. Mixed feelings. But I moved the site to a private GitHub repo half-way through the year, and there have been 195 commits since then, so obviously work is getting done. I’ll be leaving this design up all of 2020 and I’d like to make a more concerted effort at polish.

Improve newsletter publishing and display. Nailed this one. In March, we moved authoring right here on the site using the new Gutenberg editor in WordPress. That means it’s easier to write while being much easier to display nicely on this site. Feels great.

☯️ Raise the bar on quality. I’m not marking it as a goal entirely met because I’m not sure we changed all that much. There was no obvious jump upward in quality, but I think we do pretty good in general and would like to see us continue to hold steady there.

Better guides. We didn’t do all that much with guides. Part of the problem is that it’s a little confusing. For one thing, we have “guides” (e.g. our guide to flexbox) which is obviously useful and doing well. Then there are “Guide Collections” (e.g. our Custom Properties Guide) which are like hand-picked and hand-ordered selections of articles. I’m not entirely sure how useful those hand-curated guides are, especially considering we also have tag pages which are more sortable. The dudes with the biggest are the hand-written articles-on-steroids types, so that’s worth the most investment.

New goals

100k on email list. That would be a jump of 35k which is more than we’ve ever done. Ambitious. Part of this is that I’m tempted to try some stuff like paid advertising to grow it, so I can get a taste for that world. Didn’t Twitter have a special card where people could subscribe right from a Tweet? Stuff like that.

Two guides. The blog-post-on-steroids kind. The flexbox one does great for us, traffic-wise, but I also really enjoy this kind of creative output. I’ll be really sad if we can’t at least get two really good ones done this year.

Have an obvious focus on how-to referential technical content. This is related to the last goal, but goes for everyday publishing. I wouldn’t be mad if every darn article we published started with “How To.”

Get on Gutenberg. The new WordPress block editor. This is our most ambitious goal. Or at least I think it is. It’s the most unknown because I literally don’t know what issues we’re going to face when turning it on for more than a decade’s worth of content that’s been authored in the classic editor. I don’t think it’s going to hurt anything. It’s more a matter of making sure:

  1. authoring posts has all the same functionality and conveniences as we have now,
  2. editing old posts doesn’t require any manual conversion work, and
  3. it feels worth doing.

But I haven’t even tried yet, so it’s a don’t-know-what-I-don’t-know situation.


Again, thanks so much!

I was thinking about how stage musicians do that thing where they thank their fans almost unfailingly. Across any genre. Even if they say hardly anything into a microphone during the performance, they will at least thank people for coming, if not absolutely gush appreciation at the crowd. It’s cliché, but it’s not disingenuous. I can imagine it’s genuinely touching to look out across a room of people that all choose to spend a slice of their lives listening to you do your thing.

I feel that way here. I can’t see you as easily as looking out over a room, but I feel it in the comments you post, the emails you send, the tweets you tagged us in, and all that. You’re spending some of your life with us and that makes me feel incredibly grateful. Cheers.

🍻

The post Thank You (2019 Edition) appeared first on CSS-Tricks.

CSS-Tricks

, ,

A Recap of Frontend Development in 2019

I noted Trey Huffine’s 2018 version of this article in The Great Divide.

To put a point on this divide a bit more, consider this article by Trey Huffine, “A Recap of Frontend Development in 2018.” It’s very well done! It points to big moments this year, shows interesting data, and makes predictions about what we might see next year. But it’s entirely based around the JavaScript ecosystem.

My point was (and still is) that front-end development is more than the JavaScript ecosystem. However, I certainly admit the movings-and-shakings of the JavaScript world is a big deal and probably generally more interesting to watch for most devs.

What happened this year outside of JavaScript land? Well it’s weird. Things move slower, so it’s harder to pin things — even to years — quite as easily. For example, there was plenty of talk and usage of prefers-reduced-motion in CSS, but we kinda “got” that in 2017. Lots of people have gotten excited about variable fonts this year, but that’s also been years in the making. Subgrid recently dropped in Firefox, so I guess that’s a 2019 thing, but we’ll see slow adoption of it for years to come. For more of this exciting (but not necessarily brand new) stuff, check out Adam Argyle and Una Kravets Chrome Dev Summit 2019 presentation.

HTML is evolving at an even slower pace. Occasionally, something will feel new. I got excited about <dialog> this year, even though it first appeared in 2014, but the experts are saying we probably shouldn’t use it. Elements like <details> are getting more exciting as Edge-goes-Chromium because they’ll be getting more cross-browser support, but it’s no picnic. There’s just not much exciting to talk about in HTML, at least to me, aside from sort of philosophical approaches to it, like JAMstack.

The two most exciting HTML things to me: native lazy loading and no-jank fluid image loading.

But back to Trey’s post, the highlights are:

  • React is huge. jQuery isn’t falling.
  • Hooks was a huge release and change for React, and React is generally pushing fast on lots of big stuff.
  • TypeScript continues to grow.
  • Vue 3 is a long time coming and a bit controversial.
  • Svelte 3 is a small player but has lots of interest.
  • Angular 9 is almost here and has a strong base.
  • JavaScript itself continues to have yearly releases. ES2019 has nice stuff and ES2020 is even better.
  • Flutter is challenging React Native for cross-platform development, an impressive feat since there are so many more React devs than Dart devs.
  • JAMstack, PWAs, GraphQL, and CSS-in-JS are all growing in usage and developer sentiment.
  • VS Code is dominant.

Trey also picked out some really great blog posts and presentations from the year at the end, so don’t miss those!

If you dig predictions, then you might be interested in Sean Goresht’s big one for 2020.

Direct Link to ArticlePermalink

The post A Recap of Frontend Development in 2019 appeared first on CSS-Tricks.

CSS-Tricks

, , ,
[Top]

What We’re Reading, 2019

There are so, so, so (so) many things to read out there on the internet. So many, in fact, that it’s difficult to keep up with everything.

But, hey, we’ve got your back! It’s our job to surface the best of the best and share it with you right here. That’s why it’s a good idea to subscribe to this site and newsletter. Why subscribe to hundreds of sites when you can follow one, right?

Where do we find the links that we share? It truly runs the gamut, but we’ve decided to list our favorite sources.

Chris Coyier

  • Labnotes – Assaf Arkin’s newsletter is great mishmash of timely, interesting, and funny tidbits with a developer twist.
  • Code with Veni is new just this year and consistently has great links from underrepresented coders
  • Codrops Collective always leaves me with like five open tabs
  • I get quite a few weekly newsletters entirely about front-end development, like Friday Frontend
  • WordPress Tavern does solid WordPress journalism.
  • Shoutout to Dave who had a strong year of bloggin’.
  • I love longtime classic blogs, like Waxy Waxy, Kottke, and Daring Fireball
  • DEV is blowing up and I end up reading many articles there each week. Meanwhile, it feels like Medium is slowing down significantly when it comes to developer-focused writing.
  • I obviously look at CodePen every day, which helps me keep an eye on what front-end developers are playing with.
  • I’d say the main value I get from Twitter is getting great links and thoughts that are a smidge beyond my regular reading. I’m in some community Slacks too, but find it far more conversational and less link-heavy.

Sarah Drasner

  • Scotch.io consistently has great stuff for pretty much every tech stack you can think of. They also do a great job of finding new authors.
  • Cassidy William’s newsletter is short and sweet, and has coding puzzles in every issue.
  • I really love PonyFoo’s quality and style. They mix it up and keep it interesting. The design is nice and unique as well!
  • I’m a Vue core team member and love to keep on top of what’s going on in the community with the Vue Newsletter. It’s curated by a team of really passionate educators and it shows — every newsletter is well curated.
  • I love Data Sketches so very much. It’s a brilliant collaboration between Shirley Wu and Nadieh Bremer, and shows exceptional mastery of technical and illustrative skillsets to convey data. Worth a read for sure.
  • Like Chris, I love Codrops Collective. You can learn so much about UX animation there.
  • Speaking of animation, Val Head has a wonderful UI Animation Newsletter. She’s kept it up for years, and it’s rich with resources from the fanciful to the practical.
  • Rachel Andrew has been the editor-in-chief of Smashing Magazine for the past year or so, and the content has been wonderful. Smashing is constantly a source of great articles and information about front-end development and design.
  • I just saw Jared Palmer’s Blog a week ago and I really enjoy the writing there. It’s informative, interesting and humorous.
  • Our own Robin Rendle has a great newsletter all about typography. I don’t know that much about type, so the poetic deep dives are lovely and informative. It’s great for die-hard fans and newbies alike!

Geoff Graham

  • W3C Cascading Style Sheets Feed – Getting news straight from the horse’s mouth!
  • CSS {In Real Life} – Michelle Barker is has a pragmatic approach to CSS and does an excellent job explaining complex concepts in a way that’s pretty easy to grok.
  • The History of the Web – This is probably the opposite of “late-breaking” news, but Jay Hoffman’s newsletter tells yesteryear’s stories of the web, which is great context for things we see evolving today.
  • CodePen Post Picks – CodePen is full of great minds sharing ideas and the team over there does an excellent job curating noteworthy posts.
  • RWD Weekly Newsletter – Justin Avery covers responsive design news (obviously) but also provides oodles of other front-end-related goodies.
  • The Work Behind the Work – This isn’t front-end stuff but I like how this site documents the creative process behind famous works that we know and love.
  • Adactio – Jeremy Keith posts regularly and thoughtfully.
  • Bruce Lawson – He usually has a weekly link dump that I find useful for uncovering things that would otherwise slip under my radar.
  • Mozilla Hacks – I could just as easily link up to other browser news, but Mozilla seems to be innovating fast and I like seeing where they’re headed.
  • Piccalilly Newsletter – Andy Bell collects awesome demos.

Robin Rendle

  • Ire Aredinokun’s blog Bits of Code is an endless treasure trove of information about front-end development best practices and each post makes me ooo and Alice with delight.
  • For type and design news I always keep an eye out for Typographica’s year in review, and this year’s edition is just as interesting as the others. They collect a ton of typeface reviews from the releases of the past 12 months and explore what makes each design tick.
  • Likewise, David Jonathan Ross’s Font of the Month Club is essential reading for designers. David gives provides a typeface that’s a work in progress in each issue and then writes diligently about the process behind it. It’s always a wonder.
  • Tim Kadlec’s blog is a great source of info about accessibility, web performance and general front-end development news.
  • I’ve been reading a bunch of great newsletters lately and Chip Scanlan’s writing advice is one that certainly stands out from the crowd.
  • Adrian Roselli’s blog never fails to impress with a ton of deep-dives into some obscure front-end problem or issue I’ve never heard about before.

Where do you look to stay updated? Share your list of favorites with us!

The post What We’re Reading, 2019 appeared first on CSS-Tricks.

CSS-Tricks

, ,
[Top]

A Recap of Frontend Development in 2019

I noted Trey Huffine’s 2018 version of this article in The Great Divide.

To put a point on this divide a bit more, consider this article by Trey Huffine, “A Recap of Frontend Development in 2018.” It’s very well done! It points to big moments this year, shows interesting data, and makes predictions about what we might see next year. But it’s entirely based around the JavaScript ecosystem.

My point was (and still is) that front-end development is more than the JavaScript ecosystem. However, I certainly admit the movings-and-shakings of the JavaScript world is a big deal and probably generally more interesting to watch for most devs.

What happened this year outside of JavaScript land? Well it’s weird. Things move slower, so it’s harder to pin things — even to years — quite as easily. For example, there was plenty of talk and usage of prefers-reduced-motion in CSS, but we kinda “got” that in 2017. Lots of people have gotten excited about variable fonts this year, but that’s also been years in the making. Subgrid recently dropped in Firefox, so I guess that’s a 2019 thing, but we’ll see slow adoption of it for years to come. For more of this exciting (but not necessarily brand new) stuff, check out Adam Argyle and Una Kravets Chrome Dev Summit 2019 presentation.

HTML is evolving at an even slower pace. Occasionally, something will feel new. I got excited about <dialog> this year, even though it first appeared in 2014, but the experts are saying we probably shouldn’t use it. Elements like <details> are getting more exciting as Edge-goes-Chromium because they’ll be getting more cross-browser support, but it’s no picnic. There’s just not much exciting to talk about in HTML, at least to me, aside from sort of philosophical approaches to it, like JAMstack.

The two most exciting HTML things to me: native lazy loading and no-jank fluid image loading.

But back to Trey’s post, the highlights are:

  • React is huge. jQuery isn’t falling.
  • Hooks was a huge release and change for React, and React is generally pushing fast on lots of big stuff.
  • TypeScript continues to grow.
  • Vue 3 is a long time coming and a bit controversial.
  • Svelte 3 is a small player but has lots of interest.
  • Angular 9 is almost here and has a strong base.
  • JavaScript itself continues to have yearly releases. ES2019 has nice stuff and ES2020 is even better.
  • Flutter is challenging React Native for cross-platform development, an impressive feat since there are so many more React devs than Dart devs.
  • JAMstack, PWAs, GraphQL, and CSS-in-JS are all growing in usage and developer sentiment.
  • VS Code is dominant.

Trey also picked out some really great blog posts and presentations from the year at the end, so don’t miss those!

If you dig predictions, then you might be interested in Sean Goresht’s big one for 2020.

Direct Link to ArticlePermalink

The post A Recap of Frontend Development in 2019 appeared first on CSS-Tricks.

CSS-Tricks

, , ,
[Top]

Blue Beanie Day 2019

November 30th, the official “Blue Beanie Day,” has come and gone. I’m not sure I ever grokked the exact spirit of it, but I’ve written about what it means to me. Last year:

Web standards, as an overall idea, has entirely taken hold and won the day. That’s worth celebrating, as the web would be kind of a joke without them. So now, our job is to uphold them. We need to cry foul when we see a browser go rogue and ship an API outside the standards process.

Building off that, I’d add the need to prevent browsers from breaking things that have worked for half a decade, like iOS 13 did with CSS parallax.

Zeldman, the Blue Beanie Day champion, isn’t particularly optimistic:

Mainly, though, Blue Beanie Day is receding from view because our industry as a whole thinks less and less about accessibility (not that we ever had an A game on the subject), and talks less and less about progressive enhancement, preferring to chase the ephemeral goal posts of over-engineered solutions to non-problems.

It’s people who won the browser wars, so I suppose it’s fitting that people are going to let it slip away.

The post Blue Beanie Day 2019 appeared first on CSS-Tricks.

CSS-Tricks

, ,
[Top]

How I’ve Improved as a Web Developer (and a Person) in 2019

We’re sliding into the roaring twenties of the twenty-first century (cue Jazz music 🎷). It’s important that you and I, as responsible people, follow the tradition of looking back on the past year and reflect on the things that went right and wrong in the hopes of becoming the best version of ourselves in the year ahead.

I never do New Year’s resolutions, except for when I was ten years old and wanted to open a local self-run detective agency by the end of the following year (Scooby Doo was in vogue those days.) But I do reflect on the past this time of year, perhaps as an instinctive response.

Over the years, I’ve improved as a web developer, on my own terms and on my own pace, while learning, unlearning, interpreting and executing what the web technology offers. This post is a reflection of my personal experiences from 2019 and the years before that. I’ll share things I’ve learned that might make us all better web developers heading into 2020. Personal experiences aren’t universal, of course, but it’s sometimes neat to get a look into the things other people are processing and learn vicariously through them.

So here we go.

I spent a lot of time in other people’s code

It was unavoidable because my very first professional project involved updating and upgrading an old application. It was only after some time that I realized I gained wisdom from navigating through code written by others, and also, I developed the guts to voluntarily read others’ code and really pay attention to what it’s doing.

It’s not unlike practicing good listening skills. Reading and understanding code written by someone else requires active attention and fighting the temptation to either zone out or inject your own opinion.

What you can try: GitHub is a great place to see a lot of projects. There are so many open source projects out there and they’re all readily available to look at and digest. I think many of us have experienced times when we simply grab a project or a tool without really getting under the hood and understanding what it’s actually doing or how it fits into our own work. Taking the time up front is an excellent way to not only learn new things, but to make better decisions in our day-to-day work as well. Don’t understand something? Open an issue in the repo and ask away!

I’d be remiss not to mention CodePen here. Not only can you search for just about any pattern, feature, or function, but it also offers collections of Pens and even topics, both of which are excellent for seeing how different people tackle similar ideas.

I tried new web standards even if I thought I’d never use them

It’s just my curiosity, but I think it has made me feel more comfortable in learning something new. That might be variable fonts, serverless, JAMstack, prefers-color-scheme , prefers-reduced-motion , and subgrid, among many others. Geez, we’ve seen a lot of new things in the last year or two, haven’t we?

What you can try: I think you’re already ahead of this by following sites like CSS-Tricks. There are many technical blogs and writers out there who share with their readers what’s new. Check out the list of people who have contributed to this blog — many of them have personal sites where they’re frequently sharing new things. A Book Apart is also a great resource for standards, especially for those of you who might enjoy a break from the screen. You can find so many gems there, from Expressive Web Design to The New CSS Layout.

I created an archive of my favorite code snippets

There were times when I’d think that I’d remember the oh-so-simple syntax of new code I tried… but it turns out simple things are easier to forget. So I decided to keep them neatly in a digital folder, like in the good ol’ times. This has allowed me to go back and reference code when questions or ideas pop up. Otherwise, I’d have to go back and research all over again.

What you can try: I personally don’t use tools, just save them in a file. That said, Gist is always a nice place to keep snippets. And, hey, CodePen lets you create your own collections as well!

Another idea is to leverage your browser’s bookmarks. Save links liberally. Organize them into logical groupings so they’re easy to find later.

I created an archive of my notes, flow diagrams, and other stuff I scribble on paper

I have a standard paper notepad at my office that I use to jot down everything from ideas for a project I’m working on, layout sketches and notes from things I read. It’s also the place where I often start work, much like the way Chris writes “pseudo code” heading into a code editor.

I have a habit of working out the visual aspects of a web application, and often, even the source code on paper. So, I keep those papers safe for when I might have to refer back. It has helped me out in a pinch.

What you can try: I would be a hypocrite if I recommend any of the online note taking tools, because I’ve never found them convenient, ironically. There are lots of physical notebook options out there. Moleskine is a popular one. Sarah Drasner recommended one when she wrote her own post on learning how to learn.

I recognized when someone’s teaching and I need to be a student

I used to have a bad habit: if someone’s explaining something about code that I might already be familiar with, I would process and interpret what they were saying based on my own personal experiences, way before I learned what they had to say first.

It could be a millennial thing or it could be an industry thing, but I’ve always found that people package everything as something that’s being shared, that somehow I’m sitting in a round table with them and we are dissecting things over a box of pizza. 🍕

I appreciate that people make their content inclusive because we’re all adults here. But it also has stopped me from genuinely learning what they were trying to teach. I skimmed through useful information, but never really cared about the context. On my worst days, I missed the point completely, all because my brain’s resources were divided trying to learn and analyze at the same time.

Active listening and learning has provided a bunch of benefits for me this past year. For example:

  • I hear what people are saying more clearly.
  • I retain what people share with me more easily.
  • It makes the people I’m interacting with feel at ease with me.
  • It opens my mind to new ideas and possibilities I may not have considered.

What you can try: When you want to learn from something, whether it’s an article, a tweet, a podcast episode, a documentation or something else, save it and use it. I learned to grow out of my bad habit this year and have found this to be my flow for learning and retaining from others:

  1. I learn something.
  2. I save it for later (in my archive!).
  3. I try it out when I have the time.
  4. I play around with it more and try improving on it, if needed.
  5. I eat my pizza.

I trusted my own judgement more

This might sound like the exact opposite of what I just said about active listening, but it’s more of a counter-balance to being overly reliant on others. Active listening doesn’t mean we can’t have our own opinions or even continue holding onto them. It simply means we hear and retain information that can inform our own opinions.

A good professional opinion could be such a blessing, but good or bad, the moment I found myself giving too much weight to other people’s opinions, like I’d read a blog post on someone’s development environment and think I have to do the same thing, or worse, that the way I do things is wrong, that’s a terrible feeling (hello Imposter Syndrome) and who needs more stress?

What you can try: Instead of automatically believing that anything you read is the golden standard, try putting up a little guard. In other words, instead of thinking, “This is how I should be doing it,” perhaps say, “Oh, so this is how this person does that.”

I started seeking others’ experiences that validates my own

I feel happy when I read or hear fellow web developers share their work experiences and find something that resonates with me on a personal level:

  • “I know! I couldn’t set it up the first time, too!”
  • “Yes, that framework made things slower for me, too!”
  • “No way! I tried to center a floating element, too!”

Seeing that I’m not the only one who makes mistakes or struggles in certain areas makes me feel okay for where my skills are at instead of seeing myself as an unskilled developer who’s prone to mistakes. Chris recently shared his thought process working with flexbox elements — that’s exactly the sort of thing I think we can all relate to.

What you can try: We all bear some responsibility here. Let’s make people feel good when asking questions, even if they seem obvious to us. Share your own mistakes and struggles. The web is a vast and constantly evolving space and we’re all starting from different places.

I made myself the only one who decides what to make on my off-work coding marathons

Like all of you, my learning curve involves coding during my non-working hours. It could be just a new code I’m trying out or a full on side-project.

Seeing others share their side projects inspires me… at least that’s what I want them to do. That hasn’t always been the case. They used to make me think I wasn’t doing enough. Not enough GitHub repos. Not enough open source contributions. Not enough self-imposed challenges. Not enough WordPress plugins. And, sorry Chris, not enough CodePen demos.

With experience, however, I’ve realized there’s only one human soul that can optimally select what I should be working on, based on my skills, my preferences, my necessities and my circadian rhythm – the ghost under my bed.

Once I understood that, every single awesome and crazy side project people share online truly inspires me — or at least makes me smile, which is even better.

What you can try: Be intentional with your personal time. Prioritize what you want to learn and decide the best way for you to learn it. This post by Jason Rodriguez outlines how he planned to level up his JavaScript skills. Chris shared a mountain of ideas for learning CSS. Sarah also has great tips on prioritizing your personal and professional time.

I stopped drinking coffee

This is not up for discussion, my dear reader. 😀

What you can try: Masala Chai.

I started prioritizing my health

Here’s a very silly story. I sprained my wrists thrice in a month. I think it was a voodoo spell. The point is: it was getting harder for me to work.

I was a bit embarrassed to tell people I couldn’t work because I was injured, so I continued like nothing happened. Each time, the sprain would eventually go away because of the ointment I applied at home, but would return soon enough because I wasn’t properly resting it. At one point, the pain spread to my arms and I’d to immediately take my hands away from the keyboard and rest them on my lap. It scared me.

The next day, I started wearing a wrist cast (well, two) and informed my colleagues and technical director that I needed to take it slow.

I know this story sounds like a very simple and obvious thing — and it was a very simple thing indeed. But I learned an important lesson: Health comes first.

Our job description doesn’t come with health warning stickers, but there are consequences in reality.

What you can try: Take care of your health first. Physical or mental, chronic or acute, mild or severe, internal or external, when your health problems go away, it improves the quality of your life, personally and professionally. If you’re lucky enough to have good health insurance, use it. Schedule an annual physical exam. Listen to your body when it says it’s hungry, thirsty, or simply needs a rest.

I know, easier said than done. But it’s important nonetheless and something worth striving for.

I’ve started sharing my knowledge with others

Not in a way you might assume. I know the consensus is that we learn when we teach but I haven’t personally experienced that. I don’t learn while I teach. Instead, what I’ve done is focus on how someone I’m teaching could or should learn a particular thing.

  • “Start with the basics.”
  • “Read the documentation.”
  • “Try the demo then proceed to so and so.”

These are some of the statements I found myself repeating to those I’ve mentored.

Those same sentences echo back to me when I’ve to learn something new. When I teach, I pay attention to how it’s learned. And learning is the one skill that never goes out of date, especially in our line of work.

What you can try: I think you’ll probably have to wait a while before you could do this if you’re just starting out as a web developer, but if you’re even somewhat experienced and meet a wide-eyed newbie, don’t miss your chance to teach. Don’t be part of the dark matter. You can teach in a variety of ways, from blogging to making demos. That said, I’ve found real life person-to-person teachable moments to be the most effective.

I realized I can’t read a code once and understand it all. So I use comments.

Here’s my comment about comments: Take them seriously.

Sometimes I can’t even decipher the code that I’ve typed with my two bare hands.

Condensation is a key element of programming languages in addition to something that causes rain. We don’t write, “add one more sheep to the herd.” Instead, we write, i++. Expecting myself to remember and understand everything in one glance simply isn’t practical.

Using well-thought comments cuts back the time it takes me to know what’s happening in the code. This is why I’ve consciously paid attention to using comments this past year. There’s no cost to using them, so go nuts!

What you can try: Take time to go through your code and leave some useful comments each time you’ve coded a module or a feature that works, especially before moving onto what’s next.

I’m not taking working code for granted

I was told margin:auto would center an element. I was told to add return(0) to an onclick event handler. I was also told to use GUID for foreign keys.

I didn’t ask why or how those things worked at the time. I simply did as they said.

I, now, however, know how they work and why I had to use those code.

When I know the basics of a piece of code, it helps me to use the same code or the same logic in scenarios other than the one I learned about it in.

What you can try: Make a quick mental, physical, or digital reminder when you come across a code that you want to know more about. Then remember to go through that list first in your free time. Don’t be afraid to ask someone why code is used a certain way.

I try to mimic extroverted web developers

* takes a deep breath *

I’m an introvert.

My introversion is not so bad that people feel uncomfortable around me. I mean, everybody likes talking to introverts because they mostly listen, right?

Although most of my work is typing in front of a computer I inevitably have to meet people, like clients, users and team members.

Communication is important. And not just the bare minimum.

When you develop a really good relationship with who you work with, your workplace becomes fun. When you develop a good relationship with your users, your work becomes successful; and when you develop a good relationship with your clients, you get more work.

I found there’s no way around it: I had to talk from time to time. I had to put myself out there.

I look at my fellow web developers who are more extroverted for communication pointers. They talk beyond about work. They give their suggestions. They encourage feedback. They drink coffee. And I try to practice that.

What you can try: If you’re an extrovert, I’ve got nothing for you. If you’re an introvert, all I can say is try. And keep trying. And that’s all you ever need to do. We can’t change our personalities, but with some practice and time we’ll learn to manage them better. In fact, it might be worth getting a better understanding of your personality type. Susan Cain’s book Quiet is an interesting (and dense) take on introversion.

I take breaks

I hate this to be true, but I turn into a Shaman soon after I start coding. An unwilling Shaman who gets possessed. The spirit that takes over me likes to only code. It doesn’t like to eat, sleep, talk to people or check Instagram. It’s a very mean spirit.

That’s why I exorcise it regularly to not cloister myself from the world. I pay attention to someone calling me. I leave the desk for tea breaks. I let my laptop’s battery die so I won’t go near it during vacation. I even have a hobby.

I don’t know if taking breaks has improved my performance or not, because I don’t think the mean spirit lacks in performance. I just think it’s good for me to not be always possessed.

What you can try: For those of you with 9-5 job, I would recommend tea breaks at 11AM and 4PM (wow, that came out very specific) And for when you work at home, I suppose you’ll have more things to do, so choose for yourself when you want the break. I like to watch TV, that would be like my ideal break time.


And… that’s it. That’s all the spookiness I could fit into this post. I shared as much of my experience as I could, as well as suggestions you might find helpful. Hope you take something good from it. This might be my final post of the year, so I don’t want to miss this chance to wish you LOTS of good luck as you go into 2020. 🍀

The post How I’ve Improved as a Web Developer (and a Person) in 2019 appeared first on CSS-Tricks.

CSS-Tricks

, , , ,
[Top]

Case Study: lynnandtonic.com 2019 refresh

Lynn Fisher walks us step-by-step through the redesign process of her latest outstanding personal website. In this design, increasing the width of the browser window will cause the illustrations on the page crack to open and reveal more within them:

This case study reminded me that Lynn also has an archive of every case study and project that she’s made over the years and that it’s most certainly worth checking out.

Direct Link to ArticlePermalink

The post Case Study: lynnandtonic.com 2019 refresh appeared first on CSS-Tricks.

CSS-Tricks

, , , ,
[Top]

State of JavaScript 2019 Survey

Well, hey, look at that — it’s time for this year’s State of JavaScript survey!

You have taken this survey last year. Or in 2017. Or in 2016. It’s been going on for a little while now and it always lends interesting insights into things like the features developers are using, the popularity of specific frameworks, and general trends. And, since the survey is going into its fourth year, we may start to get some real insights into the evolution of JavaScript over time.

So go ahead and take the survey. The more people who take it, the better results we get.

In case this is new to you, the survey is brought to you by the same folks who brought us the first State of CSS survey just this year. You can listen to Sacha Greif chat with Chris and Dave about that one over on ShopTalk for little gems about the results.

Direct Link to ArticlePermalink

The post State of JavaScript 2019 Survey appeared first on CSS-Tricks.

CSS-Tricks

, , ,
[Top]

Highlights from Chrome Dev Summit 2019

Ire Aderinokun has made another round-up summary of some things that piqued her attention during this year’s Chrome Dev Summit and there’s a lot of exciting news! There’s the :is selector (which Geoff wrote about a while back) as well as logical properties, updates to standard form elements, and the ability to check whether a user is on a 4G network or whether they have a data saving mode enabled.

If you want to catch up on all the talks then you can watch them on the Chrome Developer YouTube channel.

Direct Link to ArticlePermalink

The post Highlights from Chrome Dev Summit 2019 appeared first on CSS-Tricks.

CSS-Tricks

, , , ,
[Top]

The Current State of Styling Selects in 2019

Best I could tell from the last time I compiled the most wished-for features of CSS, styling form controls was a major ask. Top 5, I’d say. And of the native form elements that people want to style, Greg Whitworth has some data that the <select> element is more requested than any other element — more than double the next element — and it’s the one developers most often customize in some way.

Developers clearly want to style select dropdowns.

You actually do a little. Perhaps more than you realize.

The best crack at this out there comes from Scott Jehl over on the Filament Group blog. I’ll embed a copy here so it’s easy to see:

See the Pen
select-css by Scott/Filament Group
by Chris Coyier (@chriscoyier)
on CodePen.

Notably, this is an entirely cross-browser solution. It’s not something limited to only the most progressive desktop browsers. There are some visual differences across browsers and platforms, but overall it’s pretty consistent and gives you a baseline from which to further customize it.

That’s just the “outside”

Open the select. Hmm, it looks and behaves like you did nothing to it at all.

Styling a <select> doesn’t do anything to the opened dropdown of items. (Screenshot from macOS Chrome)

Some browsers do let you style the inside, but it’s very limited. Any time I’ve gone down this road, I’ve had a bad time getting things cross-browser compliant.

Firefox letting me set the background of the dropdown and the color of a hovered option.

Greg’s data shows that only 14% (third place) of developers found styling the outside to be the most painful part of select elements. I’m gonna steal his chart because it’s absolutely fascinating:

Frustration % Count
Not being able to create a good user experience for searching within the list 27.43% 186
Not being able to style the <option> element to the extent that you needed to 17.85% 121
Not being able to style the default state (dropdown arrow, etc.) 14.01% 95
Not being able to style the pop-up window on desktop (e.g. the border, drop shadows, etc.) 11.36% 77
Insertion of content beyond simple text in the <select> control or its <option>s 11.21% 76
Insertion of arbitrary HTML content in an <option> element 7.82% 53
Not being able to create distinctive unselected/placeholder style and behavior 3.39% 23
Being able to generate new options from a large dataset while the popup is open 3.10% 21
Not being able to style the currently selected <option>(s) to the extent you needed to 1.77% 12
Not being able to style the pop-up window on mobile 1.03% 7
Being able to have the options automatically repeat on scroll (i.e., if you have an list of options 1 – 100, as you reach 100 rather than having the user scroll back to the top, have 1 show up below 100) 1.03% 7

Boiled down, the most painful parts of styling selects are:

  • Search
  • Styling the open dropdown, including the individual options, including more than just text
  • Updating the element without closing it
  • Styling for cases where “nothing” is selected and when an item is selected

I’m surprised multi-select didn’t make the cut. Maybe it’s not on the table for <select> since it wouldn’t be backwards-compatible?

Browser evolution

Edge recently announced they are improving the look of form controls, but no word just yet on standards or how to customize them.

Select styles in Edge/Chromium before (left) and after (right)

It seems like there is good momentum, though. If you want more information and to follow along with all this progress (I know I will!):

The post The Current State of Styling Selects in 2019 appeared first on CSS-Tricks.

CSS-Tricks

, , , ,
[Top]