Forem: Chris Achard

Learn redux-toolkit in 10 steps

Chris Achard — Tue, 15 Dec 2020 14:23:23 +0000

This was originally posted as a tweet thread: https://twitter.com/chrisachard/status/1338507383765684224

If you're using redux today, you should be using redux-toolkit

Here's redux-toolkit in 10 steps 👇

1.

Create a "store" with "configureStore"

A store holds all your data and the actions that change that data

Use a "Provider" component (like context) to give the store to all your components

2.

Create named "slices"

A slice holds a chunk of the state, plus the functions that can update that state

No more changing 4 different files just to write one action! 🎉

3.

Add the slice to your store by adding the "reducer" from the slice to the "reducer" in the store

The slice ".reducer" (singular) is auto-created when you define your "reducers:" (plural) in the slice

4.

Functions that update the state in your slice are "reducers"

A reducer takes the current state and the action (data) being performed,

and updates the data in the slice's state

(redux-toolkit uses immer, so those state changes are actually non-mutating)

5.

To get values from the store in a component, use a "selector"

A selector function is given the entire redux store and returns just the data you want

Pass your selector to the "useSelector" hook which will call it for you

6.

To change data in the store, use the "actions" that are exported from the slice

These actions are named based on your named reducers

You don't call on their own however, because they need the current state and action params

7.

To call the action, you "dispatch" it to the store

Use the "useDispatch" hook to get access to the "dispatch" function

then dispatch your action using that function

this automatically updates all components using "useSelector"

8.

Actions can take params as well, which are passed in as the second argument to the reducer

the action "payload" will contain whatever is passed to the action

(to pass multiple params, use an object)

9.

For async actions (like fetching data), you can use redux-thunk (already included!)

Create a thunk (function that returns a function)

it's async and gets dispatch as a param

dispatch inside your thunk function

Then dispatch that action like normal in component

10.

What about just using Context instead?

Yes, I generally start projects with just context, but redux can have some advantages for larger projects or teams:

provides structure that context doesn't
can be easier to test
redux dev tools are pretty cool 💯

Resources

Code for this example:
https://github.com/chrisachard/redux-toolkit-example

Quick start redux-toolkit docs:
https://redux-toolkit.js.org/introduction/quick-start

Redux devtools chrome extension:
https://github.com/zalmoxisus/redux-devtools-extension

The current redux maintainer and general keeper of many links:
https://twitter.com/acemarke

Like this post?

Check me out on twitter! I post software dev tips and threads there: https://twitter.com/chrisachard 🙌

Why We Buy Domain Names (and what to do about it)

Chris Achard — Wed, 27 May 2020 16:15:26 +0000

This post was originally published on: https://make.dev/blog/why-we-buy-domain-names

You have an idea. It's an AMAZING idea.

You think of a domain name. It's an AMAZING domain name, and it's AVAILABLE!

Your mind starts racing:

"This is it! I can make this and turn it into something awesome. I can see exactly what it would look like in my head - it's going to be so cool! I'd better snap up that domain name before someone else does. Hm; I guess I'd better register the twitter, instagram and youtube accounts too..."

So you buy it. You have the domain name, the twitter account, a shiny new email address...

...and then three months later you've done exactly nothing on the project 🤦‍♂️

So the name gets put on the pile of other names - a graveyard of projects that you'll get to eventually. It sits in a list of old ideas tormenting you until it expires. UGH.

WHY?

Why do we do this to ourselves? And, perhaps more importantly, what can we do to stop the cycle?

Loss Aversion

The sharpest pain we feel is loss aversion.

If you don't buy this domain name RIGHT NOW - then someone else will.

They will steal your amazing idea, and then they will get all the credit, and then you'll be forced to get a stupid name instead, and then the project will never reach its true potential.

We feel like once we've found a good name, it's OURS - even before we've bought it - and if someone else buys it first, then they've taken something of ours.

It's even worse when we start imagining our amazing project or company that will live at that domain name. We start to imagine the success of a project before we've done any work on it and (of course), the domain name is the first step in that project's journey, right? So if we lose the domain name then we've lost that entire great future as well.

What do do about it

First: just because YOU are on the verge of buying it - doesn't mean that anyone else is. You can wait a week... it's ok; the domain name will probably still be there in a week.

Second: realize that just because you thought of it first, doesn't mean it's yours! You're imagining what the name WILL mean in the future, and not recognizing it for what it is right now: a commodity that anyone can buy or sell.

Lastly: understand what is happening in your brain. You're becoming attached to something you THINK is going to happen. Instead, try to remind yourself of all the work that would be ahead of you to make that a reality - and that future isn't yours yet.

Good domains are hard to find

The reason we feel loss aversion so strongly is because it's really hard to find a good domain name! Aren't they all taken already?

So, when we find a short, pronounceable name that perfectly describes the project, of course we're going to feel attached to it! We've already spent so much time thinking up a good name for it!

There are at least two ways that thinking is twisted though:

Sunk cost fallacy - just because you've spent a lot of time finding a good name, doesn't mean it's ACTUALLY a good name, or that it's the best name for your project, or even that the project is actually a good idea in the first place.
Good domain names are everywhere - it FEELS like good names are in short supply, but there hundreds of TLDs and millions of word combinations that are undiscovered.

What to do about it

Remind yourself that there are THOUSANDS of domain names that expire every single day. Every single one of those was bought by someone who thought it was a good idea... but then a year, two years, 10 years later - they let the domain go. Do you want to be one of those expired names?

Also, remember that .com isn't the only option! TONS of great companies have been built on .co, .io, .app, and now there are 100s more to choose from. People don't really type in domain names now anyway - they search for it, or click a link from somewhere.

Short term dopamine hit

Buying a domain name FEELS good. It feels like progress.

Buying a domain name is fun, (more fun than the actual work of making the thing), so that's what we do first. Once we give a name to a project it feels real - feels like we've done the first step on a great journey.

What we're really doing is giving our brain a quick hit of dopamine - the same quick hit you get when you impulse buy something in the checkout line at a store.

We're not making progress on the real substance of the project, but instead just doing all the ancillary things that we want to do to make us feel good about starting.

This isn't a fake feeling by the way: it's a real, chemical reaction in our brains that makes us feel amazing... but it's misleading.

It will lead you down the wrong road.

What to do about it

The most important thing to do is recognize it for what it is: a short term hit that will make you feel good for a minute, until the reality of the project sets in. Just realizing that isn't enough though - we have to train our brains to ignore or delay that impulse.

Try this exercise (WARNING! this is dangerous):

Go to https://leandomainsearch.com/ and search for a common, short word like "nice".
Now, LOOK AT ALL THOSE GOOD DOMAIN NAMES (I personally like "NiceZap.com" and "NiceDigest.com")
Here's the hard part: DON'T BUY ANY!

Congrats 🎉 you've just trained your brain a little bit to look at some good names, and then not buy them.

Also, if you do this enough you'll realize that there are HUNDREDS of good domain names still available. Names aren't really in short supply: that's just an illusion.

So what should you do?

You still want to start cool new projects, so what are you supposed to do: just NOT buy that cool domain name you've found?

Here are the three ways I see it:

Create one unified brand name for all your side projects

A lot of people use "myname.com", which is pretty good, and has the benefit that you can launch "myname.com/cool-project", even if "cool-project" already exists in the world.

If you have a single, broad name for all your projects, you get several benefits:

You don't have to register new names + twitter accounts + emails for every single project you start. Time savings!
You'll save money on domain names
You don't get the dopamine hit from finding a good name and registering it; instead, you're forced to actually work ON the project.
If a project does take off, and you want to peel it off in the future, nothing is stopping you!

Just wait until after there is real forward progress.

Wait 7 days before buying any new name

Maybe you REALLY want that name though - ok, ok - but just wait a bit until you buy it.

It will almost certainly be available in a week, so wait a week and then ask: "Do I still really want this?"

I'll bet for more than half of those domain names, you won't really care a week later.

There are two big downsides to this approach though:

First, what if someone DOES buy the name?

Well, they probably won't. But you do have to be ready for that, so figure out how you're going to feel about that NOW, and try accept that feeling before it happens. That way if you don't get the domain, you'll be ready for it, but if you DO get it, then you can be super excited.

Second, it can limit your forward progress if you let it.

If you think that setting up a website is the first step to complete a project, then delaying that will delay the project. RIGHT?

The remedy for that is to realize that setting up a domain name should NOT be the first step in a project.

There is SO MUCH WORK that has to be done for any project, and a domain name isn't need until a ways down the line.

Say "Screw It", and buy the domain name anyway

Ok, so this may be counter productive in a post that is trying to help break a habit... but sometimes buying that domain name is ok.

It can be a cheap way to get a dopamine hit, and they (usually) don't cost that much. So give yourself some slack.

But there are a few things that you'll have to accept:

You'll have to stare a list of domains that you aren't using, and then let them expire when you're done with them. That part can hurt.
They renew every year... so that can reallllly add up! Recurring charges are dangerous.
Mental overhead: How many projects are you still thinking about starting from 2 years ago that you haven't gotten around to yet? That can be really distracting.

Make awesome things

Whether you choose to keep buying domain names or not, I think it's great that the urge to create drives us.

Figure out if you can make peace with your growing list of unused domain names, or if you should use some of the tactics here to try to prevent the purchase in the first place.

Try to be kind to yourself though: it's hard to change your behavior.

And: keeping making awesome things 🦄

Like this post?

🔥 Get one startup tip every weekday in a free newsletter: https://make.dev

Tips for Organizing React Projects

Chris Achard — Wed, 18 Mar 2020 11:42:17 +0000

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1239993582397816838

There is no One Way

React is a library that intentionally doesn't provide guidance about how to structure your project - and that can be really confusing for developers.

While there are no hard and fast rules however, there are some best practices - so here are 10 tips about how to structure your React projects.

1.

First, and above all else: do what works for you and your team

There is a lot of advice out there, and much of it conflicts

Don't feel anxiety about not doing it "the right way"

If it works for you and your team - then that is the "right way"

2.

That said:

Keep all of your components and related code in a src folder

The other folder at the top level should be public with static assets

Images that you are going to import inside of components should be in src, not public

3.

Shared components go in a folder called components or shared

Inside of components, group files by function; e.g., have a folder for form components, one for user components, etc

4.

Don't prematurely optimize though!

At the start it's fine to just dump all the components into the same folder. Clean it up later when you have a better idea of what your app looks like.

That includes having multiple components per file... that's OK! If you don't like it later - clean it up then.

5.

Keep entire pages (route endpoints) in a folder called pages or screens (for React Native)

Inside of that, group files per page in folders

Name the main component either index.js or MyPageXYZ.js

(I like MyPageXYZ.js because I don't like having 100 index.js files - but it does make for more complicated imports)

6.

If a file's default export is a React component, capitalize that filename like the component itself

That's a signal to other devs that a component is being exported

7.

Use absolute imports!

Instead of:

import MyComponent from '../../components/pages/MyComponent'

set up absolute imports and turn it into:

import MyComponent from 'pages/MyComponent'

Much nicer! 🎉

Here's the docs:

https://create-react-app.dev/docs/importing-a-component/#absolute-imports

8.

I like either css-in-js, or keeping css files next to the component they're used in

Centralizing css files in a stylesheets folder doesn't feel great to me anymore, but your mileage may vary - do what feels best

9.

Have a lib or utils folder for the random js helper functions that inevitably get created.

If you don't start with one, those functions get peppered throughout your code and make it hard to share and find

10.

If using redux you can have separate actions, reducers, etc folders (that's how I do it)

Keep it in a redux folder (sometimes called the "ducks" pattern)

Either way is fine

Either way, I do highly recommend Redux toolkit though: https://redux-toolkit.js.org/

Finally

These are all just my opinions!

Others will probably come and disagree because they've found something that works better for them - and that's awesome;

Find what works for you, and use that 🙌

Thanks for reading! If you liked this post:

🐦 You can find me on twitter: @chrisachard

💌 Or sign up for my newsletter: https://chrisachard.com/newsletter

How to Find Consulting Clients

Chris Achard — Thu, 07 Nov 2019 13:24:30 +0000

This was originally posted on: https://chrisachard.com/how-to-find-consulting-clients

If you're considering a move into freelancing or consulting - the one question that's probably on your mind is: "How will I find clients?"

That's the one question I hear most often when I talk about consulting - and it's the one question I felt most vividly when I first started consulting independently.

The good news is that there is a relatively straightforward path for finding new clients. Yes, it takes some time, and yes, it can be a bit of a grind - but you can get there. Here's how.

Start before you're ready

If you're like most consultants, the primary way you'll find most of your contracts is through people you already know.

That sounds like unhelpful advice - but it really points to the type of activity you need to be doing if you think you want to do consulting at some point... you need to get to know people.

That doesn't mean you should go "networking" - it means really getting out and getting to know people that fit in your area of expertise.

The best way to do that is by finding local meetups in your area.

If you're a software developer, find a local group for your language of choice, and go visit. After a few meetings, offer to give a lightning talk. Then a few months later give a full length talk.

You'll grow a lot as a developer by doing those things - and you'll also get to know people who work for companies that could hire you down the line.

Visual proof that you know what you're talking about

The next most important piece of the puzzle is some public proof that you know what you're doing... how can potential clients trust that you can get the work done?

This could be a portfolio, or blog, or ebook (ebooks are magic for this) - but make sure you have something to point to that shows you are an expert in your area.

It seems like obvious advice - but you'd be surprised at how many consultants don't have a public demonstration that they're an expert... and then have trouble finding clients.

Think about it from the client's perspective: how can you be trusted with their work?

The mechanics of finding a client

Ok - so you've gone to meetups, and you have a blog or ebook or youtube channel or podcast... now how do you actually get a client?

First: Start mentioning that you're looking for clients.

Again - this sounds like obvious advice, but you need to actually do it!

Go to the local people who you've met and say:

"I'm starting to look for companies who need help with [X] - do you know of anyone I should talk to?"

The phrasing of that question is important. If you just ask them if their company is looking for consultants - then you're really limited their answers to just "yes" or "no".

By asking if there is anyone you should talk to though - they'll really think about other people they know as well.

Most of my clients in the past have not come directly from people I knew - but people who knew people I knew.

Second: Be watchful for hidden opportunities

Tech companies are continually looking for people to fill software development roles. When people in your network post about their company looking to hire someone in your field of work - that's a great time to reach out and ask if they're ever interested in hiring contractors.

The answer might be "no" or "not right now" - but you will have at least planted a seed in their mind that you're someone who is looking for clients - and that will often pay off months, or even years down the line.

Subcontracting

Another method that works well is to be a sub-contractor for another consulting company.

You won't make quite the same money that you could if you went direct to clients - but you also don't have the same hassles that you might if you were in charge of the client relationship; so there are some tradeoffs there.

To do this, find a consulting company (start small: 5 - 10 person companies are often the most open to these arrangements), and just send an email to ask:

"I'm a consultant for [X] and see that you do that as well. Do you ever have projects that you need help with?"

Many small software consultancies I know about have more work than they can handle at one time or another - so you'll be surprised at how often this type of email will lead to work.

How to get a client quickly

Sometimes though - you just can't wait... you need a client quickly.

In those cases, it can be tempting to go to one of the few big freelancing sites out there and look for work - but don't do that!

Instead, here's what I recommend:

Look on tech job boards for jobs that you know you could do, and that have emails of the people who are actually looking to hire (not HR).
Reach out to those people directly and say:

"I'm not looking for a full time position, but would you be open to a contractor?"

You'll get a lot of people who don't respond, and a fair number of people who say "no" - but I'm often surprised by how many are interested!

Smaller companies are often more open to these arrangements (less red tape), and it's best if you can get the direct email of the person who leads the technical team - so look for those situations especially.

Also - if you do get a "no", you can always follow up with:

"No problem - do you know anyone else I should talk to?"

The tech world is fairly small - and so don't waste an opportunity to ask for introductions.

You only need a few

Independent consulting sounds big and scary at first, but remember - you only really need a few clients to have a really good year.

This isn't a high-volume sales game; but rather it's more about getting to know people and showing that you can do the work

That doesn't mean it's easy!

...but right now the world is clamoring for more and more software developers.

So don't get discouraged by the "No"s... you only need a few "yes"es to make it all worth it.

Like this post?

Find more on twitter: @chrisachard
Or join the newsletter! 📬 https://chrisachard.com/newsletter

Thanks for reading!

Fear Driven Development

Chris Achard — Thu, 31 Oct 2019 13:13:49 +0000

It's Halloween today in the US!

Halloween is a day where kids can dress up as something scary and go out at night to knock on the doors of strangers.

That's a lot of things to be scared of! Scary costumes, out in the dark, and talking to strangers. But what is the reward for confronting those fears?

🍫🍭🍬 CANDY 🍬🍭🍫

Pounds and pounds of glorious candy...

Fear in Software Development

While coding, there is a similar list of fears we might have. Do any of these thoughts sound familiar?

"This block of code looks gnarly; let's ignore it for now"

"That library seems confusing; I'll figure it out later"

"This feature seems hard... I'll skip it and come back tomorrow"

I have those thoughts all the time.

Recently though, I realized how it holds me back to put off the difficult tasks until "later".

Those tasks sit on my todo list, staring me in the face, and I know that I'm going to have to figure them out at some point...

Embracing Your Fears

So what happens when I finally do get around to tackling the very difficult problems?

They usually aren't so bad after all.

It happened to me recently with Stripe:

I hadn't ever done a full Stripe integration front-to-back by myself. I've worked with it before, but had never actually done the setup and initial integration myself.

The tasks seemed really difficult; my thought process was something like this:

"Charging people real money? Sounds pretty hard"
"What if I do it wrong? I don't want to make a huge mistake when it involves charging money"
"There are a ton of docs, and so many ways to do it... where do I start?"

All the while, the bullet point of "Integrate Stripe" was on my todo list - just staring at me 👀

Eventually I just had to get it done, so I got started... And you know what? It really wasn't all that hard after all.

It was kind of tricky, yes; and it did take most of a day to feel like I really understood what I was doing; but after that? It became easy.

Difficult tasks have a way of becoming easy after just a little bit of learning.

Fear Driven Development

So I'm trying something new now.

Whenever I have a really scary task on my list: I'm going to tackle that one FIRST.

We don't need to let our scary todo items paralyze us. We get to choose our response to them - and I choose knowledge and understanding.

Big gnarly todo items are often not so big and scary once you break them down a bit - but it's the fear of those items that can paralyze your development and slow you down.

Reaping the Rewards

So what's the reward for tackling the unknown?

🍫🍭🍬 GLORIOUS CANDY 🍬🍭🍫

oh, that's Halloween.

I mean:

Knowledge and peace

It feels really good to tackle a big problem. The build-up feels awful (not knowing where to start; not knowing how long it will take) - but the only solution is to get started.

So next time: instead of procrastinating on the big, scary thing I have on my todo list... I'm going to start with that one.

Like this post?

Find more on twitter: @chrisachard
Or join the newsletter: 📬 https://chrisachard.com/newsletter/

Thanks for reading!

DNS Record Crash Course for Web Developers

Chris Achard — Tue, 29 Oct 2019 11:19:50 +0000

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1188870256971915265

Confused by DNS Records? A, CNAME, ALIAS...

Me too 😬

Let's change that! (cheatsheet at the end)

🔥 DNS Record crash course for web developers 👇

1.

To get to www.example.com, your computer needs to know where on the Internet that server is

That means: it has to know what IP address to talk to

The way it finds out is the Domain Name System (DNS)

2.

When you register a domain, you can set many types of DNS Records

Each record has a Type, a Host, and a Value

"Types" are predefined
"Host" represents the root (@) or a subdomain (www)
"Value" is an IP or web address, or other value

3.

The A record maps a subdomain to an IPv4 address

This is most commonly used at the root, so it tells your browser where example.com lives

The AAAA record does the same for IPv6

4.

CNAME maps a subdomain to another domain name

This can be another subdomain on the same site (like forwarding www to the root)

or another domain like heroku - where your app lives

5.

But there's a problem with CNAME!

Once you define a CNAME record for a subdomain (host), you CAN'T DEFINE another record for that same subdomain

Because of this, you can't use CNAME at the root level (where you need other records to exist)

6.

To fix that, ALIAS is used (sometimes ANAME)

ALIAS is like CNAME, but it's a non-standard dns type

So you can use ALIAS to forward your root domain (example.com) to your app's server (example.herokudns.com)

7.

That lets you put other records at the root, like:

TXT records, which provide extra info to any computer reading the DNS record

TXT records are often used to prove you own a domain - because only the domain owner can set a DNS record.

8.

Or:

MX records (Mail eXchange), which you use to specify another server that handles your email (like google)

MX records are unique because you can set multiple servers that are each given a "priority"

9.

There are many other record types, but those are the ones you'll most often set yourself.

For each record, you also specify a Time To Live (TTL)

This tells DNS servers how long to cache your DNS values

10.

TTL is why it can take some time for your new domain records to "propagate"

DNS servers, your ISP, and even your own computer can cache DNS records, serving up the "old" values until the TTL runs out

Cheatsheet

Hopefully that made DNS a bit less confusing for when you set up your next domain!

To put it all together, here's a PDF cheatsheet of this crash course: https://chrisachard.com/cheatsheets/dns-cheatsheet.pdf

🎉

Like this Post?

You can find more on twitter: @chrisachard
Or join the newsletter 📬 https://chrisachard.com/newsletter/

Thanks for reading!

What is your favorite editor and why?

Chris Achard — Tue, 22 Oct 2019 19:50:49 +0000

I used to use TextMate, but switched to Sublime Text when they stopped supporting TextMate 1 (many years ago), and have gotten really fast with Sublime.

Recently though I've played around with VS Code and really like it (because of how customizable it is), but I still find myself opening Sublime more.

So: without starting any editor "wars", I was just curious: what is your favorite editor right now and why?

If you'd like to give more context, I'd also love to know: What is your favorite plugin/extension for that editor?

For Sublime, one fun one is "Emoji" (so you can insert emojis with just a few keystrokes): https://packagecontrol.io/packages/Emoji

And for VS Code, an underrated one I think is "Custom CSS", which lets you fully customize the VSCode experience by writing custom css: https://github.com/be5invis/vscode-custom-css

Music to Listen to While Coding

Chris Achard — Tue, 15 Oct 2019 21:08:50 +0000

This was originally published on: https://chrisachard.com/music-to-listen-to-while-coding

Music is a very personal thing, so there's no "one size fits all" for music that will put you in a good mindset to tackle a complicated coding challenge.

Music Guidelines

With that said, here are the guidelines I follow when choosing music for a coding session:

1. Limited Vocals

If there is a vocal track in music, my brain tends to focus on the words being sung - so when I want to get deep into a coding problem, I'll select music that doesn't have any vocals.

That way, I can focus on the work, and not on the music - the music will just fade into the background.

2. Familiar Music

For the same reason, I tend to select the same music (or type of music).

If I'm listening to music that's new to me, then I will focus on the music instead of the coding - so by selecting music I've heard many times before, my brain can separate the music from the coding.

3. Good Beat and Pace

If music is too slow or ethereal, then it signals my brain to move more slowly.

If music is too fast or intense, then I feel rushed or stressed.

Neither condition is good for deep work! Instead, I focus on finding music that has a consistent (but not intense) forward motion - pushing me to keep working.

Specific Music Choices

So: what types of music fit those criteria?

1. Movie Soundtracks

I love movie soundtracks of "big", epic movies - they are often orchestral (so limited vocals), and build in a really unique and positive way.

Soundtracks will also be a few hours long, so there's plenty of consistent music for a nice long coding session.

Suggestions

Interstellar Soundtrack: https://www.youtube.com/watch?v=DY8nqIfsQkU

Lord of the Rings Soundtrack: https://www.youtube.com/watch?v=_SBQvd6vY9s

2. Video Game Soundtracks

Keeping in the soundtrack theme is an often overlooked genre: video games!

Video game soundtracks are great because you know they were specifically designed to keep players "in the game" - so they're repetitive, and focused on a mission; that makes them great for coding!

I recommend picking video games that you're familiar with, but here are a few that I listen to:

Suggestions

Final Fantasy Soundtrack(s): https://www.youtube.com/watch?v=7Iweue-OcMo

Outpost 2 Soundtrack: https://www.youtube.com/watch?v=6ilJcs7JL4M&list=PL0G3yY9NMFWcCdapK2ub5-XVgftyDVE3g

3. Electronic Study Music

Not all EDM is good for coding, but there's a specific sub-genre of electronic music that is specifically designed for keeping you "in the zone".

It often goes by the name "study music", (so you'd expect it to be good for studying!) and I really like it for coding as well.

Suggestions

Electronic Music for Studying: https://www.youtube.com/results?search_query=study+edm

4. Orchestral Music

If you're a fan of classical music, then there are endless options to choose from here.

I like to listen to entire concerts, because there are usually a variety of songs played (different tempos, etc), which can be a nice way to break up the day.

Suggestions

Beethoven 9 https://www.youtube.com/watch?v=rOjHhS5MtvA

5. Lounge / Elevator Music

This is music designed to be played in the background!

There are endless hours of lounge music available, and they all create a nice backdrop for getting real work done.

Suggestions

Relaxing Jazz: https://www.youtube.com/watch?v=rOjHhS5MtvA

Ambient Chillout: https://www.youtube.com/watch?v=r-tEQzU3fwY

6. Coffee Shop Background

Sometimes, you just want to feel like you're not in an office :) That's where coffee shop background noise can help!

There are hours and hours of coffee shop background tracks online, and it can be a nice way to feel surrounded without any people actually being around.

Suggestions

Coffee Shop Sounds: https://www.youtube.com/results?search_query=coffee+shop+sounds

Why Listen to Music

I don't always listen to music, but when I do, I want it to get me in the zone - and not to distract from the work I'm doing.

Remember: there are no rules here! Whatever works for you, works for you; but hopefully this post has given you some new ideas about what to listen to the next time you need some background music.

Happy listening!

Like this post?

Find more on twitter: @chrisachard
Or join the newsletter! https://chrisachard.com/newsletter/

Thanks for reading!

Intro to Regex for Web Developers

Chris Achard — Tue, 08 Oct 2019 17:23:11 +0000

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1181583499112976384

1.

Regular expressions find parts of a string that match a pattern

In JavaScript they're created in between forward slashes //, or with new RegExp()

and then used in methods like match, test, or replace

You can define the regex beforehand, or directly when calling the method

2.

Match individual characters one at a time,

or put multiple characters in square brackets [] to capture any that match

Capture a range of characters with a hyphen -

3.

Add optional flags to the end of a regex to modify how the matcher works.

In JavaScript, these flags are:

i = case insensitive
m = multi line matching
g = global match (find all, instead of find one)

4.

Using a caret ^ at the start means "start of string"

Using a dollar sign $ at the end means "end of string"

Start putting groups of matches together to match longer strings

5.

Use wildcards and special escaped characters to match larger classes of characters

. = any character except line break

\d = digit
\D = NOT a digit

\s = white space
\S = any NON white space

\n new line

6.

Match only certain counts of matched characters or groups with quantifiers

= zero or more
= one more more ? = 0 or 1 {3} = exactly 3 times {2, 4} = two, three, or four times {2,} = two or more times

7.

Use parens () to capture in a group

match will return the full match plus the groups, unless you use the g flag

Use the pipe operator | inside of parens () to specify what that group matches

| = or

8.

To match special characters, escape them with a backslash \

Special characters in JS regex are: ^ $ \ . * + ? ( ) [ ] { } |

So to match an asterisks, you'd use:

Instead of just *

9.

To match anything BUT a certain character, use a caret ^ inside of square brackets

This means ^ has two meanings, which can be confusing.

It means both "start of string" when it is at the front of a regex, and "not this character" when used inside of square brackets.

10.

Regexs can be used to find and match all sort of things, from urls to filenames

HOWEVER! be careful if you try to use regexs for really complex tasks, such as parsing emails (which get really confusing, really fast), or HTML (which is not a regular language, and so can't be fully parsed by a regular expression)

There is (of course) much more to regex like lazy vs greedy, lookahead, and capturing

but most of what web developers want to do with regular expressions can use just these base building blocks.

I'm already writing a follow up post with a bunch of real world regex use cases 🎉

Like this post?

Find more on twitter: @chrisachard
Or join the newsletter 📬 https://chrisachard.com/newsletter/

Thanks for reading!

Redux Crash Course with Hooks 🎣

Chris Achard — Wed, 02 Oct 2019 12:01:45 +0000

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1179015849459507200

Does Redux have you confused?

It can be simpler with the new Redux hooks.

🔥Here's a crash course into Redux, and how you can use it with React function components:

1.

Redux gives you a central place to put your state (data) for JavaScript apps

It's most often used with React (via react-redux)

This lets you access or change your state from ANY component in your tree

2.

Your state lives in a central Redux store

That store is created with a function called a reducer

A reducer takes in a state and an action,
and returns the same or a NEW state

3.

The store is given to your app using the Provider from react-redux

Use the provider to wrap your entire app, so that any component in your app can access the store

4.

To get data out of the store, use the useSelector hook from react-redux

selector is just a fancy word for: "function that gets data from the store"

useSelector takes a callback, which gets the entire redux state, and you just pick out what you need for that component

5.

Actions are plain JavaScript objects

All actions should have a 'type' key

They may also have additional keys (parameters)

6.

Actions are not "called", but are "dispatched" to the reducers

The action type is what tells the reducer what to do (return a new state or the old one)

7.

To change data in the store, first write your reducer:

Reducers are often written with switch/case statements, but don't have to be

They just have to take in an action and a state, and return a new state

8.

It's important that reducers return a NEW state object (and not mutate the old one) so that your components will re-render when something changes

Don't set state values in reducers - only ever return a new state object with changed values

9.

To dispatch an action, use the useDispatch hook from react-redux

call useDispatch with an action object,

which will run through the reducers,

and will potentially change the state

10.

All connected components (that call useSelector) will automatically get the new state

This is treated like props or state changing - useSelector will automatically detect changes and React will re-render the component

🎉 TADA!

That's the basics!

Redux can be used in much more complex ways, but the core is always:

dispatch an action to the store
which may or may not change the state via reducers
access that state with a selector
and changes will automatically re-render your app

💯

Code example:

View and play around with the code used in this course on codesandbox:

https://codesandbox.io/s/redux-count-hrdtd?fontsize=14

Like this crash course?

Find more on twitter: @chrisachard
Or join my newsletter: https://chrisachard.com/newsletter/

Thanks for reading!

How I Tripled My Twitter Following in One Weekend by Teaching React

Chris Achard — Tue, 24 Sep 2019 23:03:39 +0000

This was originally published here: https://chrisachard.com/triple-your-twitter-following

No, it doesn't involve spam or gray-hat techniques or paid ads.

Short Answer: Dan Abramov retweeted one of my tweets

Long Answer: I worked really hard creating threads that taught people something, and then Dan Abramov retweeted one of those threads. Also, I live tweeted React Boston the whole weekend, though it's hard to say what effect that had.

It absolutely involved a lot of luck and timing, but as Rob Walling is a fan of saying: "The harder I work, the luckier I get"

Here's what happened:

The first few "crash course" threads

On Friday night I had just under 700 followers. That number was only 400 a couple of weeks before - but I had been producing twitter threads that tried to teach a single concept, like git:

https://twitter.com/chrisachard/status/1171124289128554498

And those were doing pretty well. People seemed to like the format, and I got a lot of messages and comments about how it helped them finally understand the topic.

Also, I really liked making those threads - it was fun to try to condense such a huge topic down into only a few tweets, so it was all a win-win. 🎊

(You can find a complete list of the crash course threads here)

The big one

Then I decided to tackle React head on. The challenge I put to myself was to teach an intro to React in just 10 tweets. It took several attempts and a couple of days to get right, but I finally had something I was proud of!

It really was an intro to React in just 10 tweets (with supporting images and code), and I put it out on a Friday, just before my flight to React Boston (which was a great conference btw!)

https://twitter.com/chrisachard/status/1175022111758442497

It slowly started to spread, and seemed like it resonated well!

Then it went crazy

Sometime on Saturday, while tweeting about the React conference I was attending, my twitter notifications started going crazy.

It took me a bit to figure out what happened, but then realized that Dan Abramov (the creator of Redux, and part of the React team at Facebook) had retweeted the React thread! 🎉

(Thanks Dan!)

It was the first time anything like that had happened to me, so it was kind of fun watching the Twitter app just give up with notifications, and just get stuck at "20+"

By the end of the weekend (which I had started with < 700 followers), I had 2,077 (and still growing!)

https://twitter.com/chrisachard

😲

What can we learn...

The goal of the "crash course" twitter threads has always been to teach people new things right on twitter.

This is a style that has been popularized by Wes Bos, Adam Wathan and Steve Schoger, and the whole idea is to teach people where they are.

I knew that if I made really good content, then people would start to take notice (which they did) - but the primary goal of anything like this HAS to be to teach people stuff.

You can do it too

So: make sure that your primary goal is not to gain followers (that will happen organically) - but to teach as much as you can.

It took a long time (years!) to find a format that I liked producing that other people clearly like consuming, but I'm happy that I kept at it.

It's hard work to create content that teaches people complex topics - so keep practicing! Get feedback, and keep iterating until you find a format that you like as well.

The reach of Twitter

So far, that one post has had over 400,000 impressions, and over 15,000 engagements on twitter:

It still totally blows my mind how big Twitter is, and how many niches abound. 🤯

So what do you want to teach?

What's next

Well, I already had about 10 more crash courses planned... but now I'm really going to double down. 💯

The threads that do the best are the ones that take the most time to produce (so I'm ready for that!), but it's definitely worth it - it's clearly a format that people like to learn from, and that helps (based on all the comments I've received).

If you want to keep up with the courses, then you should obviously follow me on twitter 😄

But also: I encourage you to teach what you know as well!

It's difficult but rewarding - and it's the only way I really know to consistently grow your following (if you're into that sort of thing).

Good luck - and tag me if you do! I'll check it out 😊

Like this post?

You can find more by following me on twitter 😄: @chrisachard
Or by joining my newsletter: https://chrisachard.com/newsletter/

Thanks for reading!

How to Make the Most of a Tech Conference

Chris Achard — Tue, 24 Sep 2019 11:42:04 +0000

This was originally posted on my blog: https://chrisachard.com/make-the-most-of-a-tech-conference

It can be a big investment for you and your company to send you to a work conference. Not just the ticket price - but you have to take time away from work and potential disruption to your team's workflow.

So: how can you be sure that you get the most out of a conference?

I've just spend the last weekend at the great React Boston conference - so while it's still fresh in my mind, here is what I did, and all my recommendations for you as well.

First: decide why you are going

There are many reasons you might want to go to a conference; here are my top three:

Learn new things
Meet new people
Take a break from normal work

Those are all important to me at a conference, so my list of things to do may be different than yours.

If your primary motivation for going is simple a mini-vacation: then you can probably ignore the rest of this advice! But if your primary motivation is to become better at your job, then you'll have to do some actual work at the conference in order to get the most out of it.

Here's what I recommend:

1. Do some research before hand

If you go into a conference totally blind, then you might be overwhelmed by the amount of new technology or terminology that is used.

A good conference will progressively expose you to that vocabulary by carefully selecting the order of the talks... but it's still probable that there will be at least a few talks about new topics to yet.

For that, I recommend two different types of research:

Topic research: Look at the list of talks and do at least a little bit of research on the topic before hand. Even just a few minutes of googling about a topic can give you a basic vocabulary about it - so you won't be so lost during the talk.

Speaker research: It's also good to look up the speaker list before hand, and get a feel for who they are, and what their background is. At many tech conferences, you'll be able to interact with the speakers throughout the conference - so it's nice to know at least a little bit about them so you can know their context when you talk to them.

This research is especially important during a multi-track conference. How are you supposed to decide what talks to attend, if you don't know anything about the topics or the speakers!

So just do a bit of research beforehand (even if it's the night before in your hotel room 😄), and you'll end up with a better, personalized conference.

2. Join the conversation

Many conferences today will have at least an active twitter account during the conference - and some have active Slack channels as well.

Take advantage of that!

Get Slack loaded onto your phone, introduce yourself in the intros channel - and respond to other people there as well. I've found that the best conferences I've attended have been the ones with an active Slack channel, with people setting up impromptu coffee meetups, or coordinating dinners.

Also - if it's your thing - and if the conference has an active twitter presence - consider tweeting at them during the conference! Twitter is a great way to connect during a tech conference, because much of the audience will be on Twitter as well - so take advantage of that connection.

3. Go to bed on time 😅

This one is hard - especially at a multi day conference with nighttime parties - but you'll be no use to yourself if you stay up too late and then are walking-dead the next day.

So pace yourself! You are here to have fun (see the points above) - but unless that's your only goal, you need your sleep too.

So yes, we're all adults here... but adults need to be reminded of bedtime too 💤

4. Leave your laptop in your room

It can be super tempting to bring your laptop and get some quality work time in during the conference... but then what's the point!?

If you bring your laptop and open it during the talks "just to check some email" - you'll get distracted. I guarantee it.

So do yourself a favor and leave your laptop in your room.

I do recommend good old fashioned pen and paper for notes though. 📓

5. Bring a backup phone battery

So you've left your laptop in your room - but let's be real... you need SOME connection to the outside world 😆

Since you'll be on your phone more than normal, in a building with probably not-so-great reception, and far away from your room with a power cord... you'll want an extra battery.

I have one (that I got for free from another conference) that is tiny and just slips into my pocket, and holds about one extra charge for my phone.

Perfect!

6. Actually meet new people

If one of your goals is to meet you people (and if not - then why not just watch the conference on youtube later?) - then you have to actually walk around and meet new people!.

Yes, it will be uncomfortable, and yes, it will be a little weird - but remember; the other people are at this conference to meet new people as well!

So don't just stand around waiting for people to come talk to you - you have to actually go talk to them.

My favorite pro tip for this is to walk up to a circle of people speaking and just say:

"Can I join your circle here?"

... I don't think anyone has ever said no to that - and I always have a good conversation!

It does take practice, but it's worth the practice.

7. Go to the events

A lot of the conference is not going to just happen during the talks. If you really want to get to know the other attendees and speakers:

That's what the events are for!

Most conferences have at least one party or social night included - so make sure you go.

While you're there, practice number 6 (actually talking to people), and go with no agenda - just have fun! You'll learn new things and meet new people, which are 2 of the primary reasons you're going, right?

8. Take a break when you need to

Obviously you need to watch out for your own energy and health.

If you haven't slept well in the hotel, and you just need a break - then there's no shame in just going back to your hotel room to take a bit of a nap.

You're no use to yourself (or others!) if you can't function; so take the break that you need to, and then come back ready to learn and meet people 🎉

9. Spend some time afterwards to decompress

Finally - conferences have a way of packing your brain with new knowledge and ideas. If you just go back to work on Monday without processing all of that new information though - you won't be able to turn those new ideas into actions.

I like to spend at least an hour (longer if I can) just writing down the ideas I heard during the conference, and how I'm going to apply them in my job.

If you're flying back the next day, then that is a great time to do a decompress journal. When you turn off your laptop and phone during takeoff, just take out a notebook instead and start writing.

I'm always surprised at how much detailed, actionable data comes out of my head during these writing sessions; and I can guarantee that I would have forgotten most of it if I didn't take the time to write it down.

Have fun!

So that's it - know why you're going, and then when you show up - actually show up!

Be prepared to learn; meet new people; but also to have fun.

Conferences are a way to get yourself out of your normal element, and to pack your brain with new information that you can apply at work - so take advantage of that change of scenery.

Like this post?

You can follow me on twitter: @chrisachard
Or join the newsletter for more: https://chrisachard.com/newsletter

Thanks for reading!