DEV Community: Swishyfishie

Nice to meet you, PHP!

Swishyfishie — Sat, 05 Dec 2020 18:13:13 +0000

I have got a few messages on my LinkedIn regarding my PHP post the other day so I decided to write a bit about the start of my journey in the world of PHP.

My main motivation for learning this language is -and I'm going to be brutally honest- the job market. Studying Ruby on Rails at Flatiron Bootcamp was amazing, but the job prospects are grim as most of the Rails jobs are for people with a few years of experience, not juniors, but I derail (pun intended).

Okay so as a PHP junior, I've found a few useful resources and tools:

XAMPP

XAMPP is a popular PHP development environment that you can install on all the platforms (Linux, Windows and Mac). If you follow the instructions from here -- click on the video, you should have it up and running in no time.

You just open up the XAMPP after you installed it and click on the start buttons for the Apache and MySQL modules.

This will basically start your server which you'll find by default under the "localhost" address, so just type that in your browser.

You'll want to create your own php files, right? So in order to do that, go to the path 'xampp/htdocs' and create a folder with your project, maybe something cool like "todolist". Todo lists are cool, right? ...right?

Right!

Create your php files there and you can access them from your localhost address like this "localhost/todolist/index.php".

Simple, right?

Now you just need to know how to write PHP and you're sorted.

I highly recommend this FREE course by Brad Traversy.

Creating a database from 'localhost/phpmyadmin'

It's quite simple to create a database using XAMPP.

Type in your browser search bar 'localhost/phpmyadmin' and you'll see an overwhelming interface, but do not worry! It's not that scary if you actually look at it.

On the right side you can see the magic word "New". You can either press it, or be directed by default to the database panel where you have to enter the database name and just press create.

For this example I've created a table named "posts" that has 4 columns.

The first column is the "id" which you need to make sure it has a type of "INT" (integer) and that it is automatically incremented, by checking the "A_I" checkbox.

The second one is designated for the body of the post (the actual content) with a type of "TEXT" -- no need to give it other attributes.

The third one, author is going to be a type of "VARCHAR" with a length of 255 characters

And the fourth will have a "DATETIME" type that we will give a default value of "CURRENT_TIME".

Press Save and you'll have a lovely table like this:

Of course, you can play around and go to the INSERT tab and populate your database, but going more in depth is out of this article's scope.

Postman

This is an amazing tool for testing your API -- if you want to build any. But you should want to build at least an API in your lifetime. It's fun and it's not that hard!

PHP API course - this one has Postman included and Postman course - this one is focused on Postman

VSCode

Use VSCode.

Bite-sized intro to React

Swishyfishie — Sun, 22 Nov 2020 11:01:42 +0000

Sometimes we come across tutorials that seem great because we're building something, and that's ok.

The main issue with some of these tutorials is that they are focused on you building something, and not actually, teaching you what's going on inside of what you've built, so at the end of an udemy course you might find yourself having coded 3 full stack applications and have no idea how to manipulate an array.

I'll try to take a different approach with this article and instead of focusing on building, we're going to dissect something which was already built following examples from www.reactjs.com and www.w3schools.com

I'm going to explore the following questions.

What is a component? (and what is going on inside it)
What are the props? (and what is this)
What is the state?

Note: the HTML you see in React is not actually HTML, it's a way of writing JavaScript and HTML. You are not required to know JSX in order to build a React app, but it's definitely the easiest way.

What is a component?

A component is a piece of code that is (ideally) reusable code, that is (again, ideally) independent from the other pieces of code that you wrote.

This is a component:

Reference: https://reactjs.org/

Now, let's break down what's going on in here.

On line 1 we're using the ES6 Class syntax to define the "TodoList" class, that is extending the React.Component which basically means that TodoList class is a React.Component child, therefore inheriting React.Component's methods.

On line 2, we're looking at a render function, that (on line 3) *** returns*** HTML.

Line 4 is an UL opening tag, that closes on line 8, and line 5 and 6 are the display of JSX's power.

Curly braces allow you to process javascript inside the HTML, you can think of it like when you're using template literals in javascript, where in order to have javascript code in your string, you need to surround the string with back-ticks and wrap your code around ${ }. It's mostly the same principle.

Coming back to line 5 and 6.
We're going to talk about this and props soon, but for now you just need to know that we're mapping over the this.props.items array and returning a LI html element that has a key and a content of item.text.

What are the props?

Props are properties of a react component. They are similar to what arguments are in a javascript function and they're passed down from a parent component.

Reference: https://www.w3schools.com/

On this example you can see how there are two components, Car and Garage. If we're thinking about the hierarchy of things, a Garage can store Cars so we can say that Garage is the parent of Car.

In the Garage component you can see how the <Car /> component is invoked and there's the prop passed in as brand="Ford" which is essentially a HTML attribute.

The Car component can access it through props and in our case, through this.props.brand

this refers to the object it belongs to so this.props.brand could be pseudocoded like:

from this object . I want these props . named brand

What is the state?

The state of an object refers to what that object is like, and its attributes.

A state of a Car object can be an object that holds some attributes such as color:red, working:true, wheels:4 and so on.

The magic of it is the fact that we can change this information and update it in the user view without much trouble.

We could theoretically build a function that detects changes in the wheels number and when it's less than 4, we could change this.state.working to false. However we'd have to do it through a function named setState so the code will look like this:

this.setState({working:false})

Here is an example of how the Car's color will be changed through setState, using an event listener bound to a button:

Reference: https://www.w3schools.com/

I hope that this bite-sized article made you curious about what's going on in some simple React code.

For more information please check the https://reactjs.org/ and really work your way through it. Study properly, don't just copy the code and you'll find yourself progressing way faster than coding along from udemy or youtube.

All the best!

4 aspects of studying coding tutorials that you must be aware of, as a beginner

Swishyfishie — Thu, 22 Oct 2020 04:29:57 +0000

When you're learning a programming language as a beginner, and you're faced with a tutorial (or 10) that feels overwhelming, you must know a few things:

The person who made the tutorial, prepared everything in advance. The video/article is made for educational purposes, not to reflect how real programmers work.
It's perfectly normal to not understand too much. The goal here is for you to type the code, get familiar with the words so when you'll see the same stuff again, your brain will click saying "Hey, I remember this!", and of course, you'll feel proud of yourself! clap clap :)
People were not ready for the tutorials we have here. Our brains can't process the amount of information, their complexity and because there are so many tutorials, we devalue them.
Let's imagine we are 15 years in the past and you'd try to learn programming. You'd get some CDs with a person talking you through code and explaining various concepts. Due to the fact that your resources are limited, you'd devour those CDs making use of every bit of information there. You wouldn't neglect it as you're doing with your udemy courses. Should I even mention freeCodeCamp's 5-10 hours long, free tutorials? -- which brings me to my last point
Commitment. Dedicate yourself to one tutorial, one series or one instructor. It's tempting and often advised to use multiple sources, and to an extent it's a good idea, but serious learning is done through commitment, and commitment means focus.

I hope this tiny article helped you. These are some things I wish I knew when I started coding.

My Top 3 Favourite JavaScript Array Methods

Swishyfishie — Sun, 18 Oct 2020 15:52:44 +0000

In this tutorial I will be working in the Google Chrome dev tools console, so feel free to follow along.

We will create an array of strings and we will go through each of those methods to see what they are used for in an array.

let myTutorials = ['Python','JavaScript','Ruby']

Starting with .forEach()

For each calls a function for each element of the array, in order so basically it loops over the array, and I mostly use .forEach() when I want to render something in the dom.

myTutorials.forEach(tutorial => document.write(I love ${tutorial}. ))

Please be careful when you're working with objects, as forEach is an array method, and if you try to use it it will throw the following error

The next array method is called .filter()

Filter it will create an array with the items that pass a certain condition which is provided as a function.

Let's create an array of numbers: let arrayOfNumbers = [2, 53, 3, 81, 31, 5, 12, 66, 199, 34, 81, 19]

In the following image you can see how the filter method is easy to apply when you know what you want to filter, in this case, I want to filter out numbers that are higher than 50

And last but not least, your soon-to-be best friend, .map() .

Map will execute a function over all the elements it loops through, and create a new array of them.

Map will not change the initial array and we're calling this a non-destructive behaviour.

Let's say I want to change something on every element of my previously initialized tutorials array

let myTutorials = ['Python','JavaScript','Ruby']

You can see here how I changed each element individually

And here, I could even introduce a conditional statement to display my love for a certain language.

This bite-sized article is meant to quickly show you how you could use those 3 methods. I hope you enjoyed it and found it useful.

Restful routes or why do I have to do this?!

Swishyfishie — Wed, 15 Apr 2020 10:30:57 +0000

Introduction:
REST or Representational State Transfer is an architectural style, a convention that enables interaction through descriptive HTTP requests : GET, POST or DELETE and makes it simpler to organize your app structure.

In order to understand how to use RESTful routes better, we need to take a look n what those HTTP requests mean.

GET is used to retrieve data and nothing else. It's like you'd play "get" with your HTTP dog...

POST is used when you want to make something new. Basically you send data to the database and the models, where it's processed and manipulated in the desired way. Nothing to do with posting mail though...

PATCH. Come on you two, patch things up! .. This one updates whatever you want to be updated.

DELETE is generally used to...you know...delete stuff.

A GET route should look like:
www.mywebsite.com/user/3
www.mywebsite.com/items/3/edit
www.mywebsite.com/products/new

They all should only display the content and not process it in any way. That's a job for the other routes.

A POST route should look like:
www.mywebsite.com/products

You might wonder why is this looking like a GET route, well, it just LOOKS like it, but it behaves differently. Whilst a GET request will only display a form, a POST request will process the input values and enable CRUD actions.

A PATCH route should look like:
www.mywebsite.com/items/3

Again, you'd think that we need the "/edit" but we don't. That '/edit' is only needed in the GET request, when we're displaying the updating form.

What PATCH does, it updates our (let's say) Item object, only with the specific parameters we're asking for, it doesn't recreate the whole object like a PUT request would do.

A DELETE route should look like:
www.mywebsite.com/items/3

Here we're deleting the specified source from the server. Nothing to see, move along!

You can see that we're following a clean pattern of routes here. A convention that is explicit to the user, that is easier to debug, easier to follow and also understand as there's a lot of documentation on it.

How you can effortlessly improve your pseudo-coding in 2 minutes!

Swishyfishie — Sun, 12 Jan 2020 03:40:39 +0000

Flashy title, I know.
Before revealing this secret, let's do a quick recap on what a function is.

A function is a piece of code that runs whenever you want it to run without writing the whole code from scratch. You write it once(very unlikely), you save it and then call it when it's needed.

More complex functions take in parameters to operate and solve a particular problem.

Cool, now that you know what a function is, let's go through this scenario:

It's Tuesday morning and you just woke up.

Whilst heading towards your local independent coffee shop, you see that you received a letter. What could it be?!
It's a bill of course, because who writes letters nowadays? Your grandma stopped writing when you installed Facebook on her phone so that's that.
That bill is overdue and it's way more than you can afford to pay right now.
You have two options: Cry and tweet about it OR think about solutions.

There's one obvious choice here.

...so after you wiped your tears and deleted that backfiring tweet, you remember that the "bill people" are reasonable enough to let you pay it in installments.
You also remember that you have a relative that needs a website and you know for a fact that that's the best way to do business. With friends and relatives.

You call the "bill people" and arrange something that works for you.
Things seem to have worked out. Now the only things needed are you to work on that website and respect the bill arrangement.

Problem solved.

How is this relevant?

Well let's break it down really quick:

Problem appears

Cry, tweet and regret
Looking for tools to solve the problem
Finding a way to earn money
Negotiating an arrangement
Build the website
Pay the bill

Problem disappears

This my friend, is a real life function and ta-daaaa, you're doing pseudo-coding in real life.

When it comes to coding, people seem to dive head-first into the deep end. That unfailingly triggers the impostor syndrome making you feel that you know nothing about coding.
Syntax is very important but syntax is out there on google.
You have everything you need inside your head.
Write or at least think about a plan on how to approach your coding problem and only after you're satisfied with it, ONLY THEN you should start writing code.

Pro tip: after your pseudo-code, write down what kind of syntax would you need to look for. You have a list of items that is probably an array? Well you could look for array methods that could help you and so on.

Happy coding and remember that pseudo-coding is not something you have to learn. It's something you do on a day-to-day basis.

You just call it overthinking. :D

Happy coding and spread love.

My 10 months of coding or how to print 'hello world' and call it a startup

Swishyfishie — Fri, 29 Nov 2019 01:05:10 +0000

I started coding out of a random ad for a HTML&CSS course. Thank you mind-reading ads - I didn't even know that coding is going to fit me like a glove. A glove without finger-holes. In the summer.

And because I love coding so much, I'm going to give you my do's and don'ts, that I wish I was aware of while doing all this...

In the first months

Yes: Get an Udemy course. Create a Twitter account. Do the #100daysOfCode challenge.
No: Get 10 Udemy courses. Be pressured by the #100DaysOfCode challenge.

I think that the first month was the one that decided I'm going to stick to coding and it was mainly because of the community I found on Twitter. Highly recommend to connect to as many devs you can. Just don't be weird about DM's and stuff.

People need to feel that they belong somewhere and that's why the #100DaysOfCode challenge has so much success. It's an amazing tool that will connect you to people around the globe which are on the same journey as you and you'll find that struggle, despair, and doubt are normal when learning something hard like coding.
You're not alone.

Pro-tip:

If you're picking up web development, don't limit yourself to HTML&CSS!
Add JavaScript or Python on your studying list.
Trust me, the sooner you start learning one of those, the better!

A couple of months later

Yes: Get a coding buddy. Do projects with them.
No: Cry over coding buddies.

Having a coding buddy is crucial to your dev life as you'll have to work in teams. There will be many people on the same level especially in the twitter dev community just make sure to reach out in a mindful way. The key aspect in this whole coding-buddy experience is not to cling on to one person and learn how to overcome the fails. You do get a lot of experience points when you fail though, so keep that in mind.

Pro-tip:
Some people struggle with self-confidence and the infamous impostor syndrome
JavaScript or Python will work the same whether your're feeling good about yourself or not. Getting out of that "I'm not good" mindset once in a while does wonders and you can do it with mindfulness or just writing down how you feel for 2-3 minutes a day.

A few good months later-er

Yes: Start to learn a second programming language. Give back to the community. Create your "Hello world" startup.
No: Not looking back on a regular basis to see how far you went!

Since programming concepts are more or less the same and it's mostly the syntax which is different, learning a second programming language is an eye opener and will definitely solidify the concepts you already knew.

There's tons of way to give back to the community. People are constantly asking questions and need help or guidance so go ahead and reply to the #codenewbie, #helpmecode or #100DaysOfCode questions.

What's a "Hello world" startup?

"Hello world" is the first thing that 99%* of the programmers wrote when they first coded and it probably generated the greatest feelings of accomplishment.

Now apply the "Hello world" concept to your personal journey and you'll find yourself starting up things. Start a weekly zoom meeting, a twitch stream of you solving codewars exercises, a youtube tutorial series or a blog.

These things aren't unique and most coders do them and you may ask yourself why to do something that's already over-done(is this a word?). Because in our times it's sensible that our actions should be in the benefit of others too and no matter your level, you can always teach or inspire someone. And ultimately because it's fun!

Yep, coding should be fun. If it isn't, stop and reconsider things.

Pro-tip:
No more pro tips, you're the pro now

*statistic that is purely fictional, created for the dramatic effect