DEV Community: Michael Caveney

What Tools Does Every Web Developer Need To Have/Know?

Michael Caveney — Tue, 10 Aug 2021 14:59:15 +0000

This week, we're going to step away from languages and frameworks, and talk about the tools every developer needs to have at the ready. And while a lot of these tools will be universal, this article is written with the assumption of JavaScript-heavy development, so you might need NuGet for package management if you're a C# developer instead of npm, to cite an example.

A Laptop

A good laptop is the most important tool a developer can have. You don't need a fancy or expensive machine when you're first getting started, but you should keep certain things in mind:

I would recommend avoiding a machine with a Linux OS unless you're already very comfortable with Linux setup/config.
I used Windows machines for a long time (until switching to a MacBook Air last month), and they're mostly fine, but there are some caveats with them in the form of needing to learn a separate command line tool (or having to install a Linux command line and getting that configured to work with your file system), or difficult/impossible installations of certain tools like Rails or Docker. Some folks have said that the Windows Subsystem for Linux has solved these issues, but my personal experience with the WSL was that it made everything buggier and unstable to the point of Windows being unusable with it installed.
You will ideally want a certain amount of power to build and compile things more quickly, but don't feel like you need to go overboard and get a gaming rig. You should at least make sure that you have a solid-start hard-drive, as that will give you a noticable performance gain over the alternative.

A Text Editor/IDE

We have an embarrassment of riches when it comes to helpful tooling, and code editors/IDEs are no exception. You'll have a lot to choose from here, but I would strongly recommend Visual Studio Code. Feature-rich, customizable, open-source: there's good reason that VSCode is currently the 800lb gorilla in web development editors.

Node.js

Node is a JavaScript runtime that works outside of the browser. It's primarily used to write back-end JS logic, but I'm including it here because it's an important dependency for...

npm

...npm is the Node package manager, one of the most important tools used in front-end development with JavaScript. It's used to install packages that range from small utilities to third-party libraries to frameworks like Angular or Next.js. You'll want to keep both npm and Node.js updated to at least the latest stable release, since a lot of bugs and security vulnerabilites can happen when these get stale.

Git/GitHub

Modern software development would be impossible without version control solutions like Git, and online repository tools like GitHub. While it's necessary that you need to learn Git, you may wind up on a team that uses Bitbucket or Gitlab, but if you know any one of these, learning one of the others shouldn't be an issue.

Chrome Dev Tools

I can see a very clear "before" and "after" in terms of my productivity to find and fix problems that's tied to my aptitude with the various Chrome Dev Tools. This suite of tools that comes with Chrome allows you to inspect code, view errors and warnings, debug problems, view network requests, and more. There are a wide array of features that could take you some time to learn, but the dev tools features that you can and should get up and running with relatively quickly are:

Inspecting CSS, particularly "Computed" styles.
Step-though debugging
Lighthouse audits
Inspecting network requests.

An alternative to the Chrome dev tools you might want to consider are the Firefox dev tools, which mostly have feature parity with the notable expection of their CSS Grid Inspector.

In Conclusion

I hope you found this beginner's guide to development tools helpful. Next time on Minimum Effective Development, I'll have the first installment in a long series based on the Front-End Developer Roadmap!

Five Books That Every Software Developer Should Own

Michael Caveney — Sun, 13 Jun 2021 20:07:03 +0000

Books can be a tricky thing for programmers: Unless the subject matter is fairly evergreen and established (like algorithms), the constant churn of what constitutes "current knowledge" can makes books seem like an unattractive, or even useless, resource for programmers. But there are some books I want to talk about today that I think every software developer should have within arm's reach!

Grokking Algorithms

Gayle Laakman McDowell's Cracking the Coding Interview may be the 800lb gorilla in terms of data structures/algorithm interview prep, but I honestly think that Aditya Bhargava's Grokking Algorithms is a much better place to start. GA will provide you with a friendly and clear introduction to algorithmic techniques as recursion, dynamic programming, various sorting methods, etc. This might be too elementary for folks with a computer science degree, but this is an ideal introduction to the world of algorithms for newer developers

Code Complete

Steve McConnell's Code Complete covers a wide array of topics related to general programming and software engineering. This book is especially valuable for newer devs when it comes to getting to know the landscape of software engineering and moving your "unknown unknowns" to "known unknowns".

Don't Make Me Think!

Steve Krug's Don't Make Me Think, Revisited is essential reading for any developer who designs or works with UIs in any way, shape, or form. Krug lays out what you should be doing to build friction-free UI, and provides a thoughtful framework for you to utilize to approach building for the user first and foremost.

The Pragmatic Programmer

Andy Hunt and Dave Thomas's The Pragmatic Programmer lays out a practical framework to building software in terms of personal attitude, approach, flexibility, etc. The way to think about this is that if Code Complete introduces the landscape of writing software, TPP provides guidance as to how to best navigate that landscape.

Pro Git

Git is one of the most important tools that a developer needs to know, and it can get pretty hairy from time to time. Because os this, I think that every developer could benefit from having a paper copy of Scott Chacon's Pro Git on hand. And yes, it is available for free online, but having it in your hands is faster and more immediate.

How Much JavaScript Do I Need To Be Job Ready?

Michael Caveney — Fri, 28 May 2021 17:39:31 +0000

Today, we're going to cover JavaScript, the last of the three foundational technologies used in web development. I consider JavaScript harder to learn than CSS (especially if it's your first traditional programming language), but easier to master once you do have those fundamentals down. I will also mention that I'll only be discussing vanilla JS in this post, and Node, React, etc are out of the scope of this discussion. I will also not be touching on some important related tools such as npm or bundlers, but I will be discussing those in a future post.

What Do I Mean By Job-Ready?

Before starting, let me clarify precisely what I mean when I say 'job-ready:

You'll understand the broad strokes of the technology in question, and know the most fundamental concepts that come up every day.
There may be gaps in your knowledge, but those will be limited to secondary concepts or syntax/other details that you'll be able to find the answer to relatively quickly and easily.
You'll know exactly where to turn to find answers to problems or questions that you're running into.

Following the advice here won't make you a master of JavaScript, but you'll be effective at the day-to-day that you'll need to get started on the job.

What you need to know

Core mechanics and terminology

Primitive data types (string, number, boolean, etc), and how to operate on/utilize them, including type coercion.
Working with dates/time in JS.
Basic data structures (arrays and objects), and how to work with them. Everything is JS is an Object, and it is vital that you understand at a deep level what that means, including prototypes.
Functions, and how they work. You also need to understand the distinction between a function and a method.
DOM manipulation and traversal using JS.
How events work, listening for and reacting to them, and how bubbling and propogation work.
How to use mathematical and logical operators, and various methods of control flow/iteration, including if, for, while loops, switch statements, and built-in methods for iterating over data structures.
The two equality comparison operators (== and ===), and the diffrences in how they work.
Newer additions to the language from ES6 and beyond.
How scope works in JS, being able to tell what the value of this is in any given calling context, and how hoisting and closures work.
Debugging, particularly step-through debugging.
How to format data as JSON, and how to work with that format.
AJAX/asynchronous JavaScript, and the various ways of working with it (XMLRequest, callbacks, Promises, async/await, fetch).
JavaScript modules, and the various types of modules you might come across (CommonJS, etc).
How to utilize third-party libraries in your code, and when to reach for a third-party solution versus coding it yourself.

Extra Credit

What the Map and Set data structures are, and when to reach for them over an array or an object.
Common data structures that aren't native to JS and require custom implementation such as linked lists, stacks, heaps, etc.

Where to Learn

Basic Resources

For the absolute basics, I'm going to repeat my recommendations from my post on getting job-ready with HTML, and I'll point out that freeCodeCamp's curriculum really shines with the breadth and depth of JS practice. If you do the work going through the FCC JavaScript Algorithms and Data Structures certification, you're going to be well equipped to tackle JS day to day.

If you're looking for learning sources from Udemy, I'd recommend:

Stephen Grider and Colt Steele's The Modern JavaScript Bootcamp Course
Andrew Mead's The Modern JavaScript Bootcamp
Max Schwarzmuller's JavaScript The Complete Guide 2021
Brad Traversy's Modern JavaScript From the Beginning

Premium Resources

For getting a really solid grasp on how the language works and some of the trickier concepts, I strongly recommend you check out Will Sentance's JavaScript: The Hard Parts workshops on Front End Masters. Will is an energetic and engaging teacher, and getting a solid grasp on the material in these lessons will put you well ahead of a lot of newer devs.

If I had to recommend ONE JS course, it would be Wes Bos's Beginner JavaScript, which covers paractically everything I've listed above, and explains it clearly and succinctly. Wes's ES6 For Everyone is also every good, going into a lot of detail about newer features up to and including ES8.

Where To Get Help/Find Reference

Third verse, same as the first: Stack Overflow and MDN (especially MDN) are going to be very helpful resources for you as you learn JS.

In Conclusion

JavaScript can seem daunting if it's your first programming language, but with some diligence and the help of some of the resources mentioned here, you'll have a solid grasp on the language before you know it! Join me next Friday as I discuss what books every software developer should have on their bookshelf!

How Much CSS Do I Need To Be Job Ready?

Michael Caveney — Fri, 21 May 2021 17:35:27 +0000

CSS is one of the three foundational web technologies every front-end developer needs to know, and in some ways, the most difficult to learn. There are a staggering amount of properties one can learn, and many subtleties to be aware of regarding how they interact with each other. Today, I'm going to go over the minimum CSS you need to know to be effective on the job!

What Do I Mean By Job-Ready?

Before starting, let me clarify precisely what I mean when I say 'job-ready:

You'll understand the broad strokes of the technology in question, and know the most fundamental concepts that come up every day.
There may be gaps in your knowledge, but those will be limited to secondary concepts or syntax/other details that you'll be able to find the answer to relatively quickly and easily.
You'll know exactly where to turn to find answers to problems or questions that you're running into.

Following the advice here won't make you a master of CSS, but you'll be effective at the day-to-day that you'll need to get started on the job.

I will mention that while the mechanics that dictate how CSS works are simple, how they interact with each other in the wild can be anything BUT simple, and CSS requires a much deeper understanding of the fundamentals that HTML to be truly effective and not have to constantly be redoing previous code. This post in particular is probably going to have a lot of edits as I refine it to deliver the best information.

What you need to know

Core mechanics and terminology

Be able to identify and explain what properties, selectors, declarations, values, and rules are.
Understand at a high level how specificity, inheritance, and the cascade work.
Understand the box model, the different roles that margin/padding/border play, etc.
Understand the basic display types (block, inline, and inline-block), and the major differences in how the default versions of these display types work in flow layout aka the default version of how layout works in CSS.
Understand the basics of positioning in flow layout (absolute vs relative vs sticky vs fixed vs static)
Understand the fundamentals of stacking with z-index, and when and what elements it's applied to in that given context.
Understanding how Flexbox and Grid work is a must for modern CSS developers; you should be tangentially aware of how layout works using float, but don't spend a lot of time on this since it shouldn't be the first layout tool you reach for.
How to remove or hide items from the DOM or the page: There is a difference between removing items from the DOM or simply making them invisible, and you should know what rules accomplish one or the other, and have an idea of some situations where one method is more desirable than the other.
Understand the different units of measurement (pixels, ems, rems, etc), and their strengths, weaknesses, optimum use cases.
Techniques for responsive design, including media queries.
At least some familiarity with transforms, animation, etc.
How to build a basic design system, and utilize CSS variables.

Extra Credit

Have some familiarity with older paradigms to make CSS more efficient, such as Sass, BEM, etc. These aren't as widely used these days, and you can delve into more detail if you need one of these technologies for a job, but it's not something you'll need for every job.
Some familiarity with a CSS framework like Bootstrap can be helpful, but it would be better to be able to demonstrate fluency in writing CSS without them.
If and when you learn a front-end framework like React, some knowledge of a paradigm like Tailwind, styled-components, or Emotion would be helpful.

Where to Learn

Basic Resources

For the absolute basics, I'm going to repeat my recommendations from my post on getting job-ready with HTML, as far as basic resources for your first contact with the language go, with the caveat that you'll get less of a quality education in terms of writing solid CSS from freeCodeCamp than you would HTML.

Additionally, Google's web.dev mini learning platform has a really nice, brand-new CSS module.

For a deeper dive, I would recommend taking a look at Jonas Schmedtman's Advanced CSS Udemy course. This course shows projects in styled with three different paradigms (old school, Flexbox, Grid) so you can see how those approaches work, and how some of the more modern ones make some techniques easier than the old way or enable layouts that would have been previously impossible.

Premium Resources

A small caveat about the following section: The course I'm about to talk about is in closed beta at the time of this writing, but I consider it so essential that I can't exclude it here. So with that said...

The toughest thing about CSS is that the overwhelming majority of education surrounding it is "Here's this rule, this is what it does" without going into the inevitable gotchas or unexpected behavior that will pop up when you're writing CSS at any scale above the smallest possible use-case. Compared to HTML and JavaScript, it's much harder to learn how to write good CSS without a teacher that really knows that they're talking about.

Josh Comeau's CSS For JS Developers doesn't do this and instead focuses on how the core behavior behind many aspects of the language work, and will teach you tips and tricks it would take you years of trial and error writing production code to figure out. My ability to write efficient, maintainable, and scalable CSS has improved considerably as a direct result of the modules currently available to those who were able to get in on the beta (5 out of 9 total modules), and I consider this the single best CSS resource money can buy.

Where To Get Help/Find Reference

In addition to the sources I mentioned in my last post (Stack Overflow and MDN), I would also recommend checking out CSS Tricks, a time-honored blog with many deep dives on various CSS subjects, including the definitive guide to Flexbox that I had linked above.

In Conclusion

CSS can be surprisingly tricky to get a firm handle on, but I hope this guide makes the path a lot easier for you. Join me next time, where I talk about getting job-ready with JavaScript!

How to Avoid Overlearning In Software Development

Michael Caveney — Thu, 20 May 2021 00:41:35 +0000

In the last entry in the Minimum Effective Development series, I talked about what kinds of things people should do to make sure they're learning development as efficiently as possible. Almost immediately after publishing that post, I realized that I had neglected an important topic when it comes to learning: how to avoid overlearning.

What Does Overlearning Look Like?

Overlearning was definitely an anti-pattern that slowed me down in the earlier days of my learning software development. To be specific, I'm talking about overlearning in the forms of both:

Spending too much time trying to learn or memorize peripheral details about a certain technology or subject.
Having too wide a scope of subjects that you keep bouncing between, and not getting a strong grasp or deep knowledge of key related topics in any of those subjects.

A large focus of my writing about development is directed towards reducing decision fatigue and learning faster by staying focused, so I'm going to take a few minutes to talk about strategies to keep overlearning from rearing its ugly head in your development journey!

Be Strategic About What You Memorize

In a production environment, you'll often have to implement features or techniques you've never done before, so research is a vital skill for a developer. When you take this into consideration along with the overwhelming amount of HTML tags and attributes, CSS properties, JavaScript methods, etc, it becomes clear very quickly that trying to memorize everything is not the way to go. Here's how I recommend you approach what you should and shouldn't memorize:

Is the knowledge a high-level concept that's integral to how a particular technology works (such as the CSS box model or the event loop in Node.js) or specific information you need to know to pass a test (such as S3 storage tiers and their costs for those taking AWS certification tests)? If so, you should put in an active effort to memorize that thing.
Is the information a side-detail (such as what attributes you can add to an input tag in HTML) or a syntactical detail (like the syntax of an arrow function in JavaScript)? This sort of thing is better to look up as needed or to memorize passively through repeated practice of implementing the thing.

Aim for the Minimum Effective Dose of Knowledge

The Pareto Principle states that "for many outcomes, roughly 80% of consequences come from 20% of the causes". What this looks like in the real world would be when 80% of a company's effectiveness is a result of 20% of the staff, or that 80% of a web framework comes from 20% of its API. You should get used to figuring out what corners of a specific technology you're learning provide the biggest bang for your buck, and concentrate on having solid knowledge of those.

Keep The Scope of What You're Currently Working On Manageable

By far, the specific type of overlearning that hurt me the most early on was dabbling in a lot of different programming languages (Java, PHP, C#, C, Elixir, etc) that I don't specialize in when I could have been using that time to focus on learning the languages that I want to work with (JavaScript, Ruby). While seeing a variety of programming paradigms did help me see some common patterns and help drill in some high-level rules, the time I spent wasn't worth it in the long run.

To be clear, I don't think you should only ever learn one thing at a time. If you're brand-new to JavaScript and you're having trouble wrapping your head around a new concept like Objects, it can be good to shift gears to something like learning BEM in CSS to give your brain a break.

In Conclusion

The good thing about overlearning is that it's fairly easy to avoid once you're aware of it and what it looks like. Next time, I'm going to discuss how much HTML you need to know to be job-ready!

What You Need to Know Before You Start Learning Code

Michael Caveney — Thu, 20 May 2021 00:38:11 +0000

Welcome to the first entry in Minimum Effective Development, a blog series focused on sorting out signal from noise when it comes to learning front-end software development. There's a LOT to potentially learn out there, and I'm going to guide you towards what you really need to know when you're getting started!

Taking the self-directed path to learning code is difficult for a lot of reasons, not the least of which are unknown unknowns. You can spend a lot of time unnecessarily spinning your wheels getting good at software development: hours, days, weeks, or you can start learning with a framework to be organized and efficient. To help you do just that, I've put together this guide to prepare you to learn to code the right way!

Learn How to Learn Efficiently

Learning efficiently is a great skill to have regardless of your field of study, but the wide array of knowledge and fluid nature of web development makes the most efficient approach to learning much more of a must than a nice-to-have.

My recommendation here is to go through Andrei Neagoies's Learning to Learn course (available on both Udemy and his Zero To Mastery platform. Here, Andrei breaks down techniques and mindsets that will enable you to learn as efficiently as possible while wasting the least amount of time. Andrei is very good about referencing where he got certain tactics from, so there's a large and helpful bibliography that comes with this.

Build Effective Habits

Coding can (and should be fun), but it is work, and it takes effort to engage in certain types of practice or practicing at all when you'd rather be doing something else. If I could only recommend one book to the brand-new coder, it would be James Clear's indispensable Atomic Habits.

The long and short of it is that you want to make good habits automatic and easy to perform, and bad habits more difficult. I was good about practicing code before I read this, but I got a lot better at the right kind of practice and got WAY more consistent with exercise, which really helped weather a lot of pandemic stress. Absolutely, positively, do not begin learning to code without reading this.

Map It Out

Part of effective learning is understanding the scope of the knowledge area you're learning, and for learning to code, there are various developer roadmaps. These roadmaps have been created to illustrate what goes into these technologies and provide some guidance into what methodologies/libraries/etc to prefer when you have a choice between several of them. I'll be making heavy use of these roadmaps (particularly the front-end roadmap) in future blog entries.

Set Your Goals and Track Your Progress

Learning to code can be complicated and overwhelming at first, especially on the front-end. One way you can help yourself stay focused on effective action is to use SMART criteria to outline what you're working on at any particular moment.

When it comes to tracking that progress, you'll want to avail yourself of Trello or some other type of kanban board. I don't know what it is about this, but there was a shocking "before" and "after" in my consistency and productivity after making regular use of Trello in my day-to-day.

Write It Down

Studies have shown that physically taking notes with pen/pencil and paper leads to better retention, so strongly consider doing just that. Additionally, recording what you're learning gives you the opportunity to rephrase it in your own words, forcing you to think critically about the topic.

What I personally do is maintain a folder of Markdown files on my desktop that I use to takes notes on a variety of topics, which I save to Github. I make this tradeoff because it's easier for me to organize, update, and use as a reference for blog posts.

Understand That It Won't Happen Immediately...

There's a game I like to play with articles that have titles like "I Learned to Code and Got A Job in 6 Months!!!" I call "find the caveat", where I look for the part where they were previously a lawyer or stockbroker or some other high-paying job, or that their spouse supported them while they did nothing but code for months on end. I mention this because while these stories can be inspiring, they're not very realistic or reflective of the norm. The simple truth that web development has gotten a lot more complicated since that time, and an effective early career dev now has to have a much more varied toolkit now than they did 5+ years ago, when knowing HTML, CSS, and some basic JavaScript was enough. Because of this, I want you to...

...Be Patient With Yourself

Everybody is different and has different strengths, weaknesses, and constraints. You might have work or family obligations. You might be recovering from an injury or illness, or living with a disability of some kind. You shouldn't compare yourself or your progress to others because everybody's circumstances are so different. As countless others have said before me, this is a marathon, not a sprint, and you need to embrace that mindset and be good to yourself while you're working towards your goals.

Learning How and Where to Ask For Help

This can be tricky to get a feel for at first, but there is a time and a place for struggling in learning. Some struggle IS essential for truly understanding new concepts, but too much frustration isn't a good thing. This is something I learned via trial and error in my first production job, and the way I approach it is something like this:

Is this struggle helping me understand the thing I'm struggling with better? This is good struggle.
Am I banging my head against the wall and have circled back to solutions that I've already tried and didn't work, or have I spent more than 30 minutes on a problem with no forward motion whatsoever? This is bad struggle and you need to get a second pair of eyes on the issue ASAP.

When it comes to where to look for help, this can vary a lot from technology to technology: When I do blog entries on specific technologies, I'll go into recommended sources, but I will note that you'll generally want to favor sources that are active and real-time based, over forums and message boards. If there's an official Slack or Discord channel for the technology in question, you'll want to be on there.

In Conclusion

I hope this advice helps you: My goal with a lot of my blog entries to help people avoid some of the mistakes that I made when I was first learning to code, and I'll be going into more detail regarding how to approach specific technologies in the future, and I hope to see you there!

My March & April In Code

Michael Caveney — Mon, 03 May 2021 16:16:13 +0000

Two months in one blog entry? What happened with March? Well, the whole point of this is for me to learn in public and be forthcoming about the stuff that's not working the way I want it to. More on this later...

What I Learned

Learning really took up a lot of space this month, as some surprises came up that I had to take advantage of:

I was given the opportunity to audit an Angular workshop that an employer that I didn't quite make the cut for provides, for free in exchange for some feedback. While I concentrate on being strongest in React above all other frameworks, I have the most prod experience in Angular, and I don't want to let those skills rust too much. This workshop did a much better job of getting devs unfamiliar with Angular up to speed than any other resource I've come across, and I learned a few new things about how to approach architecture in Angular.
Max Schwarzmuller has a new Next.js course on Udemy. I know, it's Udemy, but I feel the need to go through every major resource I can for key technologies in my bag of tricks, which Next.js definitely is. This was helpful to me specifically in terms of getting a lot more comfortable with the Next.js data-fetching hooks like getStaticProps and API routes.
Developer Josh Comeau briefly opened up a pre-sale for beta access (drafts of the first 4 out of 9 eventual modules, to be fully released in the fall) for his CSS for JS Developers course. On the strength of those first four modules alone, I'm calling it now: this is going to be the best CSS course that money can buy. I've learned tricks that it would have taken me years of trial and error to stumble over in production, and I have a much deeper understanding of how the various parts of the box model, layout, z-index, Flexbox, etc, work.
As a rule, I try not to get dinged on a subject in an interview more than once, and one question I wasn't at all equipped to explain was "Tell me about the critical rendering path". So I went on a deep dive in April with Clyde Matthew's excellent Web Development Secrets Udemy course, which delves into the CRP, AJAX, HTTP, and other behind-the-scenes aspects of development which aren't talked about much, and I know have a clearer understanding of the CRP, and how to optimize applications for it.

What I Built

Hall of Champions: I modified this application but converting some independent application state to derived state with the help of an original-Redux-like implementation of useReducer, which resulted in potential savings of tens of thousands of unnecessary DOM elements per page. The performance improvements from this change were rendered somewhat moot by a refactor that replaced a select input with a number input, saving even more tens of thousands of unnecessary elements on the first paint. More below about my next steps for this app!

Open Source Contributions

Police Data Trust (name change likely later on): I've made some small open-source contributions via Code For Boston before, but this is the first opportunity I've had to contribute to something from the beginning, and while front-end work hasn't commenced at the time of this writing, it's given me some useful practice with team development and preparing complex applications for deployment.
While trying to figure out how to implement a dynamic grid in react-virtual, I noticed an omission/clarification in the docs regarding one of the useVirtual properties, so that was an easy win PR!

What I Read:

The Elements of User Experience: One of the OG User Experience books, this one is a good grounding in UX basic ideas.
Effective TypeScript: My favorite types of learning resources are the ones that take the time to spell out "When you have multiple approaches to solving a problem within this paradigm, here are the strengths and weaknesses of those approaches", and Effective TypeScript is a wonderfully opinionated guide to making use of TypeScript in the wild. This should be on every TS dev's bookshelf!
Learning HTTP/2: A Practical Guide for Beginners: This was a surprisingly engaging (and mercifully short) read about what should be a much drier topic, this book serves as a good crash course for HTTP noobs that will give you a clear mental model as to what the latest version of the protocol improved over its predecessor, and how to approach utilizing and analyzing it.

What I Wrote

I wrote blog posts on overlearning in general and how much HTML you need to be job ready in March. The HTML post is the first in a series that addresses specifically targeting the minimum effective dose of knowledge for certain technologies, so I'm happy to have that one out there.

How Did I Do On Last Month's Goals?

I set several goals for March in my last blog entry: So how did I do with these?

Writing integration and E2E tests for Hall of Champions: I started this, but immediately ran into difficulties with integration testing for an application that's using both Next and Apollo: there are some outstanding performance issues with that app I need to knock out first, but I don't want to kick this can too far down the road.
Read and take notes on Effective TypeScript: I did both of those things, and I feel a lot more confident in my ability to use TypeScript in the wild as a result of the work I've been putting in.
Have UX/UI notes on my Metal Detector blog, and possibly some tests in Storybook: Lol, nope! Though I did update the codebase to Gatsby 3, and I'll be able to get some more work done on this very soon. I build a color palette for this, so yay?
Start studying for AWS Certified Solutions Architect Exam: So, yes-ish? What I actually did was start studying for the AWS Certified Cloud Practioner exam, which I should be ready to ace within the next week or so. While this one isn't a major developer certification, I agree with the take that you should start here if you're newer to AWS since it will provide you with a good overview of the AWS ecosystem, and what tool to reach for to use on 'X' problem. The tricky thing about this is that studying for this certification is a huge time suck, and can take a lot of oxygen out of the room while you're working on other things.

How Am I Doing Keeping Up With My Overall Goals?

I did a little better in March than I did in February, and a little better in April than in March, but the kind of progress I want to see at the moment should be reflected in a resume (and/or in the web presence of projects) that looks at least slightly better than it did the month before. While I'm moving in the right direction there, I want to see bigger results month to month, since my biggest disadvantage as a developer is that my online body of work doesn't reflect my actual level of capability, and that's the biggest issue that needs addressing. I'm seeing learning (read: I'm studying a topic and taking notes on it or blogging about it, but not incorporating it in anything I'm currently building) as taking up WAY more time than I'd like it to, so I'm going to curtail the only acceptable learning for the time being to:

Concepts I don't understand to the depth I need to, especially for writing about the Front-End Development Roadmap.
Any new CSS For JS Developers modules that get released: This should be a slow trickle until August or September of the remaining 4 modules Josh hasn't completed yet.
Any major updates (TS update for Epic React, a complete rewrite for Testing JavaScript) to any of Kent C. Dodds's courses, which I don't expect to see before the summer at the earliest.
MAYBE Moon Highway's GraphQL Workshop, when it's released? This is going to depend on the price and what exactly's in there, but it looks promising?

What's Up For May?

Implementing windowing for Hall of Champions: Performance for the one big page load is NOT QUITE there, but implementing windowing via react-virtual should do the trick. I had some trouble wrapping my head around grids, but the trick seems to be converting the data to a shape that matches the virtual rows and columns (so, nested arrays). I can't find detailed examples of implementing this, so this should make an excellent blog post when I'm done!
Complete freeCodeCamp's Data Visualization certification: I need to switch gears, and I've been chasing this white whale for a while, only for it to be deprioritized since D3 doesn't come up as much as other things in job requirements, so I'll be glad to complete this. The good news is that I have 2 of the 5 projects in the can and one mostly finished in the last week, so things are looking good to have this done with no problem.
Complete MED of CSS blog post: The next in my "what you need to know to be job-ready" blog series, but I'd like to have both this AND the JavaScript one completed in May.
Explore unfamiliar corners of the React API: For May, I'd like to walk away with a deeper understanding of lifecycle in React, and the corners of the API that I haven't spent a lot of time with, such as cloneElement.
Write as I go: This is one of the reasons this post was such a slog is because I didn't add items as I completed them, but did them all at once. I'm changing that this month!

Thanks for reading about my journey so far this spring, I'm hoping to have a lot of exciting things to report in May!

How Much HTML Do I Need To Be Job-Ready?

Michael Caveney — Mon, 22 Mar 2021 17:12:18 +0000

HTML is the foundation of all web applications/websites, and strong knowledge of it is a must for any web developer. But like a lot of development technologies, there's a lot to potentially learn, or overlearn when you're first starting out with the language. I've put together this guide to clearly spell out how well you need to know HTML to become a professional developer!

What Do I Mean By Job-Ready?

Before starting, let me clarify precisely what I mean when I say 'job-ready:

You'll understand the broad strokes of the technology in question, and know the most fundamental concepts that come up every day.
There may be gaps in your knowledge, but those will be limited to secondary concepts or syntax/other details that you'll be able to find the answer to relatively quickly and easily.
You'll know exactly where to turn to find answers to problems or questions that you're running into.

Following the advice here won't make you a master of HTML, but you'll be effective at the day-to-day that you'll need to get started on the job.

What you need to know

You need to understand the core mechanics of HTML: how tags work, attributes, empty/void elements, etc.
Know what ids and classes are and what the difference between them is. This is generally more of a CSS topic (which you should be learning at the same time as HTML), but ids do matter for in-page navigation in some cases.
Understand the basics of the doctype declaration: be aware of doctype declarations pre-HTML5, but don't spend any time delving into the details of these, you should only be concerned with that if your specific workplace requires you to do so.
Have an idea when to use certain form elements. For example, checkboxes and radio buttons may seem visually similar, but someone with training will realize that the latter is for mutually exclusive choices and the former is for choices that aren't mutually exclusive.
Understand how containing elements like <div> work, and get comfortable with semantic containers like <main> or <footer>. While there can be some ambiguity in how and where to employ these, there are some cases like header, footer, and nav that should never have a div in their place.
Have some awareness of the head tag and SEO.
Be aware of a11y and audits: Get familiar with Google Lighthouse sooner rather than later.
Be aware of web security: get to know the [OWASP Top Ten}(https://owasp.org/www-project-top-ten/) vulnerabilites and how to avoid them.

Where To Learn

For where to get the basics down, you can pretty much throw a dart at most of the Udemy courses by Colt Steele, Angela Yu, etc, and be fine with those. I'm going to recommend Andrei Neagoie's The Complete Web Developer in 2021: Zero to Mastery since it gives a great overview of the overall web development ecosystem that will be helpful for brand-new developers.

Another resource that I think every new developer should go through is freeCodeCamp's Responsive Web Design Certification. You'll hear me repeat this exact piece of advice for several other technologies, but if you've gone through all the FCC material and done all the projects for this certification (only getting help when you're dead stuck!), you're good to go for job-ready HTML.

Where to get help/find reference

The official documentation is often a good reference source for technologies, but I don't recommend reading the specs for HTML (this goes for CSS and JavaScript as well), at least not when you're initially getting to know the language because there's so much information and it's not really constructed for easy readability. My recommendation here is MDN aka the Mozilla Developer's Network. MDN is a developer-maintained resource and a very high-quality one. This site will be one of your best friends as a developer for its detailed resources on the three major web technologies. MDN shines in particular for HTML because of its detailed breakdowns of attributes, and you can really stand out from other devs with some careful study of these, learning obscure but powerful options (such as loading or decoding for the img tag).

Chances are you're not the first dev to run into a problem and one of the best places to see if (and how) others handled that particular problem is Stack Overflow. For common gotchas or best practices, you can get a lot of perspective into how to approach certain problems, and how that approach has changed as technology evolved.

In Conclusion

I hope this piece puts you on a less ambiguous path to learning just enough HTML to be dangerous. Join me next time as I talk about how much CSS you need to be job-ready!

How to Avoid Overlearning In Software Development

Michael Caveney — Thu, 04 Mar 2021 23:14:05 +0000

In my last blog post, I talked about what kinds of things people should do to make sure they're learning development as efficiently as possible. Almost immediately after publishing that post, I realized that I had neglected an important topic when it comes to learning: how to avoid overlearning.

What Does Overlearning Look Like?

Overlearning was definitely an anti-pattern that slowed me down in the earlier days of my learning software development. To be specific, I'm talking about overlearning in the forms of both:

Spending too much time trying to learn or memorize peripheral details about a certain technology or subject.
Having too wide a scope of subjects that you keep bouncing between, and not getting a strong grasp or deep knowledge of key related topics in any of those subjects.

Be Strategic About What You Memorize

Is the knowledge a high-level concept that's integral to how a particular technology works (such as the CSS box model or the event loop in Node.js) or specific information you need to know to pass a test (such as S3 storage tiers and their costs for those taking AWS certification tests)? If so, you should put in an active effort to memorize that thing.
Is the information a side-detail (such as what attributes you can add to an input tag in HTML) or a syntactical detail (like the syntax of an arrow function in JavaScript)? This sort of thing is better to look up as needed or to memorize passively through repeated practice of implementing the thing.

Aim for the Minimum Effective Dose of Knowledge

Keep The Scope of What You're Currently Working On Manageable

In Conclusion

The good thing about overlearning is that it's fairly easy to avoid once you're aware of it and what it looks like. Next time, I'm going to discuss how much HTML you need to know to be job-ready!

My February In Code

Michael Caveney — Tue, 02 Mar 2021 20:02:04 +0000

It's that time of the month: time for accountability. What did I get done in February?

What I Studied/Learned

I temporarily renewed my Frontend Masters subscription and went....slightly overboard there, going through their courses on:

Angular 9 Fundamentals
Production-Grade Angular
Enterprise Architecture Patterns
Design Systems with React and Storybook
Website Accessibility,
Introduction to Next.js

February also saw the rerelease of Wes Bos's Advanced React and GraphQL course, redone with the latest version of Apollo and Keystone.js as the back-end. Since I'm making Apollo a priority of mine, I was glad to see that I had a pretty strong grasp on it, but there were still some nice tricks for me to learn here (I can't believe I didn't know about renaming restructured variables...).

What I Read

This month, I read You Don't Know JS Yet: Scope and Closures by Kyle Simpson. It was.....fine? This is the second edition of this book, and I read both editions concurrently. I'm not a big fan of Kyle: He clearly has unusually deep knowledge of how JavaScript works, but I think his explanations are a lot more long-winded than they need to be. This was short but not enjoyable for me, and I feel like I do better with other sources for this sort of deep JS learning.

What I Wrote

I published a new blog entry about what you need to know before you start learning code, which I'm pretty happy with. I'm seeing more movement in my aim to have a path for new developers that reduces decision fatigue and wasted time, and there are more entries following this one coming out very soon!

What I Built

I built less actual code this month than I had in a long time. Looking at my commits, I seem to be limited to:

Making some UI improvements and updating the seed database to reflect changes in the source game for my RPG tracking app
Beginning the basics of a blog to be done using WordPress + Gatsby.

How Did I Do This Month?

Honestly, not that great? February is a tough month in New England at the best of times, and "smack in the middle of a pandemic" is a big hindrance to boot. Having said that, I would like my resume or online presence to be slightly more impressive than it was in the previous month every month, and I really don't have much to show for February, and I don't want that to happen again.

What's Up For March?

This is what I would like to get done in March, at a minimum.

Write a few integration and E2E tests for my main app. Also, use my improved understanding of Apollo and Next.js to clean up some of the messier parts and add some basic error handling.
Read and take notes on Effective TypeScript
Have UX/UI notes on my Metal Detector blog, and possibly some tests in Storybook
Start studying for AWS Certified Solutions Architect Exam

What You Need to Know Before You Start Learning Code

Michael Caveney — Fri, 19 Feb 2021 18:25:21 +0000

Learn How to Learn Efficiently

Build Effective Habits

Map It Out

Set Your Goals and Track Your Progress

Write It Down

Understand That It Won't Happen Immediately...

...Be Patient With Yourself

Learning How and Where to Ask For Help

Is this struggle helping me understand the thing I'm struggling with better? This is good struggle.
Am I banging my head against the wall and have circled back to solutions that I've already tried and didn't work, or have I spent more than 30 minutes on a problem with no forward motion whatsoever? This is bad struggle and you need to get a second pair of eyes on the issue ASAP.

In Conclusion

My January In Code

Michael Caveney — Fri, 05 Feb 2021 20:29:35 +0000

Because I want to take greater pains to learn in public, let's see what my January in code looked like!

What I Studied/Learned

I spent a fair amount of time with Andrei Neagoie's Python course. Coming from a JS background, there weren't a lot of surprises for me here, but I'm glad to be spending some time with this. I should be done with this course before the end of February. I was going to have that be that with Python for the time being,

I also discovered a new learning platform called Educative.io that forgoes video courses in favor of courses made up of text lessons supplemented with code challenges and quizzes that has a lot of promise. Over here, I spent some time with their React, TypeScript, and system design courses.

What I Read

Practical Object-Oriented Design in Ruby by Sandi Metz: This is probably one of the better books about OOP, and I enjoyed it. Mastering OOP isn't something that strikes me as a high-priority

The Tech Resume Inside Out by Gergely Orosz was completely outstanding, and belongs on the shelf of every software developer, at any stage in their career. If you have doubts on how to approach any aspect of your resume, this book will put them to rest.

Fullstack React with TypeScript by Maksim Ivanov and Alex Bespoyasov: I didn't like it. I've read a fair amount of newline books, and with some exceptions like their Data Visualization with D3 book, there are a lot of limitations surrounding price point, keeping the material current, and how well the material is presented for the medium.

I spent a lot of time going over the portions of Epic React that I didn't get a rock-solid understanding of the first time around, and I now have a much deeper understanding of the various Hooks, and when to employ specific advanced React patterns.

What I Built

Lots of changes for my MPQ application that include feature additions, error fixes, the first automated unit tests, and converting some state management from useState to useReducer to enable derived state and make the logic cleaner and easier to follow.
Began a new portfolio in Gatsby using Sai Krishna's starter as a jumping off point. I removed a bunch of the boilerplate that wasn't applicable to my use cases and need to carve out more time in the coming month to add needed content: I want a basic version of this deployed by mid-February.

DEV Community: Michael Caveney

What Tools Does Every Web Developer Need To Have/Know?

A Laptop

A Text Editor/IDE

Node.js

npm

Git/GitHub

Chrome Dev Tools

In Conclusion

Five Books That Every Software Developer Should Own

Grokking Algorithms

Code Complete

Don't Make Me Think!

The Pragmatic Programmer

Pro Git

How Much JavaScript Do I Need To Be Job Ready?

What Do I Mean By Job-Ready?

What you need to know

Core mechanics and terminology

Extra Credit

Where to Learn

Recommended Reading

Basic Resources

Premium Resources

Where To Get Help/Find Reference

In Conclusion

How Much CSS Do I Need To Be Job Ready?

What Do I Mean By Job-Ready?

What you need to know

Core mechanics and terminology

Extra Credit

Where to Learn

Basic Resources

Premium Resources

Where To Get Help/Find Reference

In Conclusion

How to Avoid Overlearning In Software Development

What Does Overlearning Look Like?

Be Strategic About What You Memorize

Aim for the Minimum Effective Dose of Knowledge

Keep The Scope of What You're Currently Working On Manageable

In Conclusion

What You Need to Know Before You Start Learning Code

Learn How to Learn Efficiently

Build Effective Habits

Map It Out

Set Your Goals and Track Your Progress

Write It Down

Understand That It Won't Happen Immediately...

...Be Patient With Yourself

Learning How and Where to Ask For Help

In Conclusion

My March & April In Code

What I Learned

What I Built

Open Source Contributions

What I Read:

What I Wrote

How Did I Do On Last Month's Goals?

How Am I Doing Keeping Up With My Overall Goals?

What's Up For May?

How Much HTML Do I Need To Be Job-Ready?

What Do I Mean By Job-Ready?

What you need to know

Where To Learn

Where to get help/find reference

In Conclusion

How to Avoid Overlearning In Software Development

What Does Overlearning Look Like?

Be Strategic About What You Memorize

Aim for the Minimum Effective Dose of Knowledge

Keep The Scope of What You're Currently Working On Manageable

In Conclusion

My February In Code

What I Studied/Learned

What I Read

What I Wrote

What I Built

How Did I Do This Month?

What's Up For March?