DEV Community: JavaScript➕Coffee🚀

What is React?

JavaScript➕Coffee🚀 — Tue, 20 Feb 2024 11:43:48 +0000

Ask anyone what React is, and they will probably reply:

"React is Facebook's version of Vue"

That doesn't help you understand it though, does it?

I'm not going to compare React to Vue or Angular or anything like that, we will look at elements and props and things..

Rather than just being one 'thing', React is more like a set of tools used to build and structure the UI (user interface)

A framework or a library...?

Technically, React is a JavaScript library, although most people refer to it as a framework and it is comparable to actual javaScript frameworks due to its ability to create a full stack application. Even though React is strictly a frontend framework, it can be used alongside other technologies, just as Mongo or other backend-y stuff.

People love React so much because it is so flexible when used with other stacks - it can be made full stack because the React community is

HUGE

This means that people have created lots of add ons and an entire ecosystem

React is a SPA (single page application) that can be used to build full stack apps and do all the clever backend stuff too if used with a backend stack!

A spa....? I like to relax!

Yes yes, but in tech, a SPA is a single html page that a framework (such as React) essentially takes as a puppet and makes it...do stuff. Remember this puppet idea, we might come back to it later.

While it is correct that React is, in theory, quite similar to Vue, I've found a few differences on the ground after diving into React this week.
I've used Vue/Nuxt before and really like it - I've also written What is Vue if you're browsing through frameworks

Framework...another one?!

Yes, another one. People love a framework, especially a JavaScript one.

A JavaScript framework, right

Yes, well, a library, but React is essentially a layer on top of your JavaScript code that is made up of elements and JSX

Right

Ok, let's go into that...

You write React by writing elements (that look like this: const element = <h1>Hello React!</h1>

Hey, I recognise that, it looks like HTML!

Yes, it does but don't get carried away...
React is written around an element that React developers often call the 'root element'

<div id="root"></div>

Elements cannot be changed, and actually neither can variables or consts that you create as it would require the whole page to rerender.

The puppet master

Back to this puppet idea...
So we've got the HTML page sitting there...static....essentially useless and highly non user-friendly.

Along comes React and BOOM!

Ok, if only it was that easy...

React needs to be able to read your html SPA in order to know how it should behave and render. For this, React uses its own dialect of JavaScript, called JSX. JSX sounds (and looks) intimidating to first time users, but like most things, it is a learning curve. It stands for 'JavaScript syntax extension' and that's essentially what it is - just a different way to write JavaScript in a way that React understands so it knows what to do with all the html.

Earlier, we mentioned that elements and consts cannot be changed. This is not technically true - this is where the JSX comes in. JSX is the strings on the puppet

Dynamic markup

Sounds scary...
It's not, really - it is formatted like html but we can add in JavaScript to make it movey-shakey! In React, if you need to pass new information to a variable, you can do that by using curly braces {}

Here's a small example from some code I wrote yesterday:

<button className="square"
 onClick={onSquareClick}>
   {value}
</button>

Here, you can see that I have a button, defined with some Tailwind styling, that I have given the props onSquareClick and Value. OnSquareClick was defined elsewhere in the code and essentially told my app to wait for a click and then do something, the {value} prop told it what to display.

Hold on... this looks a lot like

✨Reusable components✨

Hooray! We love a reusable component!

I find that reusable components are great for when you're working in a team/with a large code base, and things can get messy and unmanagable very quickly, with so much code all referencing itself in the same place.

Reusable components stop this because your code will be structured in defined sections, you can even have things on separate pages if you want to.
I am a big fan of any component-using codebase as it makes things much clearer and cleaner to look at, although other people aren't so in favour of them. Opinions are ok!

Anyway, React needs you to set the type as module if you are going to export it

Export it?

Yes, sorry, React requires you to use the keywords import, export and module when you are using and creating your components. Say you've built a lovely navbar or menu on your homepage. Consistency and design say that you should probably use the same thing throughout the pages on your site. What are your options here?

You could copy and paste to every page and risk typos and bugs 🤢 OR you could create a ✨reusable component✨. You're going to want to stick a type = module on that bad boy first, then make sure you export navbar somewhere on the page, and that's it!!

From now on, you can import navbar from ../pageName at the top of every file and you'll have access to that lovely navbar, everywhere you go!

Managing state

This is more of a tricky concept in React, let's break it down.

The 'State' in React is essentially what each individual part is doing

So when your user is typing into a box, does your page need to know to make a dragon fly across the screen..? Ok probably not but stay with me.

State is like a little memory full of eventListeners (remember those)?! It enables you to not only say 'when this happens, do this', useState allows you to say 'if this happens, do this, else do this

Yes, useState is essentially an event listener with a memory.

Not so tricky...

I'm enjoying looking into React so far, and hope to start building my first demo page out today!

Is anyone still out there?

JavaScript➕Coffee🚀 — Wed, 12 Jul 2023 19:42:48 +0000

Well hi...it's been a while...

I lost access to my @javascriptcoff1 account around 2 years ago and went off to try and become a vet.

I'll be honest with you, I haven't made much progress.

It's incredibly competitive and I've been bombarded at every turn by people telling me I can't physically do it.

So I'm rethinking.

I miss my nerdy friends

How are you?

What is caching?

JavaScript➕Coffee🚀 — Tue, 31 May 2022 12:20:21 +0000

Money money, cache cache 💵

Invented in 1965 by Maurice Wilkes, a British computer scientist, caching was described as a system whereby data would be pulled from a main, slower memory source in order to speed up subsequent use.

Let's start with the modern official definition:

Computing component that transparently stores data so that future requests for that data can be served faster

Makes sense...

Yes, so it seems that the cache is like a little memory system in your browser that remembers stuff you've done before so it can do it faster next time... right?

Essentially, yes

Imagine that you needed to do a research paper for school or work and that you were only allowed to use books from a library (like the olden days 📚)
You could go back to the library every time you needed a new piece of information, but the most efficient thing to do would be to take some books home with you and put them on your desk while you work.
Here, your desk is your cache. Instead of going back and forth to the library, you're storing the information you need so you can be more efficient and access it quicker if you need it again.

As always though, we can dig a little deeper into it. 🎢

Let's continue with the library analogy, because it works here. Just like your desk, the cache is smaller and cannot hold as much information as the whole library.

The first time you visit any website, say dev.to, it takes a lot longer than it will do on subsequent visits, because the first time you visit it, your computer has to download everything - the logos, the images, the scripts that make the site run, everything. After that, your computer will only need to download new information that it hasn't seen before.

Wait...is that why 'clearing the cache' can often solve things?

Yep! Clearing your browser cache means that you are deleting all of the information previously stored in the browser. Your computer might be a little slower to load larger websites again, as it has to start from scratch, but remember that developers often update the scripts or images in their site and therefore old 'versions' of it will no longer work. This is why clearing your cache can often fix problems. You're forcing your computer to download the whole of the website again, not just download 'new' bits.

So only browsers have caches?

Typically, yes - however, modern devices often have caches too. Hardware such as processors, GPUs, hard drives and SSD's can all have caches. This creates a 'memory hierarchy' 😱

At the top of the hierarchy are memory processors, which are super fast but very small. At the bottom are the SSD's and hard drives, which have huge capacities but are really slow (compared to the top)

Dig out the library analogy again! 📚

Let's go from the top of the hierarchy: at your desk, you can access a limited amount of information very quickly; the information in the books stacked in the library must be searched through, but there's so much more there; at the bottom of the hierarchy would be the old books that hardly anyone uses and have been moved to off site storage. This bottom tier has the biggest amount of information in, but would be the slowest to access.

Ok, got it, but what has this got to do with my memory storage?

I'm glad you asked!
Consider what would happen if your cache (your desk) got full? How would you know what information (books) to get rid of first? You need more room!

Don't panic...we have a cache eviction strategy

No really...that is what it's called. We'll shorten it to CES.

🤓Let's get nerdy....

Common CES'

Least Recently Used

This is a pretty logical (in my opinion!) and easy to implement strategy. It just means that you get rid of old information that you haven't used for a while - starting with the oldest and least used.
The issue with this strategy is that it requires you to keep track of when items in your cache were last accessed, which does slow it down a bit.

Random Replacement

Grab logic firmly by the scruff of the neck and throw it outside.

As you probably guessed, this strategy involves removing a random item when the cache is full 🤷🏼‍♀️
This strategy is the easiest to implement and in practice doesn't end up being too different to Least Recently Used. It's used in small ARM processors to keep operations light and designs simple.

In conclusion, caching is a small but important piece of computer logic from 66 years ago that can be made as complicated as you want....sounds like most of tech to be honest!

Thanks to Emmie for suggesting the topic!

What is technical writing?

JavaScript➕Coffee🚀 — Thu, 11 Nov 2021 11:18:18 +0000

Writing about technical stuff, right?

Not always.

I hinted at what technical writing actually is in this tweet.
// Detect dark theme var iframe = document.getElementById('tweet-1458530582779006979-250'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1458530582779006979&theme=dark" }

So what is it?

Technical writing is actually a style of writing, rather than a subject of writing. Technically, you could write a technical piece about some technology using a technical writing style, but you don't have to...

Technical...

Yes, sorry; I got carried away with that word - let me explain.

You could write for a scientific paper in a technical writing style, or you could write for a mechanics magazine in a technical writing style.

What is it actually used for?

Technical writing is a style of writing that you will usually see in things like manuals, technical documentation and educational leaflets. It is often used in STEM fields and is only ever factual. You'd never write opinions in technical writing, unless specific circumstances call for it.
The style is authoritative, well-informed, factual and very formal. I've tried to break it down to the three main things that technical writing should do. There's a fair bit more to it, but to me, these are the most important:

Inform
Direct
Instruct

Let's look at what these actually mean

When you're using a new piece of technology, or you've just got your new drone out of the box, or you're figuring out how to use a bunsen burner in the lab, what sort of documentation would you find useful?
Clear, directive instructions with some diagrams or even pictures to go alongside?
Exactly!
Technical writing that is unclear, informal or ambiguous could actually be very dangerous or costly -

"Turn the bunsen burner upside down and hold it at the end while you turn the red dial that's next to the blue dial the other way on the gas cylinder"...

💥

Inform

Technical writing must inform the reader; the reader is expecting to either learn something by reading your writing, or learn HOW TO do something (in the case of a manual or documentation), so you must consider this when laying out your writing. Make sure to use white space as well as pictures to distribute your work cleanly on the page. Using white space sparingly for this is very useful - it means that information can be portioned out into 'bite-sized' portions for the reader to absorb more easily than a huge block of text. How would you feel if you opened the manual to your new hardware/software and the docs read like a chapter from a novel?

Direct

We could look at this one 2 ways - you want to make sure that you are directing your reader, especially if it is a confusing or dangerous topic that you are writing about. You need to use an authoritative tone and leave your reader in no doubt as to what they must do.

"Always wear safety goggles"

Is more effective than

"Consider wearing safety equipment to protect your eyes"

Be direct as well as directive.

Your writing must also be direct. This means that you don't want to leave any ambiguity in your writing. Leave nothing to chance. Using the example above, you can see in the 'authoritative voice' example, I've specified 'safely goggles', whereas the other line states 'safety equipment'. What does that mean? Gloves are 'safety equipment'....should I use those to wipe my eyes...is that what it means..?
Do you see how being direct in all instances will rule out any ambiguity?

Instruct

The writing must instruct the reader. The reader must come away feeling confident that they learned something new or now know how to do something. Do you feel confident writing it? Good, that'll show in your writing. Don't feel confident yet? That's fine, just note your ideas at that time, go back and do some more research.
Leave the 'might', 'probably', 'sometimes' and even the 'often' out of it. You want clear, sharp instructions that are easy to follow.
☕️ You're not writing for people who are sitting down with a cup of tea to enjoy the poetic language, you're writing for people who have got things to do!

Research

Ah yes, research...
You might spend just as much time researching for a topic or assignment as you do actually writing it. Essentially, you want to be, or at least be able to write as though you are, an expert on the thing you are writing on. If you are a contractor writing on a topic that isn't in your field of expertise, it's always best to ask for help. It isn't a sign of weakness.

No one is born an expert.

What is Django? 🤷🏼‍♀️

JavaScript➕Coffee🚀 — Tue, 10 Aug 2021 16:49:49 +0000

So, you know how this goes - someone asked me about a technology that I didn't know much about and...I researched it!

So here we are, all wondering...what is Django (other than a really good and important film)?...what is it for and what does it do? Who uses it?

Only one way to find out...!

First things first: how do you pronounce it?
It's a strange spelling, with a silent D, you pronounce it "Jan"-"go". It's named after a famous jazz guitarist, Django Reinhardt.

From the Django documentation:

The web framework for perfectionists with deadlines.

Sounds interesting but not very descriptive...

Indeed, let's look deeper

A high level python framework for web development.

That's better, we can dig into this now

Django is a Python framework that is built and maintained by experienced developers - it was first released in 2005 and is a widely used technology in the web development space. It is 'high level' which means that Django already contains a bunch of code necessary for you to create fast and secure web applications rather than having to type it yourself.

Sounds like cheating...

Call it cheating, call it a framework, call it a library if you like - it's saving you precious time and means that you won't forget stuff. Do you want to manually set up admin and all the fiddly database management by yourself? Do you?

This is why frameworks were made. They ‘start you off’ quickly, so you can get on with all of the fun parts of your project. Django just happens to be a framework for the Python language.

So why do people choose Django over all of the other frameworks out there?

Great question.
Django is built in a way that enables you to build secure and maintainable websites quickly. It includes everything that you might need ‘out of the box’. This means that you shouldn’t need to install a bunch of other things to get your project up and running. This ‘out of the box’ concept is sometimes called the ‘Batteries included’ philosophy.

Cool, can I use it? 🤑

Django is entirely free, and it is also Open Source; this means that if you have a suggestion or change to the framework that you think many people would also find useful, you can submit your request or even make the change yourself and make a pull request! Thanks to the philosophy of having everything working together in this framework, everything works seamlessly and follows consistent design principles. This is important because you shouldn’t have to fuss around with any part of the configuration; it is all set up for you. Django includes access to some popular databases and provides you with a secure way to manage accounts and passwords. Again, this functionality is ‘out of the box’ (Batteries included!) Of course, this functionality will have been tested fully and means that you’ll avoid any common security mistakes such as putting session information (cookie data) in a public place or forgetting to hash (scramble up and distort) passwords.

Smart and security-conscious!

Yes, and that’s not all - Django provides built-in protection from vulnerabilities such as SQL injection, cross-site scripting and…

What?!

Hmm, yes… ok let’s do a quick breakdown of that:

SQL injection = someone attempting to gain access to data in the backend by typing in SQL (a backend database language) into a web application to try and trick the application into running the SQL and giving the user data that they shouldn’t have access to.
Example:
HackerPerson types select * from secretInfo into a text field on a frontend form.

Note: It’s really great that Django includes this as standard for you to use out of the box, however it is pretty standard for websites to protect against SQL injection - it’s a pretty ancient and well known method of data harvesting…

If you want to learn more about web security, this site is pretty good.

What if I want to build a huge and successful web application?! I have plans for the next Youtube!

Funny you should say that...

Youtube is built with Django! This isn’t surprising; actually many of the sites you and I use every day are built with Django - after all it is fast, flexible, security conscious and many other things.
Back to your point - you are asking if Django is a scalable framework, i.e. can it adapt and grow with the application you build?
Yes, Django is scalable - in fact it is built using the ‘shared-nothing’ architecture principles. This just means that all the little parts and components that go into the framework are replaceable and changeable.

Like Jenga?

I guess! Jenga/Django, try and say that fast…!

Back to the topic at hand - scalability. Django copes with your site recieving extra traffic (visitors) by being flexible and allowing you to add extra hardware (caching servers, database servers, or application servers) anywhere you need. One of Django’s most successfully scaled users is probably Instagram.

DRY

This buzzword/acronym pops up everywhere, and yes Django also uses DRY priciples. DRY just stands for “Don’t Repeat Yourself” and just means that you shouldn’t write duplicate code, or code that does the same thing. Django will help you implement this principle into your application, however it is pretty common and you should be trying to do it anyway.

Ok, DRY lecture over…

In reading the Django documentation (which is pretty good by the way), it seems that Django does, in fact, let you use components. This is something I’m familiar with from Vue (a JavaScript framework) and means that you can create reusable files, almost like code snips that you can call into your application:

Example:

I want to create a portfolio with 5 pages. I want a navbar on every page. What should I do? My options are; write the code for a navbar on every page (this might take a while and will be tedious) or I could write the code once and copy/paste it… (this comes with a VERY HIGH chance of errors and bugs.
In comes our saviour, Components. Components mean that you can write your navbar in a file called navbar.vue......wait……navbar.py... and then call it into every other page you need just by typing import navbar or something similar…

Ok, I got carried away with that analogy because I got excited to be writing about something I actually recognised, but let’s get back to Django.

Are there any cons of using Django?

As someone who has not played with Python or Django myself - these opinions are not my own:

It’s not the fastest
If your website isn’t properly optimised for speed, you may not get the best results when you are using Django. However, the framework does offer some built-in optimisation test to help you if you think this is a problem you may face.

Lack of convention
Compared to a framework such as Ruby on Rails, everything in Django has to be explicitly defined which takes time. However, Python is generally a language where you should explicitly define everything anyway, so if you are using Django then we can maybe assume that you wouldn’t find this a problem…

It isn’t great for smaller projects
As Django was built to help you build larger CRUD (Create, Read, Update, Delete) applications, it will probably be overkill on your small one page project, so make sure that you are using the appropriate tool for your project and don’t just go with the one that sounds the coolest (Django does sound pretty cool)

Confusing for search engines
It’s true, searching on google for ‘Django’ may leave you confused as there is a film by that name. I recommend searching for “Django framework” to make sure you get the most relevant results.
Django Unchained is a really great and important film and you should watch it.
It is not about tech frameworks

Happy Django-ing!

What is Kubernetes? 🤷🏼‍♀️

JavaScript➕Coffee🚀 — Wed, 19 May 2021 16:21:51 +0000

I was challenged on Twitter to write an article about Kubernetes. Here we go...

Glossary:

Bandwidth: The capacity. How much data can be transferred.
Can also be a word used to describe free time by techy people "how much bandwidth do you have today?" 🤨
Load balancer: Something that...balances the load... of traffic to a site. Makes sure that data and traffic to the site are distributed evenly.

🌮You're going to want to read my short What *is * Docker? article if you don't know what Docker is before we hit the road here. I know there are usually no prerequisites to my articles, but this is an exception!

There's a theme here...

Kubernetes is the Greek word for a helmsman or someone that steers a ship. ⛴

Hold that thought.

The scenario

Imagine you (and Randall, from the Docker article) have a site up and running with a Docker container. It's doing pretty darn well. You are getting a lot of visitors to your site, and business is great.
Sometimes, you get too many visitors to the site and it crashes...

Not good

Your site is starting to crash a lot - too many people are visiting and the server is just getting overstretched. It can't handle it.

What do we do?!

You set up another container on another server. That way, you've got twice the amount of bandwidth to play with, and in theory, you should be able to have twice the amount of visitors.
You also set up a load balancer to make sure that visitors are evenly distributed between your servers to ensure that there are no more problems.
Easy, problem solved, right?

Wrong

Your business is incredible, you go viral and suddenly you have a ridiculous number of visitors to your site. Everything is great!

Hold on...these servers can't handle it...
You set up another 20+ servers (just to be sure this time), which all need Docker containers and some extra load balancers to help manage the bandwidth distribution.

Note: This process is called Horizontal Scaling

This all takes a lot of work, and don't even think about making any update to your website...
This is putting a lot of pressure on you, and you are considering hiring another engineer...💭$$$$$$$$$$$

Or...

💭 Imagine if you could automate this server/container duplication process...

Well, my friends, I have some news for you

Kubernetes 🦸‍♀️

Ok, so, let's imagine that you knew about Kubernetes right at the beginning. You start to use it when you have just one or 2 servers running with Docker.

In Kubernetes, your Docker image (the server with the container and everything that you need to run your website) is called a pod
Kubernetes comprises of the 'master' (its official name) and 'worker nodes'.
The worker nodes do all the heavy lifting in terms of storing, transferring and receiving data around the sites and between the servers.

So, the premise of Kubernetes is like this:

You decide how many 'worker nodes' you want (typically the same number of servers that you have)
You give the 'Kubernetes master' (this is the official name) a list of the number of pods (servers) that you need in the form of a .yaml file. This is called the manifest.
The Kubernetes master takes a look at the manifest that you have given it and assigns the pods out to the worker nodes. Pods are assigned to the worker nodes depending on how much work they are already doing. Pretty clever, right?

You can control the number of pods through the command line and have direct access to information about your pods and worker nodes, such as their name, IP address and other info. You can also update the .yaml file through the command line with cubectl edit deployment and then your .yaml file name. Imagine it as handing a supervisor in charge of a workforce an updated task list. It is their job to make sure that work is distributed evenly and that no one worker node is over or underworked.
The master node monitors the amount of work that each worker node is doing - if anything looks like it is going to crash or become unstable, it will re-distribute the work. Smart, right?

Yes, but that's not all...!

So these pods that are created, and the images that are inside them, all have their own IP addresses. Great, they are all accessible to the outside world and each version of your site can be reached by the public, and by you, if you want to edit anything.
Wait...how can they be exposed if they are in a pod?

I'm glad you asked that. This is another powerful feature of Kubernetes.
For the outside world to be able to view your site, you need to expose the pods to the network. If you tell it to, Kubernetes will spin up something called a Service which will act as a load balancer to make sure that none of the pods are getting too much traffic (crash zone!)

The thing that makes it different to a usual load balancer is that Kubernetes will balance the load by pod ID, rather than just balancing across every server. This means that you can control everything with a lot more precision.

Doesn't sound that special...?
💥
It also creates a load balancer in your cloud provider. This means that you update your website in one place. 🤯

Save yourself a lot of time. Orchestrate your containers!

Save even more time - managed kubernetes options - good to know...

While researching for this article, I found out how tricky and in-depth it is to set up. Luckily, there are managed options that do it all for you - Azure's AKS and Amazon's EKS.
If you need to get started with Kubernetes fast, say you've built the next Amazon using Docker containers and you need to future-proof
fast, then I recommend using them while you look into Kubernetes. It is very CLI-heavy and looks like it would take some time!

_So that was Kubernetes. So, now we know what it ** is **! ⛴

What is Git? 🤷🏼‍♀️

JavaScript➕Coffee🚀 — Sun, 25 Apr 2021 14:21:23 +0000

Git is an extremely useful tool for developers. It is also quite abstract and tricky to learn.
I learned about git by reading, watching videos, viewing images, and trying out using it.
I've highlighted some of my favourite resources at the bottom of this article.

The general idea:

Have you ever worked on something, maybe an essay for school etc, where you were undecided about how you wanted the intro to be, so you made:

essayintro1.doc
essayintro2.doc
essayintro3.doc
essayconclude1.doc

and so on...

Maybe you tested out parts of the essay in this way and then put all of your final thoughts together in:

essayMAIN.doc

This is essentially version control, and although messy, it works for 1 person...

The problem:

Now imagine that you had multiple people writing and making edits on this essay...this would get very confusing very quickly and it would be pretty impossible to ever finish the essay (project)

Git saves the day

"Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later."

A Version Control System is an invisible system that holds copies of your files and records changes so you can switch back to a previous version. It also means that you can work together with two or more people on a document and you won't save over each other's work.

With large codebases such as those needed for organizations or product-building companies, there are inevitable issues that trying to keep track of changes, proposals or bugs would cause when multiple people are trying to work on it.
Imagine trying to build a house with 40 other people while blindfolded and with no communication. The likelihood is that you would end up crashing into each other, you'd build over other people's work and you'd probably break stuff...

A version control system such as Git means that you can keep track of changes and do your own work on your own branch.

Branch?

Imagine Git as like a tree * ...

*The metaphor of git as a 'tree' is an abstraction to help some people visualize, but also it can be thought of as different versions of a file.

The main trunk of the tree is called the main or master branch, and this should always be the source of truth of the code; the production-ready, correct, and most up-to-date version. You can create a branch from the main branch, which means that you have created a copy of whatever is on the main branch.
Now you can make changes to your own branch as if you've put tracing paper over the original code. Now you can make the changes you want to that code with no worry about breaking anything. You can test the code like this in a dev environment. When you are happy with the changes you have made, you can merge your branch back into the main branch. If you are collaborating on a project rather than working on your own, this is done via a PR, or Pull Request. Merging your branch means that Git puts all of your changes back into the original branch - now your changes are on the main branch! You've put your version into the codebase and now your new changes or updates are possibly in production (live!)

The three states

There are actually three 'trees', or states of git, used for creating and retrieving commits (saves):

the working directory
the index
something called "HEAD" for creating and retrieving commits.

The working directory

Files whose content you can change are in your working directory. These are the files that you are able to put into your code editor and make changes to. The working directory represents a particular commit (save) and is the version that HEAD is pointing at.

The index

Also called the staging area, the cache, the staged cache, stages files or directory cache...

The index can be seen as an area to store your drafts, or an area that you can see all of your changes and choose which files you want to commit to your repo. It's a holding area for your changes

HEAD

The HEAD is a reference point that shows you where you are along your commit line. It points to the currently checked out branch and to the last file that you committed (saved) onto that branch. This means that it frequently changes (and can be hard to keep track of...leading to a detached HEAD state - more on this later 🧟‍♀️)

The flow of updating the main branch in a git repository would be like this:

1.Make a new branch from main and switch to the new branch

$ git checkout -b Some-new-changes!
// Switched to a new branch "Some-new-changes!"

2.Make your changes

3.Add your changed files to the index (your draft area)

4.Commit your changed files with a message about what you did

git commit -m "commit message"

5.Push your changes to your branch

git push

6.Happy with your changes and checked everything? Create a Pull Request detailing what changes you've made.

7.When your PR is accepted, this means that your changes have been merged into the main files of the project.

The HEAD would move through points 1-4 here in turn and follows around what you are doing.

😱 Detached HEAD 💀

This sounds like a ⚠️horrific error⚠️ and pretty terrible.
I'm here to tell you it's not.
In fact, it is sometimes necessary to use this state to test out a feature.
Say you suddenly think of a different way that you could have solved something, or a different idea entirely that you could have approached your change or addition...if only you could go back in time to a few commits ago to test your new theory out...

What you need is a time machine

You can't have a time machine, but what you can do is point your HEAD marker to a few commits ago (via the hash of the commit), or whenever you want to start testing your new idea and create a temporary branch to use. With a detached HEAD, the changes do not belong to any specific branch and so you need to be careful that you don't lose your changes if you want to keep your new work.
The easiest way to get to a detached HEAD state is to

git checkout <the commit SHA(abcdef123)>

TL;DR: Detached HEAD state is sometimes used if you want to make experimental changes to an earlier commit. Not a horrific error. Don't panic.

Recommended resources

I'm not affiliated with these links or resources in any way, but I found them useful in my own learning journey.

Real-life references Youtube

Detached HEAD explanation and examples

Command line git messages reminder

What is a script? 🤷🏼‍♀️ How can I use them with Raycast?

JavaScript➕Coffee🚀 — Sat, 10 Apr 2021 13:19:43 +0000

💚 Disclaimer: No prior knowledge needed...

Raycast is a productivity tool for MacOS, and as a native app, it fits in with the Mac styling and performance that you are used to. I'll be using Raycast as an easy way to show. you how to run and access scripts.

If you use Spotlight (hit cmd spacebar and you'll find it), then you will be more familiar with what Raycast is. There are many tools that you can use that are similar, such as Alfred, Automator, Launchbar and others. With all of these tools, you can search your entire computer for a file, you can search for things in the browser without even opening the browser and you can add commands (Alfred calls them workflows, Raycast calls them extensions) to speed up the things that you do the most often, such as opening a particular website, starting a new email or emptying the trash (my favourite command 🤓)

Personally, I find the Raycast UI to be much more natural for Mac and it has a strong community that can help with any questions, and I love how easy it is to install extensions, or scripts. It also is easier to extend and adapt to your personal workflows.

Also, right now it's totally free! 🥳

Hold up, what is a script?

A script is a code file that allows your computer to automate a set of instructions. This could be something relatively simple, such as opening a webpage in your default browser, or something more complex such as starting up your development environment and opening the browser as well as your IDE. Scripts run in the background - this means that they run without getting in your way, and they generally happen fast.

Writing a script is like writing a recipe for someone else to use - you give them exact ingredients and tell them what to do with those ingredients, and then they might make you a delicious meal!

Mmm...

Scripts mean that you can instruct your computer to perform a set of instructions without having to ask you for anything.

Let's start with a script that does something that we all probably do too much but that probably isn't great for our productivity - opening Twitter in your default browser!

Luckily for us, the bash scripting language is pretty easy to remember for this script: the command word is open, so our script is going to be pretty short! Firstly, we need to install Raycast if you haven't already got it, and type Create Script Command as this will allow us to start coding straight away with all the metadata already set.

For this script, we are going to use Bash. The reason for this is because it is good for smaller and less complex scripts. Soon enough, you'll be coding with Ruby and Python and Swift and everything else, but for now let's get started with Bash.

After you've filled out the form, hit cmd+enter and choose where you'd like to save it. I recommend saving it in a folder called 'Code' if you don't have one already. If you're really stuck, just save it on the desktop and you can sort it out later 🥴

Now close Raycast for now, and go to the new file that you just made. Right-click, and go to Open With...

I need to install some fancy tool though, right?

Nope!

I'm using the built-in TextEdit Mac app, although you'll have a much better time if you have Visual Studio Code...

Ok, so we have our template, and we changed fullOutput to silent in the @raycast.mode(because we don't need to see any output or data for this script).

Would you believe me if I said we were nearly done?!

Next, we are going to write the actual script... hold onto your hats... 🧢

open https://twitter.com

Yep, it's really that easy! Congrats on writing your first script! Now, let's save it before we load it into Raycast. If, like me, you are using TextEdit for this, you'll need to change it to a 'plain text' file, under the format header, so that we can do what we want with it.

Next, you need to make a folder. I recommend saving it on on your desktop so you always remember where you put it! ✅ Now go back to your file and save it into your newly created folder. Name it anything you like, but make sure that the file ends in .sh. If it won't let you save it with the .sh file extension, go back and make sure that you remembered to make it a plain text file. If you aren't using TextEdit, then search for 'plain text' and the name of the text editor you are using in Google.

Now we can load it into Raycast!

🤓 Side note: As developers, we call folders on your computer directories. If they are on your computer, then they are local directories.

To load your script into Raycast, firstly open Raycast, then go to About, then Extensions, then click the little '+' to get to 'add script directory', find your folder, and then click open.

Ok, done!

Now we want to test our script, right?!

Go back to the root search of Raycast, and search for the title of your script! We set the @raycast.title to 'Open Twitter', so search for Open Twitter in Raycast and then hit enter on it...

Magical...🪄

Now, what happens if you change the URL and save the file, or if you add another open https://... ?

Suddenly, you have a way to open ALL of the web pages you need on a daily basis...at once!

Only web pages?

You can also open apps using the open command in bash - as long as you know the path to where the app is (usually /System/Volumes/Data/Applications/...)

Here's an example, my 'open-Everything.sh' file. As the name suggests, this script opens everything I need for my workday!

#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Open Work
# @raycast.mode inline
# @raycast.description Open my workflows
#
# Optional parameters:
# @raycast.icon 💻
# @raycast.iconDark
#
# Credits
# @raycast.author Faye Sipiano
# @raycast.authorURL https://github.com/FSipiano

open https://twitter.com
open https://app.frontapp.com/inboxes/teammates
open https://github.com/raycast/script-commands
open https://www.notion.so/raycastapp
open https://calendar.google.com/calendar/u/0/r
open /System/Volumes/Data/Applications/iTerm.app
open /System/Volumes/Data/Applications/Slack.app
open /System/Volumes/Data/Applications/Spotify.app
code
open /System/Volumes/Data/Applications/Aware.app
open https://app.pluralsight.com/library/courses

So that's how we can speed up our workflows using Raycast and open in bash scripts... what if you want to take it further..? What if you wanted to open a specific repo or file to work on? For that, you can add things like ~/Developer/raycast-web to tell it to open something in a specific place - you have given it the path (route) to get to it.

Scripting languages are cool and you can do a lot with them, but you don't need to remember how to write them...Google is your friend...

There're tonnes of workflows that you can speed up by loading scripts into Raycast. If you want inspiration or want to try out useful scripts written by the community, then head over to the community repo and see what you can find! One of my favourites is the Quit Everything command. I have it mapped to option q for extra drama. Obviously, I can't show you this script as my recorder would shut off, but it does what it says on the tin and it's a nice way of finishing off your workday in style 😎

I can't show you what it looks like, but it feels like this:

There are lots of scripts that you can write or download that will save you time and increase your productivity; take my usual, non-scripted, development workflow, for example:

Over 1 minute to get into my dev environment...

This is what I turned that into with the help of Raycast and a bash script:

8 Seconds!!! I save 63 seconds with this script.... that doesn't sound like A LOT, but trust me... it is A LOT if you are loading up your dev environment multiple times a day!!

That's Raycast! I hope that has inspired you to start looking into ways to speed up your workflows - head over to the community repo and see if you can find anything you like! As I mentioned, I personally recommend the Quit All Applications script and the Empty Trash script.

If you have any questions, recommendations or comments about Raycast or any of the repos or documentation, please reach out to me either through the community Slack channel - it is literally my job as a Developer Advocate to make sure that you get the best experience, regardless of your skill level 💚

What is an API?🤷🏼‍♀️ Part II

JavaScript➕Coffee🚀 — Sat, 13 Mar 2021 17:56:25 +0000

Disclaimer: I'm not a backend engineer (although I did once write a form in PHP....and then broke it, and I quite like Ruby), so this is written from a frontend-newbie point of view!

In Part I, we got to grips with what an API actually is.
There's a lot more to learn about APIs, and of course, a whole bunch of jargon to get through (this is the tech industry after all...)

So sit back and relax as we tackle a few of the more common jargons...

REST

Ok, don't relax that much...REST stands for "REpresentational State Transfer" which is kinda complicated, so hold onto your hats 🎩

"Representational State Transfer" essentially means "This API will listen for the endpoints, which you'll have got from the documentation, and then you'll receive the data you asked for!" Representational because the endpoint represents a piece of data (a resource), state as in object or data and transfer as in... transfer
At least they went with 'REST API' rather than 'RST API'....

Remember we talked about an API essentially being like a bridge in the first blog? Keep thinking about that.

For a REST API, you send your request over the bridge (the API) and you get back a piece of data...

Like a normal API?

Yes, but also no

You see, with a REST API, you can specify the data that you want to receive and then it'll only pass you back the bit that you want!
To do this, you need to look through the API documentation and figure out what bit of info is attached to what endpoint

Me?! I could never understand API documentation! Never!

I know, I know, it does sound scary...
However, many things in tech sound scary but actually aren't!

I promise that you will understand, but it takes time.

One thing that genuinely (this is not a sponsored article) helped me to understand the mystical world of APIs is Postman. Postman lets you see what response you are getting from an API, and if it's the right thing that you want. I recommend downloading it and looking into the docs too

What does an API response look like?

Ok, prepare yourself... JSON isn't the nicest thing to look at...

{
    "data": {
        "viewer": {
            "pullRequests": {
                "nodes": [
                    {
                        "baseRepository": {
                            "name": "node-cms"
                        },
                        "title": "Updated to exclude AWS references",
                        "number": 1,
                        "url": "https://github.com/vfwood/node-cms/pull/1"
                    },
                    {
                        "baseRepository": {
                            "name": "node-cms"
                        },
                        "title": "Update README.md",
                        "number": 2,
                        "url": "https://github.com/vfwood/node-cms/pull/2"
                    }
                ]
            }
        }
    }
}

Yep, eek...
This JSON is an actual real life call to my GitHub repo to find out how many pull requests I have open. As you can see, there are multiple layers to the data and it is set out in a weird format - this is called the 'JSON tree'.

Here is calling the API looks like in Postman:

That particular JSON response above is from GitHub's GraphQL API (a different one to the REST API)

What?! We are talking about REST!!!!!

I know, but I needed to compare it with something rather than just explaining it with words!

Remember the steps from earlier? This is the query that you'd write in your code to get the API to give you back the title of your PRs:

{
    "query": "query { viewer { pullRequests(first: 10 states:OPEN) { nodes {baseRepository {name} title number url} }}}"
}

See if you can follow the JSON tree and figure out the logic of the query - you can see that it's returning the name of the repo, the title of the PRs, the number of the PR, and the URL of the particular PR.

Nice, but that is a LOT of sorting through data.

GitHub also have a REST API, hence we are using them for our examples!
If you wanted to access the same data through the REST API, you'd first need to make sure you are calling the right API. Theoretically, to get the same into from the REST API, you'd call `.request('GET/repos/{owner]/{repo}/pulls', {

As you can see, we aren't having to wade through the JSON tree so much, we are just telling it what info we want (the repo name, the PR titles, the number and the URL)

This is the fundamental difference between REST APIs and other types of API.

As a front end developer, you need to know about the different types of API because you need to know how to cal the endpoints in your code, but remember that fundamentally, APIs are just bridges and the documentation is a set of instructions that will tell you what to do to access the data.\

Cool, are we done?

Not quite...stop resting and listen up, let's talk about....verbs...

HTTP methods

You need to know your HTTP methods when calling an API, regardless of whether it is RESTful, Graphql-ful, or anything else-ful!

It will tell you in the API documentation which one the particular API uses, and personally, I've only seen GET, PUT and POST, although I think DELETE is a widely used one too.
If you are calling an API, you need to know which of these methods it uses, as they all do different things.

GET

GET is a read-only operation, you are just getting the data and you can't change or manipulate it. An example of this could be if you were using the Twitter API to get someone's profile data.

GET /repos/{owner}/{repo}/pulls
GitHub REST API url

POST

POST is typically used to create a new resource.
An example of this could be if you were using the Twitter API to post a tweet. POST is not idempotent...

Eh?

Yeah...that word...

'Idempotent' is a horrible word that means that you can keep calling the same request multiple times and nothing will happen. An example of this would be if the API set person1's email address to hi@123.com and then did that exact same call again, nothing would happen - there would be no 'side effects' to the call. POST is not idempotent and so if you called it twice and it updated the email address again, it might do something unwanted like duplicate an ID...or a whole person...

A database nightmare waiting to happen

....Indeed, so watch your POSTs!

PUT

PUT is used for updating an existing API resource. The main difference between PUT and POST is that PUT is idempotent and so you can happily call it as many times as you like and nothing will change! An example of using PUT would be if you used the Twitter API to update your bio. The Twitter API probably doesn't use POST on anything that needs updating such as a bio... why do you think that is?

DELETE

I'll give you 2 guesses about what this http method does...

Yep! You were probably right!
An example of this is if you used the Twitter API to DELETE some posts from your profile.

Again, it's good to know what the HTTP methods are, but the API documentation will tell you which one to use. It's good to know what the methods are as you will understand more about the expected behaviour of the API and will be able to identify issues quicker!

As ever, I'm always learning, and I'd like to thank Benedikt for the below info!

There's another useful API method to know about, PATCH!
PATCH is very similar to PUT as they're both used to change stuff that's already there. The difference is how they do it:

PUT takes whatever item you want to change and replaces it with whatever you send in the PUT-Request.
PATCH, on the other hand, takes the item you want to change and only updates those fields you send in the PATCH-Request. It's therefore sometimes called a partial update as well.
PATCH allows you to be more specific than PUT
Let's take a look at a GitHub issue example:

The fields you can modify in an issue are the title and text (and a bunch of other things, but let's focus on those 2):

In order to change the title of your issue using PUT, you have to send both the changed title as well as the original text of the issue.
With a PATCH request on the other hand you can just send the title and not send the text at all.

So that was Part II. As always, any suggestions are welcome, you can DM me on Twitter or comment here 😊

What is an API? 🤷🏼‍♀️ Pt I

JavaScript➕Coffee🚀 — Mon, 01 Mar 2021 12:42:25 +0000

An intro

Another acronym!

Hooray, I love acronyms!

What does it mean.....?

API stands for 'Application Programming Interface'

Mysterious...

Yes, indeed.
Tech does love to be mysterious. Almost all applications have APIs and they are essentially contracts telling you what you can do with a system and how to get the data you need.

Like a rulebook?

Kinda, but not as specific as that.

In my Newbie Dictionary, API has been defined as:

"Stands for Application Programming Interface, is a software intermediary that allows two applications to talk to each other, is a contract between you and the software that you want to use, telling you what you can and can't do with it. It's a bridge allowing you to use the software and integrate it with your code, so that it becomes easier to integrate. Example- The google maps API allows you to integrate their maps to your apps through their API."

That's a pretty good definition, but what does that actually mean?

Let's take the Google Maps example further; say you wanted to have a map of your business location displaying on your site (this is a common use case).

You'd access your code, specifically your JavaScript, HTML and CSS for the map, and include the following:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

JavaScript:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

CSS:

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

You could do this right now (assuming you have set up a billing account for google cloud) and have a little page running locally with a map on it.

Cool

In the above example, we have accessed the Google Maps API.

But it all happened so fast!

It did. Let's break it down.

Look back at the HTML block. In the <script> tag at the bottom (that's where JavaScript lives on that page), we have a little src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly" This src is called an endpoint and it is pointing at what looks like a normal URL, and in fact it is, but that is actually a request to the Google Maps API. It's saying 'Hey, I need the weekly maps sent over to me please, look - I am authorised, I have an 'API key!'

The API key gives you access to the API. In Google's case, you probably get it when you set up a billing account and email. It would look something like this:

b07fa21a-8863-4953-8aae-22027540a782

I got this key from a random API key generator on codepen

You'd enter that into where it says YOUR_API_KEY in the src we looked at earlier. Forgetting to do this or copy/pasting it incorrectly is a common mistake and is one of the first things you should check - are all of the characters there or did you chop off one by mistake?

So is an API always a map or something that you add to your site?

Unfortunately for you, and for anyone trying to explain of understand APIs, an API can literally be anything.

A Content management system?

There's an API for that

A scientific calculator?

There's an API for that

Randomly generated dog photos?

There's an API for that (here, you know you want to)

You get the picture. Just know that an API is like a bridge that gives you access (and tells you how to access it) to data. It doesn't always transfer data back to you, but as long as you have a magic key, you have access.

If they all work so differently and do different things, how will I ever know how to use them?!

Documentation my friend, documentation. All APIs will have documentation of some kind, and this will contain steps about how to use it.

If you are still reading down here rather than looking at randomly generated dog images, firstly hello 👋🏻 and secondly, why are you not looking at dog pictures?!

While you're there, take a look at the documentation, there are multiple endpoints that you could use in your project. It's free, too!

If you want to look at more examples of APIs that we use in our everyday life, I recommend this site

This weather API gives you an idea of how different endpoints can give you different things

So you've heard of REST, HTTP, GET, POST, AUTHENTICATION and all this other stuff?

Hold tight, that's a little out of the scope of this article, but I'm collecting resources and knowledge for a Part II and maybe a Part III.

'API' is a big subject, and although I've used them in the past, I've not fully understood what they ** are ** and what the details are.

We are all codeNewbies here...

What is hoisting? 🤷🏼‍♀️

JavaScript➕Coffee🚀 — Thu, 18 Feb 2021 15:00:29 +0000

Easy!

Hoisting is a JavaScript thing that means that you can use a variable before you declare it...

Hold up, what?

Yeah, you're right, let me dig into this a little bit...

Firstly, we need to understand the definitions of these 2 words:

declared
defined

This is declaring a variable -

var greeting;
```


***************
This is **defining** a variable -

greeting = "Hello, how are you?"




Secondly, let's think about *scope*
_I wrote a little example of what **scope** is on my Twitter_



  // Detect dark theme
  var iframe = document.getElementById('tweet-1362026187262988289-393');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1362026187262988289&theme=dark"
  }





_Let's run with this analogy..._

For your little people to be able to work locally, they need to have been **declared**. Any people in your factory that haven't been declared can be seen by **everyone** in other factories within your code - they are _global._


####Ok, that's scope. Can we talk about hoisting now?

Actually, no. Ok kinda.


_Where you put stuff matters_

Let's think back to our **declared** and **defined** again. There are 2 different ways you can do these things:

_Simultaneusly_:

var greeting = "Hello world"



In this example, we are **declaring** the variable (greeting) at the same time as **defining** what it is going to say ("Hello World")

###or

_not.....simultaneously..._

var greeting

....

greeting = "Hello World"



In this example, we are **declaring** the variable (greeting) and then later on in the code, we are **defining** what it is ("Hello World")


###Why are there 2 ways of defining and declaring, isn't that kinda confusing? 1 way would be easier...

_My thoughts entirely._
Personally, I prefer the first way, I think it looks nicer and is easier to read
However, it is also nice to make all of your **declarations** at the top and then you can **define** them wherever you like. 

Anyway, moving on...

###Hoisting?

Yes, yes. 
So we have looked at the different ways of declaring and defining, but what JavaScript also lets you do....is this...

greeting = "Hello World"

...

var greeting




Now, logically, you shouldn't be able to do this, because you are using the variable before you are declaring it with the **var** keyword. It _should_ throw an error, but it doesn't. It will still know what **greeting** is. This is because the JavaScript compiler quickly scans your code and _hoists_ all of your declarations up to the top, as if you had written it like this:

var greeting

greeting = "Hello World"





It essentially _knows_ that you might have declared variables in random places (because everyone writes differently!) and wants to pull them all up to the top before it starts properly working on what you have written.

I think that's pretty logical actually. 

**It's like quickly reading a list of names in your head to make sure you know how to pronounce them all _before_ you read them out loud and get stuck!**


So, if you get an 'undefined' error on a variable that you weren't expecting, check the order that you've written everything in, and then blame hoisting (and probably start using let and const*) 🤣

Also, you may have noticed that I have used *var* as my JavaScript keyword throughout the examples. This is on purpose:

* `var` is a bit of a weird one - using it means that you might get some 'undefined' errors. `var` doesn't stand up for itself and is pretty unsure about things.
When you use `let` or `const` instead, they don't let the compiler boss them around - they know their job and they are sticking with it. `let` and `const` aren't affected by hoisting.
If you've **defined** something before you've **declared** it, you'll get a Reference error, and you don't need to worry about hoisting moving things around for you.

Hoisting also works with function declarations:


This is written in a logical order and works as expected. No hoisting involvement.

function example() {
var a = 1;
return a;
}

console.log(example())

//1




************************

This one is written with the `console.log` first, but will still work as expected because of hoisting - the compiler has skim read your code and 'hoisted' (pulled) all of your variable declarations to the top!

console.log(example())

function example() {
var a = 1;
return a;
}

//1






The lesson here: **stop using var, it will do you no good** 

Understanding hoisting is still essential for when you have to work with older codebases (`let` and `const` haven't always been around to save you from hoisting!)



####Shoutouts:

* Big shoutout to [@pasoevi](https://twitter.com/pasoevi) for helping to proofread!

What is recursion? 🤷🏼‍♀️

JavaScript➕Coffee🚀 — Wed, 10 Feb 2021 16:08:02 +0000

I was challenged by @100days100 to learn and write about recursion.
This is not something that I've looked into or used before..

This article will answer the question 'what is recursion?' and will hopefully give you a solid way with which to explain it to others.

Recursion is a principle which occurs in many different languages and formats, but we are going to stick with explanations and examples using JavaScript so we don't go completely mad.

So here we gooooooooo 🥳

Recursion (ree-curr-shon) is a Computer Science principle that is found in almost every coding language. It is a type of process or method that is used to break a problem down to solve it in smaller, repetitive ways. It's a method that calls itself.

Like a loop?

Yeah, exactly like a for-loop, except a for-loop is a loop, not a method.

Remember that tech likes to be confusing...

So....a method that keeps referring to itself...?

Imagine someone that keeps referring to themselves in the third person.
Example: "Hi, Faye's name is Faye. Faye likes writing and learning about things that Faye doesn't understand yet - essentially Faye likes to teach people while learning."

Yeah, sounds really weird. Give yourself a minute to come up with some funny sentences and then you'll be able to focus again.

You got it out of your system?

Ok great, let's carry on...

Why would you ever need to make a method refer to itself?

Great question...
A popular 'task' in a coding quiz or even interview is:

Create a function that returns the factorial of a given integer.

Stop right there. What?

Ah yes, this mathematical concept that I also just learned about! So this seems to be the best way to explain recursion
'factorial' is all about multiplying numbers together
So 'factorial 6' - 6! would be 6 * 5 * 4 * 3 * 2 * 1.

You could work this out pretty easily, but what about factorial 97?

This is where a recursive function will be useful.

Your function needs to loop (yes, loop, don't @ me) around all of the numbers, but (and hold on here) do you see the issue?

Let's take factorial 6 again - and I want you to imagine that each of the steps is a block of lego. Also, I'm calling each answer (n). Stay with me for now, we will come back to that later.

6 * 5 = n(30)

So here in our first block, we have the original number multiplied by itself-1

2nd block - (n) * 4 = n(120)
So this block is relying on the first block because it needs to know what the first blocks' (n) answer was, and then it comes up with its own (n)
3rd block - (n) * 3 = n(360)
This block is relying on the 2nd block for it's (n) answer, and is also, by extension, relying on the 1st block. This is why we are imagining them as lego - they all fit together and hold each other up)
4th block - (n) * 2 = n(720)
This fourth block is relying on every other block before it for all of their versions of n, and then it's created another version!
5th block - (n) * 1 = n(720)
Our 5th block doesn't really do much, it is just multiplying n by 1, nevertheless, we need it to finish our lego tower.
6th block - n * 0 = n(0)
Our last block feels like it's undoing all of that nice math that we were just doing, right? Yep, but that's math. Hold tight for the... 👀base case👀😱

Ok, that's factorial, what's that got to do with recursion?

The point of me explaining that was to show a recursive function, spread out like a scroll. Now imagine if you could squish all of those 6 lego blocks into 1.

Imagine all of the lego blocks for factorial 50, or even 700!
Imagine it was your task to write that out in code. Sure, achievable with for loops and if/else statements but...

Think of the clean code you could have if you didn't have for loops and if/else statements everywhere.

Elegant 💃🏼

The recursive function that you'd need for the 6! (factorial 6) puzzle would be:

function factorial(n) {
  if (n < 0) return;
  if (n === 0) return 1;
  return n * factorial(x - 1);
}

In the above function, if you wanted to find factorial 6, you'd console.log(factorial(6))

Let's break down exactly what the function would do next.

if (n < 0) return;
if (n === 0) return 1;

Well, 6 is greater than 0, and it isn't 0, so it would jump over these 2 ifs. We passed the termination condition and base case! Carry on!

return n * factorial(n - 1);

Woah....

Yep, this is the actual recursive function.

Bow down to it. This is what this whole article has been about.

What this little friend does is to say 'if you have passed the termination and base...' (we did) '...then multiply 6 by 6-1'

This function will run again and again, forever and ever, until it is stopped by the nets (the termination condition and base case.

Our 6th lego block (the one that undid all our nice math) will be caught in the base case (because it does === 0) and the previous results will be logged in reverse order (like an unravelling spiral)

References!

Recursion In JavaScript

What on Earth is Recursion? - Computerphile

As always, Oliver and Benedikt on Twitter

DEV Community: JavaScript➕Coffee🚀

What **is** React?

A framework or a library...?

HUGE

A spa....? I like to relax!

Framework...another one?!

A JavaScript framework, right

Right

Hey, I recognise that, it looks like HTML!

The puppet master

Ok, if only it was that easy...

Dynamic markup

✨Reusable components✨

Export it?

Managing state

Is anyone still out there?

What **is** caching?

Money money, cache cache 💵

Makes sense...

Essentially, yes

As always though, we can dig a little deeper into it. 🎢

Wait...is that why 'clearing the cache' can often solve things?

So only browsers have caches?

Dig out the library analogy again! 📚

Ok, got it, but what has this got to do with my memory storage?

Don't panic...we have a cache eviction strategy

Common CES'

What **is** technical writing?

So what is it?

Technical...

What is it actually used for?

Let's look at what these actually mean

💥

Inform

Direct

Be direct as well as directive.

Instruct

Research

What **is** Django? 🤷🏼‍♀️

Only one way to find out...!

Sounds interesting but not very descriptive...

Sounds like cheating...

So why do people choose Django over all of the other frameworks out there?

Cool, can I use it? 🤑

Smart and security-conscious!

What?!

What if I want to build a huge and successful web application?! I have plans for the next Youtube!

Like Jenga?

DRY

Ok, DRY lecture over…

Ok, I got carried away with that analogy because I got excited to be writing about something I actually recognised, but let’s get back to Django.

Are there any cons of using Django?

What **is** Kubernetes? 🤷🏼‍♀️

Glossary:

There's a theme here...

Hold that thought.

The scenario

Kubernetes 🦸‍♀️

Yes, but that's not all...!

Save even more time - managed kubernetes options - good to know...

What **is** Git? 🤷🏼‍♀️

The general idea:

The problem:

Git saves the day

Branch?

The three states

The working directory

The index

HEAD

😱 Detached HEAD 💀

Recommended resources

What **is** a script? 🤷🏼‍♀️ How can I use them with Raycast?

Hold up, what is a script?

I need to install some fancy tool though, right?

Ok, done!

Only web pages?

What **is** an API?🤷🏼‍♀️ Part II

REST

What does an API response look like?

HTTP methods

What is React?

What is caching?

What is technical writing?

What is Django? 🤷🏼‍♀️

What is Kubernetes? 🤷🏼‍♀️

What is Git? 🤷🏼‍♀️

What is a script? 🤷🏼‍♀️ How can I use them with Raycast?

What is an API?🤷🏼‍♀️ Part II

What is an API? 🤷🏼‍♀️ Pt I

What is hoisting? 🤷🏼‍♀️

What is recursion? 🤷🏼‍♀️