DEV Community: Mariany

3 CSS Features That Make Styling Easier

Mariany — Tue, 07 May 2019 01:31:44 +0000

For some people, and probably most people, CSS can be a pain. However, CSS does come with a lot of useful utilities to make your life easier as a developer and website designer. So let’s get started and look at 3 of the many features that CSS provides.

1. Flexbox Center Alignment

The first feature deals with laying out your page. Very often, you will find that you have some content that you’d like to center, rather on a page or inside of a parent. For the longest, though, centering both vertically AND horizontally has had a ‘hacky’ approach and could sometimes be unresponsive. Now, with flexbox and the alignment features it provides, we can do this in a very elegant way.

On the parent of the element we want to center, we can apply the following styles

display: flex; justify-center: center; align-items: center;

This will allow me to turn this:

Into this:

How does this work?

In flexbox, you have two axes. You have something called the main axis and the cross axis. The main axis is essentially an X-axis, it holds content horizontally. In contrast, the cross axis is like a Y-axis, it will hold content vertically. The justify-center property and the align-items property will allow for you to change how items are aligned, respectively. Justify-center being the main axis modifier and align-items being the cross axis modifier.

<div class="my-container">  
  <div class="text">Hi, my name is Mariany 😅</div>  
</div>

So we’re telling the parent element (my-container) to use the flex display. We need to define this in order to be able to use align-items and justify-center. We then add justify-center, which moves the text over to the middle. And then we add align-items, which slides the text down. This will leave our my-container styles looking something like this:

.my-container {

  display: flex;  
  align-items: center;  
  justify-content: center;


  background: #ddc942;  
  width: 100vw;  
  height: 100vh;

}

I recommend reading more about flexbox and it’s features at CSS-Tricks Guide to Flexbox

2. Transitions

When animating things like buttons or link hovers, or practically anything for that matter, that is considered simplistic; Using animations and keyframes can be overkill. Thankfully, we have transitions that come in handy. Transitions allow for us to transition our elements when certain properties on them change. Just think! Making a hover animation in just 2 lines of CSS!

We can do this with the transition property. The transition property can take up to 4 values but a minimum of 2. Add the transition to whatever element selector you want to target. For example, if I wanted a transition to the background of an element whenever it gets covered, I could do something like this.

.box {  
  width: 300px;  
  height: 300px;  
  background: red;  

  transition: background 1s;  
}  

.box:hover {  
  background: blue;  
}

Essentially, we’re telling the box element to animate or transition whenever the background changes, instead of just instantly changing it. We then add a selector for whenever the user hovers the box element, to change to pink.

You can read more on transitions at the MDN Docs.

3. The calc() function

You may be surprised to know that CSS has functions. Well, it does! And they can be quite useful. One of the most useful in my opinion is the calc() function. The calc function allows you to essentially use two different types of units when dealing with sizes. For example, say I want to set a box’s border-radius to 30%, but I want an extra 44px with it? Without this function, it would take a lot of trial and error figuring out what percentage would equal that exact amount. Using the calc() function, I could perform something like this:

.my-box {  
  border-radius: calc(30% + 44px);  

  width: 400px;  
  height: 400px;  
  background: orange;  
}

The calc function can do addition, subtraction, multiplication, and division. So it gives you a lot of opportunities to make ‘dynamically’ styled content. It especially becomes useful when dealing with 100vh and navigation bars.

If you’d like to learn more about the calc function, read more on the MDN Docs.

Git & GitHub Put in 5 Simple Steps ✔️

Mariany — Tue, 30 Apr 2019 20:04:19 +0000

I'm going to try to write this article with as little mumbo jumbo as possible, so you don’t get unnecessarily confused. I’m assuming you understand the difference between Git and GitHub, as well as the ‘usefulness’ of the two. This post is going to show, in plain English, the steps that go into starting a repository. And then after, show how we do those steps.

To start, make a GitHub repository. Navigate to “New Repository” on GitHub. You should then be on a page that looks like this.

Simply give your repository a name, relative to whatever project you’re working on or going to be working on. Additionally, you can add a description if you’d like and do things like change the publicity of the repository.

At the bottom of the page, are a handful of other options to start your repository off with. This part can throw off beginners, as I will explain later on, but if you’d like to add a README, .gitignore, and/or license, go ahead.

Now that you have your GitHub repo, we can go over the 5 simple steps that will take place when working with Git and GitHub. These steps are as so:

Initiate a local git repository on your computer.
Add your remote repository.
Start coding and add your files.
Commit your code
Push your local repo state to your GitHub repo.

Now that you have the steps, let’s break them down and explain how we go about doing them.

1. Initiate a local git repository on your computer

The idea behind using Git and GitHub is that you have a git repository online, which we created earlier on GitHub, and that we also have our own local Git repo on our local computer. To make a local Git repo, open the terminal/console in your projects folder and run the command

git init

This command creates a .git file in the directory that you are currently in. This .git file makes the directory it’s in a local git repository. So now that we have a local git repository, we can now connect it to our GitHub repository.

2. Add your remote repository

So we have our local repository, but how do we connect it to our GitHub repo we made earlier? This command allows for us to connect our local repo to our GitHub repo.

git remote add origin [repo url]

Let’s break this command down to make sense out of it. We are working with the git remote functionality, which is why the first two arguments are git remote, so that’s simple enough. But what’s this add origin [repo url]?

We are adding a remote to our local repository named ‘origin’. The name ‘origin’ is not necessary either. If we wanted to, instead of ‘origin’, we could name the remote ‘purplecow’ or anything we want really. But the standard is to name it origin.

The last argument is the link to your repository, which looks a little like this: https://github.com/user/repo.git. You can find this link by clicking this button on your GitHub repo.

(Part 2)

If you added a README, or any other initial file when creating your GitHub, you NEED to follow this step. Otherwise, you may encounter some trouble. If you didn’t initialize with any files, you can skip this and go to Step 3.

The problem present is that your GitHub repo has a file that your local repository doesn’t have, which is whatever file you initialized with (README, .gitignore, etc). Your local repository is considered behind. To fix this, you now need to pull the files from your GitHub repo to your local repo. To do this we do:

git pull origin master

This will pull the README.md file or any files that GitHub started off with, into your local repo. It’s important that you do this now in the process. Otherwise, when you start committing changes, your repos will be considered ‘desynced’, and you’ll have to go thru a tedious process to get things right.

3. Start coding and add your files

Our GitHub repo and our local repo are all set up! Now it’s time to add files to the staging area. The staging area is basically just the “area” or list of updated files that are ‘appended’ to be committed. To ‘append’ a file, we use the ‘git add’ command. You can add individual files by doing something like this.

git add file1.js file2.js file3.js

However, if we already have our project developed and fleshed out, and want the entire directory to be staged, we can do something like this.

git add *

This is going to add every file, in the current directory to the staging area, that Git detects has changed. But what if there are some files that you don’t want added? Perhaps you have a file with sensitive information that you don’t want Git having access to? This is where .gitignore comes in handy.

.gitignore is a file that allows for you to blacklist other files to not be tracked. So when doing ‘git add’, you don’t accidentally add unwanted files.

To make a .gitignore file from the terminal, you may do this.

touch .gitignore

We then open the .gitignore file and filter unwanted files on separate lines. For example, on one line I may put node_modules to blacklist a folder named node_modules. On another line I may add .png, to blacklist all png files if I wanted to.

4. Commit your code

Almost done! We now need to commit our work. We added our files using git add and now need to save those changes to our local repository, as those are only in the staging area. To do this, run:

git commit -m "Initial Commit"

As mentioned, this command will commit any changes/additions we did using git add to our repo. The -m allows for us to put a message inside of our command, which we did after in quotation marks. Traditionally, on your first commit, you’ll have the message say “Initial Commit”.

5. Push your local repo state to your GitHub repo.

Now all that’s left is to update the state of our GitHub repository. We’ve been running all these commands and doing all these changes, but it’s only been affecting our local repo on our computer. So let’s run a command to update, or push, our GitHub repo.

git push origin master

Essentially what’s happening is, we’re pushing our master branch to our origin. Origin was one of the things we defined early on, being our GitHub repo's URL.

So now, look at your GitHub repo page. If all went well, your push should be successful and you should see your files online! Simple enough, right?

Post-Tutorial + Tips

Boiled down, these 5 steps can be converted to a list of these commands:

git init
git remote add origin (repo url)
git add
git commit -m “your message”
git push origin master

But what do you do while you’re working on a project and you make changes? How do you keep your repo updated as you code? Well, just re-iterate steps 3 - 4.

For example, what if I fix a bug in my code, so I want to update my repo. I’d do something like this.

git add modifiedFile1.php modifiedFile2.txt

As taught earlier, I'd then have to commit those changes by doing running, git commit -m “Fixed a bug where taco was displayed as toast”. As you can see, I gave a detailed but short description as to what changes I made in the iteration.

Finally, I push those changes to my GitHub with git push origin master. And that’s pretty much all there is to Git and GitHub. There are also many array of commands and functionality that Git and GitHub hold, but you’ll slowly learn these as you need them, or by looking at documentation.

Thanks for reading! If you have any tips or suggestions, leave them down below.

How to Answer — “What Programming Language Should I Learn First?”

Mariany — Mon, 22 Apr 2019 19:50:16 +0000

Introduction

Beginners in the software development field ask this question quite often. Yet, it doesn’t seem to have a straightforward answer. This article is going to explain why you should be careful when choosing your first language and how you can answer this question for yourself. So let’s get started!

Misconceptions

Usually, when this question gets answered, you may get one of two possible answers. One may say, “Learn X language! It’s the best and is the future”. Which in some sense, may be true. Or they may say, “It doesn’t matter, just pick one”. I have a problem with the latter one because while it is somewhat true, it’s also misleading.

To illustrate this issue, I want you to imagine that you’re buying a car. You go to the car dealership near town and ask the dealer, “What car should I get?” and in response the dealer says, “Does it matter? Just pick one and go!”. So you take his advice and pick a car at random, pay, and then leave. What happens? Well more than likely, you’re left with a car that you don’t like. The car is worn and is pre-destined to break down soon. Not only that, but it’s appearance isn’t favorable. You ended up spending your money on a vehicle that you don’t even like, and now you’re back at square one. Picking another car and spending more money all over again.

Similar issues may arise when choosing your first programming language at random. Picking a random programming language may lead you into a field that you aren’t interested in. Leading you to wasting time. Leaving you drained or discouraged from progressing in the field.

That is why you need to answer the question for yourself. Only you know your strong points and interests.

What Fields Interest You?

With this information, we actually need to change the question. Instead of asking, “What Programming Language Should I Learn First?”, you need to be asking “What Fields Interest Me?”. To answer that, though, you’d need to know what fields are out there in software development. This requires some research on your part, but I’ll jumpstart it for you. Here’s a list of some popular fields in 2019.

Frontend Web Development
Backend Web Development
Mobile Development
Game Development
Data Science
Cyber Security

Upon researching some of these, you may come upon one or two that interest you. You may then decide to look into what languages are used in the field and go from there right?

Now you may be wondering, what now? Well, it’s important to note that just because a field/industry interests you, doesn’t mean that it’s right for you. I remember when I was in the same position, I was very fond of the Game Development field. I decided to spend many months attempting to learn many languages and game engines (a mistake in itself). I then came to the realization that game development uses math on a constant basis. And being that I am a person who sucks at math and hates it, I decided that Game Development wasn’t for me. It wasn’t only that I wasn’t good at math, because there are so many online resources to fix that*. But it was the fact that I was not willing to learn these things. I was interested and willing to learn Game Development. But I was uninterested and unwilling in learning the prerequisites of Game Development.

Where Should You Go From Here?

So you’ve already done your research on your field of preference, and have a pretty decent mindset towards what to expect when diving into the field. You should now be on to the next step to choosing your language, meaning your question is almost answered! But being that you’ve made it to this step, you’ve probably noticed that there are many tools and technologies out there. Don’t get caught up and spend too much time deciding which one of these to use. Now that you know what field you want, getting into the field is your main priority. So you want to choose something, not necessarily at random, but promptly.

Each programming language has it’s pros and cons that you will eventually learn, but for the most part they will all do the same thing. Simplifying the list you found, and then picking the most useful and beginner friendly, is usually the answer to the prompted question. So how do we do this?

Well this takes more research on your part. To start, ask yourself if you plan on using this field for income. If so, try looking up jobs in your area for the field that you chose. Go on sites like Indeed, Glassdoor, LinkedIn, etc., and see what technologies are being used the most. Next, you want to see which technologies have the most online resources available. Language A may have poor documentation, with very little tutorials to get you started. But Language B may have good documentation and very good courses for you to follow.

Does that mean Language B is better than Language A? Not at all! But for a beginner, Language B would be friendlier, and would aid you in learning how to think like a programmer.

This is a key element to remember also. Being that this is your first programming language, you do not yet have the mindset of a programmer. While learning the language you chose, you are going to want to learn how to use it's features practically.

Conclusion

While this all may seem like a lot, I can assure you it’s not. This whole process of carefully picking your first language may take anywhere from a day or up to a month. But it will save you so much more time than blindly jumping in with no plan, and will all pay off in the long run.

Khan Academy is a great, free online resource for learning anything from Math to Computer Science.