Forem: Muna Mohamed

Debugging - ESLint warnings

Muna Mohamed — Sun, 10 Nov 2019 19:45:14 +0000

Hey, long time no see 👋🏾!

I haven't written anything in a long while so I'm trying to eaaase back into it. Just like riding a bike, eh?

I've been at my new job for about 7 months now and every day I encounter new challenges that have me racking my brain for hours, days and sometimes weeks. It's not just about solving the coding problem. It's also about maintaining code consistency, readability, making sure you follow best practices, keeping it simple etc. You have to find the right balance between all of those things.

So, I thought it would be a good idea to start documenting the challenges, big and small, right here on dev.to to not only help me document things that have tripped me up in the past (or present), but also to create discussion about best practices and ways to improve. I hope that by doing this, I can learn and grow as a developer and help others in the process, too. You can never have too much documentation!

ESLint warnings

Earlier this week, I encountered two ESLint warnings, one after the other. The warning were:

no nested ternary
no mixed operators

ESLint forbids the use of nested ternary operators and once I looked into the documentation, it stated that this was due to readability - nested ternary operators make the code more difficult to understand. The reasoning behind the "no mixed operators" rule relates to readability, as well.

Now, that is not to say that nested ternary operators and mixed operators don't work - they do. However, just because it works does not mean it should be used. So, if nested ternary operators and mixed operators are a no-no, what can we do instead?

Let's have a look at the code:

import React from 'react';

const Example = props => (   
    <div className="wrapper">
        {props.apples && props.bananas || props.apples && !props.bananas
        ?  ( 
            <div>
                {props.apples.map(apple => ( 

                    <div>{apple.color}</div>
                ))
              }
            </div>
        )
        :
        props.bananas && !props.apples
        ? ( 
            <div>
                {props.bananas.map(banana => ( 
                    <div>{banana.color}</div>
                ))
             }
            </div>
        )
        : 
       ''
        }
     </div>
    )

export default Example;

Here, we are trying to conditionally render two components, depending on what statements are true. If both apples and bananas exist OR if only apples exists, we want to render apples.color, otherwise if bananas exist but apples does not exist, we want to render bananas.color and in all other cases, we want to render an empty string.

Like we mentioned before, this code triggers two ESLint warnings, one that relates to the use of nested ternary operators and the other warning relates to the use of mixed operators "&&" and "||".

First thing we can do here to improve readability is to store the statements in consts. One const to represent the statement where both apple and bananas exist, another to represent the statement where only apples exist and another to represent the statement where only bananas exist.

In order to use our consts and have access to our props, we must turn our const Example into a function statement. Our code will now look like this:

import React from 'react';

const Example = props => {    

const onlyApples = props.apples && !props.bananas;
const onlyBananas = props.bananas && !props.apples;
const applesAndBananas = props.apples & props.bananas;

    <div className="wrapper">
        {applesAndBananas || onlyApples
        ?  ( 
            <div>
                {props.apples.map(apple => ( 

                    <div>{apple.color}</div>
                ))
              }
            </div>
        )
        :
        onlyBananas
        ? ( 
            <div>
                {props.bananas.map(banana => ( 
                    <div>{banana.color}</div>
                ))
             }
            </div>
        )
        : 
       ''
        }
     </div>
}

export default Example;

By storing our statements in consts, it has already made the code more readable. This has also cleared the ESLint warning that relates to the use of mixed operators "&&" and "||". Now, to deal with the "no-nested ternary" warning.

To deal with this ESLint warning, I decided to split the nested ternary operator into two blocks and use two conditional rendering techniques instead: the traditional ternary operator and logical && operator.

I used the ternary operator to deal with the top half of the nested ternary operator (i.e. when both apples and bananas are true OR when only apples is true), and used the logical && operator to deal with the statement that deals with onlyBananas.

At the end, the code looked like this:

import React from 'react';

const Example = props => {    

const onlyApples = props.apples && !props.bananas;
const onlyBananas = props.bananas && !props.apples;
const applesAndBananas = props.apples & props.bananas;

    <div className="wrapper">

        {onlyBananas
            && ( 
                    <div>
                        {props.bananas.map(banana => ( 
                            <div>{banana.color}</div>
                        ))
                    }
                    </div>
                )


        }

        {applesAndBananas || onlyApples
        ?  ( 
            <div>
                {props.apples.map(apple => ( 

                    <div>{apple.color}</div>
                ))
              }
            </div>
        )
        : 
       ''
        }
     </div>
}

export default Example;

For those who are not familiar with logical && operators, and using the code above as an example - when onlyBananas is true, it will render bananas.color, and if it isn't true, it will render nothing.

The ternary operator will deal with the other part from the nested ternary operator. If applesAndBananas is true OR if onlyApples is true, it will render apples.color, otherwise it will render an empty string.

Recommended resources/documentation:

All React Conditional Rendering Techniques by ROBIN WIERUCH
Disallow mixes of different operators
Disallow nested ternary expressions

If you got this far, I hope you enjoyed reading this post! Of course, this is not the only one way of tackling this specific problem - this is one way of doing so. I'd love to hear any input on how you would tackle this, and if there are even better ways to do so! 🙂

*As a general rule, I will not be sharing the actual code used as it is private, thus will be using example code instead to illustrate the problem.

What is your favourite Git command?

Muna Mohamed — Sun, 30 Jun 2019 01:06:24 +0000

I'm curious to know, what is your favourite Git command?

Mine is "git commit --amend", which let's you change your last commit message. I manage to mess up a commit message at least once a day 😅

For the sake of clarity, please include what the git command does so we can all learn from one another! 😄

Nevertheless, Muna Mohamed Coded

Muna Mohamed — Fri, 08 Mar 2019 14:21:29 +0000

A little about me...

Hey! I'm Muna, an Economics graduate and self-taught Frontend Developer (and aspiring full-stack developer). I started learning to code a couple years ago or so and have been coding and building cool things ever since.

I started/continued to code in 2019 because...

Coding gave me the freedom to bring my ideas to life like nothing else. It has made me love learning, building on my knowledge and going big and outside the box with ideas. With the help of the amazing tech community here on dev.to and on Twitter, I've met wonderful people who have supported me, motivated me and inspired me.

I deserve credit for...

I have not had the chance to "announce" this but, I think this would be the perfect opportunity to do so. I've accepted a Software Engineer position at a digital media company in London!! I still can't quite believe it myself and have been in a bit of a daze since finding out. We did it, y'all!

I hope to see my school/work/developer/tech community...

Continue becoming a more inclusive, diverse and supportive for all developers. I want to see more people considering a career in tech as an option.

*P.s Forgive me if there are any spelling mistakes, I've typed this up on my phone 🙈

Dealing with copyright infringement and plagiarism

Muna Mohamed — Mon, 31 Dec 2018 20:27:17 +0000

This is a story all about how my life got twisted upside down, and I'd like to take a minute just to sit right here and tell you all about how an article of mine was plagiarized and distributed and how I managed to get it taken down. Intrigued? Read on.

Plagiarism vs copyright infringement

Plagiarism. Copyright infringement. Two terms that are similar but that have key differences.

Let's start by distinguishing the difference between plagiarism and copyright infringement. Plagiarism is the practice of taking someone else's work and passing it off as your own. Copyright infringement however, is described as infringing on the rights granted to copyright holders. These rights include:

the right to reproduce
the right to distribute
the right to display or perform the protected work
the right to make derivative works These rights are given automatically given to the creator of the original content but, this may differ according to which country you live in.

Keeping this in mind, we can deduce that by replacing the author name with their own, they committed plagiarism. By reproducing the article, distributing the article through social media and displaying it on their blog, they infringed upon my rights as the copyright holder thus committing copyright infringement.

Discovery

I posted an article about CSS Specificity originally on dev.to around October and then submitted it to Freecodecamp's publication, which was accepted and published mid-November. As I was looking through the stats on Medium for that particular article, I clicked on one of the external referrals, which was from LinkedIn. I clicked on the LinkedIn link to see who had shared the post. There, I saw that someone had shared the article and as I looked closely, I noticed that the shared post

Did not have a picture
Had a different name as the author

I clicked on the link to see where it would lead me and sure enough, it led me to that person's website, where my article was copied word for word without any mention or back-link to the original article.

Not only did this person commit copyright infringement by displaying and distributing my posts without my permission, but they also committed plagiarism by taking credit for the article by replacing the author's name with their own.

Plan of action

Step 1: Email/message

I knew that someday that this would happen but, it still gave me a shock to see someone do this with such blatant disregard for other people's hard-work. It's one thing to copy someone else's work but to then share it with others and pass it off as your own? That's unacceptable.

First thing I did was let my family and friends know about it- several brains work better than one. My friend advised me to report them on LinkedIn for copyright infringement. Before that though, I thought that I could try to settle the matter by messaging them. Problem was, LinkedIn wouldn't allow me to do so which then meant that I would have to connect with the person THEN if they accepted, which I doubt they would've, send them the message. I wasn't going to do that. Instead, I wrote a comment under the shared link letting them know that they were committing copyright infringement and to delete the post ASAP.

Step 2: Notice of Copyright Infringement Form (LinkedIn)

24 hours later, no response. That left me with no choice but to fill out the notice of copyright infringement form on LinkedIn. Four days later, I received a response from LinkedIn that said that because the " the reported content is not occurring within the LinkedIn platform. For that reason, we have no authority to address the issue".

Despite the fact that the content that was shared was plagiarized and infringed on my copyright, because the content was not on the LinkedIn platform itself, they couldn't do anything about it.

Step 3: Finding the hosting provider that hosts the Infringer's website

It was clear that this person had no intention of deleting the post so the next step was to find out who their hosting provider was and write them a message, informing them of the situation and asking them to pull it down. Finding this information was easy - I used https://hostingchecker.com/ and typed in the domain name and voila! There was the name of their hosting provider.

Step 4: Contacting the hosting provider

I immediately went to the hosting provider's website, located their contact information and emailed them. They sent an automated email straight away to say that they would get back to me. About five hours later, they did get back to me asking me to fill out a form about my complaint. The hosting provider is a German company so the form was in German but auto-translate came to the rescue so I was able to fill out the form without any problems.

After receiving another automated email after submitting the form, I waited. A week went by, then another. Still no word from the hosting provider. Another couple weeks went by in a flash as life got busy but I remembered a few days ago that I didn't hear anything back. So, rather than emailing the hosting provider again, I opted to DM them via Twitter for an update. A couple of days later, I received a response from the company's marketing department who said that she was unable to access the complaint records due to strict data privacy laws so suggested that I email them instead.

Success

I emailed the hosting provider, asking if they can give me an update on the case. Within a couple minutes, which is unbelievably fast, I received a response that said that URL to the blogpost had already been removed. I checked to see if this was true and sure enough, it was gone. Furthermore, the "blog" section of that person's website, which contained the articles of many other writers, was removed.

Conclusion

What is the purpose of this article? To bring awareness to the issue of copyright infringement and plagiarism, particularly when it comes to online content. Dealing with having your content plagiarized and your rights as original author infringed upon isn't cool and it can be difficult, time-consuming and cause stress. It took a little over a month to get the plagiarized content taken down. In some cases, it could take even longer or be near impossible to get the content taken down. By documenting the process, I want this article to serve as a point of reference and a resource to anyone who is dealing with or may deal with copyright infringement and plagiarism in future.

I love sharing my thoughts, ideas and experiences with others and this will not deter me from continuing to do so. But, it would be nice to not have to worry about your content being stolen.

Don't plagiarize or infringe on the rights of copyright holders/original authors. People put blood, sweat and tears into their work, don't disrespect them by claiming ownership for something that does not belong to you. ALWAYS cite the original author. ALWAYS get permission for use of other people's work. ALWAYS provide back links to the original content.

I'd love to hear your experiences with copyright infringement and plagiarism, particularly with online content. How did you deal with it?

CSS Specificity and the use of !important: a case study

Muna Mohamed — Sun, 14 Oct 2018 02:07:53 +0000

Recently, there was a Twitter poll floating around where the user asked their followers a question about CSS specificity . Unfortunately, I was unable to find the original tweet(comment below if you happen to find it!) but long story short, the majority of people got the answer wrong.

That Twitter poll (and its aftermath) led to me brushing up on my own knowledge on the topic of specificity and in turn, led me on a journey of fixing specificity issues in my own projects which brings me to the purpose of this post.

In this post, we will be refactoring CSS code from a project of mine that has CSS specificity issues that are in need of fixing.

CSS Specificity

Definition

Specificity is described by MDN Web Docs as "the means by which browsers decide which CSS property values are the most relevant to an element and therefore, applied."

Rules

When deciding which CSS property values are the most relevant to apply to an element, the browser uses the source order (i.e the cascade) of the CSS stylesheet to determine this. But this rule applies when the CSS selectors have equal specificity. What happens when the specificity of one CSS selector is higher than another?

In that case, browsers will use the specificity of a CSS selector to determine what CSS statements to apply. The higher the specificity of a CSS selector, the more likely that browsers will apply its CSS declarations over another.

nav a {
  color: green;
}
a {
  color: red;
}

For example, in the example above, both of the CSS selectors are targeting the same HTML element, the anchor tag. In order to determine which CSS rule to apply to the anchor tag, the browser will calculate the specificity value and check which one is the highest. In this case, the first selector has a higher specificity value therefore, the browser will use its declarations to apply to the anchor tag.

I'd like to point out here that although !important is not a CSS selector, it is a keyword that is used to forcefully override a CSS rule regardless of the specificity value, origin or source order of a CSS selector. Some use cases include:

Temporary fixes (a bit like putting duct-tape on a leaky pipe)
Overriding inline styling
Testing/debugging purposes

As useful as using the !important keyword may seem, the use of it can be more problematic than useful. Over time, it can make it difficult to maintain your CSS and it can negatively affect the readability of your stylesheet particularly for anyone else who is or will be working with it in the future.

Which brings us to what we'll be doing today - fixing the specificity issues in a project.

The Project

A little background about the project we'll be refactoring - it is a Netflix inspired landing page using MovieDB's API.

The stylesheet

The aim is to remove the "!important" keyword from the CSS rules that it has been applied to by refactoring the code so that it follows specificity rules.

Below, you can see the stylesheet for the project.

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.wrapper {
  width: 100%;
}
.wrapper #header {
  position: fixed;
  z-index: 300;
  padding: 15px;
  width: calc(100% - 30px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, black 0%, transparent 100%);
}
.wrapper #header #brand-logo {
  color: #d32f2f;
  text-shadow: 1px 1px 2px black;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-family: Montserrat;
  font-weight: bold;
  font-size: 22px;
}
.wrapper #header #menu-icon {
  display: none;
}
.wrapper #header .nav-link,
.wrapper #header .icon {
  color: #bdbdbd;
  cursor: pointer;
}
.wrapper #header .nav-menu {
  width: 400px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper #header .nav-link {
  padding: 5px 10px;
  font-size: 15px;
  font-family: century gothic;
  text-decoration: none;
  transition: background-color 0.2s ease-in;
}
.wrapper #header .nav-link:hover {
  color: #c62828;
  background-color: rgba(0, 0, 0, 0.7);
}
.wrapper #header .icon {
  font-size: 16px;
}
.wrapper #header .icon:hover {
  color: #c62828;
}
.wrapper #site-banner,
.wrapper #categories {
  width: 100%;
}
.wrapper #site-banner {
  height: 550px;
  background-image: url("https://s1.gifyu.com/images/rampage_2018-1024x576.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.wrapper #site-banner .main-movie-title,
.wrapper #site-banner .watch-btn,
.wrapper #site-banner .main-overview {
  position: absolute;
  z-index: 3;
}
.wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn {
  text-transform: uppercase;
}
.wrapper #site-banner .main-movie-title {
  top: 120px;
  left: 20px;
  background: -webkit-linear-gradient(#ff9100, #dd2c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 55px;
  font-family: Montserrat;
  font-weight: bold;
}
.wrapper #site-banner .main-overview {
  width: 400px;
  top: 230px;
  left: 25px;
  color: #fafafa;
  line-height: 25px;
  font-family: helvetica;
}
.wrapper #site-banner .watch-btn {
  width: 150px;
  height: 35px;
  top: 350px;
  left: 25px;
  border: none;
  border-radius: 20px;
  color: #fafafa;
  cursor: pointer;
  transition: all 0.2s ease-in;
  background-color: #ff0000;
  box-shadow: 1px 5px 15px #940000;
}
.wrapper #site-banner .watch-btn:hover {
  color: #F5F5F5;
  background-color: #940000;
}
.wrapper .after {
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.wrapper #categories {
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to top, #090909 0%, #000000 100%);
  overflow: hidden;
}
.wrapper #categories .category {
  margin: 30px 0;
}
.wrapper #categories .category-header, .wrapper #categories .content {
  margin-left: 20px;
  color: #B0BEC5;
  font-family: helvetica;
}
.wrapper #categories .category-header {
  margin-bottom: 50px;
  font-weight: normal;
  letter-spacing: 5px;
}
.wrapper #categories .content {
  position: relative;
  right: 0;
  display: flex;
  justify-content: flex-start;
  transition: all 3s ease-in-out;
}
.wrapper #categories .movie {
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.wrapper #categories .movie-img {
  transition: all 0.2s ease-in;
}
.wrapper #categories .movie-img:hover {
  -webkit-filter: contrast(1.1);
          filter: contrast(1.1);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  cursor: pointer;
}
.wrapper #footer {
  width: 100%;
  height: 120px;
  background-color: #090909;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.wrapper #footer #copyright-label {
  margin-left: 20px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.3);
  opacity: 0.7;
  letter-spacing: 2px;
  font-family: helvetica;
  font-size: 12px;
}
//Media Query
@media (max-width: 750px) {
  .nav-menu {
    visibility: hidden;
  }
#menu-icon {
    display: block !important;
    font-size: 22px;
  }
.main-movie-title {
    font-size: 45px !important;
  }
.main-overview {
    width: 350px !important;
    font-size: 14px !important;
  }
.watch-btn {
    width: 130px !important;
    height: 25px !important;
    font-size: 13px;
  }
.movie-img {
    width: 170px;
  }
}

So, we can see from the stylesheet that the use of the !important keyword is mainly focused in the media query section which outlines the styles that the browser should apply when the screen-width is less than 750 pixels.

So, what happens when we remove the !important keyword from the CSS rules that it has been applied to? Well, we no longer have a "trump card" forcefully overriding the CSS rules of other CSS selectors that target the same HTML element. So, the browser will look at the stylesheet to see if there are any conflicting CSS rules.

If there are, then in order to determine which CSS rules to apply over another, the browser will use the source order, specificity and importance of the CSS selectors. If the CSS selectors with conflicting CSS rules have equal specificity, then the browser will use the source order rule and apply the CSS rules of the CSS selector that comes lower down in the stylesheet. Using this information, we can see that this situation is not the case for our stylesheet.

But, if the CSS selectors with conflicting CSS rules don't have equal specificity, then the browser will apply the CSS rules of the CSS selector that has higher specificity. We can see from our stylesheet that this is the case; the CSS selectors in our media query have lower specificity than the CSS selectors in the main part of our stylesheet.

Now that we have identified the issue, let's fix it!

First we have to locate the corresponding CSS selectors that match the CSS selectors in our media query.

.wrapper #header #menu-icon {
  display: none;
}
.wrapper #site-banner .main-movie-title {
  ...
  font-size: 55px;
  ...
}
.wrapper #site-banner .main-overview {
  width: 400px;
  ...
}
.wrapper #site-banner .watch-btn {
  width: 150px;
  height: 35px;
  ...
}
@media (max-width: 750px) {
#menu-icon {
    display: block !important;
    ...
  }
.main-movie-title {
    font-size: 45px !important;
  }
.main-overview {
    width: 350px !important;
    font-size: 14px !important;
  }
.watch-btn {
    width: 130px !important;
    height: 25px !important;
    ...
  }
}

We can see that the CSS selectors in the main part of the stylesheet have higher specificity than the corresponding CSS selectors in the media query. Despite the CSS selectors in the media query appearing later on in the stylesheet, because of specificity rules (which take precedence over source order rules), the browser will apply the CSS rules of the CSS selectors that come before it. To fix this, we must increase the specificity values of the CSS selectors in the media query. If we make it so that the CSS selectors that target the same HTML elements have equal specificity, then the browser will follow the source order rule; the CSS rules outlined in the media query (that's located lower down in the stylesheet) will be applied when the screen-width is less than 750 pixels.

The end result will look like this:

.wrapper #header #menu-icon {
  display: none;
}
.wrapper #site-banner .main-movie-title {
  ...
  font-size: 55px;
  ...
}
.wrapper #site-banner .main-overview {
  width: 400px;
  ...
}
.wrapper #site-banner .watch-btn {
  width: 150px;
  height: 35px;
  ...
}
@media (max-width: 750px) {
.wrapper #header #menu-icon {
    display: block;
    ...
  }
.wrapper #site-banner .main-movie-title {
    font-size: 45px;
  }
.wrapper #site-banner .main-overview {
    width: 350px;
    font-size: 14px;
  }
.wrapper #site-banner .watch-btn {
    width: 130px;
    height: 25px;
    font-size: 13px;
  }
}

And that's it! We have removed all traces of the !important keyword from the stylesheet. Already we can see that the stylesheet is easier to read and you can imagine that our refactored stylesheet would be a lot easier to work with and maintain particularly if others will be working on it too.

Conclusion

So, what have we learned?

We have learned about how browsers determine which CSS styles to apply by using the source order, specificity and origin of selectors. We have also learned about the problems which can arise by using !important in your CSS and why its uses should be kept to a bare minimum.

We do not have to resort to using !important in order to fix things - there are much better solutions out there.

The concept of specificity is one that can take a while to get your head around but I hope that by documenting the process and using a real project, it helps you better understand the concept of specificity and how to apply it in your own CSS.

Additional Resources

You can find the project we've been working on here.

I hope you enjoyed this post! If you did, ❤️, 💬 and share! Till next time! ✌️

How to upgrade RAM on your laptop

Muna Mohamed — Sat, 25 Aug 2018 18:27:04 +0000

Originally posted on Medium.

A few weeks ago, I upgraded my laptops RAM (for the first time) and thought I’d document the installation process for anyone who might be interested in doing the same 😀. I was inspired by Elizabete (@elisabete.code on Twitter) after I saw her one of her Twitter Moments where she built a PC. Make sure to check her out on Twitter!

Over the last couple months, my laptop has been quite slow and laggy which has meant that running multiple tasks at the same time has led to my laptop freezing or operating painfully slow. In addition to this, overheating also became an issue.

Rather than buying a new laptop, which is an investment in itself, I found another, albeit temporary, solution to my problem. Upgrading the RAM on my laptop.

Research

First, I needed to figure out which RAM memory card was compatible with my laptop. To do this, I used a popular website called Crucial that sells RAM memory and SSDs. The website has two tools that help you find compatible memory and solid state drives(SSD) for your laptop.

Advisor tool: if you know your system specs (i.e. the manufacturer, product name and model)
System Scanner tool: if you don’t know your system specs

Because I knew the system specs for my laptop, I used the Advisor tool. The website found my laptop and showed the RAMs that were compatible. After going through the list of compatible RAMs and choosing which one I wanted to get for my laptop, being the bargain hunter that I am, I copied and pasted the model number of the RAM on Google to see if I could find better deals. I found the same RAM on Amazon at a better price(£25.99) and after reading the reviews and checking that the seller was legit, I bought it.

Installation

After waiting a few days, it finally arrived and I must say, I was quite excited! Now, while I was waiting for the RAM to arrive, I did watch a few videos on YouTube where people were installing their RAM into their laptop so I had a good idea of what I had to do.

Here comes the fun part!

I started by disconnecting my charger from my laptop. Next, I flipped my laptop upside down, took out the battery from my laptop then unscrewed the screw that was holding the back panel in place.

This is where I’ll be inserting the new RAM (see image below). There are two slots, one of which is already occupied by the RAM that came with my laptop. I turned my laptop to the side(90deg anti-clockwise) so I can see where I had to insert the RAM better.

I slid in the RAM card at a 45° angle. This is how it looks from the side. This was a little fiddly so take your time here. All that’s left to do is to push it down till you hear a click. This part was a little scary because I was worried that if I pushed it too hard it would be break. After a couple pushes I just went for it and surprise, it didn't break!

That’s the tough bit done! It was easier to do than I expected. I screwed the back panel back on and put the battery back in. I plugged the charger back in and started up the laptop. Moment of truth!

To check that the new RAM has been installed, I opened Task Manager, clicked on Memory — and voila! As you can see, the memory has changed to 8GB which means that upgrading the RAM was successful.

One month update

I noticed a quite a difference immediately after upgrading the RAM on my laptop.

My laptop was no longer making lots of noise, which it used to before. This is because my laptop was now able to handle running more tasks and was no longer over-exerting itself to handle running multiple tasks at the same time. As a result, my laptop was no longer overheating. Furthermore, my laptop is able to multitask a lot better than before, allowing me to run more tasks without my laptop freezing or slowing down.

So, would I recommend upgrading your RAM? Absolutely. Installation is simple and doesn’t take long to do (around 10 minutes or so). Plus, if you’re having similar issues with your laptop, upgrading your laptop’s RAM is an inexpensive way of solving the problem.

I hope you enjoyed this tutorial! If you did, ❤️, 💬 and share! Till next time! ✌️

Help! I'm stuck!

Muna Mohamed — Mon, 09 Jul 2018 01:00:04 +0000

What were the Javascript array methods that don’t mutate the array again?

Why is the page taking so long to load?

Why is my code not working?!

We’ve all been there. Picture this: you’re coding away, when you stumble upon a problem. Something in your code is not working. What? What’s going on here? So after some time (or a couple days), you still can’t figure out why the code is not working. What do you do?

Not to worry! There are many great resources you can use to get help. Some may be familiar to you already, others may not. Here are a few resources that I regularly use when in need of help.

Google

This is probably the most used (and most obvious) port of call when finding the solution to a coding problem. However, you would be surprised just how useful Google is in finding solutions to coding problems! Through Google, you are able to sift through a massive collection of resources, from blogs to YouTube videos to StackOverflow solutions to similar, if not the same, problems.

Can’t remember a code syntax? Google it. Don’t know what an error in the console means? Google it. Can’t figure out why something in your code is not working? Chances are, someone else has gone through the same thing or blogged about it. Google it!

Blogs

There are a number of blogs that have some really great articles that cover a wide range of front-end, back-end and everything in between. Here are some of my favourites:

CSS Tricks

One of the first web-development blogs I came across as a newbie and to this day, it serves as a awesome resource for tutorials, guides and learning those little know-hows of CSS. You can find tutorials, guides, CSS reference guide, CSS snippets, video screencasts and so much more. Although the website mainly focuses on CSS, you can find tutorials about other topics such as JavaScript frameworks like React and Vue.

StackOverflow

A community of developers helping each other on their coding problems and sharing their knowledge. Although I am not a StackOverflow member and have not asked questions on there myself, I do use it extensively when looking for solutions to a variety of coding problems.

Medium

Among the thousands of stories written by people all over the world on Medium, spanning across a multitude of topics from education, healthcare, economics, religion and politics, there are a number of publications that cover development and tech-related topics. These include:

Freecodecamp: one of the most popular publications here on Medium for development and tech-related articles. Honestly, I can’t recommend Freecodecamp enough! Not only does Freecodecamp have a EXTENSIVE collection of articles covering a wide range of topics but they also have a full-stack web-development curriculum (for FREE), a YouTube channel with tutorials and talks AND an absolutely amazing podcast. If you haven’t come across Freecodecamp, check it out. Trust me, you won’t be disappointed!
Codeburst: Codeburst showcases web-development tutorials, articles from all over the world. You’ll find a number of articles and tutorials published everyday in a number of topics so you’ll be sure to find what you are looking for. (Full disclaimer: I am a writer for Codeburst but nevertheless, it is a great resource !).

Dev.to

Dev.to is another amazing platform for developers looking for help. Not only does the platform have a large collection of articles and tutorials that are development-focused, but it also allows you to seek help from others on the platform by starting a thread outlining the problem you are having. People on the platform are very helpful, supportive and non-judgmental.

The platform allows you to search through the website using tags, which represent the main topics covered in the platform e.g. React. They have also started live streams where experienced developers teach others to code, which allow you not only to learn new things and interact with others watching the live stream but also interact and ask questions to the developer who’s teaching. I’ve been posting on dev.to for the last 9 months or so and I’ve watched this platform grow exponentially and do incredible things in that time. It is an incredible resource for developers of all levels, novice to experienced, and has something to offer for everyone.

Gitter

Gitter is an open source networking and instant messaging platform that connects developers from all over the world. It has over 1 million members, 300,000+ chatrooms from over 100 countries. You can find a chatroom for all your tech-needs!

Here are a few Gitter chatrooms to get you started:

GitterHQ/developers- A general chat room for developers.
Freecodecamp/help — a chatroom to get help in general.
Freecodecamp/HelpFrontEnd — Need help with your front-end projects? This is the place for you!
Freecodecamp/HelpJavascript — Struggling with Javascript? This is a great chatroom to go to when you need help.
Freecodecamp/Codereview — Need someone to review your code? Get constructive feedback from fellow developers on Algorithm Challenge solutions, Frontend and Backend projects.

Twitter

Twitter is not just a place to post about what you’ve been up to or to find out about what’s going on in the world. You can also find an awesome community of developers from all over the world, from front-end developers to back-end developers to data scientists, who are open and willing to helping other developers with their coding problems.There’s even some who are open to mentoring other developers who are in need of mentorship and guidance.

A list of developers who are open to questions, giving advice and/or mentorship has been curated and can be found here (Thanks to the Stephanie Hurlburt, developer and founder of Binomial, who asked her followers to help!).

DevPal

Created by Andy Bell, a frontend developer with nearly 10 years experience, DevPal is a place where you can go to ask your coding questions and get answers from a seasoned developer with experience.

I’ve used DevPal in the past and have had a great experience; Andy was very helpful and provided me with the answers I needed to my questions. The response on the website was swift and the answers detailed. A great resource, particularly for code newbies!

I hope this list of resources has helped you find new places to go when you’re feeling stuck. Please feel free to add any resources that you use that are not on the list. I’d love to know what resources you use and would recommend to other developers!

What image-hosting sites do you use?

Muna Mohamed — Wed, 23 May 2018 10:16:43 +0000

Hi everyone 🙂! I'm curious to know what image hosting sites you use and if you have any recommendations.

I'm an avid user of Cloudinary but there's quite a gap between the free plan and the paid plan ($99/month). Are there any inexpensive (or free) image-hosting sites that offer a moderate amount of storage and bandwidth?

A Random Quote Generator with a Night/Day feature tutorial

Muna Mohamed — Fri, 04 May 2018 12:27:06 +0000

So you’ve just completed building yet another random quote generator, and you don’t know where to go from here. Or maybe this is your first. Here’s where this tutorial comes in! With a simple feature, your random quote generator no longer is 'yet another random quote generator' — it’s one with a twist.

Let’s get started!

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="night-mode-js" class="btn night-mode" data-text-swap="day-mode" onclick="toggleBtn()">
  Night-mode
  </button>

  <div class="quote-container">
    <h2 id="heading">Motivational Quotes</h2>
    <p id="quote-js" class="quote">Do not wait; the time will never be ‘just right.’ Start where you stand, and work with whatever tools you may have at your command, and better tools will be found as you go along. — George Herbert</p>
    <button id="quote-btn">Get a quote</button>
  </div>
</body>
</html>

With the components that make up the Windows Login page in mind, we can now start to write our HTML code.

Our HTML structure is very simple. Following our sketch, we’ll have a button tag centered at the top of the page which will be our night/day toggle button. We’ll give the button an id of night-mode-js and a class of btn and night-mode. Giving our button an id of night-mode-js will aid us in knowing which components of our quote generator we have applied javascript to. We will use the btn class to apply CSS styling and the night-mode class will be the class that we will toggle to apply the night or day mode to our quote generator.

Below that will be our quote generator. We’ll start off with the main div container which we will act as the container for all of the components of the quote generator (minus the night/day mode button above) and we’ll give it a class name of quote-container. Nested inside the quote-container div will be the heading, the quote display and our button that will allow us to generate random quotes. The heading will be in a h2 tag which we will give an id of heading. Under the header will be the quote display. To display our quotes, we will use a

tag which we will give an id of quote-js and class of quote-display. Our final component that will be in the quote-container div will be the our other button, quote-btn, which will allow us to generate the random quotes.

Here’s what we have so far:

SCSS

.btn {
  width: 120px;
  height: 30px;
  display: block;
  margin: 0 auto;
  border-radius: 30px;
  font-family: helvetica;
  text-align: center;
  text-transform: uppercase;
  background-color: white;
  border: 1px solid black;
  cursor: pointer;
}
.quote-container {
  max-width: 700px;
  min-width: 350px;
  margin: 30px auto;
  text-align: center;
  border: 2px solid #37474F;
  border-radius: 10px;     
  transition: all 0.5s ease-in;
  color: #37474F;
  font-family: helvetica;
#heading {
    font-size: 28px;
  }
  .quote-display {
    line-height: 30px;
    margin: 30px;
    padding: 20px;
    border: 1px solid #BDBDBD;        
    font-style: italic;
    font-size: 18px;
  }
  #quote-btn {
    margin: 20px;  
    text-transform: uppercase;
    background-color: white;
    border: 1px solid #9E9E9E;
    padding: 10px 30px;
    cursor: pointer;
    transition: background-color 0.3s ease-in;
    &:hover {
      background-color: #37474F;
      color: white;
    }
  }  
}
.night-mode {
  background-color: #37474F;
  color: white;   
}

Let’s do some styling!

Night/day toggle button

We’ll start by styling our first button (i.e. our night/day mode toggle button). We’ll give it a width of 120 pixels and a height of 30 pixels.

Since most browsers display buttons as inline-block elements (which means that the browser allows other elements to sit on either side of the button), we’ll change this so that it displays as a block.

To center the button horizontally, we’ll give it a margin of 0 auto. To slightly curve the corners of the button, we’ll give the border-radius property a value of 30 pixels.

We’ll change the font-family value to helvetica. To center the text within the button, we’ll give the text-align property a value of center and in order to change the letters so that they are uppercase we’ll give the text-transform property a value of uppercase.

We’ll also give the button a background-color of white as well as a thing black border that is 1 pixel. To indicate to that this is a button that can be clicked, we’ll change the cursor property to give it a value of pointer. After applying all the styling, our button will look like something like this:

Quote-container

The next component to style is the quote-container div.

We’ll give the quote-container div a max-width of 700 pixels and a min-width of 350 pixels. This will allow the container for the quote generator to be responsive by allowing it to shrink to a width of 350 pixels and expand to a maximum width of 700 pixels.

To create some space between the night/day-mode button and the quote-container and also center the quote-container horizontally, we’ll give the margin property of a value of ’30 px auto’.

We’ll center the text within the quote-container by applying a text-align of center. To add a slight curvature to our quote-container, we’ll apply a border-radius of 10 pixels. To apply a small transition effect which will apply when something happens to the quote-container and/or its child elements, we’ll use the transition property. The transition will last for 0.3 seconds and we will set the transition-timing function to ease-in

In order for the text in the quote-container to appear less harsh, we’ll change the color of the text from the default color (which is black) to a more muted grey colour (#37474F to be exact). Finally, for uniformity, we’ll make the font-family for the quote-container to be helvetica. This will not only apply to the quote-container div but also all of its child elements too.

Heading

Because most of the CSS properties that we applied to the quote-container apply to the heading too, the only property we’ll apply to the heading will be a font-size of 28 pixels.

Quote -display

To the p tag that will display the quotes, we’ll apply a line-height of 30 pixels to create some spacing between each line of a quote. We’ll also apply a margin of 30 pixels to create some space between the main container, quote-container, and the p tag that will be displaying our quotes. Furthermore, we’ll add some padding between the text that will be in the p tag (i.e our quote display) and its container (the p tag itself). We’ll add a thin black border that is 1 pixel, make the font italic by giving the font-style property a value of italic and finally, changing the font-size to 18 pixels.

Quote-btn

Let’s start by giving the quote button a margin of 20 pixels. Next, we’ll give the quote button a white background and a thin border that’s 1 pixel and a color of #9E9E9E. We’ll apply a small bit of padding on the top and bottom of the button that’s 10 pixels, and 30 pixels of padding on the left and right of the button. Finally, we’ll use the transition property to apply an ease-in transition that lasts for 0.3 seconds to the background-color which will apply the transition whenever we hover over the button. The last thing to do is apply a hover effect in order to change the background-color and color of the text when the cursor hovers over the button. We do this using the :hover selector.

By the end of the styling, this is what our quote generator will look like:

jQuery

var quote = document.getElementById("quote-js");
var quoteBtn = document.getElementById("quote-btn");

// Nightmode/Daymode feauture
$(document).ready(function() {
  $("#night-mode-js").click(function() {
    $(".quote-container, .quote, .btn").toggleClass("night-mode");
       if($('#night-mode-js').hasClass('night-mode')){
       $('#night-mode-js').html('Night-mode');
     } else {
       $('#night-mode-js').html('Day-mode');
     }
  });
});

//Random quote machine
var quotes = [
  '"The past cannot be changed. The future is yet in your power." - Unknown',
  '"Either I will find a way, or I will make one." - Philip Sydney',
  '"Failure will never overtake me if my determination to succeed is strong enough." - Og Mandino',
  '"Don’t watch the clock; do what it does. Keep going." — Sam Levenson',
  '"Aim for the moon. If you miss, you may hit a star." — W. Clement Stone.',
  '"It always seems impossible until its done." - Amelia Earhart',
  '"Look up at the stars and not down at your feet. Try to make sense of what you see, and wonder about what makes the universe exist. Be curious." - Stephen Hawking',
  '"Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy." - Norman Vincent Peale', '"You Learn More From Failure Than From Success. Don’t Let It Stop You. Failure Builds Character." – Unknown', '"If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You." – Steve Jobs','"We May Encounter Many Defeats But We Must Not Be Defeated." – Maya Angelou', '"One Of The Lessons That I Grew Up With Was To Always Stay True To Yourself And Never Let What Somebody Else Says Distract You From Your Goals." – Michelle Obama', '"Today’s Accomplishments Were Yesterday’s Impossibilities." – Robert H. Schuller', '"The Only Way To Do Great Work Is To Love What You Do. If You Haven’t Found It Yet, Keep Looking. Don’t Settle." – Steve Jobs', '"Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover." - Mark Twain', '"Nothing is impossible, the word itself says "I’m possible!" - Audrey Hepburn', '"Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time." - Thomas A. Edison', '"I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear." – Nelson Mandela', '"If you don’t like something, change it. If you can’t change it, change your attitude." – Maya Angelou', '"Success means doing the best we can with what we have. Success is the doing, not the getting; in the trying, not the triumph. Success is a personal standard, reaching for the highest that is in us, becoming all that we can be." – Zig Ziglar'
];
quoteBtn.onclick = function randomQuote() {
  var rand = quotes[Math.floor(Math.random() * quotes.length)];
  quote.innerHTML = rand;
};

The end is near!

So in this tutorial, jQuery will be our JavaScript library of choice. JQuery is a fantastic library that is easy to learn, use and read and is the perfect JavaScript library to start learning as a beginner. You can achieve the same results with other JavaScript libraries and frameworks or even with vanilla JavaScript but for the sake of this tutorial, which i geared towards codenewbies who are starting out with JavaScript, we’ll use jQuery.

Okay, explanations aside, let’s begin by declaring the quote-display using its id, quote-js, and storing it in a variable called quote. We’ll also declare the quote button using it’s id, quote-btn, and storing it in a variable called quoteBtn.

Night/day mode feature

We’ll start with the night/day mode feature. First, we’ll begin with jQuery’s ready function. The ready() let’s the browser know what to run after the page is loaded.

$(document).ready(function(){
   //Enter code here
});

So let’s review what we want to happen. We want the night/day toggle button to toggle it’s background-color, text-color and text within the button between ‘night-mode’ to ‘day-mode’ when it is clicked. We also want the background-color and text-color of the quote-container, quote-display and quote-btn to toggle between day-mode colors and night-mode colors.

The simplest way of doing this is to add a class called night-mode in our stylesheet and give it the features we want the components of our quote-generator to have when the night-mode class is applied. I’ve included this class at the end of my stylesheet, giving it a background-color of #37474F and a text-color of white.

$(document).ready(function() {
 $(“#night-mode-js”).click(function() {
    //Enter code here
 });
});

Within our ready() event , we will type in a click() event that will apply to the night/day toggle button. We will use the id we gave it specifically for use in our JavaScript code.

$(document).ready(function() {
  $("#night-mode-js").click(function() {
    $(".quote-container, .quote, .btn").toggleClass("night-mode");
  });
});

Within our click() event is our toggleClass() event. We will type in which components we want the toggleClass() method to apply to as well as what class we want to toggle between, which will apply to the components we specified before.

What toggleClass() does is toggle between adding or removing the class to the components specified. So when we click the night/day toggle button, the function within our click() event will run which will execute the toggleClass() event. If the components listed already have the night-mode class, the toggleClass() event will remove it when the night/day toggle button is clicked. If they don’t have the night-mode class, then the toggleClass() event will add the class to each component specified in the method.

$(document).ready(function() {
  $("#night-mode-js").click(function() {
    $(".quote-container, .quote, .btn").toggleClass("night-mode");
       if($('#night-mode-js').hasClass('night-mode')){
       $('#night-mode-js').html('Night-mode');
     } else {
       $('#night-mode-js').html('Day-mode');
     }    
  });
});

The last thing we need to happen when the night/day toggle button is clicked is for the text within the button to toggle between ‘night-mode’ and ‘day-mode’. We do this using an if statement and the hasClass() event. When clicked, If the night/day toggle button has the night-mode class, we want the text within the button to be ‘night-mode’. If the night/day toggle button doesn’t have the night-mode class (remember we’re using the toggleClass() event to toggle between adding or removing the night-mode class from the elements we listed earlier), then we want the text within the button to be ‘day-mode’.

That’s it for the night/day-mode feature! Let’s move on to the final step in the tutorial — is the quote-generator itself.

Quote-generator

We’ll begin by declaring our quotes array that will store our array of quotes that will be displayed at random in our quote-generator and give it the variable name quotes. In this tutorial, we’ll be using motivational quotes.

You can use whatever category of quotes you would like; book quotes, movie quotes, TV-show quotes. Or if quotes are not your thing, how about a random facts about a topic of your choice? You can even use jokes! You have full control here so go wild!

var quotes = [
  '"The past cannot be changed. The future is yet in your power." - Unknown',
  '"Either I will find a way, or I will make one." - Philip Sydney',
  '"Failure will never overtake me if my determination to succeed is strong enough." - Og Mandino',
  '"Don’t watch the clock; do what it does. Keep going." — Sam Levenson',
  '"Aim for the moon. If you miss, you may hit a star." — W. Clement Stone.',
  '"It always seems impossible until its done." - Amelia Earhart',
  '"Look up at the stars and not down at your feet. Try to make sense of what you see, and wonder about what makes the universe exist. Be curious." - Stephen Hawking',
  '"Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy." - Norman Vincent Peale', '"You Learn More From Failure Than From Success. Don’t Let It Stop You. Failure Builds Character." – Unknown', '"If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You." – Steve Jobs','"We May Encounter Many Defeats But We Must Not Be Defeated." – Maya Angelou', '"One Of The Lessons That I Grew Up With Was To Always Stay True To Yourself And Never Let What Somebody Else Says Distract You From Your Goals." – Michelle Obama', '"Today’s Accomplishments Were Yesterday’s Impossibilities." – Robert H. Schuller', '"The Only Way To Do Great Work Is To Love What You Do. If You Haven’t Found It Yet, Keep Looking. Don’t Settle." – Steve Jobs', '"Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover." - Mark Twain', '"Nothing is impossible, the word itself says "I’m possible!" - Audrey Hepburn', '"Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time." - Thomas A. Edison', '"I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear." – Nelson Mandela', '"If you don’t like something, change it. If you can’t change it, change your attitude." – Maya Angelou', '"Success means doing the best we can with what we have. Success is the doing, not the getting; in the trying, not the triumph. Success is a personal standard, reaching for the highest that is in us, becoming all that we can be." – Zig Ziglar'
];

So once we have our quotes array, the next thing we need to define is what we’ll be doing with them.

Let’s recap here — so we want a random quote to be displayed each time that the quote button is clicked. We can do this by applying JavaScript’s onclick() event to the quote button we declared earlier in our JavaScript code.

quoteBtn.onclick = function randomQuote() {
  var rand = quotes[Math.floor(Math.random() * quotes.length)];
  quote.innerHTML = rand;
};

We set quoteBtn.onclick to a function called randomQuote() which will execute the code that will generate our random quotes.

Within out randomQuote() function, we’ll create a variable called rand (which is short for random) and set this equal to the equation you see above.

The equation will take the quotes variable, which stores our array of quotes, and multiply it by a random number. To generate a random number, we’ll be using the Math.random() method (which outputs a random number between 0 and 1) and multiplying this by the number of quotes in our quote variable by using quotes.length. Wrapped around the math.random() multiplied by quotes.length is the math.floor() method which will round the number to the nearest integer thus giving us a whole number to work with.

The last thing to do is to set the rand variable equal to the innerHTML of the quote display, which we declared earlier on and has the variable name quote.

This is the final outcome of our work:

And we’re done! I hope you enjoyed this tutorial, maybe even learned a thing or two?

Get creative with this tutorial! Push yourself and see what you can add using what you’ve learned here as a base. Play around with different shapes colors and fonts. Add other features to the quote-generator! A night/day feature is just the beginning. Here’s a few features to get you started:

Add a language feature that allows you to translate the text
Change the text color or background-color of something for each random quote
Add the ability to share the quote on social media
Add the ability to change font-size for increased accessibility
Add different categories of quotes the user can choose from

Again, these are only a few ideas to get you started. I’m sure you’ll have even better ones!

For easy access, I have gathered the pens in this tutorial and put them in a collection on Codepen. You can check it out here.

I’d love to see what you come up with so do @ me on Twitter!

I hope you enjoyed this tutorial! If you did, ❤️, 💬 and share! Till next time! ✌️

Responsive Windows Login page UI Tutorial— Part 2

Muna Mohamed — Tue, 10 Apr 2018 20:32:51 +0000

*Originally posted on Medium.

Who’s ready for part 2?

In part 2 of this tutorial, we will be making the Windows Login page responsive using SCSS variables, mixins and media queries. Confused? Don’t you worry. You’ve got this! As always, this tutorial is beginner friendly. Enjoy! :)

If you haven’t already, check out part 1 of this tutorial to know how we structured, styled and animated the login page.

SCSS Variables (for screen sizes)

//Variables
$mobile-width: 340px;
$tablet-width: 500px;

The beauty of SCSS are its features and one of those features is variables.

So what are SCSS variables? They are basically a method of storing information that can then be reused throughout your stylesheet. To make something a variable, you use ‘$’ followed by the variable name and the information that you want to store in that variable.

To begin the process of making the login page responsive we start by using two SCSS variables, $mobile-width and $tablet-width, to store the widths of the devices we want the login page to be responsive to. Here, we’ve set the mobile-width variable to be 340 pixels and the tablet-width variable to be 500 pixels.

Media queries (using mixins)

//Mixin - Media queries
@mixin mobile {
   @media (min-width: #{$mobile-width}) and (max-width: #{$tablet-width - 1px}) {
     @content;
  }
}

The next step is our media queries. We will be using the variables that we declared earlier together with a mixin to make our media queries easier to work with as well as improving the readability of our code.

We’ll start with the mixin, which have the media queries nested inside. We define our screen sizes within our media queries using the variables we declared earlier. With @content, it gives us the ability to pass blocks of content to our mixins.

To translate, we have a mixin called mobile which contains a media query which says that between the mobile-width (340 pixels) and tablet-width (500 pixels), this block of CSS rules should apply.

Applying mixin using @include

@include mobile {
  #login-page-container {
    font-size: 12px !important;
  }
  #login-page-inner {
    width: 300px !important;
  }
  #user-image-container {
    width: 110px !important;
    height: 110px !important;
  }
  .fa-user-o {    
    line-height: 110px !important; 
  }
  #password {
    width: 200px !important;
  }
}

The last thing we need to do is to apply the mobile mixin which contains our media query that applies to devices with a screen size between $mobile-width and $tablet-width. We do this using @include and passing the CSS rules that we want to apply within it. Our aim is to make the login page components smaller when the screen size is between the sizes we declared in our mobile mixin earlier.

For any screen sizes that are different from the screen sizes we declared in our mobile mixin, the CSS declarations that we typed in our stylesheet earlier in part 1 apply.

You’ll see the term, !important, after the CSS declarations we make in this section of our stylesheet. The term ‘!important’ is a rule used to override any previously assigned CSS declarations that were set in a stylesheet.

We start by changing the default font-size for #login-page-container from 16 pixels to 12 pixels.

The width of #login-page-inner is set to 300 pixels and for the #user-image-container, we set the width and height to 110 pixels. We set the line-height of the user icon, .fa-user-o, to 110 pixels so that it is centered vertically within the newly sized #user-image-container. Finally, we give #password a width of 200 pixels.

And that’s it! In the GIF above, you can see how our login page responds to different screen sizes.

For easy access, I have gathered the pens in this two-part tutorial and put them in a collection on Codepen. You can check it out here.

I hope you enjoyed part two of this tutorial! Till next time! ✌️

Responsive Windows Login page UI Tutorial - Part 1

Muna Mohamed — Wed, 04 Apr 2018 20:45:18 +0000

*Originally posted on Medium.

In part 1 of this tutorial, we will be building a clone of the Windows Login page using HTML and SCSS. By the end of this simple tutorial, you’ll be able to understand how to use mixins to write reusable code and how to apply multiple animations to certain components in this project. As always, this tutorial is beginner friendly. Enjoy! :)

Sketch

First things first, we need to have an idea of the layout of the login page. We already know what the Windows login page looks like. However, by sketching the basic outline of the main components that the Login page is made up of, it will help us with the structure of our HTML code. This sketch of the Windows Login page will serve as our blueprint. a map of sorts.

The main components of the Windows Login page are:

User profile(display) image
Account user name
Password input box
Submit button

HTML

With the components that make up the Windows Login page in mind, we can now start to write our HTML code.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Windows Login Page UI </title>
</head>
<body>

   <!--Login Page  -->
    <div id="login-page" class="login-page">
      <div id="login-page-inner">
        <!-- User Icon -->
        <div id="user-icon-container">
          <i class="fa fa-user-o fa-5x"></i>
        </div>    
        <!-- Username -->
        <div id="username-container">
          <h2>Muna</h2>
        </div>      
        <!-- Password box -->
        <div id="input-container">
          <input type="password" id="password" placeholder="Enter password">
          <button id="submit"><i class="fa fa-arrow-right"></i></button>
        </div>

      </div>
    </div>

</body>
</html>

We’ll start off with a basic HTML skeleton. Here I’ve used the standard HTML skeleton that is provided by Codepen. You can access this basic HTML skeleton by typing the word doc in the HTML section in Codepen’s coding playground and then clicking the tab key on your keyboard.

We’ll be using a couple of icons from an icon library called FontAwesome. To enable us to make use of this library, we need FontAwesome’s CDN(Content Delivery Network)link. After retrieving FontAwesome’s CDN link, we will place it in between the head tag in our HTML using a link tag, as shown above. For future use, you can find FontAwesome’s CDN link easily by typing ‘Fontawesome cdn link’ into Google, or any search engine of your choice or click here.

In the body section, we’ll type in the main code that will make up our Windows Login page. We’ll start with the main container that will hold the contents of the login page in place. We’ll give the main container an id of login-page-container. Next, we’ll add another div that will enable us to move the components of the login page around the login-page div container. This will help us with positioning the components better. We’ll give this container an id of login-page-inner.

Following this, we’ll add our main components that will make up the login page; the user display image, the account username, the password input box and the submit button.

Let’s begin with our first component. the user display image. We’ll be using an icon from FontAwesome’s icon library to represent the user . To hold this icon, we’ll add a div container with an id of user-image-container. Inside the user-image-container div will be the user icon that will represent the user profile image. Using the i tag, we’ll add the classes fa, fa-user-o and fa-5x. The first class represents the prefix for FontAwesome icons and without it, you won’t be able to make use of the icon library so do not forget to include this. The second class name, fa-user-o, of the i tag represents the name of the icon that we are using from FontAwesome’s library. The last class name of our i tag, fa-5x, represents the size of the icon and is used to increase the icon size.

Our next component after the user-icon-container is the account user name. We’ll use a div, with an id of username-container, to act as a container for the user name. Inside the username-container div, we’ll use a heading tag, a h2 tag in this case, for the username.

The last two components are the password input box and the submit button. We’ll use a div container to hold these two components. We’ll give this div container an id name of input-container. Inside the input-container div, we’ll have an input tag that will represent the password input box. We’ll change the input tag’s type attribute to password because this will be what the input tag will be representing. We’ll also give the input tag an id of password and a placeholder of ‘Enter Password’. This placeholder attribute is used to give a short description of the expected value of this input field, in this case a password. The last component to add in our input-container div is the submit button. We’ll add a button tag and give it an id of submit.In between the button tag we’ll insert another icon, this time a right-facing arrow icon, using the i tag by giving it the class names fa and fa-arrow-right.

SCSS

On to the styling!

Helpful tip alert!

Before we start with the styling, I want to let you know about a very helpful tip I learned about from a developer on Twitter (who’s Twitter handle I, unfortunately, cannot remember). For layout debugging and the ability to have visual representation of the layout to simplify editing, use the following at the top of your stylesheet;

* { 
   outline: 1px solid red;
}

What this does is add a red outline around each and every element from our HTML code.The great thing about this is that unlike debugging via the use of the border property, using outline doesn’t add any extra pixels so it won’t affect our layout.As you continue through the tutorial, you’ll see how this debugging solution works.

Now let’s get on to some actual styling!

Login-page-container

body {
  margin: 0;
  padding: 0;
}
#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
}

We’ll start by getting rid of the default margin and padding that the body tag has by setting both the margin and padding to a value of 0.

On to styling the main container; login-page-container.

We’ll give the login-page-container a width of 100%, which will make it span across the full width of the content area and responsive so that the background-size changes depending on the browser size. We’ll also give the login-page-container div a height of 600 pixels.

We’ll then use the background-image-url property to insert a background to the login-page-container div. We’ll center the background image by using the background-position property and giving it a value of center. We’ll make sure that the background image isn’t repeated across the login-page-container by giving it a value of no-repeat. Next, we’ll use the background-size property to specify the size of the background image. By giving the background-size property a value of cover, it will resize our background-image so that it fills the entire login-page-container and will do so even if it this results in stretching the image or cutting parts of it off.

Lastly, we’ll give the color property a value of white. This will make the default color of any text in the login-page-container or any of its child elements to be white. I have chosen the default text-color to be white because that is the color that works best against the background image I have used and is also the color that allows the text to be the most legible(i.e. easy to read) against the background image.

Login-page-inner

#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
  #login-page-inner {
    width: 400px;
    margin: 0 auto;
    @include vertical-centering;
  }
}

Moving on to the login-page-inner div container, we start by nesting it within the login-page-container div. In case you are not familiar with nesting, it is one of the many features of SCSS. It allows us to create a visual hierarchy that is the similar to the one in our HTML code. Not only does it make our SCSS code more organised and readable, but once the SCSS code is compiled to CSS(this is done automatically in Codepen), it also makes our CSS more organised and readable too.

We’ll give the login-page-inner div a width of 400 pixels and center it horizontally by using the margin property and setting its value to margin: 0 auto.

To vertically center the login-page-inner div within the login-page-container div, there are a few ways. In this case, rather than using flexbox, we’ll vertically center the login-page-inner div using the position property, top property and transform property. Together, these 3 properties combined allow you to vertically center the login-page-inner div within its parent container, login-page-container. In case we need to vertically center later on in our code, we’ll use a mixin and name it vertical-centering.

@mixin vertical-centering {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

I have placed the vertical-centering mixin at the top of our SCSS stylesheet and to apply it, I have used @include followed by the name of the mixin.

Below we can see what our login page looks like so far.

Login-page-inner → Animation

We’ll apply a simple animation where the login-page-inner div, including all of the elements which are nested within it, will descend from above and fade in from 0 to full opacity.

//Animations
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Let’s start with the fading in animation. To create an animation, we use @keyframes followed by the animation name, which is fadeIn. Then it’s quite simple — we want the login-page-inner div, including all its content, to change from an opacity of 0 to an opacity of 1 (i.e. full opacity).

@keyframes descend {
  from {
    top: 45%;
  }
  to {
    top: 50%;
  }
}

Next is the animation which will make the login-page-inner div, as well as the elements within it, descend. We want the login-page-inner-div to move downwards to where the login-page-inner div is vertically centered within the login-page-container. We’ll use @keyframes followed by the animation name, which in this case is descend. Next, we’ll make it so that the starting point of the login-inner-container div is 5% above the center of the parent container(#login-page-container) and the ending point is the center of the parent container(#login-page-container) .

All that is left is to apply both animations to the login-page-inner div using the animation property.

...
#login-page-inner {
   ...
   ... 
  animation: fadeIn 1s ease-in-out, descend 0.5s ease-in-out;
}

The first animation is fadeIn — it will last 1 second and have a transition-timing function of ease-in-out which means that the animation will have an equally slow start and end. Separated by a comma, the next animation is descend. The descend animation will last 0.5 seconds and similar to the fadeIn animation, will also have a transition-timing function of ease-in-out.

The end result will look like this:

User-image-container

#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
  #login-page-inner {
    width: 400px;
    position: relative;
    @include vertical-centering;
    margin: 0 auto;
    animation: fadeIn 1s ease-in-out, descend 0.5s ease-in-out;
    #user-icon-container,
    #username-container,
    #input-container {
      text-align: center;
    }
    #user-image-container {
      margin: 0 auto;
      width: 140px;
      height: 140px;
      font-size: 110%;
      border-radius: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      .fa-user-o {
        line-height: 140px;
      }
    } 
  }
}

From what we’ve done so far, we can see that the content within the login-page-inner div is aligned to the left. To fix this, we will change the text-align value to center for all 3 of the main components that make up our login page.

Next we’ll style the first main component of the login page; the user profile image. Let’s start by styling the user-image-container div — this will act as the background for the user icon that is nested within the user-image-container div.

To horizontally center the user-image-container within its parent container, #login-page-inner, we’ll give the user-image-container div a margin of ‘0 auto’. We’ll give the user-image-container a equal width and height of 140 pixels.

We’ll apply a font-size of 110% which means that the font-size of any text (or icons) within the user-image-container div will be 110% of the size of our default font-size(16px) which we set earlier in the main parent container, #login-page-container.

The user-image-container div that will serve as our background will be circular so to do that, we’ll make the border-radius value to be 100%.

Lastly. the background-color of the user-image-container div will be white and slightly transparent. To achieve this, we use RGBA colors as it allows us not only to define the color values that are defined by RGB colors but also allows us to define the opacity of the color.

User-image-container → user icon

Moving on to the user-icon, which is nested in the user-image-container div, we’ll apply a line-height of 140 pixels. This will vertically center the user icon within the user-image-container div.

Username-container

#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
  #login-page-inner {
    width: 400px;
    position: relative;
    @include vertical-centering;
    margin: 0 auto;
    #user-image-container,
    #username-container,
    #input-container {
      text-align: center;
    }
    #user-image-container {
      margin: 0 auto;
      width: 140px;
      height: 140px;
      font-size: 110%;
      border-radius: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      .fa-user-o {
        line-height: 140px;
      }
    } 
    #username-container {
      margin-bottom: 40px;
      margin-top: 20px;
      font-family: "Roboto";
      font-size: 105%;
    }
  }
}

The next main component of the login page is the account user name. We’ll start with the username-container div.

We’ll apply a margin bottom of 40 pixels so that there is some space between the username-container div and the input-container div (which contains the password input box and submit button). We’ll also apply a margin-top of 20 pixels which will create some space between the username-container and the user-image-container div, which is above the username-container.

tag in our HTML. Here, I’ve opted to use @import method — luckily, we can do this easily using the Assets library that is on Codepen already. See the GIF below to see how this is done.

The next main component of the login page is the account user name. We’ll start with the username-container div.

We will then make the value of the font-family to be Roboto. In order to use Roboto as the font-family, we will either need to add this font using @import or add the font by embedding the font in between the head tag in our HTML. Here, I’ve opted to use @import method — luckily, we can do this easily using the Assets library that is on Codepen already. See the GIF below to see how this is done.

We’ll make our font-size equal to 105% which means that the font-size will be 105% of the size of our default font-size (i.e 16px) which we set earlier in the main parent container, #login-page-container.

Here’s what we have so far:

Input-container

#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
  #login-page-inner {
    width: 400px;
    position: relative;
    @include vertical-centering;
    margin: 0 auto;
    animation: fadeIn 1s ease-in-out, descend 0.5s ease-in-out;
    #user-image-container,
    #username-container,
    #input-container {
      text-align: center;
    }
    #user-image-container {
      margin: 0 auto;
      width: 140px;
      height: 140px;
      font-size: 110%;
      border-radius: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      .fa-user-o {
        line-height: 140px;
      }
    }
    #username-container {
      margin-bottom: 40px;
      margin-top: 20px;
      font-family: "Roboto";
      font-size: 105%;
    } 
    #input-container {
      height: 50px;
      #password {
        margin: 0 auto;
        height: 25px;
        width: 300px;
        padding-left: 5px;
      }
      #submit {
        height: 31px;
        padding: 0 10px;
        position: relative;
        right: 5px;
        background-color: #bdbdbd;
        border: none;
        border-top-right-radius: 2px; 
        border-bottom-right-radius: 2px;
        cursor: pointer;
        .fa-arrow-right {
          line-height: 28px;
          color: white;
        }
        &:hover {
          background-color: #9e9e9e;
        }
      } 
    }
  }
}

Finally, all we have left to style is the input container which contains our password input box and submit button.

Let’s start by giving our input-container div a height of 50 pixels.

Input-container →password input box

Moving on to the password input box (#password), we’ll begin by centering it horizontally within the input-container with margin: 0 auto. We’ll give it a height of 25 pixels and a width of 300 pixels. The placeholder value in #password is too far from the left border of #password so we’ll apply a padding-left of 5 pixels.

Input-container → submit button

Last, but not least, is our submit button.

From our HTML code, we can see that nested within the button tag is an i tag with a class name of ‘fa fa-arrow-right’ which represents our arrow icon. The button element will act as the container for our arrow icon. We’ll give our submit button a height of 31 pixels and a padding-left and padding-right of 10 pixels. This adds equal padding on either side of the arrow icon, which is horizontally centered in our button tag that has an id of #submit.

The submit button is a little too close to the password input box so we’ll first apply relative positioning using the position property and then position the submit button(i.e. #submit) 5 pixels to the right of the password input box (i.e. #password) using the right property.

Next, we’ll give the submit button a background-color of #bdbdbd and remove its border by giving the border property a value of none. To give a slight curve to the top-right and bottom-right of the submit button, we’ll give it a border-top-right-radius and border-bottom-right-radius of 2 pixels.

To indicate that the submit button is indeed a button, we’ll give our cursor property a value of pointer. In addition to this, we’ll change the colour of the button when you hover over it from #bdbdbd to #9e9e9e.

Making sure to remove the red outline we applied in the beginning of our stylesheet, our Windows login page is almost done.

We have come to the end of part one of the tutorial. In part two, we’ll cover how to make the Windows login page responsive using media queries and mixins.

For easy access, I have gathered the pens in this tutorial and put them in a collection on Codepen. You can check it out here.

Hey guys! It's been a while since I've posted on here so thought I'd eaaaase my way back in to posting with this tutorial 😄.

I hope you enjoyed part 1 of this tutorial! The second part of this tutorial will be up next week! Till then! ✌️

P.S. Thank you to everyone who's followed me these last few days, I see you! This wouldn't be possible without the dev.to team and this beautiful community we're a part of so I hope you enjoy your time on this platform! ❤️

Nevertheless, Muna Mohamed Coded

Muna Mohamed — Thu, 08 Mar 2018 19:38:24 +0000

I began/continue to code because...

I enjoyed being able to build things from scratch and letting my creative side loose.

I did ICT for GCSEs and A-level but decided to pursue an Economics degree at university. 3 years later I graduated, and sort of floated around through placements, voluntary work and working with the youth through mentoring. I rediscovered my love for building things through creating animations on Macromedia Flash, then moved on to web development. Best decision I ever made.

I recently overcame...

Using Git and Github effectively! After going through multiple resources to better my understanding and using both, I finally found a resource that changed everything. For anyone who is learning or wants to know the best place to learn Git and Github, head over to Udacity's course on Git and Github. You won't regret it!

I want to brag about...

The tech articles I've written on dev.to and Medium. I feel that through writing, I have learned so much. It's one thing to understand web-dev/frontend related topics but it's something else to have to explain to others without being all over the place! Something else I want to brag about is my pens on Codepen. I have a much larger collection of work than I did before and I feel that I'm (finally) making progress.

My advice for allies to support women and non-binary folks who code is....

Fight with us, not against us.