DEV Community: Simon

What Is a Flexbox? And What Do I Put In It?

Simon — Tue, 08 Mar 2022 10:40:28 +0000

I Like To KISS

If you have read any of my other blog posts, you'll know I like to keep things simple stupid (KISS) and get straight to the point. Flexbox is essentially a way that allows a container to best fill the space available. The rest of the background of Flexbox is a bit boring so we'll skip and get into some code & examples 😁

How Do I Use a Flexbox?

To set a container to use flexbox we use the CSS property "display" and set the value to "flex"; this will enable a flex context for all its direct children. We now have a flexbox container! Congrats! 🥳

.flex-container {
    display: flex;
}

What Now?

There are a number of properties that we can set in order to manipulate the behaviour of our flexbox. Let's take a look at some of these:

Properties for flexbox container

flex-direction This is how we define if the flexbox's items will be displayed vertically (column) or horizontally (row). We can also set the items to be displayed in reverse by suffixing the property value with "-reverse".

.flex-container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap By default, flexbox will try to put all items onto a single line regardless of the container boundary. We can change this by adding a property to the flexbox container, flex-wrap.

.flex-container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

flex-flow flex-flow is a shorthand that amalgamates both flex-direction and flex-wrap.

.flex-container {
    flex-flow: column wrap;
}

Properties for flexbox children (flex items)

order By default flex items are displayed in the order that they appear in the flexbox container. However, we can control the order in which they are displayed with the "order" property. Any items that have the same order value will display in the order they appear in the flexbox container.

.flex-item {
    order: 5
}

flex-grow flex-grow allows an item to grow to fill the space of its flexbox container; a unitless value that acts as a proportion to the other flex items in the container. If all items have a value of 1 the remaining space in the container will be distributed evenly to all children. If one flex item has a flex-grow value of 2 then this item will occupy twice as much space as items with a value of 1.

.flex-item {
    flex-grow: 1
}

The Real Reason People Use Flexbox

Centering an item!

To center an item inside a flexbox we need to have a couple of things. Firstly we need a flexbox container, then we need at least one flex item.

.flex-container {
    display: flex;
}

.flex-item {
    width: 100px;
}


<div class="flex-container">
    <div class="flex-item">
        Item #1
    </div>
</div>

Now we need to add a property to center the flex item horizontally; we'll use "justify-content" to do that! Lets add that in to the flexbox container css.

.flex-container {
    display: flex;
    justify-content: center;
}

Perfect! We've centered the item horizontally. Now let's center it vertically. To do this we'll use the "align-items" property in the flexbox container CSS. We'll also add some height to the container so we can see the centered working correctly.

.flex-container {
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

Don't believe me that this actually works? Here's a codepen for you to see it in action and you can have a play around with the different values.

https://codepen.io/Simon_9/full/OJOYbjZ

Other Values For Flex Positioning

Flex is great to center an element horizontally and vertically inside a container but there are other values we can set to change the display of the flex items.

Justify-Content

flex-start (default): items are shifted towards the start of the flex-direction.
flex-end: items are shifted towards the end of the flex-direction.
start: items are shifted towards the start of the writing-mode direction.
end: items are shifted towards the end of the writing-mode direction.
left: items are shifted towards the left edge of the container unless that doesn’t make sense with the flex-direction, then it behaves like a start.
right: items are shifted towards the right edge of the container unless that doesn’t make sense with the flex-direction, then it behaves like an end.
center: items are centred along the center line
space-between: items are evenly distributed
space-around: items are evenly distributed with equal space around them.Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Align-Items

stretch (default): stretch to fill the container (still respects the min-width/max-width)
flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle and is about respecting the flex-direction rules or the writing-mode rules.
flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
center: items are centred vertically
baseline: items are aligned such as their baselines align

Feedback Time

I'd love to know your thoughts on this article! Don't forget to leave a reaction so I know if you enjoyed it! Aaaaand come say hello on Twitter! @SimonDoesCoding

Basic Intro to Functional Programming

Simon — Fri, 04 Mar 2022 15:00:54 +0000

Functional Programming Background

Functional programming is a programming paradigm that avoids shared state, mutability and side effects; this is done by using pure functions. Because functional programming aims to avoid side effects and mutability it makes unit testing easier.

Huh? A Pure Function? What is that?

In simple terms, a pure function will always return the same result if the inputs are the same AND the function does not have any side effects.

I Still Don't Understand

Okay, okay let's have a look at some code. This first example is a pure function, it has no side effects and given the same inputs it will always return the same output.

const sum = (a, b) => a + b;

sum(1, 4); // the answers 5
sum(1, 4); // the answers still 5
sum(1, 4); // guess what... its still 5

Lets now have a look at an impure function and see if we can figure out what is going to be returned

const randSum = (a, b) => a + b + Math.random() * 10;

randSum(1, 4); // what will be returned?
randSum(1, 4); // whats going to be returned this time?
randSum(1, 4); // surely you can get one out of three right?

So why is this an impure function? Simple, each time the function is called with the same inputs, the output is going to be different; this makes it unpredictable and therefore difficult to unit test.

Basics Out of the Way

Okay, we've got through the simple pure and impure functions, lets look at another function and let's figure out if it's pure or impure.

const delta = 5;
const deltaSum = (a,b) => {
    delta = 4;
    return a + b + delta;
}

deltaSum(5,6); // returns 15
deltaSum(5,6); // still returns 15

So when the inputs are the same, the value returned is always the same so surely this is a pure function right?

Wrong!

This function is also impure as the function relies on a global variable and the function has side effects by changing (or mutating if you prefer) the global variable from inside the function.

Other examples of impure functions

Using console.log() inside of a function makes the function impure as this is an external API and not a javascript method.
Throwing exceptions makes the function impure because our function now has a side effect

Time To Be Realistic

It's all well and good on paper saying that every function needs to be pure but in reality, we need to write to the console, we need to throw exceptions and we might even have to mutate state occasionally.

So what can we do?

We can create a clear boundary between the parts of our code that are pure and which are impure; this lets us and any other developers know what to expect.

Overall

This is not everything that makes up functional programming but just a single part. Functional programming certainly has its place and it makes predicting and unit testing code a lot easier. I would recommend reading up on functional programming if you are eager to learn new things and broaden your horizons.

You Da Best

I appreciate you reading this article and I hope you learned something new! If did enjoy the article I'd appreciate your sharing and adding a reaction on the article 👍

I Just Had My Mind Blown: Variables In Vanilla CSS 🤯

Simon — Thu, 03 Mar 2022 13:48:21 +0000

Yesterday, I was having a little chat with a friend on Twitter about creating HTML templates; this is something I'd looked at doing before but I wasn't able to provide the level of customizability that I would have liked. I have been trying to aim my templates at non-technical users who may not have any knowledge of CSS or HTML. As you can imagine, it's quite difficult to change a picture or brand colours when the user has no idea what HTML or CSS is.

After chatting with my friend, I thought it'd be best to just have a very detailed .README file that explains everything that the user would need to change and how they would go about doing it. I got off on a tangent, as I usually do, and started googling things and then I stumbled across something... the holy grail! Exactly what I had been looking for! Variables in vanilla CSS! 🤯🤯🤯🤯🤯

I Found It!

I had to refresh the page a few times to make sure I wasn't getting trolled, I checked the date to make sure it wasn't April Fools Day but no, this was real! All my problems... well most of my coding problems were solved!

Here's how you do it

Enough of my life story, lets looks at how we actually implement this!

You have a psuedo-class in your CSS file and create a custom property inside that; this property can then be used throughout the CSS file.

:root {
    --primary-color: #C0B9DD;
}

.some-class {
    background-color: var(--primary-color);
}

Here's a quick codepen I put together so you can see it working for yourselves!

https://codepen.io/Simon_9/pen/yLPGwOp

7 Fun, Cool & Free APIs For Your Next Project

Simon — Tue, 01 Mar 2022 14:01:43 +0000

A Small list of free APIs for your next project!

Just a quick list of fun and free APIs that you can use for your next web development project.

Poke API - Access all pokemon data including characters, sprites, moves, stats and more!
Bored API - Generates random activities for you to do when you're bored
Super Hero API - Data on superheroes from both comic universes
Chuck Norris Jokes API - Generates a random Chuck Norris joke
Movie Database - Obtain movie information
Cocktail API - Find information on cocktails, how to make them, ingredients or generate a random cocktail!
Geeky Jokes API - Fetches a random geeky/programming related joke

I created a simple Pokedex using Poke API My Pokedex

I'd love to see what you make with these APIs!

Have Fun!

Red Light. Green Light... Refactor: Test Driven Development

Simon — Tue, 01 Mar 2022 11:44:31 +0000

What Am I On About?

Let's get straight to the point. Test Driven Development or TDD for short, is an approach to software development where unit tests drive the design and development of the code; with TDD, tests are written and implemented before any code is written. We're going to focus on a TDD approach called "Red, Green, Refactor".

Red, Green, Refactor

There are three stages of development for this TDD approach. Can you guess what they are?

Well Done! Give yourself a gold star! ⭐

They are, of course, "Red", "Green" and then "Refactor"

Red

Let's firstly look at "Red" and what this means. The "Red" stage is always your starting point in this approach of TDD and this is where you think about what you want to develop. The purpose of this phase is to define what you want to implement but not writing any logic to make the feature actually work.

Time For Some Code

public interface ICalculateAreas
{

}

public class AreaCalculator : ICalculateAreas
{

}

[TestClass]
public class TestDrivenDevelopmentExample 
{
    private ICalculateAreas _areaCalculator;

    [TestInitialize]
    public void Setup() 
    {
        _areaCalculator = new AreaCalculator();
    }

    [TestMethod]
    public void TestDrivenDevelopmentExample_AreaCalculator_CalculateQuadrilaterals() 
    {
        var expected = 24;

        var actual = _areaCalculator.CalculateQuadrilaterals();

        Assert.AreEqual(expected, actual);
    }
}

So in the code snippet above, we have a C# interface, class and test class. The interface and class are empty and purposely don't contain any methods or logic; this is to satisfy the Red stage.

Before we even run this in Visual Studio we will get an error that looks something like this: Have you ever been so happy to see a failing test or an error in your code?

Brilliant! We have completed the Red stage!

Green

Time for "Green" and you guessed it... that means we're going to make this test pass BUT we are going to do the very minimum to get this test to build & pass; we'll think about making the method clean, readable and efficient later.

In our example above, we want our CalculateQuadrilaterals() method to return the same value as our expected variable, in this case, that's 24. So, what's the first thing we need to do to get this thing building & passing?

...

Need another minute?

...

Correct! We need to create the method

Firstly, we need to create the method to please Visual Studio. Let's go ahead and do that; we need to add the method to our interface and then to our class.

public interface ICalculateArea
{
    decimal CalculateQuadrilaterals();
}

public class AreaCalculator : ICalculateArea
{
    public decimal CalculateQuadrilaterals()
    {
        throw new System.NotImplementedException();
    }
}

Done! Visual Studio is happy but our test is failing. Let's make it pass. We'll add in a couple of hardcoded values so that the method returns our expected value.

public class AreaCalculator : ICalculateArea
{
    public decimal CalculateQuadrilaterals()
    {
        var height = 4;
        var width = 6;

        return height * width;
    }
}

OMG! It's passed!

Refactor

Congratulations, we've written some code that not only builds but it also passes! However... there is a slight problem with our code. What about quadrilaterals that have an area of anything BUT 24? We've hardcoded in the values to return the arbitrary value of 24. What if the height was 14 and the width was 26? Would our method be able to calculate that? Nah, we're always going to get 24. Let's change that by refactoring our code. That's right, in the Refactor stage we're going to refactor our code... who'd of thought it? This stage is important as we want to refactor our code; thinking of performance, readability amongst other things, but ensuring that our test still passes.

For our code we want the height and width to be passed into our method and remove the hardcoded values. We'll add parameters into our method, remember to add the params into the interface as well.

public interface ICalculateArea
{
    decimal CalculateQuadrilaterals(decimal height, decimal width);
}

public class AreaCalculator : ICalculateArea
{
    public decimal CalculateQuadrilaterals(decimal height, decimal width)
    {
        return height * width;
    }
}

[TestClass]
public class TestDrivenDevelopmentExample
{
    private ICalculateArea _areaCalculator;

    [TestInitialize]
    public void Setup()
    {
        _areaCalculator = new AreaCalculator();
    }

    [TestMethod]
    public void TestDrivenDevelopmentExample_AreaCalculator_CalculateQuadrilaterals()
    {
        var height = 4;
        var width = 6;
        var expected = 24;

        var actual = _areaCalculator.CalculateQuadrilaterals(height, width);

        Assert.AreEqual(expected, actual);
    }
}

We've added parameters into our method for the height and width of the quadrilateral we are trying to calculate the area for; we've removed the hardcoded height and width variable; we've added height and width variables into our unit test and passed them into the CalculateQuadrilaterals method.

Moment of truth... does our test still pass?

SUCCESS!

We've done it! We've gone through all the stages of Red, Green, Refactor. This is obviously a very simple example of using Red, Green, Refactor but no matter how complex the feature is, the stages and principles remain the same.

Becoming A Software Developer: Simon's Story

Simon — Mon, 29 Nov 2021 15:20:31 +0000

My Computer Background

Ever since I knew what a computer was, I was obsessed. Video games, games on the internet, videos, Minesweeper, anything you could do on a computer I was a fan of. Whenever anyone in my family had a problem with their computer, they rang me and it made me feel like Bill Gates even though I was just turning it off and on again 😂

Moving forward a few years, my best friend had a PC custom built and naturally, I wanted one! I ordered essentially the same PC that he had. After a while, some of the newer games weren't running as smoothly as I wanted them to so I started investigating how I make mine run better. When the PC was on its last legs, I started taking the PC apart and looking at the different parts inside the case and I was just fascinated with everything!

I saved my money and purchased a new motherboard, a new CPU, some new RAM and a GPU. Put it all together inside the old case and voila! New, shiny, up to date PC and something I could be proud of! Something I'd learned about and built all on my own! I still have that PC today! I have added more RAM and SSD's since then but it's still very usable.

Computer Education

When it came time to select which subjects I wanted to do for my GCSE's, IT was one of my options. However, IT was mainly how to use Word, Excel and Access databases; not exactly the thrill of building my own PC.

On to college! If I'm being honest, I didn't research the courses available at my college and instead I took subjects that I felt comfortable with; one of which was IT. I couldn't tell you what I learned during that first year of college in IT... something about the Computer Misuse Act or something? Maybe? 🤷 Towards the end of my first year, one of my friends that I had played basketball with for a couple of years said that he was taking "Computing"... Wait what?!?! There's ANOTHER computer course? What's that about? I did a bit of research on it and low and behold its how a computer works, its writing code, learning parts of a computer! I immediately spoke to the college and decided to drop IT and take Computing going into my second year. I loved that class! I wasn't the best in my class by far but it was the lesson I looked forward to the most.

Change of Plan

Throughout my GCSE's & A-Levels I always saw myself having a job as a... can you guess?

Did you say "Software Developer"?

If you did, you'd be wrong! I was deadset on becoming a Police Officer! Yep, that's right a Police Office, pretty far from sitting in a basement doing coding. Despite this ambition to join the Police, I chose Computer Systems Engineering to study at university with the hope to join the Police after completing my degree. I had it all planned out. My family had it all planned out.

University - The Biggest Regret of My Life

I got the grades required to get into my first choice of university! Hooray... I should be excited right? I wasn't. I was going to miss my girlfriend. She still had another year of university and she was my best friend. The university I had chosen was on the other side of the country. "Well, why did you choose that university?" I can hear you all asking but it was one of the few computer courses that didn't require an A-Level in Maths. I didn't want to go but my family made it very clear I'd be letting them down if I didn't go.

I moved across the country to university where I basically didn't leave my room, only for lessons and lectures. I didn't interact with anyone, I barely ate anything. I was miserable. My girlfriend came to visit for a week when she was off college and I just wanted to leave university! So that's what I did! I spoke to the university and said I didn't want to be there anymore, they suggested deferring my place for a year so I could return in a year if I wanted to. I had a week or two to pack my stuff and move out of the accommodation whilst they processed my deferral. The relief I felt was UNREAL! A huge weight had been lifted off me. I'd let my family down but I just didn't care, I was just so excited to leave. I was going home... but to do what?

Road To Software Developer

During the time of me moving out of university, I managed to secure an interview for an apprenticeship in Web Development. The apprenticeship was not close to home and was going to be an hours commute on the train. Believe me, paying for trains as well as feeding myself, paying for my car and leisure activities is not an easy feat and I honestly don't know how I managed it. I kept reminding myself that the year's worth of experience would be crucial to getting a job at the end of it, so I persevered.

Did I learn a lot from my apprenticeship? Not really.

Did it help me get a job at the end of it? Definitely! What I had been telling myself the entire year finally paid off! I got a job as a junior web developer at a real company. They actually wanted to pay me, what I considered, a lot of money to do real work for them, to do real problem solving! I couldn't believe it!

Did I learn a lot from my first job? Yes. To this day, I still think I learned more from my first job than from my apprenticeship. There is an awful lot to learn on paper but real world code is not like the textbooks. Luckily, the senior took me under his wing and helped as much as possible and the IT Director made sure I had plenty of "little projects" for him.

Where Am I Now?

So here we are 10+ years later and I'm still coding but now I'm trying to take a whole new path. Freelancing and becoming a content creator for programming. I've been on Twitter for the past couple of months and there are so many people trying to learn to code, asking which path is best. In reality, no two people's journeys are the same. What might work for one person, doesn't work for someone else.

Alls I can say to anyone wanting to learn to code, just do it! Be self-taught. Go on boot camps. Get a degree. Whatever it takes!

For the ones that have already started on their journey and are worrying about finding a job, wondering "Am I ready?". You are ready! Even if you don't meet the job requirements to a T, apply anyway! Practice your soft skills, they go a long way!

If I was to only apply for jobs where I met every single bit of criteria on the job description, I still wouldn't get a job. What's the worst that can happen? They say no? They don't reply? Is that really the end of the world?

Anyway, this is just my story. I can't wait to hear your stories too!

Is Web3 & Blockchain The Future Of Web Development?

Simon — Tue, 23 Nov 2021 09:16:09 +0000

Recently I delved into the unknown and started reading and learning about Web3 and blockchain; this is the latest trend circling around Twitter so my interest was peaked 👀

Web3

But what on earth is Web3? and what is blockchain for that matter? Let's start with an easy one... what is Web3? Web3 is a collection of Javascript libraries that allows an application to interact with an Ethereum node remotely or locally or more simply put it allows an application to work with blockchain.

So far so good?

Blockchain

So we're all crystal clear on what Web3 is right? Now to tackle blockchain 😬 Basically, a blockchain is a special database that stores information in a way that makes it near impossible to hack or change. The information stored is essentially a digital ledger of transactions; each of these transactions is duplicated across all the nodes on the blockchain.

Okay, blockchain done ✅

What happens next?

So we know what Web3 is (roughly), we know what blockchain is (kinda)... how on earth do we use it?

So let's open VS Code and create a new project... just kidding! I'll cover all that in another post 😛

In all seriousness, how do we interact with the blockchain? We write something called smart contracts. I can already hear it... "what is a smart contract?" so let's find out

Smart Contracts

In simple terms, a smart contract is a program that is stored on a blockchain that runs when certain conditions are met. Smart contracts allow developers to manipulate the data stored in the blockchain.

We've covered what Web3, Blockchain and Smart Contracts are, now for the question you've all wanted to know the answer to and the entire reason you came in the first place... Is Web3 & blockchain the future of web development?

Is Web3 & Blockchain the future of Web Development?

One thing I can't stand when I read blog posts is when there is no clear opinion to answer the topic of the blog post. I could easily say that Web3 & Blockchain MIGHT be the future of web development but I'm not gonna. I want to give my honest opinion and if I'm wrong, I'm wrong and I'll move on with my life.

Drumroll Please

No. No, I don't think Web3 & Blockchain is the future of web development. It certainly has it's place on the web and it will be perfect for certain companies but I don't see the industry moving into Web3 & Blockchain. There doesn't seem to be a need for it from a freelance/agency point of view. A traditional database, back end and front end site will get the job done. Considering crypto payments need to be made whenever a new smart contract is deployed to blockchain will deter many developers. Buying and investing in cryptocurrency, like any investment, is a risk and I don't see an investment like that being the cornerstone of web development.

There, I said it!

Will that stop me from learning Web3 and Blockchain? Absolutely not, there definitely will be a market for it and I see it as being quite a niche market and one that companies will pay $$$ for