Posted on

The Fourteenth Fourth

It’s CSS-Tricks birthday! Somehow that keeps coming around every year. It’s that time where I reflect upon that past year. It’s like the annual vibe check.

I’m writing this just days after my current home state of Oregon has lifted most of the COVID restrictions. Certainly a very weird feeling. We’re just hitting the state-wide 70% vaccinated level which is the big milestone covered in the news. I thought our little local organic-heavy progressive grocery store would be the last place to go mask-less, but even in there, the vast majority of people are raw-facin’ it, employees included. So it’s not just America’s birthday this year, but a real sign of changing times. Controversy in tow, as there is plenty of evidence the danger is far from over. Definitely gonna hit up some fireworks though. The kid loves ’em.

Well-Oiled Machine

I’d say that’s ^ the main vibe around here from my perspective. The site is in good shape all around. The tech behind it is stable and mostly satisfying. The editorial flow is flowing. The content idea bucket overfloweth. The newsletter goes out on time. The advertising and sponsorship demand is sound. Ain’t any squeaky wheels on this train.

And did you know we have zero meetings? Just light Slack chatter, that’s it. This is a part-time gig for everyone, and we aren’t doing any life-saving work here, so no need to take up anyone’s time with meetings.

Technologically, we’re leaning more and more into the WordPress block editor all the time and it feels like that is a good thing to do here in WordPress land. Every time we have a chance to get more into any current WordPress tech and take advantage of things WordPress does well, it tends to work out.

This is all great because as far as hours-in-the-day go, most of my time is on and needs to be on CodePen. An incredible amount of work lays ahead there as we evolve it.

Things to Get Done

That’s not to say there isn’t work to be done. I’ve got some WordPress scrubbing to do, for one thing. There are a few too many places functionality code is being stored on the site. I’ve completed an audit, but now I need to do the coding work to get it clean again. Things change over the years, WordPress evolves, needs evolve, performance and accessibility considerations evolve, my own taste evolves. Code from 8 years ago needs to evolve too.

One thing I’d really love to get done is to move all the content on the site that really should have been a Custom Post Type to actually be Custom Post Types. Namely screencasts and almanac entries. Right now they are Pages instead, which was fine at the time as it lends itself to a hierarchical structure nicely. But the only reason they aren’t Custom Post Types is because those didn’t exist when I started them. In today’s WordPress, they really should be, and I think it would open doors to managing them better. I’m not sure I have the chops to pull off a conversion like that so I might have to hire out for it.

I’d also like to evolve our eCommerce a bit. I think it’s been going great as we dipped our toes into selling things like posters and MVP membership, and now it’s time to make all that stuff better and more valuable since it’s a proven win. For example, I’m working on making sure the book is downloadable in proper eBook formats, that’ll be a value-add for members. I’ve started thinking about what more we can do with the newsletter as well since those are so hot these days, and I’m a fan.

Social Media Cards

While social media isn’t a major focus of ours, we do tend to make sure Twitter is in good shape, as we have that sweet handle @css. I’m pretty hot on the idea that sites (content sites especially), should have nice social media images. Fortunately, thanks to Social Image Generator and some custom code, ours are in good shape. I still smile looking at them as they are so damn distinct now. WP Tavern did a nice writeup on the plugin.

There are five different possibilities for social cards now we can use.

  • This is the default. It defaults to the post title, but we can override that.
  • If the post has a featured image, it will be incorporated into the social media image like this.
  • If we add a quote to a meta field, we’ll get this special quote card design.
  • We can turn off the generated social media card and have it just use the featured image as the card.
  • If we turn off the generated social card and don’t have a featured image, it falls back to this generic card.

Sponsors

I’m incredibly blessed that we have the same four major sponsors as we’ve had the last few years:

  • Automattic: WordPress is at the heart of this whole site. I’m so pleased to get to have Automattic as a sponsor, who not only create all kinds of important software for WordPress that we use here, like Jetpack and WooCommerce, but are big contributors to WordPress itself. I like that the site can be a living testament to what you can do with WordPress.
  • Frontend Masters: There is no A to Z learning path here on CSS-Tricks. If you want true curriculum to level up your skills, that’s what Frontend Masters is for. I couldn’t recommend any learning platform more, which is why I’m so happy to have them as our official learning partner and enthusiastically point people there.
  • Netlify: The Jamstack is a good movement for the web and literally nobody does it better than Netlify. They have pioneered so many good ideas it’s incredible. It’s easy to look at the industry and see even huge companies scramble to do what they’ve been doing for years.
  • Flywheel: I’m a believer in happy path web hosting. Use hosts that specialize in what you’re doing. This site is WordPress and I don’t think there is a better hosting option for WordPress than Flywheel. And that’s without consider that they also make Local, of which there is no better local development story for WordPress.

Design

We’re about a year and a half into v18, and it has certainly evolved quite a bit since its launch. While it’s feeling solid now, I’ve started to get the redesign itch and have been saving design inspiration for v19. I imagine it’ll happen over the slower holiday season as it tends to. I have a feeling it’ll be a stripping-down sort of design heading back to less colors and more typography-driven approach that can support themes in a way I never have. But we’ll see!

Analytics

It’s largely the same story as the last 3-4 years. Always hovering just a smidge north of 8m page views a month. A perfectly healthy number for such a niche site. But also a constant reminder how difficult the content game is. You’d think a constant stream of content creation would grow traffic up and up over time, particularly since our technical content usually has a decent shelf-life. But at some point, you have to keep creating content and keep working on a site just to maintain what you have. Meaning older content slowly drives less traffic and new content needs to step up and fill the gap. At least that’s one interpretation of what’s going on—I’m sure the complete story is much more intricate (SEO, competition, saturation, content blockers affecting numbers, etc).

The name?

I ain’t gonna up and change anything, but the name “CSS-Tricks” has been so hokey for so long. Every time I see some other brand pull of a daring name change, I’m a little jealous. Would it be worth it for CSS-Tricks? The potential benfits being: a new name could usher in fresh interest in the site, be a catalyst for other change, and be less of a jarring mismatch between what we actually publish and what people might expect us to publish based on the name. I’d have to do a lot more thinking and research to be able to pull it off. If the domain changes, even with perfect redirects, are there still serious SEO implications? How could I minimize the confusion? Is there a chance in hell a change has more upsides than downsides?

The post The Fourteenth Fourth appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Building Your Own Personal Learning Curriculum

After completing a bootcamp in March 2019, I was overwhelmed by the choice of frameworks, libraries, languages, and courses I had to choose from to continue independent learning and hopefully score myself one of those elusive junior developer jobs. Almost everyone I spoke with had a different opinion on what was important and worth pursuing, but most of them agreed that learning ‘the fundamentals’ was important, while never really specifying what they were.

Even after getting my first developer job last summer it quickly became apparent that I had to do regular extra-curricular learning to meet the demands of this new role. I flitted between Udemy courses for a while, and while I did learn, I often found myself going through the motions of copying the instructor without developing problem-solving skills on my own. It took me making my own small, scratch pad side-project to really grasp the new material. So now I knew what my learning style was: initial exposure to ideas in a course or at work, create a sketch of a project to solidify concepts, and then use this new learning in my daily work if I could.

Most of us have a solid (if hard-earned) sense of how we learn best in the short-term, but how does that translate to the structure of long-term extracurricular learning? I’m going to tell you how I worked this problem out for myself. These strategies will work across the spectrum of experience, whether you’re brand new to software development or a seasoned engineer.

Your Own Personal Curriculum

This is my method of putting together a learning curriculum. As someone with limited time and a tendency to be taken by the breeze of impulsivity at the expense of sustained, focused working, I found this method the most compatible with my brain and general rhythms. Your mileage, of course, may vary.

Use ‘Dream Job’ Role Specifications To Set Goals

I found this step really useful for drowning out all the ambient noise and getting myself to focus on things that will be practically useful to my career in the next five or so years. (As more of a front-end developer, I often found myself making goo-goo eyes at learning Rust. While fascinating, it’s not exactly a priority.)

You may not want to work at a huge tech company yourself, but it is worth looking at what they prioritize when hiring as, for better or worse, the big companies tend to set the tone for the industry at large. I have a small shopping list of non-evil companies I’d like to end up at one day and they all broadly share the same priorities: semantic HTML/CSS, excellent vanilla JS skills, accessibility, and a popular framework. One day I am going to learn Rust, but, for now, working on these skills are my top priorities.

I tend to favor Indeed, Guardian Jobs and LinkedIn for getting a broad sweep of jobs that are on the market, but equally useful is Twitter (just search [company name you are interested in] and ‘jobs’), and keep a periodic eye on the ‘Careers’ page of your favorite few companies every couple of months. Jessica Rose, who tweets as @jesslynnrose, frequently writes long Twitter threads of job vacancies at ‘non-evil companies’ that sometimes aren’t very well publicized elsewhere.

Once you’ve gathered a few job specs, try to spot the commonalities between them and make note of them. We’ll use them for the next step.

Identify Opportunities To Develop The Skills You Want

Remember that list I mentioned? Split it into two columns. Column one: things you can work on in your day job. Column two: things you need to look at in your own time.

At-Work Learning

The things on your list that are covered by your day-job are the things you need to worry about the least. No matter what, your skills in these areas will improve with time. Some of you will be working at enormous organizations staffed by many developers with various levels of seniority and specialisms, and I advise you to milk that for all it’s worth, to put it bluntly.

If accessibility is a knowledge gap of yours that you’d like to improve on, try to swallow any nerves and approach someone at your workplace who has those skills for a chat/a Zoom coffee. Try to pair with them, with the understanding that you can ‘pair’ on things that aren’t coding problems. Chat to them about where they find their information, which Twitter accounts, blogs, and podcasts they keep up with, and how they remain up-to-date with new developments themselves.

At-Home Learning

As someone with two prior careers, neither of which were computer science-related, who entered the industry via a nine-week bootcamp a year ago, I have a rudimentary understanding of computer science, and lots of you are likely in the same situation.

I have found Frontend Masters to be invaluable when it comes to really well-designed courses on computer science principles and more specific learning. Personally, I’ve found Will Sentance’s courses on Frontend Masters to be valuable for understanding the how and why when it comes to vanilla JavaScript. Equally, Brian Holt’s ‘Four Semesters of Computer Science in 5 Hours’ courses expose students to the sort of concepts that can arise in tech interviews.

There is a monthly subscription fee for Frontend Masters, and it is well worth it, but there are plenty of wonderful free resources out there. I really recommend that anyone who hasn’t already done so enrolls in CS50. The course, run by Harvard University, is a wonderful, free resource, that will expose you to C, Python, JavaScript and modules on ethics and basic data structures. The lectures are enormous fun, and you can do as much or as little of the course as you like, with no time constraints.

Equally, FreeCodeCamp has well earned its status as a key starting point for both self-taught developers and those wishing to build on their existing skills, and I encourage you to seek out courses relevant to your interests on Udemy (I’d suggest not to buy a Udemy course that isn’t on a heavy discount. Their sales come around once every few weeks, and there are always discount codes floating around).

A particular favorite of mine is The Complete Node.js Developer Course by Andrew Mead, and I adore Colt Steele’s courses (there’s a particularly good one on algorithms and data structures that will help you if you ever find yourself on the more algorithm-heavy side of the tech interviewing spectrum). Smashing Magazine also runs frequent online workshops on a range of subjects that will help you to improve your skills.

As you might know, the skills that get people jobs in tech can often diverge from the skills people need to use on the job. These courses will teach you computer science fundamentals while keeping you nimble for interviews, and help you to fill any potentially crushing silences with snappy summations of different data structures, and their pros and cons. The point is not to do all of these courses, but to identify and combine the ones that fit with the job specs you’ve targeted.

I’ve found Twitter to be incredibly helpful for finding people to chat to about code problems. Last spring I shouted into the void about an issue I was having with Android Studio and was surprised to be on a video call with an Android developer less than ten minutes later, and, not only that, he seemed pleased to help!

Don’t underestimate the kindness of the developer community and don’t be shy about calling on it for help when you need it, and do your best to put yourself into situations where you can talk to people from a similar world to you within the wider context of the tech industry. The #CodeNewbie hashtag is a handy thing to use if you’re ever in need of help.

Set Targets And Timetables

Now it’s time to tie your self-directed learning goals to some targets. Try not to set the bar too high — if it’s unrealistic for you to complete a Udemy course in one week, don’t try to push yourself to do it so hard you either meet the target at the expense of other important things in your life or fail to meet the target and make yourself feel like a failure. The idea is to keep yourself on track, applying gentle pressure to stay motivated, but not so much that you feel overwhelmed and lose all motivation.

As a morning person, I feel best able to concentrate on study in the hours before my day-job starts at 9.30 am. With this in mind, and using the wonderful time-tracking tool, Toggl, I spend 7 am to 9 am two mornings per week on code study. Using Toggl was extremely important to me because, no matter how much I do, I often feel as if it isn’t enough. But with Toggl’s help, I could see for certain that I was doing a minimum of four hours per week (with extra in the evenings and weekends if I felt like it) and I felt better able to step away from my laptop and rest when my time was up, safe in the knowledge that I’d racked up an acceptable amount of hours by my own standards.

Make Progress Measureable

Think about your average weekly schedule and try to block off some time in the day when you stand the best chance of securing unbroken focus. Some of you will be carers or otherwise extremely busy, and it’s probably going to be better for you to take your time as and when you can get it.

If it helps you to see an example, my personal targets are the following:

  • Complete a Node.js Udemy course by the end of February.
  • Do 30 minutes of Execute Program before work every day.

Try to err on the side of caution for your first set of targets. You can always turn up the pressure if you want to, but it’s better to do so once you’ve succeeded at a few; make sure you have the spare mental and physical space to really concentrate on what you need to do to stay on track.

Find A Mentor, Or A Buddy, Or Both!

Mentorship is something that most developers would recommend to improve skills, but, from my personal experience, finding someone with the time to guide you is a challenge, especially now. There are resources such as Coding Coach that may help you, and I know a few developers who found their dream mentor at meet-ups and on social media, but finding the perfect match is easier said than done.

I spoke to Falina Lothamer, an Instructional Designer at Thinkful — a Massive Open Online Course (or MOOC, for short) — to get an idea of how professionals approach independent learning. She was very clear that finding and working with a mentor is key to progressing your skills as a developer.

“If you need to have something laid out for you, having that mentor to say: ‘Here’s where I think you should focus’, showing you what they’re doing at their job, and sharing their opinion on what the future of your area of tech is is going to help a lot. I think there are a lot of people in the industry who are willing to fill that mentor role and do for others what someone has done for them.”

After expressing some of my frustrations at having hit a brick wall with a number of Udemy courses, simply finding myself retaining information and not necessarily having the confidence in what I’ve learned to apply it in other areas, or on other projects, Fallina was clear that being accountable to another person — ideally a mentor but equally another developer with a similar amount of professional experience to you — is essential.

“As a developer, you need to look for opportunities to demonstrate what you know, and how you’re learning. Having someone else to talk to about the challenges you’re facing, and having space to talk it over with someone and to realize ‘this thing that I’m trying to do is complicated, I’m not a terrible developer’, having that validation can be huge.”

For those who don’t manage to find a senior developer to take them under their wing, I recommend taking Fallina’s advice and making yourself accountable to someone else in the industry at a similar level to you. Developers banding together and sharing stories will reinforce that this job _is_ hard, and that they are not the only engineers struggling to get by at work some days. This work can be very emotionally taxing, and having a buddy to struggle along with will be invaluable on those days when nothing seems to be going well.

I’d recommend signing up to Interview Cake, Execute Program, or a relevant Udemy course for your skill level and specialism, and completing the same exercises as your buddy at roughly the same time. Discuss what you found easier, and where you fell down, and maintain contact with one another throughout. While you certainly can do these things alone, fostering a sense of community will help you to stay on task, and make it more likely that you stick at it.

A Case For Scratch Pad Applications

If you’ve got the time and energy to pour into a large side-project on top of work, more power to you, but I find the pressure to do so somewhat burdensome. Instead, I am a fan of the scratch pad project, primarily because I really benefit from following lots of new ideas at once, and quickly become disinterested in personal projects there is no time pressure to drive me along.

If your side-project makes an API call, displays the information in a semi-appealing way, and you’ve learned something from the process, and building the project out into a larger application doesn’t fit with your neurology, your caring schedule, or your tastes, then give yourself a break. You wouldn’t sneer at an artist for sketching, and you certainly shouldn’t feel bad if your side-projects are half-formed mutants as long as you’re getting something out of the process. My GitHub repositories are elegies to good ideas gone by, and I’ve made my peace with it.

Roundup

Given the state of the world right now, the last thing I want to be is another voice demanding productivity in lockdown. That’s not what this is about. These are simply steps that worked for me when I needed to learn over time, without burning out or placing undue pressure on myself. If they work for you, wonderful. If not, no worries. We all have our own pace.

Steps

  1. Use job specs to identify key skills.
  2. Split those skills between at-work learning and in-your-own-time learning.
  3. Set clear, measurable, realistic goals, and step them up only when you’ve found your rhythm.
  4. Find a mentor or buddy so you’re accountable for those goals.
  5. Relax! Messy learning is better than no learning.

Useful Resources

Good luck!

Posted on

Quick LocalStorage Usage in Vue

localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I’ve personally used it in each! In cases where you’re storing something small for the user that doesn’t need to be kept permanently, localStorage is our friend. Let’s pair localStorage with Vue, which I personally find to be a great, and easy-to-read developer experience.

Simplified example

I recently taught a Frontend Masters course where we built an application from start to finish with Nuxt. I was looking for a way that we might be able to break down the way we were building it into smaller sections and check them off as we go, as we had a lot to cover. localStorage was a gsolition, as everyone was really tracking their own progress personally, and I didn’t necessarily need to store all of that information in something like AWS or Azure.

Here’s the final thing we’re building, which is a simple todo list:

Storing the data

We start by establishing the data we need for all the elements we might want to check, as well as an empty array for anything that will be checked by the user.

export default {
  data() {
    return {
      checked: [],
      todos: [
        "Set up nuxt.config.js",
        "Create Pages",
        // ...
        ]
     }
   }
}

We’ll also output it to the page in the template tag:

  <div id="app">
    <fieldset>
      <legend>
        What we're building
      </legend>
      <div v-for="todo in todos" :key="todo">
        <input
          type="checkbox"
          name="todo"
          :id="todo"
          :value="todo"
          v-model="checked"
        />
       <label :for="todo">{{ todo }}</label>
     </div>
   </fieldset>
 </div>

Mounting and watching

Currently, we’re responding to the changes in the UI, but we’re not yet storing them anywhere. In order to store them, we need to tell localStorage, “hey, we’re interested in working with you.” Then we also need to hook into Vue’s reactivity to update those changes. Once the component is mounted, we’ll use the mounted hook to select checked items in the todo list then parse them into JSON so we can store the data in localStorage:

mounted() {
  this.checked = JSON.parse(localStorage.getItem("checked")) || []
}

Now, we’ll watch that checked property for changes, and if anything adjusts, we’ll update localStorage as well!

watch: {
  checked(newValue, oldValue) {
    localStorage.setItem("checked", JSON.stringify(newValue));
  }
}

That’s it!

That’s actually all we need for this example. This just shows one small possible use case, but you can imagine how we could use localStorage for so many performant and personal experiences on the web!

The post Quick LocalStorage Usage in Vue appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Posted on

Our Learning Partner: Frontend Masters

I'd like to think there is a lot to learn on CSS-Tricks. But we don't really offer much by the way of courses. You're probably reading this because you just generally read this site, and you land on CSS-Tricks otherwise mostly because you are looking for an answer to some front-end question.

Courses are a really great way to learn though. I've done many over my years as a developer, particularly when learning something fairly outside my bubble of things I already know. For example, I don't reach for TypeScript yet because I don't really know it and am definitely not comfortable with it. You better believe I'll be taking a course on it when the time comes that I want to use it on a project.

Where will I find that course? Frontend masters, of course. They are clearly the most high-quality in-depth courses on all things front-end development. They've got a course on TypeScript, of course.

So I'm so so glad to announce that Frontend Masters is our official learning partner. I like having an official place to send people to when it's clear their learning style is video courses, like so many people's is.

One not-so-little aspect I love about Frontend Masters: the courses are taught in a live environment. So it's not a head talking into a screen, the courses have the natural energy of a live teaching situation, because they are.

How you'll see our course recommendations here on CSS-Tricks is through some contextual ads next to articles. Say you're reading Geoff's recent article about the dense keyword as part of CSS grid layout. Well, that article is about layout, and Frontend Masters has a comprehensive course on modern CSS layout from Jen Kramer. So as you scroll down that post, you'll see our course recommendation there, as well as at the bottom of the article.

Try it free

Access to all of Frontend Masters is a paid membership. Access to literally everything they have is $39 a month or $390 a year, with special pricing for teams. But, they have some free stuff if you want to dip your toes and see for yourself if it's any good.

On-the-go

I feel like this is worth mentioning too. Frontend Masters itself is a website you log into to watch the videos and that's a great experience. But it's not the only way. They also have great native mobile apps (iOS / Android), if you prefer that experience.

The post Our Learning Partner: Frontend Masters appeared first on CSS-Tricks.