Basics and gist to styled-components.

Styled components is a react library that allows you to write your styling within javascript files. This means no more going out of the way to import CSS files globally or through modules. It supports CSS, and Sass syntax and makes it easier to conditionally render CSS onto your components.

Import into the file as styled.

Start by installing styled-components, and importing them into your react file.


quick guide for how to get windows subsystem for Linux up and running!

Photo by Michael Dziedzic on Unsplash

Windows subsystem for Linux is a Windows supported application that allows Windows users to run a GNU/Linux environment that includes most Linux command-line tools directly on windows. unmodified without having to go the route of the traditional dual-boot setup

installing WSL is quick and easy. From windows PowerShell, in admin mode, you’re gonna type in these commands.

First, we enable the Windows Subsystem for Linux by typing the following command in PowerShell:
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Next if you’re running windows 10, we’ll want to update to wsl2 which has a plethora of upgrades built upon WSL1.

To…


Photo by Marten Bjork on Unsplash

When it comes to coding, there's no better feeling than being able to just jump in and immediately know what you’re doing. sometimes though we need to have a bit of structure to how we do things. Introducing project management!

My advice for the planning of a react project is to break it down by functionality and where you want it to be visible. Let's say that you want to make a social media site based on gaming communities. you would have to break that down into its base components.

What pages will you have?
What will be on your navBar
How…


Other ways to write fetches???

Photo by James Haworth on Unsplash

While following some courses and writing some node.js programs I ran into something that I'm not familiar with as a new software engineer. In the course, the instructor was using axios.js to write out functions that would return promises from their API. This was super interesting to me because for a bit of time I thought that there was only one way to write such functions, which was through javascript’s built-in API, Fetch.

Axios is an npm package that is described as a promise-based HTTP client for the browser and node.js. It works similarly to fetch which is an API…


Multiple pointers algorithm pattern

Using the multiple pointers pattern by creating pointers or values that correspond to an index or position and move towards the start end or middle based on a condition can help you efficiently solve problems with minimal space complexity.

usually, you use it if you’re searching for a pair of values or a condition, you start at two places and you work your way to each other in order to reach a middle value.

an example of this is if you were asked to find a pair of numbers that add up to something in particular. assuming the array of…


quick ‘how to’ to fix this issue

The other day I came across this issue while trying to generate a new react project, it deletes the react repo because of an issue with the version of node that you have installed.

As stated in the image, the reason why I was getting this issue was because I wasn't updated to the latest version of node, but when I tried to update using homebrew I was still getting the issue.
It turns out that I was getting the issue because of NVM which is a node version manager that I had installed a while ago.

To solve the…


when to implement frequency counter patterns

A frequency counter is a problem solving algorithm that you can implement when you have a value that you want to find the frequency of,

it can be employed to find how many times a letter reoccurs in a string or to find out how many times a value, word, etc is repeated in any dataset given to you.

The pattern that this algorithm follows is to loop through the data given to you and start to build out an object.

Frequency counter example

In the question that appears above we are asked to find out how many times each letter appears in…


quick description of what sass is

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. — Sass docs

Sass, in a nutshell, allows us to use CSS as more of a coding language, letting us use if statements and variables/nested functions It allows us to decide what colors to show dependent on the current situation given to us in the app and based on the class names around us.

We are…


what are the three main parts of docker?

Photo by ammiel jr on Unsplash

What is docker? According to docs.docker.com:

Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications.

Docker runs on three main fundamental concepts.
- a docker file
- an image
- Containers

A dockerfile tells the code how to build out an image, basically, it asks for the os and the building steps in order to unpack containers and run them.

An image is a snapshot of your…


let's run through the gatsby quick start for those who know react

Photo by Ferenc Almasi on Unsplash

Gatsby is a static page framework that's based on react. it's used to display what would be static pages and uses the react framework.

To get started with Gatsby, just install it to your CLI and much like reacts “Create react app” you’ll run “gatsby new gatsby-site” within your CLI. this will create a new gatsby project in the directory that you’re in and name it “Gatsby-site”. From here you can write your webpages much like react pages. but do note that gatsby runs off of “Pages” meaning that each new file will be a different page that you can…

Angelo Poole

Junior Fullstack Developer with a passion for gaming

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store