DEV Community: Aya Bouchiha

All You Need To Know About react-icons.

Aya Bouchiha — Tue, 21 Sep 2021 22:22:03 +0000

Hi, I'm Aya Bouchiha, today, we'll talk about one of the most popular react libraries, which is react icons.

What is react-icons?

react-icons: is one of the most famous react libraries that provides us the icons of 20+ libraries including font awesome, bootstrap icons, box icons...
home page
github

Installation

npm install react-icons --save

yarn add react-icons

How To Import A Specific Icon

import { x } from 'react-icons/first-two-letters-of-x';

Example

import { ExAmple } from 'react-icons/ex';

Real Examples

// importing from font awesome icons
import { FaHtml5 } from 'react-icons/fa';

// importing from bootstrap icons
import { BsFillReplyFill } from 'react-icons/bs';

//  importing from material design icons
import { MdDoneAll } from 'react-icons/md';

// importing from box icons
import { BiCalendar } from 'react-icons/bi';

Usage

import {FaCss3Alt} from 'react-icons/fa';
const Component = () => {
    return (
        <FaCss3Alt  />
    ):
};

Icon Context (Configuration)

import { IconContext } from "react-icons";
import {FaCss3Alt} from 'react-icons/fa';
const Component = () => {
    return (
        <IconContext.Provider value={{
            size:'1.5em',
            className:'css-icon',
            style:{margin:'.5em 1emp',},
            color:'blue'
        }}
        >
            <FaCss3Alt  />
        </IconContext.Provider>
    ):
};

Note: by default the size property is 1em.

Do You Want To Learn Django ? Here Are Some Awesome Ressources.

Aya Bouchiha — Tue, 21 Sep 2021 22:21:15 +0000

Youtube Courses

Books

Have an awesome day!

Do You Like Using Your Phone To Evolve Your Productivity and Your Coding Skills ? Here are 15 Mobile Apps That Will Help You!

Aya Bouchiha — Mon, 20 Sep 2021 22:59:45 +0000

Hello Everybody, this is my #99 post, I'm Aya Bouchiha, on this beautiful day, I would like to share with you 15 free mobile apps that will help you to evolve your productivity and your coding skills.

note: the mentioned apps in this post are free, but they could include some paid features.

Google Keep, Easy Notes, Tick Tick, Notion

“If you don’t know where you are going, you’ll end up someplace else.”(Yogi Berra)

Google keep: is one of the most used applications for writing notes, ideas..., which let you share and collaborate with people on notes and lists.

Easy Notes is an android app for taking notes with colorful backgrounds and checklists, that provides you many features like creating photos, audio notes, sorting them...

android

TickTick: is a mobile app used for writing, managing your tasks, to-do lists, daily routine, tracking, and developing new habits. However, It provides you Pomodoro timer to keep you focused.

Notion: an editor that blends notes, to-do lists, bookmarks, code snippets, tasks, wikis, and more awesome features.

Coursera, Udemy

"The roots of education are bitter, but the fruit is sweet." (Aristotle)

Coursera: is one of the best platforms for online learning and self-education, It provides great courses for anyone, anywhere access to online courses and degrees from world-class universities and companies.

Udemy is an online learning platform that provides individual online courses that cover different categories like programming, marketing, content creation...

GeeksForGeeks

GeeksForGeeks: is one of the most famous platforms that provide amazing and well-explained articles for studying, learning, and mastering algorithms and data structures.

900+ Programming Books

"a reader lives a thousand lives before he dies, the man who never reads lives only one"(George R. R. Martin)

Everyone knows reading books is a great habit that every person, man, woman, child..., need to understand more life, to enrich his vocabulary, to develope his analytical and communicational skills.

according to me and many programmers, Youtube tutorials and courses will never replace the power and the valuable benefits of books.

900+ Programming Books: is an android app that offers more than 900 free, and paid books that cover more than 60 programming languages.

android

Moon+ Reader, ReadEra, Marvin 3

most developers, like me and you :), prefer and love the dark theme, that's why ReadEra are in my favorites app lists. my 5 favorites vs code themes

ReadEra is an android application for reading ebooks and viewing documents, in addition, It is for free and doesn't contain ads.

android

Moon+ Reader: is an android app for reading ebooks that allows you to load books in practically any ebook format you can find, including epub, mobi, chm, cbr, cbz, umd, fb2, txt, html, rar, zip, or OPDS..., It gives you Full visual like line space, font scale, bold, italic, in addition, It provides you 10+ themes including Dark one.

android

Marvin 3: is one of the best ios app for reading ebooks, which contains awesome features like providing light/dark themes, reading statistics, Vertical scrolling, Goodreads integration...

Miro, Microsoft Whiteboard

“If I had an hour to solve a problem I'd spend 55 minutes thinking about the problem and five minutes thinking about solutions."(Albert Einstein)

as a programmer, you will face many times some hard and complex problems that require focus, understanding and visualizing them, that is why using an online whiteboard will help you a lot to solve them faster, However, It lets you work more effectively with your team especially when It comes to planning and managing the projects together.

Microsoft Whiteboard: (for android and ios) provides a freeform intelligent canvas where teams can ideate, create, and collaborate visually via the cloud. Designed for pen and touch, it lets you write or draw as smoothly as you would with ink, while automatically recognizing and transforming shapes and tables as you draw.

Miro: is an online collaborative whiteboard that enables distributed teams to work effectively together, from brainstorming with digital sticky notes to planning and managing agile workflow.

In my opinion, I prefer Miro.

Thirty

Thirty: is a social network (android app) that will help you to start 30 days challenges to track and stop bad habits and start building new effective habits, in addition, It let you share your daily goals and habits with your friends and other people and more fun features.

anroid

Dcoder, Spck Code Editor

Dcoder is a mobile IDE with Syntax highlighting which let you Debug and Write a code in more than 35 Programming Languages and libraries (python, ruby, reactjs, django, html, javascript, nodejs...) see compilation results and errors at the same time on the same screen. in addition, Dcoder will help you to evolve and develop your problem-solving skills by solving available challenges in the app. 11 Websites To Practice You Coding And Your Problem Solving Skills

Spck Code Editor: is an android app that lets you write code, commit to any git repository .in addition, It provides you cloning feature from Github/Gitlab/Bitbucket, AWS CodeCommit, Azure DevOps...

Main languages supported: JavaScript, CSS, HTML
Smart code-hinting support: TypeScript, JavaScript, TSX, JSX, CSS, Less, SCSS, HTML
Syntax highlighting only: Python, Ruby, R, Perl, Julia, Scala, Java, Scala, Kotlin, OCaml, PHP, Golang, Rust, C, C#, Stylus, CoffeeScript, Pug, Markdown, Batch, Bash, ActionScript, Coldfusion, HaXe
android

To Contact Me

email: developer.aya.b@gmail.com
telegram: AyaBouchiha
Whatsapp: +212677070579

Please, feel free to write your favorites apps in the comments section.

Have an excellent day!

Are You Bored Of Converting "px" to "em" Using A Calculator, SASS Will Solve The Problem

Aya Bouchiha — Sat, 18 Sep 2021 21:56:48 +0000

Hi, I'm Aya Bouchiha, today, I decided to share with you the solution of converting "px" to "rem" or 'em' using a calculator because using It, will distract you to focus more in your work, and will let you waste a considerable amount of time, especially if the project is so big or your computer is slow.

What's px?

px: is an absolute unit for measuring.

What's them?

em: is a relative unit to the font-size of its parent, used for measuring, It is equal to 16px.

px vs em vs rem

Sizing in CSS: px vs em vs rem by Chiamaka Ikeanyi

Converting px to em

by default:
1em = 16px
pxValue = emValue * 16
emValue = pxValue / 16

Should I Use A Calculator For Converting px to em?

If you are familiar with scss, the answer is no, no, and no! so how?

Creating A Function For Converting px to em

index.scss

@function to-em($val-px){
    @return ($val-px / 16) + em;
}

Testing Our Function

index.scss

// index.scss

// px => em
@function to-em($val-px){
    @return ($val-px / 16) + em;
}

h1 {
    font-size:to-em(24);
}
div {
    height: to-em(200);
    width: to-em(400);
}

Result

index.css

h1 {
  font-size: 1.5em;
}

div {
  height: 12.5em;
  width: 25em;
}

Have an amazing day!

My 5 Favorites VS Code Themes

Aya Bouchiha — Sat, 18 Sep 2021 19:30:53 +0000

The Best Theme

Dracula

Github Theme

Night OWL

Shades Of Purple

Aya Bouchiha

Projects Tutorials For Learning React.js

Aya Bouchiha — Fri, 17 Sep 2021 23:48:20 +0000

Projects tutorials for learning REACT.JS

Have a good day!

part 3: 5 cool css properties

Aya Bouchiha — Fri, 17 Sep 2021 01:02:37 +0000

Hi, I'm Aya Bouchiha, and this is part 3 of 5 cool CSS properties.

word spacing

word-spacing: specify the space between words.

line-height

line-height: specifies the line-height of specified content.

object-fit

object-fit: specifies how an image, video should be displayed and resized. more info

letter-spacing

letter-spacing: specifies the space between the letters.

cursor

cursor: specify the cursor type.
all cursor types

Summary

cursor: specify the cursor type.
letter-spacing: specifies the space between the letters.
object-fit: specifies how an image, video should be displayed and resized.
line-height: specifies the line-height of specified content.
word-spacing: specify the space between words.

Part 2: 5 cool CSS properties

Aya Bouchiha — Wed, 15 Sep 2021 23:55:43 +0000

Hi, I'm Aya Bouchiha, and this is part 2 of 5 cool CSS properties.

quotes

quotes: helps you to chose the quotation marks for a quote element.

scroll-behavior

scroll-behavior: specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.more info

user-select

user-select: used to allow or deny the user to select content like a text, image...

writing-mode

writing-mode: allows you to specify the writing mode (horizontal-tb, vertical-lr, vertical-rl)

text-overflow

text-overflow: defines the way that the overflowed content should be displayed.

Summary

scroll-behavior: specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.
quotes: helps you to chose the quotation marks for a quote element.
user-select: used to allow or deny the user to select content like a text, image...
writing-mode: allows you to specify the writing mode (horizontal-tb, vertical-lr, vertical-rl)
text-overflow: defines the way that the overflowed content should be displayed.

Reference

https://www.w3schools.com/

5 cool CSS properties (part 1)

Aya Bouchiha — Wed, 15 Sep 2021 22:58:54 +0000

Hi, I'm Aya Bouchiha, and this is part 1 of some cool CSS properties.

part 2 of some cool CSS properties

caret-color

caret-color: used to change the cursor of editable elements like input fields.

clip-path

clip-path: used to hide a specific area of an element and build complex shapes like the octagon.

website will help you to build complex shapes using clip-path

resources to learn about clip-path

content

content: used with :before & :after for adding a generated content w

more info

pointer-events

pointer-events: specify that the user could react to pointer events or not.

resize

resize: specify if an element is resizable or not.

Summary

clip-path: used to hide a specific area of an element and build complex shapes like the octagon.
resize: specify if an element is resizable or not.
pointer-events: specify that the user could react to pointer events or not.
content: used with :before & :after for adding a generated content.
caret-color: used to change the cursor of editable elements like input fields.

Reference

https://www.w3schools.com/

57 Essential HTML Tags To Know As A Beginner

Aya Bouchiha — Tue, 14 Sep 2021 23:48:44 +0000

Hi everybody, I'm Aya Bouchiha, after creating two posts about 10 important HTML Tags, I decided to talk about 57 essential HTML tags to know as a beginner.

but if you're not familiar with 'HTML tags', I highly recommend checking at least one of the given resources in this post.

Resources To Learn HTML & CSS

57 Essential HTML Tag That Is Good To Know As Beginner.

<div>: for defining a division.
<header>: for creating a header.
<section>: for defining a section.
<address>: is a tag that displays the contact information like email and phone number of the author of a document or an article
<nav>: for creating navigation.
<main>: for assigning the main content.
<footer>: for creating a footer.
<form>: for defining a form which is a section that almost contains some input fields that the user should enter for sharing his information like login & sign up forms.
<time>: for representing a specific period in time.
<label>: for specifying a label like name, email, password for an input field.
<input>: for creating an input field.
<textarea />: for creating a multiline input so that the user could write a text such as description or bio.
<select>: for creating a drop-down menu.
<option>: for creating an option of a drop-down menu
<datalist>: for creating a list of options that are established in advance.
<fieldset>: for grouping a set of elements that discuss the same idea in a form element.
<legend>: for defining a title of the fieldset element
<wbr>: for defining a word break chance.
<br/>: for breaking a line
<button>: for creating a clickable element like text, image, video
<code>: used for defining a text as a code.
<kbd>: used to define keyboard input, it is displayed with a monospace font
<var>: for indicating mathematical variables like x, y, and z.
<samp>: is used to define sample output from a program.
<pre>: for formatting a specific text.
<dl>: is used with <dt> and <dd> to define a description list.
<dt> defines a term in a description list.
<dd> describes a term in a description list.
<del>: defining a deleted text.
<ins>: for defining an inserted text.
<em>: create an emphasized (important) text.
<i>: create a text with italic styling.
<u>: defining an underlined text, (not recommended to use)
<b>: for creating a bold text.
<strong>: for specifying an important text with bold styling.
<small>: for creating a text with a small size
<dfn>: used to specify a term that is going to be defined, most browsers display this element with an italic font style.
<abbr>: defining an abbreviation, like HTML.
<h1>: (h1, h2, h3,..., h6) for specifying a header of specific content.
<a>: (anchor tag)for creating a link (hyperlink).
<mark>: for highlighting a text.
<progress>:
<meter>: for representing either a scalar value within a known range or a fractional value.
<noscript>: for displaying alternate HTML content if the browser does not support scripting.
<q>: for defining a "quote".
<bloquote>: for specifying that a text is taken from another place.
<table>: for defining a table in your document.
<thead>: (table head)
<tbody>: (table body)
<th>: for creating a title of a specific cell in your table
<td>: for creating a cell in your table
<tr>: (table row) for creating a row in your table
<video>: for displaying a video in your document.
<img />: for displaying an image in your document.
<ol>: for creating an ordered list.
<ul>: for creating an unordered list.
<li>: for creating an item of a list.

Reference

www.w3schools.com

Have a great day!

Resources To Learn HTML & CSS

Aya Bouchiha — Sun, 12 Sep 2021 22:59:42 +0000

Hello, I'm Aya Bouchiha, today, I'm going to share with some helpful resources to learn HTML & CSS.

Youtube

Course in one video

playlist

Projects tutorials

I realy recommend checking this playlist: by travesy media (58 vidoe)

Books

more books:
(10+ Best HTML/CSS Books for Beginners & Advanced Coders in 2021) by Davis Ported

Cheat Sheet (pdf)

html
css

Have a good day.

10 Android Apps to Evolve Your Programming Skills

Aya Bouchiha — Sat, 11 Sep 2021 21:11:00 +0000

10 android apps to evolve your programming skills.

Have a good day!

DEV Community: Aya Bouchiha

All You Need To Know About react-icons.

What is react-icons?

Installation

How To Import A Specific Icon

Example

Real Examples

Usage

Icon Context (Configuration)

Suggested Posts

Do You Want To Learn Django ? Here Are Some Awesome Ressources.

Youtube Courses

Programming With Mosh

Tech With Tim

FreeCodeCamp

Traversy Media

Academind

Books

Do You Like Using Your Phone To Evolve Your Productivity and Your Coding Skills ? Here are 15 Mobile Apps That Will Help You!

Google Keep, Easy Notes, Tick Tick, Notion

Coursera, Udemy

GeeksForGeeks

900+ Programming Books

Moon+ Reader, ReadEra, Marvin 3

Miro, Microsoft Whiteboard

Thirty

Dcoder, Spck Code Editor

To Contact Me

Are You Bored Of Converting "px" to "em" Using A Calculator, SASS Will Solve The Problem

What's px?

What's them?

px vs em vs rem

Converting px to em

Should I Use A Calculator For Converting px to em?

Creating A Function For Converting px to em

index.scss

Testing Our Function

index.scss

Result

index.css

My 5 Favorites VS Code Themes

The Best Theme

Dracula

Github Theme

Night OWL

Shades Of Purple

Suggested Posts

Projects Tutorials For Learning React.js

Projects tutorials for learning REACT.JS

part 3: 5 cool css properties

word spacing

line-height

object-fit

letter-spacing

cursor

Summary

Suggested Posts

Part 2: 5 cool CSS properties

quotes

scroll-behavior

user-select

writing-mode

text-overflow

Summary

Reference

Suggested Posts

5 cool CSS properties (part 1)

caret-color

clip-path

resources to learn about clip-path

content

pointer-events

resize

Summary

Reference

Suggested Posts

57 Essential HTML Tags To Know As A Beginner

57 Essential HTML Tag That Is Good To Know As Beginner.

Reference

Resources To Learn HTML & CSS