DEV Community: Nadia Laasri

My #100DaysOfCode Challenge Experience Went Well!

Nadia Laasri — Fri, 09 Oct 2020 19:24:35 +0000

I found about the 100 days of code challenge from a friend who tweeted about it, at the same time I liked the CSS images people made and share on Codepen, so I decided to start this challenge and make a list of drawings with CSS by the end of it.

My Experience

I have been making CSS images almost everyday for 50 days regularly, the twitter community were very supportive, they liked what I do and what I share with them.
I started receiving messages saying : " How can I make CSS drawings? " that’s why I decided to start blogging and share everything I know and answer the questions I have been getting.

I made a blog, I wrote about the resources, steps and tricks I have been using to make these drawings.

At the same time, I was learning "VueJs" -JavaScript framework- and I made a small side project ‘jokes app’ just to practice what I have been learning.

Some Tips To Help You During This Challenge

Make A Plan :

Decide what you will work on, maybe you want to work on a specific technology, programming language..

Engage With The Community:

Sharing your progress with the community will keep you motivated and will inspire others to start the challenge.

You can use the #100DaysOfCode hashtag and tweet about your progress, interact with others and learn from them too.

Encourage others and be respectful to keep the community supportive.

Document Your Work :

Always write about your progress, you can use blog posts or tweets to share with others the tasks you have completed, your next ones.

If possible, make your Github repositories public, discuss the code with others and push your changes everyday, don't forget to share the code with the community.

Make some projects you would like to put on your portfolio.

Contribute to open source projects.

Avoid Burnout:

Code for the minimum one hour each day, you can incrementally add more time to code each day if you feel you want to code more.

What I Have Made

With all the support I got from the community, I made more than I expected :

• A list of 50 pure CSS drawings

• A blog

• Learnt about VueJs and started learning about react native

• Met some amazing people

Thank you for being part of the community

Tips and free tools to make your website accessible

Nadia Laasri — Wed, 09 Sep 2020 13:54:07 +0000

We don’t talk enough about web accessibility even if it’s something important and essential for developers and organizations that want to create high quality websites and tools, and not exclude some people from using it because the web should work for everyone.

Why it’s important :

Everyone should be able to enjoy the web, people with disabilities will find it hard to access a website if it’s not accessible, then it's a must in order to make it easy for them to use the web.

Besides that, making a website accessible means providing a good web experience for all the users. This helps to reach more people, to get better search results and more.

Some tips to make your website accessible:

1- Avoid automatic media :

It’s annoying to have music or videos that start automatically when a page loads and I think it would be even harder for people who are using screen readers and it can be difficult for them to figure out how to turn this media off.

At least, it should be quiet and have a ‘stop’ or a ‘pause’ button.

2- Make sure your web content and navigation can be accessed using keyboard :

Accessing pages, content and links on a website must be possible using just the keyboard. some ways for testing :

-The Tab key : to navigate through links and form controls.

-Enter or Spacebar : to select an element.

-The arrow keys : for navigation.

you have to make sure that all the content can be accessed using keyboard only.

3- Add labeled form fields :

Each filed in your form should have a descriptive label element so that everyone can understand what they should enter into the form field.

Using a <label> HTML tag is very important, for example if it’s a field for the username, the label element should say “First name” or “Full name”.

If the field is required, you can add required="false" to tell the users that they can’t leave it blank.

4- Add alt text for your images :

Adding a proper alt text for your images is so useful for users who are using screen readers, so that they can understand the message behind the image and if it contains some text you can add it in the alt attribute.

This also help the user if for some reason he cannot view it because of slow connection or an error in the src attribute.

Also giving your images descriptive text can improve your site’s SEO.

5- Use a good color scheme :

Make sure that the colors you are using on your site contrast well so that users can distinguish between all the elements on your site’s pages.

Free tools for web accessibility testing :

-Contrast checker : simple tool to calculate contrast ratios.

-Google lighthouse: This is integrated into dev tools and you can also use the extension, it gives you a full report of it’s test results.

-Axe : An extension that gives you a whole list of “violations” detected on your page.

-WAVE : chrome extension to evaluate your website accessibility.

-SEO Site Checkup : Check for image alt text.

-Check My Links : Chrome extension to check for empty links.

3 Secrets behind single div CSS art

Nadia Laasri — Sat, 29 Aug 2020 19:46:27 +0000

When i started making CSS drawings, i didn’t know about ‘Single div CSS art’, i was very amazed by what people can draw with only one div then i felt curious to know how these drawings are made.

I went to Codepen and started to learn more about them, i found that they all use three components: ‘ Pseudo elements ’, ‘ Shadow ’ and ‘ Gradients ’.

I will give more details on how these three elements can help you make single div CSS art.

1- Pseudo elements:

Yes it’s a single div, but using pseudo elements will give you 2 other elements to style which are : div::before and div::after .

The ::before selector inserts something before the div.

The ::after selector inserts something after the div.

Think of the div as an element that goes between these two selectors.

You can use the 'content' property to insert the content you want to add. or you can keep it blank (content:' ’) and add width/height, border, background to make shapes.

2- Shadow:

The box-shadow property is not just used to add a single shadow, we can also set multiple box-shadows to generate many shapes with different color, size, spread and blur values.

    div {
      border: 1px solid;
      border-radius:50%;
      width: 50px;
      height: 50%;
      padding: 50px;
      box-shadow: 5px 5px blue, 10px 10px red, 15px 15px yellow;
    }

we can play with these shapes using the offset and inset options.

3- Gradients:

I think this is an important thing when it comes to CSS art in general, you will always find gradients, more gradients means more complexity is added to your drawing.

it can help you make shapes too by combining multiple gradients in the background-image property.

    div{
      width : 200px;
      height : 100px;
      background: radial-gradient(ellipse at 50% 82%, red 67%, transparent 52%)
    }

Demo

That’s all, let’s now take an example and draw this ‘Single div perfume bottle’ together :

This is made up of 3 primary element:

a- The black element will be our div.
b- The green element represents the ::before selector.
c- The red element is the ::after selector.

That’s our single div HTML element :

    <div class="perfume"></div>

Let’s start writing CSS :

So the first thing we will take care of is the black element:

This is a div element that has a gray background color, with border-radius of 10 pixels and a box shadow to show some dimension. Notice that we are using multiple shadows here.

    .perfume {
      position: absolute;
      width: 222px;
      height: 328px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: #ececec;
      border-radius: 10px;
      box-shadow: -2px 9px 8px #5d56564a, 0px 1px 3px #888;
      border-width: 1px;
      border-style: ridge;
    }

Let’s move to the green element which we will make using ::before selector, you can see that this one contains many shapes, we are going to make them using gradients:

This is the code for our first shape which is nothing but a linear gradient of multiple and different colors:

    .perfume::before {
      content: '';
      position: absolute;
      display: block;
      width: 164px;
      height: 157px;
      top: -148px;
      background-repeat: no-repeat;
      background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
      background-size: 92px 17px;
      background-position: 64px 124px;

    }

Our second shape is the same as the previous one with a small size and different position.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
background-size: 92px 17px, 72px 20px;
background-position: 64px 124px, 74px 101px;

Next, it’s a radial gradient which represents the circle in the top. Notice that we added this shape before the one that goes under it. Always start with the top shapes so that it won't be covered by the next one.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%);
background-size: 92px 17px, 72px 20px, 10px 10px;
background-position: 64px 124px, 74px 101px, 106px 50px;

After we put the previous shape, now we will add another linear gradient that goes under it, same as the first one with different size and position:

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px;

One other linear gradient:

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(208, 208, 208, 1) 6%, rgba(207, 207, 207, 1) 7%, rgba(40, 40, 40, 1) 27%, rgba(13, 12, 12, 1) 51%, rgba(40, 40, 40, 1) 70%, rgba(207, 207, 207, 1) 93%, rgba(208, 208, 208, 1) 95%);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px, 92px 17px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px, 63px 148px;

Now, it’s time to fill all the blank spaces between all these shapes, for this we will add four simple linear gradients:

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(208, 208, 208, 1) 6%, rgba(207, 207, 207, 1) 7%, rgba(40, 40, 40, 1) 27%, rgba(13, 12, 12, 1) 51%, rgba(40, 40, 40, 1) 70%, rgba(207, 207, 207, 1) 93%, rgba(208, 208, 208, 1) 95%), linear-gradient(#434343, #434343), linear-gradient(#939393, #939393), linear-gradient(#2f2f2f, #2f2f2f),
    linear-gradient(#878787, #878787);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px, 92px 17px, 80px 3px, 72px 3px, 76px 6px, 82px 8px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px, 63px 148px, 70px 46px, 74px 99px, 73px 121px, 70px 140px;

Yes it’s a little bit crazy to see all these different gradients, each with its own position, colors and size but that’s what makes our drawing looks good.

That’s all for the ::before selector, we finished the top part 😌

Let’s move to the ::after selector and add the red element to our drawing: (don’t worry, this one is easy 😅 )

It’s just an element with some border radius and two linear gradients.

    .perfume::after {
      content: '';
      display: block;
      box-sizing: border-box;
      width: 203px;
      height: 292px;
      position: absolute;
      top: 4px;
      left: 10px;
      background-color: #e1e1e1;
      border: 1px solid #1919195e;
      border-top-left-radius: 18px 151px;
      border-top-right-radius: 18px 151px;
      border-bottom-left-radius: 34px;
      border-bottom-right-radius: 34px;
      background-repeat: no-repeat;
      background-image: linear-gradient(#ebebeb, #ebebeb), linear-gradient(#2f2f2f, #2f2f2f);
      background-size: 194px 18px, 190px 1px;
      background-position: 3px 0px, 3px 18px;
    }

We are done ! 🥳

Hope you learnt something from this.

Check out all the code @codepen

And follow me on twitter if you would like to see more of CSS stuff 👋

How to write and publish your first NPM package

Nadia Laasri — Thu, 20 Aug 2020 22:24:05 +0000

We will write a library that helps to generate border-radius for HTML elements, we will name it "radiuswizard".
This is just an example of a library that will give us the idea on how the NPM packages are written and published, so let’s start.

What you need to get started :

a- NPM account, if you don’t have it, go to https://www.npmjs.com/signup and sign up.
In order to publish your package, you will have to verify your email, so make sure to do that, also, remember the username and password because we will use them in a moment..

b- Go to your console and run npm adduser then enter your NPM account’s informations.

1- Writing the NPM package :

we will create a folder called “radiuswizard” for our project (you can call it whatever you want).

mkdir radiuswizard && cd radiuswizard

Open this project in your code editor and let’s start writing our package.

we will make a new file ‘index.js’ which will contain our JavaScript function :

function radiuswizard(options) {
        let elements = document.querySelectorAll('.radiuswizard')

        elements.forEach(el => {
            if (options.circle) {
                el.style.borderRadius = '50%'
            } else {
                el.style.borderRadius = `25px`
            }
        })
    }
    module.exports.radiuswizard = radiuswizard

Let’s break down what’s happening in this file, To start with, our radiuswizard function accepts an options object , our elements variable represents all the elements that have the .radiuswizard class.

If the user passes the circle as an option, the elements will get a border-radius of 50%, else it’s 25px as a default value.

Of course before we publish our package, we need to give details about it, for that let’s add a README.md file :

# Description
npm package for adding border-radius to your elements.
# Installation
`npm i radiuswizard --save`

import {radiuswizard} from 'radiuswizard';
radiuswizard({
    circle: false
})

## Options
radiuswizard supports only one option:
- _circle_ - _boolean_ (Defaults to false)

we have three sections in this file, the first one for describing the usage of this package, the second to tell users how they can install it, the last one is for the options, we tell the user that this package supports only one option which is boolean.

… And we finished writing the package 😁

2- Getting ready to publish our npm package

In order to publish our package, we need to deploy this project to Github.

We will create a new public repository with this name ‘radiuswizard’, check this :
Github-docs if that's your first time making a repository on Github.

Then run these commands in the console :

git init
git add .
git remote add origin git@github.com:LaasriNadia/radiuswizard.git //make sure to replace LaasriNadia by your Github username
git push -u origin master

One more step before publishing the package is to add a package.json file to our project. For that we run :

npm init

it will ask you some questions, these are the ones we will answer ( Press Enter to skip the other questions ) :

description : border-radius for your elements

keywords : border-radius

author : put your name here

We are now ready to publish our NPM package. 🚀

3- Publishing our NPM package

The only thing we have to do in order to publish our package is to run :

npm publish

If you get this error :

40 Forbidden - PUT https://registry.npmjs.org/radiuswizard - radiuswizard cannot be republished until 24 hours have passed.

It’s because we are using the same name for this package, so go back to package.json file and change the name value of this package then run npm publish again.

To make sure your package is published go to npmjs.com and search for your package’s name. You should get something like this : https://www.npmjs.com/package/radiuswizard

BONUS

We will now take the role of the user and use the package we just created. Run:

 mkdir radiususage && cd radiususage
 npm init -y

Let’s make an index.html file in this directory :

<!DOCTYPE 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>
        <img src="https://via.placeholder.com/150" alt="" class="radiuswizard">

        <script src="./index.js"></script>
    </body>
    </html>

We added an image and we give it a class of radiuswizard.

Let’s add an index.js file

  import {
        radiuswizard
    } from 'radiuswizard';
    radiuswizard({
        circle: false
    })

Let’s now install our package, run :

 npm i radiuswizard --save

we are now ready to test our package.

We need a javascript bundler, for that we will use parcel, easy and requires zero configuration, if you don’t have it on your machine, install it by running this :

 npm i parcel -g

when the installation is finished. run the development server :

parcel index.html

Now open http://localhost:1234/ in the browser:

That’s what we see :

Yaaay!! It's working, our image has a border-radius of 25px as we specified in our package. 🤩

Let’s try the circle option, go back to index.js file and give the circle a true value instead of false :

import {
        radiuswizard
    } from 'radiuswizard';
    radiuswizard({
        circle: true
    })

Now the border-radius of 50% is applied to our image:

Everything is working as expected. 🥳

Congratulations on writing and publishing your first NPM package ✅

Make your first CSS art 😍

Nadia Laasri — Mon, 03 Aug 2020 22:56:51 +0000

Many people know how to use CSS to style websites, but when it comes to CSS artwork, they get confused on how they are made.

So i thought it might be helpful if i share my humble experience with you, I am going to discuss some important CSS knowledge you will need to have, in order to make your own CSS art and enjoy it as i do, let’s start🚀

Useful CSS properties :

1. Gradient

We can declare gradient in both background or background-image properties, it can take as much colors as you want separated by a comma “ , ”.

We have two types of gradients:

-Linear Gradients: can be controlled by directions(left,top,right,bottom) or angles.

-Radial Gradients: can be controlled by giving each color a percentage, setting a shape(circle,ellipse).

• Great website to generate gradients: cssgradient

2. box-shadow

Give your element one or multiple shadows by separating them with a comma “ , ”.

I found that the “inset” property value is so much useful, it changes the shadow from an outer shadow to an inner shadow, this makes your element looks a little bit real.

• Great website to generate box-shadow: cssmatic

3. clip-path

Clip-path is a very useful property when it comes to CSS artwork, this property will make it easy to draw a path that probably will take you so much time to do in a different way.

This helps to draw circle, polygon and paths by specifying which region you want to show.

• Great website to generate clip-path: bennettfeely

Make your first CSS art

After we discussed these properties above, you are now ready to make your first CSS art.

This is the one we will make together 😍

This is the HTML :

    <div class="coffee-cont">
        <div class="coffee-cup"></div>
        <div class="coffee-hand"></div>
        <div class="coffee-tasse"></div>
    </div>

The first thing we will do is style our coffee container :
we will give it position:relative
and position:absolute to the other elements inside this div (except the coffee-cup div ) so that their positions will depend on their parent’s position.

    .coffee-cont {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        position: relative;
    }

let’s style our second div, the coffee cup :
we will use the radial-gradient for the background to make the center a little bit brighter than the sides.

    .coffee-cup {
        position: relative;
        width: 250px;
        height: 190px;
        margin: 0 auto;
        background: radial-gradient(circle,rgba(208, 208, 208, 1) 5%,rgba(189, 189, 189, 1) 51%);
        border-radius: 0 0 150px 150px;
        top: 50%;
    }

Again a radial-gradient to the element before the coffee-cup to generate our coffee's color. notice that we give it z-index:9 so that it goes over the cup.

    .coffee-cup::before {
        content: '';
        display: block;
        height: 30px;
        width: 230px;
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(132, 102, 76, 1) 5%,rgba(86, 44, 8, 1) 96%);
        top: -7px;
        left: 10px;
        z-index: 9;
    }

this code will generate the top of the cup:

    .coffee-cup::after{
        content: '';
        display: block;
        height: 45px;
        width: 242px;
        position: absolute;
        border-radius: 50%;
        background: #cccccc;
        top: -25px;
        left: -1px;
        border: 5px solid #e6e6e6;
    }

Let’s add the coffee-hand div, we will give it z-index:-1, this way it goes behind the cup element

    .coffee-hand{
        width: 52px;
        height: 32px;
        position: absolute;
        background: #ffffff;
        border-radius: 32px;
        transform: rotate(-36deg);
        z-index: -1;
        border: 15px solid #dbdbdb;
        top: 56%;
        left: 66%;
    }

Now we take care of the element in the bottom, we will use a circular radial-gradient, the center will be brighter.
we need a shadow to add a nice effect to this element, for this we will use the box-shadow property with a darker color.

    .coffee-tasse{
        width: 400px;
        top: 68%;
        left: 10%;
        height: 139px;
        background: radial-gradient(circle,rgba(69, 69, 69, 1) 
        13%,rgba(176, 176, 176, 1) 45%,rgba(143, 141, 141, 1) 
        96%);
        border-radius: 50%;
        position: absolute;
        z-index: -1;
        border: 2px solid #f0f0f0;
        box-shadow: 1px 3px 0px 1px #323232;
    }

I added this ::after selector to generate another blurry shadow which will be displayed at the very bottom of this element.

    .coffee-tasse::after{
        content: '';
        display: block;
        width: 405px;
        top: 68%;
        border-radius: 50%;
        height: 145px;
        background: transparent;
        box-shadow: 2px 5px 8px 3px #bababa;
    }

That's it ☕.
Congratulations on making your first CSS art 🎉, now it is your turn to use all the things you have learnt and make something fancier! 👏

Check all the code here : @codepen

If you want to see more of my CSS artwork, check out my twitter, i tweet a lot about CSS there. 😊