DEV Community: Cat McGee

Why web3 matters

Cat McGee — Tue, 28 Sep 2021 20:08:03 +0000

Recently, a Twitter thread entitled Why web3 matters went viral. And as much as I love this sentiment, I couldn't help but roll my eyes when reading through Chris Dixon's buzzword-filled tweets. That kind of blockchain lingo is loved by crypto salespeople and NFT grifters, but is quite far removed from people who, well... actually want to understand why web3 matters. It doesn't help that Twitter is a cesspool for controversies, and Chris's thread seemed to divide people into two groups - you either agree with everything he said 100% making you a delusional zoomer, or you're an old-fashioned granddad who can't keep up with the times. I'm here to help you make up your own mind, and hopefully find yourself somewhere in between these two extremes.

If you're someone who loves to read irrationally enthusiastic reassurances about the next blockchain get-rich-quick scheme, this post is not for you. But if you're fed up of the constant bombardment of jargon and actually want to understand why on earth Twitter is suddenly talking about a new web, read on. I'm going to tell you why web3 actually matters and what it means for you - a person, not a venture capitalist. 😉

What's wrong with our current web?

We've had two iterations of the web so far - known as, you guessed it, web1 and web2. Web1 was king from approximately 1990-2005, and most people using the web in those days were consumers rather than creators. Content was consumed by many but created by few, mainly obnoxiously nerdy tech people and forward-thinking news sites. It is now nicknamed the 'read-only web.'

Web2 changed that, particularly with the introduction of social media. Suddenly, more and more people were posting, creating, and sharing their lives with the world. Those who were originally only reading news stories started publicly arguing with them. And the internet that we know today was born.

But there's a problem. Everything that we post, share, comment, like, or furiously screenshot is owned by someone else. And it goes deeper - it's owned by 4 big companies: Google, Apple, Facebook, and Amazon. We'll call them GAFA.

The web has gone from being created by few and consumed by many, to being created by many and consumed by many, to being created by many and owned by few. GAFA have created a Data Economy, feeding off of the content that we create and using it against us. They control the information we create, the information we see, and with that they're able to gently exploit our human weaknesses by manipulating what we believe, which in turn makes ads more effective - the Data Economy business model.

The company with the most data always wins. Facebook buys out any and all threats to their social media monopoly - remember when WhatsApp was privacy-focussed? Or when Instagram was actually a non-toxic platform for friends to share photos? Google has made Bing a meme, Yahoo a boomers-only search engine, and reduced Mozilla to desperately holding onto the ethical part of the browser market. And Amazon has basically disrupted every market in existence and changed the course of the economy. But like, in a bad way.

The Data Economy isn't just an exploitive and rigged business model, but it also has devastating consequences when things go wrong. When so much data is owned by one entity, it makes them a prime target for hacking. And oh boy, do these guys get hacked. For a glimpse into how insecure the Data Economy is, have a look at Wikipedia's list of data breaches. And to find out if your data has been exposed to the public, enter your email into Have I Been Pwned. Not only are there accidental data breaches, but there have been cases of purposeful illegal selling of data from GAFA. There is no sign of this stopping, and no incentive to stop either. That's where web3 comes in.

The web3 ideal

Web3 promises two things:

To remove the ability to make money from data
To create incentives to make money on the internet through other means

By achieving both these goals, we will no longer live in a Data Economy. Companies will have to find new ways to make money, and people will be able to take control of their own data. There will be no incentive to hack into data centres. We'll live in a world where the people consume, create, and own our information, not in a world of surveillance capitalism that feeds 4 power-hungry data-hoarding entities.

Sound unrealistic? Up until now, it has been. We've been relying on governments and companies to do the right thing, and we've seen how that's panned out. But if we can't trust people to enforce these promises, we can trust technology. So let's go through how web3 can technologically fulfill each of its promises.

Remove the ability to make money from data

Web3 has often been called the decentralized web. While data is currently centralized and owned by GAFA, web3 applications separate their data and store it on a large number of computers and hard drives. These computers are not owned by one company - the idea is that each person can own a small amount of data. Without one entity having access to data, there is no ability to make money from it.

There are plenty of ways to accomplish this technologically. The most well-known solution to this currently is (brace yourself) blockchain. Without going into boring details of how a blockchain works, it allows each computer to hold a small amount of data - a block in a chain.

Bitcoin and Ethereum are the two biggest blockchains in existence, but others like Solana and Cardano are slowly catching up. There are hundreds of decentralized apps, aka dapps, already deployed on Ethereum, and building on the blockchain is getting easier by the minute. It is by far the most secure decentralized architecture.

There are other ways to build a decentralized network. The obsession over and reliance on blockchain is, quite frankly, BS. There are decentralized storage companies out there (like Storj) that pay any person to host some of their storage space to be a 'node' on their network, while allowing developers to store their data on these nodes.

Web3 is not blockchain - this is an incredibly important point to understand. Blockchain is a web3 architecture, but it is not the only way to accomplish a decentralized web, and in most cases it is unnecessarily expensive. However, with blockchain comes cryptocurrency, which brings us to our next point.

Create incentives to make money on the internet through other means

Without one entity having access to large amounts of data, we can't have a Data Economy. And removing the Data Economy already opens up new incentives to make money through other means. But when people talk about making money using web3, they're talking about crypto.

Just a warning: some of this next part may sound similar to Chris's thread, but I promise it will actually be coherent.

Crypto provides a financial incentive, known as tokens, to participate in the building of a decentralized web. There are many ways to earn tokens - some examples are offering storage (like Storj), creating content, or sometimes even being early adapters of the application. Companies can set up their own protocol for rewarding their users, and it cuts out the need for other third party services. There is no need to send data through AWS, Stripe, or PayPal, as tokens can be sent directly from the provider to the user.

Tokens can also be sent directly from one user to another. No more relying on Google to give you your YouTube earnings, or directing your audience to Patreon so they can donate - users can directly 'tip' you a token if they like your content. There are also the famous NFTs, which, sorry Chris, do not let you "own a piece of the internet". NFTs are tokens too, but they are not equal in value to each other. While owning an OG token is like owning a dollar, owning an NFT is more like owning a painting. All dollars are equal in value, but not all paintings are equal in value. NFTs are each unique, and they're pretty cool - check out OpenSea if you're interested in getting into it.

This token economy is exactly what the web was created for in the first place. It's direct. People reward people for providing a service or participating in a better world. There is no malicious data tracking or manipulation. No exploitation, no incessant ads, no algorithms designed to be addictive. No reliance on huge profit-driven companies. Just people interacting with people. That's web3.

So where are we?

Most apps you use are still web2. The majority of dapps out there are purely for finance, like trading crypto or buying and selling NFTs. But we're getting there, and web3 is already beginning to expand into huge industries, like music, video streaming, and even gaming.

Web3 may currently seem pretty inaccessible, and when buzzword tweets go viral it continues to push the narrative that the decentralized web is only for people already in the know. But web2 was like that too. There are thousands of people passionately working to make this space more accessible for all, and you'll soon be using web3 apps without even knowing.

It's super easy to start your own journey into web3, and you can get involved today by installing Metamask, a browser extension to make your browser compatible with blockchain apps. If you're a developer interested in getting into the web3 space, I cannot recommend Nader Dabit's content enough.

Thanks for reading. This is my first ever post about web3, and was originally posted here. I'll be posting more about the decentralized web so if you're interested in reading my (potentially controversial) takes, make sure to follow me on Hashnode or slide into my Twitter DMs!

Want to be a full-stack developer without a degree? This is what you need

Cat McGee — Sat, 22 Aug 2020 15:29:56 +0000

Twitter | YouTube | Instagram | Buy me a coffee

Hello everyone! Becoming a developer isn't easy, and it becomes even less easy when you don't have a degree. Not because you're any less skilled, but because a lot of companies look for a degree to demonstrate your skills. Honestly, it's pretty rigged. I'm sure we all know that you learn so much more from working or coding on your own than you ever could from university.

The good news is - you don't need a degree. There are plenty of other ways to demonstrate that you will be an amazing employee. And this article talks about everything you need to have to show off your skills.

If you're like me and have a short attention span, you might rather read this as a slightly less-detailed Twitter thread. So here you go.

1. One big project

This is the most important thing on this list, and if you take anything away from this article, let it be this.

Build a big project that incorporates everything - frontend, backend, and database. It'll show four things:

You can code
You understand the layers of software
You are hard-working and can complete a project
You are passionate

All of these things are so important for becoming a full-stack developer. If you can have one project to showcase your knowledge here, you're golden.

Get this project up on GitHub and have an EXCELLENT README to go along with it. Talk about it on your CV, detailing what your project does and the stack you used.

Make this project something you're passionate about. Know it back to front. You'll be asked about this in interviews, so you need to know how it works!

2. Something on the cloud

A lot of people use the cloud nowadays, so it's 100% worth your while to learn it. You don't have to learn it in depth. Just deploy something up there and call it a day. That one process will be enough to demonstrate that you understand the cloud and how to use a cloud service. Deploy your big project we talked about before, or something else if you like.

It doesn't really matter which service you'd use, but I'd go with AWS. They're widely used and have a great free tier.

Having something you built up on a domain that a potential employer can use and play with is incredible. It's such an easy way to showcase what you can do, and an employer will see that.

3. A few blog posts

I'm sure you already know this, especially if you're on DEV.to, but writing blog posts is so incredibly useful.

You will cement your knowledge
You will help someone
Your technical experience is broadcasted to the world
You can show off your communication skills
You can show off your personality

While writing articles isn't necessary to showcase these skills, it certainly helps.

Just one or two blog posts can help a potential employer see your communication skills and your shining personality!

4. Work experience

Work experience is unbeatable. It shows that you can work in a team, which is more often than not essential in a full-stack developer position. It also shows that you can convert someone else's requirements and vision into a real product, which is, you know, what a job is.

I know what you're thinking: "how can I get work experience without... work experience???"

There are plenty of ways to accomplish this and get it on your CV. You can make a website for a friend, or work with someone on your football team to create some sort of management software for your coach. Even if this isn't strictly related to development - maybe your aunt wanted a design for her cookbook promotion page - it is unbeatable experience.

5. A personality

Soft skills - everyone's favourite!! (This is sarcasm.)

Your personality is so so so so so so important. I cannot stress this enough. If someone finds you interesting or fun to talk to, or enjoys reading your articles, they are way more likely to want to interview you than if not.

Whether or not you find that fair is up to you. But soft skills are essential to have.

You can easily demonstrate your personality by:

Throwing a bit of flair into your projects
Making jokes in articles
Talking about hobbies on social media
Having a colourful CV
Making videos on YouTube

and countless other ways.

6. A place for all of this to come together

The thing about a degree is that it is one piece of paper that showcases a lot of these essential skills. You need to have the equivalent.

Make sure you put all of these on your resume. I also highly recommend building a website with links to all of your projects, articles, social media, etc. This website doesn't need to be great - it just need to be a nice introduction that quickly links to everything you've accomplished.

Everything should link to everything else.

7. A drive

Last but not least, you've got to want to do this. As long as you have a bit of determination, you can honestly do anything. I fully believe this.

All of these things will help you land an interview. In the actual interview, it will also be useful to be knowledgable of data structures and algorithms. But that's another article.

Good luck out there. Y'all can do it.

How do you deal with imposter syndrome?

Cat McGee — Wed, 19 Aug 2020 13:28:26 +0000

Imposter syndrome is a huge issue, especially in the tech industry.

I've started a collaborative blog site to try to conquer this. Anyone can write something, from your experiences to imposter syndrome, to a mistake you made. Hopefully this will help readers to understand that they're not alone.

How do you normally deal with this feeling of inadequacy? Does it pass for you? Do you let yourself feel that way, or do you take steps to conquer it? What are your tips for overcoming imposter syndrome?

Dealing with stress

Cat McGee — Wed, 12 Aug 2020 19:23:44 +0000

Alright. So I’m probably… definitely the worst person to go to about stress. I’m a very (very very) stressful person, and I have no idea why. I always think it’s because I take on a lot of work, but I get even more stressed out when I have no work to do. Shrug emoji.

So the point in this blog post is to talk about how I deal with stress, or more specifically, how you really should not deal with stress. Right now, I’m writing this as a procrastination tactic because I have so much work to do and my brain is in shut-down mode. In a couple of hours it’ll be in scream mode, which is basically what happens when I procrastinate too much and then have to do everything all at once.

Haha!

Step 1 in dealing with stress

Look at everything you have to do all at one go. Take a look at your to-do list for the week, or even better, the number of tasks you have to go through in JIRA for the entire month. Take it all in. Don’t prioritize. Don’t divide tasks up into smaller bite-sized chunks. Look at all of it.

Step 2

Freak out about everything you have to do and take a break to calm yourself down. You’ve earned this break. Looking at your entire month in JIRA is a brain-wrecking, tear-jerking task. You deserve to pamper yourself.

Step 3

Don’t pamper yourself. Take a break in order to calm yourself down but don’t take any steps to achieve that. Let those JIRA tasks wonder around in the back of your mind… aimlessly… peacefully… until they all merge together to form one massive ball of disorder and anxiety and run to the front of your mind. They’ll scream at you. Scream back at them.

Step 4

Try to push the scary JIRA tasks back into your subconscious by thinking about other things. Sprint to the fridge and make sure you have enough milk for today. Think about that word sprint. Remember your JIRA sprint. Scream again.

Step 5

Look around your environment. Take in the world. Realize how lucky you are to even be stressed in the first place. You have things to gain and things to lose. Remember everything you could be losing right now. And also remember the laundry you were meant to do yesterday but didn’t because you were screaming.

Step 6

Do that meditation thing. Sit down, visualize your thoughts leaving your mind, focus on how you’re breathing. Fail. Think about how you’re failing. Think about your previous internet search query about how to meditate. Try to figure out why it didn’t work for you. Open Google and search it again. Freak out about how Google is evil and stealing your data. Switch to duckduckgo.

Step 7

Open JIRA again. Go to your text editor. Make a to-do list for today. Overestimate the work you can get done. Freak out about how you’ve overestimated the work you can get done.

Step 8

Write a blog post.

Learning more about ethics in tech

Cat McGee — Wed, 05 Aug 2020 16:30:05 +0000

Hey everyone!

I'm really interested in devoting my skills to ethical causes as my career, but I'm not quite sure how to do this.

I'd love to learn more about ethics in tech - from small things we should think about in our daily lives (like accessibility) to big ethical dilemmas (like AI or data privacy).

Do you know of any good resources, mailing lists, or Twitter accounts for these kind of issues?

Code anything in Javascript, with only 8 characters

Cat McGee — Tue, 28 Jul 2020 15:24:08 +0000

You can convert any Javascript code into these characters:

()[]{}!+

and only these characters.

Here's how:

Numbers

We can get 0 by casting an empty array using +[]. The + is the unary plus, which converts the right side into a numeric value, i.e. 0, Go ahead and type +[] into your console and you'll see 0. Then, to get 1, we can use +!![]!, because the boolean value true can be expressed as !![] and by using our unary plus again, we convert it into 1 - +!![]

Still with me?

By using our true value and summing it multiple times, we can get other numbers. In Javascript, true + true = 2, so 2 can be written as !![]+!![]. We don't need to prepend our first !![] with + this time, because the + in the middle tells Javascript we are adding numerical values.

We can keep adding these over and over again to get bigger numbers like 12, but can you think of a better way to do this? Bring on strings.

It's possible to cast strings to numbers in Javascript - for example, again using our unary plus, we can get the number 12 like this: +("1"+2). We can also do this by concatenating 1 and 2 with an empty array, like this: []+1+2. We can use this to our advantage here and, instead of summing true 12 times, we can sum it once for 1, twice for 2, cast them as strings, join the strings together, and convert it into a number.

Phew.

Let's take that step by step:

Sum true once for 1: +!![]

Sum true twice for 2: !![]+!![]

Cast 1 as a string: +!![]+[]

We don't have to cast 2 as a string, because Javascript already knows from us casting 1 as a string that we are adding strings, not numbers.

Join the strings together: (+!![]+[])+(+!![]+!![])

Convert it into a number: +((+!![]+[])+(+!![]+!![]))

And there you have it. We can write the number 12 as +((+!![]+[])+(+!![]+!![])).

Strings

Now that we have numbers, let's see where we can get other characters from.

true : we already know this can be obtained from !![]
false : the opposite of true, ![]
undefined: appending a non-existing element to an array: [][[]]
NaN: trying to cast an object to a number: +{}
"[object Object]" : a javascript developer's favorite, object Object comes from adding an array and an object: []+{}

Casting them to string and accessing those like arrays will give us single characters, from which we can even get more strings! So now, along with any number we could dream of, we have

a b c d e f i j l n o r s t u

We can use the 2 here to cast a string such as 1e1000 into a number, which would give us Infinity. Even more letters!

a b c d e f i j l n o r s t u y

Let's not stop there. We can get even more characters if we exploit DOM elements.

Getting characters from the DOM

If we assume that we are using Javascript in the browser, we can also assume that we have access to the DOM elements, and get the remaining characters from there.

Something that we can do here is window.unescape which would give us every ASCII character by calling window.unescape("%" + HEXA_VALUE).

We already have u, n, e, s, c, a, and e and are only missing the p. Where would you get a p on website? From http of course! If we assume that we're in a webpage served over HTTP (or HTTPS) we can cast window.location to a string. The third character here would be p.

The only problem here is that we do not have access to window yet. But because Javascript is so wonderful (lol) we can get window like this:

Function("return location")()

However, whilst we have f we do not have F. To get an uppercase F, we can use our existing characters to form array["sort"]["constructor"] which will give us the word Function!

So now we have our window object, and we can get our p from there. Now we can use window.unescape but we don't yet have the % that we need to get every ASCII character.

Luckily, escaping "[" , like escape("[") yields the string %5B, and from that, we can obtain that percentage sign.

Now, we can get any ASCII character like this!

[][(![]+[])[+[]+!![]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+([]+{})[+!![]]+([][+[]]+[])[+!![]]+(![]+[])[+[]+!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][+[]]+[])[+[]]+([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][+[]]+[])[+[]]+(!![]+[])[+!![]]+([][+[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][+[]]+[])[+[]]+([][+[]]+[])[+!![]]+(!![]+[])[!+[]+!![]+!![]]+(![]+[])[+[]+!![]+!![]+!![]]+([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+(+[]+{})[+!![]]+([]+[][(![]+[])[+[]+!![]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+([]+{})[+!![]]+([][+[]]+[])[+!![]]+(![]+[])[+[]+!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][+[]]+[])[+[]]+([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][+[]]+[])[+[]]+(!![]+[])[+!![]]+([][+[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[+[]+!![]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+(+[]+{})[+!![]]+(!![]+[])[+[]]+([][+[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][+[]]+[])[+!![]])())[!+[]+!![]+!![]]+(!![]+[])[!+[]+!![]+!![]])()([][(![]+[])[+[]+!![]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+([]+{})[+!![]]+([][+[]]+[])[+!![]]+(![]+[])[+[]+!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][+[]]+[])[+[]]+([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][+[]]+[])[+[]]+(!![]+[])[+!![]]+([][+[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!+[]+!![]+!![]]+(![]+[])[+[]+!![]+!![]+!![]]+([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+(+[]+{})[+!![]]+([]+[][(![]+[])[+[]+!![]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+([]+{})[+!![]]+([][+[]]+[])[+!![]]+(![]+[])[+[]+!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][+[]]+[])[+[]]+([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][+[]]+[])[+[]]+(!![]+[])[+!![]]+([][+[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[+[]+!![]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!+[]+!+[]+!+[]+!+[]]+(+[]+{})[+!![]]+(!![]+[])[+[]]+([][+[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][+[]]+[])[+!![]])())[!+[]+!![]+!![]]+(!![]+[])[!+[]+!![]+!![]])()(([]+{})[+[]])[+[]]+HEXA_VALUE)

Phew.

Then, to execute this code, we just need to use Function.

Some geniuses have discovered a (way more complicated) way to convert Javascript into only 6 characters AND without the need for the DOM. You can play with that here if you want to hurt your head a bit.

And that's it. You can successfully code in Javascript by using only 8 characters. If you didn't already think Javascript was weird, I'm sure you do now.

In your next interview, when they ask you to solve FizzBuzz, you should try it this way. See what happens.

I fucking love coding

Cat McGee — Mon, 20 Jul 2020 12:30:57 +0000

Hey guys. This article isn't meant to be helpful, or motivational, or really have a point at all. I'm just feeling a whole lotta love for code right now and I want to let it out.

I took the weekend to focus on two pet projects. Neither of these projects are going to make me any money or advance my career in any way. They're just fun.

But you know what's fucking awesome? I was able to just have an idea, and bring it to LIFE (well, almost).

I've wanted to code a particular app since I was a beginner - a Tinder for Spotify, which would help people discover new music in a fun way. So this weekend I thought I'd give it a shot, and I literally got the whole thing working already. It's wild. When I was a beginner and had this idea, I had no idea how I would have achieved it. And now I can. In LESS THAN TWO DAYS. It's just so fucking cool.

Another project I started working on was a new gif library (because I hate Facebook and Facebook bought Giphy). I decided to make the backend with Go, because I had never used Go before and thought it would be a fun project to help me learn. And it was just awesome. Go is awesome. Learning a new coding language is the best thing ever - it reminded me of being a beginner and having that feeling when you finally get your code working, but without all the other shit that comes with being a beginner.

Coding has brought me so much joy and opportunity. And so much of that comes from the dumb pet project ideas I have and am able to bring to completion. It's just absolutely mindblowingly cool to have an idea and see it pan out right in front of your eyes. Like, I'm building shit. From the bottom up. By myself. My OWN IDEA. It's MY THING!

Man. It's so cool.

Anyway, yeah. Keep coding. Keep creating. Keep having dumb ideas and making them real. It is genuinely the best feeling ever.

(PS people seem to love Tinder for Spotify so I will be releasing it on App Store & Google Play in about a month.)

What are your tips for coding interviews?

Cat McGee — Mon, 13 Jul 2020 13:40:22 +0000

Do you have any tips for acing coding interviews? What do you normally do to prepare for one?

Mine is: when preparing, try to practice solving problems on a whiteboard!

Doing my bit to tackle imposter syndrome

Cat McGee — Thu, 09 Jul 2020 12:41:21 +0000

Check out the blog!

Hello fellow geeks! In this article I want to talk about something that I don't think is addressed enough - the serious problem with imposter syndrome in this industry.

Imposter syndrome is horrible. You feel inadequate, like you've got where you are because of chance, and eventually someone is going to find out you're an imposter.

And I don't know a single developer who doesn't feel this way on a weekly basis.

Imposter syndrome was initially thought to be seen in only women, and I can definitely say that a lot of my feelings of fraud stem from there. In every single job I've had I've been the first women hired in the engineering team. One time I was the first woman in the whole company. This comes with its own issues, but one of the most pressing ones is the imposter syndrome. Was I hired because I'm a woman?

However, nowadays we know that everyone, regardless of gender, feels like a fraud sometimes. There isn't enough research to really conclude where or how imposter syndrome came to be, so I like to use this diagram:

We have no way to understand the minds of our colleagues and peers. We don't know how much they know. It just seems like they are more skilled than us because we judge our skill in relation to other people. But what we're doing wrong here is we're judging our skill in relation to every person, not just one.

When we ask someone for help, we don't know what happens on their end. Oftentimes, we think they just know the answer. However, a lot of the time, they use the knowledge gained from our question, their own knowledge, and the knowledge of another person to answer our question. Knowledge is shared between these parties.

That's the way teams work. You have a particular skill you bring to the table. Sometimes it doesn't seem that way because everyone else has a skill they bring to the table that is different from yours.

Tackling imposter syndrome is a lot more difficult than it looks. Repeatedly telling yourself you're not an imposter doesn't work. The best way to overcome it is to talk to others about it, share your story, and realize that almost everybody feels the same way as you. Understand that those people who seem infinitely more skilled than you make mistakes too. You just don't see them.

So I'm creating a way to do that. On July 13th (Tuesday), I'll launch a blog called 'Errors Should Never Pass Silently', a place to share mistakes that we've made, how we've tackled our own imposter syndrome, and advice we can offer to others. The name is based on the Zen of Python. It'll be a place to submit your own articles that can be published anonymously or with your name and links to your social media.

Right now, a few awesome developers are writing articles to be published and featured when it's launched. This is what you have to look forward to:

5 Mistakes I Made as a Beginner
13 Years in the Industry and I've Never Overcome my Imposter Syndrome
My Biggest Error was Never Leaving my Java Bubble
Feelings of Inadequacy

(and more)

If you're interested in joining in and writing an article for launch, leave a comment here or DM me on Twitter.

Let's tackle imposter syndrome together.

An Introduction to the Command Line (it's not as scary as you think!)

Cat McGee — Mon, 06 Jul 2020 17:34:28 +0000

YouTube | Twitter | Instagram

Hey geeks! Today we're going to be talking about the command line. If you're on dev.to, chances are you're familiar with the command line and this article may not be super useful for you. But if you're new to coding and are a bit scared to get started with the command line, read on my friend!

The command line is scary. It's scary because it's unknown. When I first started using the command line, I automatically associated it with Linux and ended up actually INSTALLING LINUX so that I could properly learn the command line. You don't need to do that. You can do it on MacOS and Windows too.

You may have heard a few other words like Terminal, Shell, Command Line Interface, or CLI. These all mean the same thing. Sometimes, in Linux communities, these words have very slightly different meanings, but most of the time when people say any of these words they are talking about the same thing.

The command line is just another way of navigating and manipulating files

Go into Finder (Mac) or File Explorer (Windows) and open some folders on your computer. Go backwards and forwards and view all your files. Create a new folder, delete it, open a document. What you're doing right now is exactly what you'll be doing in the command line too, except it's text-based instead of GUI-based. And folders are actually called 'directories' for no reason. That's literally it. It's just another way of navigating through your files.

So why do I need the command line?

Honestly, you could potentially go your entire dev career without ever using it. But it would cost you hours, and it would be WAY more difficult than it needs to be. Developers use the command line to install things (like languages, libraries, and frameworks) and to run code. If you go onto GitHub and view almost anything, you'll see that it gives you directions on how to install by giving you commands to run. You run those commands in the command line and voila! You've installed a new library.

Running commands

To run commands into the command line, type in the command and press Enter. Sometimes, the command might need some extra details. I'll explain a little more about this later.

Command #1: Viewing the current directory

It's time. Open your command line. On Mac, there is a built-in app called Terminal that you can use, and on Windows it's called cmd.exe, or Command Prompt.

As soon as you open it, you'll probably see something like this:

Or this:

You may be asking yourself 'What is this? Where am I?' To find out the current directory (folder) that you're in, it depends on your operating system.

Mac OS or Linux? Type pwd and press enter
Windows? Type echo %20% and press enter

Pwd stands for present working directory and it will tell you exactly where you are. You can run this command as you're navigating through files if you're ever lost (which is very likely to happen) and it will return the file path of the directory you are in.

On Windows, echo %20% gives the same response. echo pretty much translates to print, and you're giving it a cd variable, which tells it to print the current directory path.

Command #2: View everything in your current directory

When you run this, the command line will tell you everything that inside your present working directly. You'll see a list of all the directors and documents inside your current directory. This command is operating system specific too.

Mac OS or Linux? ls
Windows? dir

ls stands for list, because you're listing all items in the directory, and dir stands for, well, directory.

Command #3: go into another directory

This command allows you to 'move' into another directory, making it your present working directory. It is probably the command you'll use the most in the command line!

It is cd and it stands for change directory. It's the same on MacOS, Linux, and Windows.

This is one of the commands that needs more information. If you just typed cd, the command line would be like "yo, where you wanna go?" So after cd , you'll type the name of the directory you want to go into. Like cd NewDirectory. It is based on your current position. What this means is that you need to include the path for the command line to follow to find that directory.

For example, I've just navigated to the Documents directory, and I want to get into the Projects directory. My Projects directory is inside my Documents directory, so I just have to type cd Projects in order to change into it. However, what if I'm in the Documents directory and I want to change to a directory that is inside the Projects directory called TwitterBot? To do this, I don't have to do cd Projects and then cd TwitterBot (although that will also work.) I can instead run cd Projects/TwitterBot which is the relative file path of TwitterBot to Documents.

You can also use .. to return to the previous directory. So if I want to change directory out of TwitterBot and back into Projects, I can run cd ...

Tips and tricks

Here are a few tricks to make your command line experience awesome:

Most command line apps come with an auto-complete feature, normally by pressing tab. So if you wanted to go into a Projects directory and no other directory begins with P, you can type cd P + tab and the command line will auto-compete to cd Projects.
To complete one command immediately after the other, you can type && in the middle. So if I wanted to cd into Documents and then find everything inside that directory, I can type cd Documents && ls.
You can personalize your command line to make it look exactly how you want! There are even more command line apps that you can download.
You can cancel a command by typing Ctrl + C.

And there you have it - your first introduction to the command line. It wasn't that scary, was it? For more information and help for those visual learners, check out the YouTube video!

From never writing code to becoming a Python dev in 19 steps

Cat McGee — Fri, 03 Jul 2020 16:37:30 +0000

Twitter | YouTube | Instagram

Hello fellow geeks! After circulation of my previous post and Twitter thread, I've received a lot of responses asking me to do a step-by-step guide for Python devs.

So, here you go my lovelies. You can go from never having written a line of code to being paid to write Python in just 19 steps.

Read it as a Twitter thread

Step 1: Know what on earth code actually is and what it does

If you haven't written code before, it's good to know what you'll be getting into before you start. Don't spend too much time on this step. You'll learn as you go along. But for now, I like this short video!

Step 2: Launch right in and take a beginner Python course

If you know me, you'll know I love Codecademy. This one is great (and free)! Work your way through that course online so you understand the fundamentals of Python.

Step 2.5: Books instead

If you prefer books, I love Automate the Boring Stuff with Python. You can get a free PDF if you order it from the website rather than Amazon, so do that!

Step 3: Download Python

Now you've got over the first hurdle of learning Python basics, and it's time to start writing it on your own computer.

It's a bit more complicated to write and run Python on your own computer than it is to do it on Codecademy. Codecademy has a special environment, but you won't have that when you have a job! You need to download Python so it can compile and run on your computer.

There are lots of versions of Python, and arguments over which one is best, but try to stay up to date. People try to argue that Python 2 is better than Python 3 but they're wrong.

Download Python 3 from the website.

Step 4: Get comfortable with the command line

You'll use the command line to run your Python, so you've got to get familiar with it.

It's nothing to be afraid of. It's just another way of seeing and using your files. Check out my YouTube video for an introduction. You'll feel like a hacker!

Step 5: Get a text editor

You need somewhere to write your Python code. I recommend VSCode, and honestly, so does the entire industry!

You could also use an IDE like IDLE, which is similar to Codecademy's environment - everything is already set up for you. But I advise against this because you won't be using this in jobs and I think it can cause a harder learning hurdle later.

Step 6: Write Hello World in your text editor

Hello World in Python is very simple and you'll have learned it in your Codecademy course. Write this code into a new file in your text editor, and save the file as helloworld.py.

Step 7: Run Hello World from your command line

Using your skills from Step 4, navigate to the folder that your new Python file helloworld.py is in. Type python helloworld.py and press enter, just like any other command. (You may need to run python3 helloworld.py instead). You'll see the terminal say Hello World back to you!

Step 8: Learn more about Python

Now you know the basics, have it set up, you can write & run it, and you need to learn some more about what Python can do.

I recommend following a tutorial to build a calculator.

Step 9: Play around with it

To really advance your learning, you have to experiment with Python and play around with what it can do.

I always recommend that you figure out something small you want to build, and build it. You'll need to search the internet a lot, so do that! We all do.

If you can't think of any ideas, check out this article. I also wrote a tutorial for a pretty fun Python project that people seemed to love on DEV.

Step 10: Explore documentation and libraries

One of the best things about Python is that it has so many different libraries that can do so many awesome things.

Learn how to use libraries, read their documentation, and play around with some of these ones.

Python is also used a lot for machine learning, which you might know already. I recommend finding a machine learning library and playing around with it. It will feel like the coolest thing ever.

Step 11: Learn Flask

Flask lets you build web apps with Python, so you can have a cool GUI to go along with your projects. Here's a beginner tutorial that I like.

Step 12: Get some projects up on GitHub

Now that you have a few projects and you're getting more comfortable using the command line, it's time to learn Git.

Git is a version control system, and GitHub lets you manage this while you show off your code to other devs & employers. You should have some projects from Step 10 and maybe a GUI from Step 11, now it's time to get their code on GitHub.

Here's an introduction to Git and GitHub.

Step 13: Build something you're passionate about

What are your hobbies? What do you wish existed? Build something that you enjoy with Python & Flask. Employers love that kind of stuff, but more importantly - you'll have fun!

Make it a bigger project than the ones you've already done and make it something you can be proud of.

Step 14: Deploy it!

Deploying a Flask project is easy. I recommend using Python Anywhere - it's free and insanely simple.

Step 15: Keep learning and building

You're not done yet! Keep learning, keep building projects that you're passionate about, keep getting them on GitHub deploying them. Watch old PyCon talks. Learn about best practices and implement them.

This step should be FUN - if it gets too much, take a break.

Step 16: Expand your knowledge of computer science

To land a Python job, you'll need to have a grasp on computer science concepts. Namely - data structures & algorithms. You'll be asked about these in your interview. There are loads of available data structures & algorithms courses online, so I recommend taking some.

Data structures are very simple ways to store and manage data. There are multiple ways of doing so in programming.

By 'algorithms' here, I mean two things - popular algorithms (things like sorting and searching a list), and algorithm design (if I tell you I need a program that does this small thing, can you write an algorithm to do that that?)

Start learning from this course.

Step 17: Practice for the coding interview

The best way to solve those algorithm questions is to practice them at home. They're really fun, especially in Python.

I highly recommend Leetcode for practicing these - they'll give you a huge list of them for free, with an online coding environment to try them in, and if you pay you can have a real person give you feedback. Try to solve them on pen & paper or a whiteboard first, as this is quite often what you'll be asked to do in interviews.

Step 18: Update your CV, LinkedIn, and GitHub profile

On your CV and LinkedIn, include your personal projects and everything you worked on for them. Write about exactly what they do. Get a profile photo on your LinkedIn and GitHub.

If possible, try to code a portfolio website - it can just be simple in Python & Flask, or if you know anything about HTML and CSS make one in that too.

There are plenty of people who will do free reviews of your CV if you ask them - reach out for help!

Step 19: Start applying!

You won't feel ready, but do it anyway. You miss 100% of the chances you don't take. And you'll start to learn what to show off on CVs, and what you can expect in interviews.

There are plenty of other ways to land a Python position, but this is a good guide to follow if you're brand new to programming. It could take half a year or two years, depending on your dedication, passion, and pure luck.

Remember to tweet about your journey and join the #100DaysOfCode community on Twitter. Keep learning and never give up!

Get your first dev job by building these projects! #3: Instagram Feed with a Flashlight Effect

Cat McGee — Thu, 02 Jul 2020 21:54:26 +0000

Youtube | Twitter | Instagram

Hello geeks! Today we're going to be building something super awesome. I'm so excited about this. It's an Instagram feed of any person you want (as long as their profile as public, more about that later) with a flashlight effect on top of it. Our mouse will dictate where the flashlight is. So it'll be like you're stalking them. Which is what Instagram is for anyway! It's perfect!

We'll be building this in HTML, CSS, and plain ol' Javascript.

Find the code here.

Watch the 2 minute 20 second tutorial here.

Step 1: Make your HTML, CSS, and Javascript files

Create your HTML file, your CSS file, and your Javascript file. Make sure to attach the CSS and the Javascript to the HTML! (I give this reminder in every tutorial because I always forget to do this.)

Your HTML should look a little like this.

<html>
    <head>
        <title>Instagram photos under a flashlight</title>
        <script type="text/javascript" src="actions.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    </body>
</html>

Step 2: Request the photos from Instagram

The public Instagram API is incredibly easy to use, and you can get photos from any page at all!! This includes profile pages and tags. Because the API is public, we don't need to create a developer account, but it also means that we have no authentication and can't access private accounts. We only need to add ?__a=1 at the end of the URL. I'll be using my Instagram profile link in this tutorial, but feel free to use any!

https://www.instagram.com/catmcgeecode/?__a=1

We're going to use async functions for this so that our code works asynchronously. Async functions allow the use of await which does exactly what it says on the tin - we'll wait for the promise to be fulfilled or rejected (i.e. we either get a valid response from Instagram or we're told we're not allowed) before we go onto the next task. Learn more about async functions here.

So let's use Javascript's fetch API, the easiest and best way to request data.

Go ahead and put this fetch statement in an async function.

async function getInstaPictures() {
    const response = await fetch("https://www.instagram.com/catmcgeecode/?__a=1");
}

We get a lot of data from this response, so we're going to want to read it as JSON. This will make it far easier to parse through and find the photos.

const jsonData = await response.json();

Let's console.log (or console.table()) the response and run it so we can see what we're expecting and know where to find the photos in the response. And don't forget to call the function!

async function getInstaPictures() {
    const response = await fetch("https://www.instagram.com/catmcgeecode/?__a=1");
        const jsonData = await response.json();
        console.log(jsonData)
}
getInstaPictures()

Now open the HTML file in your browser and have a look at the console (click Inspect to open developer tools, then click Console). You'll be able to see the response. It might look like nonsense, but spend some time looking through it and see what you can find.

If you look hard enough, you'll find that the image URLs can be found by navigating through like this:

jsonData → graphql → user → edge_owner_to_timeline_media → edges

Then, inside edges there are multiple nodes and each node contains one display_url which is what we need.

So we need to iterate through each node inside edges and grab the display URL.

const pictures = jsonData.graphql.user.edge_owner_to_timeline_media.edges; 
        for(i = 0; i < pictures.length ; i++) {
                // here we will show the images on the website
}

Still with me? (Because if so, you've come a long way.)

Step 3: Display the pictures on the website

Each time we iterate through the data, we want to display the display URL as the source of an image in our HTML.

So we're going to use the Javascript to create an image element (document.createElement('img')), then get node.display_url for each iteration and set it as the source of our new image element, and then add the image element to the HTML.

for(i = 0; i < pictures.length ; i++) {
        let img = document.createElement('img');
        img.src = pictures[i].node.display_url;
        document.body.appendChild(img);
    }

That wasn't so hard was it?

Put all this together, open it up in a browser, and there you have it - all the photos from someone's Instagram page! If it's still not working for you, here's the source code for the Javascript.

Change the styling a little bit so that they look good. In the video, I just changed the width to 350px as shown below, but you can play around with some flex-box styling to make it look real good.

body img {
    width: 350px;
}

Step 4: Make the flashlight effect

In this step, we're going to make it look like there is a flashlight over the Instagram photos, but we're not going to make it move just yet. We're going to make everything black except one transparent circle. So let's head to our CSS!

To make everything black, we are going to make the root element (HTML) black. We're going to use a pseudo-element (learn more here) inside root and make this element cover the entire screen. The content attribute along with ::before helps us achieve this.

:root:before {
    cursor: none;
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
}

We've also set the cursor here as none for added effect.

Run your code. Nothing has happened.

The magic happens in this next part - radial-gradient. (PS: Me trying to say this in an Irish accent is really funny.)

Radial gradient allows us to create a shape that has a gradient, progressing out from its origin. This shape can be a circle! It's pretty cool. So the idea here is that our background will be a radial gradient, with the primary colour being black, and our shape (a circle) will be transparent. The gradient will give it a kind of blurred appearance, which is perfect for a flashlight!

Add this to your :root:before:

background: radial-gradient(
        circle 10vmax at var(--cursorX) var(--cursorY), 
        rgba(0,0,0,0),
        rgba(0,0,0,1)
    )

Phew. Let's go through this.

circle - we set the shape as a circle. Pretty self explanatory.

10vmax - vmax is all about relatively. 1vmax = 1% of the screen. So our flashlight will be the size of about 10% of the screen.

at var(--cursorX) var(--cursorY) - this is where things get groovy. This sets the x and y coordinates for where our circle is, but because it isn't the same (our flashlight moves with our mouse), we want to pass variables into it. We get these variables from Javascript later.

first rgba(0,0,0,0) - this is transparent (the final 0 is opacity) and is the colour of the inside of our image.

second rgba(0,0,0,1) - this is black, and it is the colour that our circle gradient will progress into (as in - the rest of the background!)

Cool. If you run this code, you'll just see completely black. Can you take a guess as to why? It's because we don't have our --cursorX and --cursorY variables set yet. Let's just set these in the CSS so that we can make sure it's working before we move onto Javascript.

Your CSS should look like this:

:root:before {
    --cursorX = 50vw;
    --cursorY = 50vh;
    cursor: none;
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    background: radial-gradient( 
        circle 10vmax at var(--cursorX) var(--cursorY),
        rgba(0,0,0,0),
        rgba(0,0,0,1)
    ) 
}

Step 5: Make the flashlight move

Now it's time to set our --cursorX and --cursorY variables to be in the position of our mouse every time we move our mouse. This is SUPER easy with Javascript.

Open your Javascript file and create a function that will run when you move your mouse.

document.addEventListener('mousemove', update)

function update(e) {
}

Here, e stands for event which has lots of different handlers, including the position of our mouse coordinates!

Firstly, this function needs to read the X and Y coordinates of your mouse. This is super simple - you can just use e.clientX and e.clientY.

let x = e.clientX; 
let y = e.clientY;

Then we need to send these to the CSS, by setting them as properties on the styling.

document.documentElement.style.setProperty('--cursorX', x + 'px'); 
document.documentElement.style.setProperty('--cursorY', y + 'px');

(It's the document element, because that's the root element, which in our case is the html element. I wish they had the same name too.)

All together now!

document.addEventListener('mousemove', update)

function update(e) {
    let x = e.clientX; 
    let y = e.clientY; 

    document.documentElement.style.setProperty('--cursorX', x + 'px'); 
    document.documentElement.style.setProperty('--cursorY', y + 'px');
}

That's it. Open it up in your browser and you've got yourself a fun new way to stalk someone on Instagram.

Now it's your turn!

I emphasize this on every one of these tutorials. To really make the most out of this, you've got to build something on top of it (and keep searching the internet to find out how!) I'm sure you have some creative ideas, but just in case you don't, here are some:

Make it work better on mobile (maybe do something cool with phone gestures...)
Change the size of the circle and the background colour
Get different data from instagram
Use the real instagram API and authenticate (you can use the Explore page or private accounts that you follow)
Let the user choose the Instagram account first

Good luck! Happy coding, and make sure to comment or DM me on Twitter when you make something cool!