Forem: 𝐁𝐚𝐛𝐢 ✨

Javascript cheat sheet: .slice() and .splice()

𝐁𝐚𝐛𝐢 ✨ — Sat, 30 Jul 2022 05:45:00 +0000

I recently came across a twitter post where the user challenged others if they knew the difference between the js methods .slice() and .splice() without googling them. A lot of people mixed them up.

So I've created this simplified cheat sheet of everything you need to know about the 2 methods.

What you should know

.slice() and splice() are both array methods.
both of them return arrays as outputs
the key is to pay attention to what they return as the output array and if they mutate the original array (they one on which the were applied to)

1) .slice()
.slice() returns selected elements in an array, as a new array. Selection is done by index.
.slice() does not affect the original array

With splice() you can select one or more elements.

For example: This code snippet returns 3 (which is at index 2)

[1,2,3,4,5].slice(2) // returns 3 (which is at index 2)

and this code snippet returns 2,3,4 (from index 1 to 4 exclusively)

[1,2,3,4,5].slice(1,4) // returns 2,3,4 (from index 1 to 4 exclusively)

2) .splice()

.splice modifies the original array (adds and/or removes elements from the array)
The method returns the original array **modified**

With splice you can:

remove elements

[1,2,3,4,5].splice(3) // returns [1,2,3] (first 3 elements)
[1,2,3,4,5].splice(2,2) // at position 2 remove 2 elements (returns [1,2,5])

add elements


[1,2,5].splice(2,0,3,4) // at postion 2 add 2 elements (returns [1,2,3,4,5])

remove and add elements at the same time

// at position 2, remove 1 elements and add 2 new items
[1,2,3,4,5].splice(2,2,"HTML","CSS") // returns [1,2,"HTML","CSS",5]

Remember: .splice() mutates the array, .slice() does not!

Hope this is helpful to someone 💜

My very first Tech YouTube video

𝐁𝐚𝐛𝐢 ✨ — Wed, 27 Jul 2022 05:43:00 +0000

Just created my very first tech video on YouTube 😊

This YouTube video is just 2 minutes long however, it provides a simple and visualized explanation of the concept of classes and objects as used in software engineering

Please share your thoughts in the comments, like and subscribe. Thanks.

JSX for beginners (and how it differs from HTML)

𝐁𝐚𝐛𝐢 ✨ — Tue, 19 Jul 2022 03:34:57 +0000

What is JSX

JSX or JavaScript XML is an extension of JavaScript used to write React components.

For example, consider this code snippet below gives an illustration of what JSX typically looks like

const greet = <h1>Hello World</h1>;

So JSX permits us write Javascript and HTML together. However, unlike HTML and Javascript, JSX cannot be interpreted by browsers so it needs a compiler (Babel or Webpack) to transpile it to Javascript

Why use JSX

The very first thing you should know is that JSX is not a necessity. You can write React code without it.

Then why use it? Why mix the logic and the markup? JSX is syntactic sugar. It is designed to make things easier to read and express

For example: Consider a JSX expression

<p color="red" shadowSize={2}>I'm a random sentence</p>

It is compiled by Babel to

React.createElement(
  "p",
  {color: 'red', shadowSize: 2},
  "I'm a random sentence"
)

The later snippet is obviously less pretty 😀

How JSX differs from HTML

1. Self-closing tags

In HTML, it's okay to write self-closing tags without closing them e.g. <hr /> can be <hr>. This is not permitted in JSX. All tags must be closed.

Also, all tags can be self-close e.g. <div />

2. Adding JavaScript expressions

JavaScript can be added directly into JSX markup using curly braces {...}

{/* Output: Everybody knows 1 + 1 = 2 */}
<p> Everybody knows 1 + 1 = {1+1}<p>

So no need for the <script> tag HTML uses

3. HTML attributes change naming conventions

Remember JSX is writing HTML in JavaScript so certain HTML attributes like class and for which are keyword in JavaScript have to change to className and hmtlFor respectively. Take note of the use of camelCasing in the naming convention.

All JSX attributes follow the camelCase naming convention. So background-color becomes backgroundColor

4. Inline CSS is an object

In HTML, you can directly add your inline CSS styles in the opening tag. However, this is not so in JSX. Here, you pass an object
For example Consider this HTML snippet

<p style="color:red;font-size:14px">Hello there!</p>

In JSX, it could be written as

cont Greet = function() {
  const myStyles = {
    color:"red";
    fontSize:"14px";
    }
  return <p style={myStyles}>Hello there!</p>;
}

return <p style={{color:"red", fontSize:"14px"}}>Hello there!</p>;
}

I'm currently learning React. While transitioning from writing HTML to JSX, I found some key concepts and difference that everyone should be aware of. This is me just documenting my notes. Hope you found it helpful 😊

Header image credit: patterns.dev

🎨 Understanding the CSS rgb model (Visualized)

𝐁𝐚𝐛𝐢 ✨ — Mon, 04 Jul 2022 09:23:58 +0000

The RGB model is an additive color model where the colors red, green and blue can be added together in different intensities to form a wide array of colors. The additive colors start with black, then adds red, green and blue.

With the rgb function, the arguments are used to produce color

Each argument, red/green/blue, can range from 0 to 255. O means there is 0% of that color and 255 means there is 100% of that color.

For example: We'll use 3 div elements to demonstrate the use of the rgb model

<div class="markers">
      <div class="strip one">
      </div>
      <div class="strip two">
      </div>
      <div class="strip three">
      </div>
</div>

.markers {
  padding: 10px 0;
}

.strip {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

Now using the rgb concept explained above, we could set the background colors of strip 1, 2 and 3 to the different primary colors red, green, and blue respectively

.one {
  background-color: rgb(255, 0, 0);
}

.two {
  background-color: rgb(0, 255, 0);
}

.three {
  background-color: rgb(0, 0, 255);
}

Output

The intensities of each color can be varied between 0 and 255 to get different shades. For example, to get a more natural color for green (the second strip), it's intensity could be reduced to half way between 0 and 255

.two {
  background-color: rgb(0, 127, 0);
}

Output

Increasing the value of the color increases its brightness.

Red, blue and green are primary colors, so when they are added together in the highest intensities (255), they form white.

.white {
  background-color: rgb(255, 255, 255);
}

And the total absence of all 3 give black

.black {
  background-color: rgb(0, 0, 0);
}

Secondary colors

Secondary colors are formed from the combination of two primary colors. There are 3 secondary colors

1. Yellow

Yellow is formed from the combination of pure red and pure green

.one {
  background-color: rgb(255,255,0);
}

2. Cyan

Cyan is formed from the combination of pure green and pure blue

.two {
  background-color: rgb(0, 255, 255);
}

3. Magenta

Magenta is formed from the combination of pure blue and pure red

.three {
  background-color: rgb(255, 0, 255);
}

Output

Tertiary Colors

Tertiary colors are formed from a combination of a primary color and a nearby secondary color.There are six tertiary colors.

1. Orange

Orange is formed from the combination of pure red and yellow and falls between the two on the color wheel. Set red at max (255) and green to 127

.one {
  background-color: rgb(255, 127, 0);
}

Output

2. Spring Green

Spring green is formed from the combination of pure green and cyan. Set green to 255 and blue to 127

.one {
  background-color: rgb(0, 255, 127);
}

Output

3. Violet

Violet is formed from the combination of pure blue and magenta. Set blue to 255 and red to 127

.one {
  background-color: rgb(127, 0, 255);
}

Output

4. Chartreuse green

Formed from the combination of pure green and yellow. Set green to 255 and red to 127

.one {
  background-color: rgb(127, 255, 0);
}

Output

5. Azure

Formed from the combination of pure blue and cyan. Set blue to 255 and green to 127

.one {
  background-color: rgb(0, 127, 255);
}

Output

6. Rose

Formed from the combination of pure red and magenta. Set red to 255 and blue to 127

.one {
  background-color: rgb(255, 0, 127);
}

Output

Thanks for reading!

Now, can you remember the combination for chartreuse green? (be honest 😅 )

header pic: Katie Rainbow

Interesting! Make different image parts clickable with HTML only (codepen preview)

𝐁𝐚𝐛𝐢 ✨ — Mon, 27 Jun 2022 23:39:13 +0000

You can make different parts of an image clickable.

With HTML's <map>, you can create image maps which are images with clickable areas. These areas are defined using the <area> tag.

Understanding how image maps work

The image (which would be clickable) is imported using the <img> tag, however an attribute, usemap, is added to the <img> tag with a specific ID which would later be used

For example

<img src="worldmap.png" alt="Worldmap" usemap="#worldmap">

Using the <map> tag, the image is reference using the attribute name which would be the ID used in the usemap attribute of the <img> tag

<map name="worldmap">

Now, nested in the <map> elements are several <area> elements which are used to define the different clickable areas

In the area element we declare:

shape: The shape of the clickable area
- rect - defines a rectangular region
- circle - defines a circular region
- poly - defines a polygonal region
- default - defines the entire region
coords: The coordinates of the area
href: The link to the target resource after the image is clicked

<area shape="rect" coords="34,24,270,350" alt="africa" href="https://africa.htm" title="Visit Africa">

Example: Clickable World Map

Taking into account all explained above, this far-from-perfect example demonstrates the use of an HTML image map

Thank you for reading (and liking 😄)

An Act of Kindness that Helped your Career

𝐁𝐚𝐛𝐢 ✨ — Wed, 08 Jun 2022 21:18:05 +0000

While we work to advance our careers and push limits, we must remember to be kind to others and ourselves.

Could you describe a time when an act of kindness done to you or someone else had an impact (big or small) on your career?

Setting up a new dev machine

𝐁𝐚𝐛𝐢 ✨ — Thu, 02 Jun 2022 10:03:43 +0000

As developers we have had to set up our development environment from scratch at least once.

Whether it's after getting a new machine or switching your operating system (as I have done a couple if times 😂) could you share

The first tool/software you setup?
your must-have tools and environment variables?

8 Shocking HTML tips you probably don't know about

𝐁𝐚𝐛𝐢 ✨ — Thu, 26 May 2022 05:57:55 +0000

These are a collection of HTML tips I learned that would definitely blow your mind!

1. Capture attribute to open your device camera

Just as the input tag has attributes for email, text and password, there is also an attribute to open the camera of mobile devices to capture images.

This is done with the capture attribute which can take two values:

user for the front camera
environment for the back camera

<input type="file" capture="user" accept="image/*">

2. Automatic website refresh

You can set your website to refresh after a given amount of time from the head tag!

<head>
    <meta http-equiv="refresh" content="10">
</head>

This snippet refreshes the website every 10 seconds

3. Activate spellcheck

You can use the HTML spellcheck attribute and set it to true to activate it. Specify the language to be used using the lang attribute

<input type="text" spellcheck="true" lang="en">

It is a standard attribute and is supported by most browsers

I wonder if dev.to uses this attribute on their create post editor... 😄

4. Specify file type to be uploaded

You can specify the file types users are permitted to upload in the input tag using the accept attribute

<input type="file" accept=".jpeg,.png">

5. Prevent translation

Setting the translate attribute to no, prevents translation. This is important in case where you don't want a phrase or word to be translated, for example your logo, company or brand name.

<p translate="no">Brand name</p>

6. Entering multiple items into the input tag

This can be done with the multiple attribute

<input type="file" multiple>

It works for both files and emails. For emails, separate each email by a comma.

7. Creating a poster(thumbnail) for your videos

With the poster attribute, you can create an image which is displayed while the video is downloading, or until the user hits the play button.

If this is not included, the first frame of the video will be used instead.

<video poster="picture.png"></video>

8. Automatically download on link click

If you want a particular resource to be downloaded when a link to the target resource is clicked, add the download attribute

<a href="image.png" download>

That's a wrap. I'm sure to share more once I learn more 😄

Comment below which ones were new to you

Grinding as a developer

𝐁𝐚𝐛𝐢 ✨ — Sat, 21 May 2022 00:47:00 +0000

As a software developer, could you share?

When did you grind the hardest and was it worth it?
How did you avoid burnout?
Would you advice someone to do same?

A set of handy git commands for beginners to make your life easier!

𝐁𝐚𝐛𝐢 ✨ — Thu, 28 Apr 2022 12:52:46 +0000

Starting out with version control is exciting however keeping track of all the commands can be difficult.

This is a simplified cheat sheet with short explanations to guide you on which command does what and if the changes made are locally, remotely or both.

First-Time Git Setup
Table of Content
Creating A Repo
Managing Local Changes (including undos)
Managing Branches
Pushing And Pulling
Fetching
Merging

1. First-Time Git Setup ⚒

Once git is installed on your system you have to customize your git environment. This can be done using the git config tool

i. To setup your Git username

git config --global user.name <username>

Example

git config --global user.name janedoe

ii. To setup your Git username

git config --global user.email <emailAddress>

Example

git config --global user.email janedoe@gmail.com

iii. To check Git configuration

git config -l

🡅 back to TOC

2. Creating A Repo 🖊

These are probably the first command every git enthusiast learns.

i. To create a local repo

git init

You should run this command in the folder you want to become the root(base) folder for your repo

ii. To clone an existing repo

git clone <repo-clone-link>

Example:

git clone https://github.com/user/repo.git

Ensure that the link is copied from the green clone button NOT the browser tab

iii. Linking to a remote repo

git remote add origin <link-to-github-remote-repo>

Example:

git clone https://github.com/user/repo.git

🡅 back to TOC

3. Managing Local Changes (including undos) 🛠

i. Checking files you've worked on without committing (unstaged files)

git status

ii. To stage files

To stage particular files, you'll have to specify the filenames (including the extensions)

git add <filename>

Example:

git add index.html
git add index.html styles.css app.js

To check which files to add run git status

To stage all files at once

git add .

Note: Do no forget the decimal point

iii. To unstage (unadd or uncommit 😄) files

These can be used for commits that have not been pushed

To unstage a single file

git reset HEAD <filename>

Example:

git reset HEAD index.html

To unstage all stage files

git reset HEAD

To unstage the last file you staged

git reset HEAD~1

Note: Be sure that you don't have any additional changes to the files

iv. To commit staged files

Once you've stage a file you can then commit it

git commit -m "<commit-message>"

Example:

git commit -m "initial commit"

Note: Do not forget the commit message

To commit means to capture a snapshot of the project's currently staged changes and "commit it to git memory"

v. To stage and commit all changes at once

git commit --am "<commit-message>"

Example:

git commit -a -m "styles and design done"

vi. To correct your last commit message

git commit --amend -m "<commit-message>"

Example:

git commit --amend -m "Corrected: first commit"

Note: Don't amend published(pushed) commits!

vii. To rollback commits

These are for commits that have been pushed

To rollback the latest commit

git revert HEAD

To rollback to a specific commit

git revert <commitID>

🡅 back to TOC

4. Managing Branches

i. To list all existing local branches

git branch

Example:

ii. To list all branches (remote and local)

git branch -a

iii. To create a new branch on the current head

You can think of the HEAD as the "current branch". When you switch branches with git checkout (switch branches), the HEAD revision changes to point to the tip of the new branch

git branch <branch-name>

Example:

git branch develop

iv. To switch to an existing branch an update current working directory

git checkout <branch-name>

Example:

git checkout develop

v. git checkout -b

Creates new branch from current branch(the branch you are currently working on) and checkout out to it.

This move can be done even when you have unstage files. The untracked files will now be in the new branch

vi. To delete a branch

To delete a merged branch locally. Do not be on the branch to be deleted.

git branch -d <branch>

To delete a branch locally whether merged or not. Do not be on the branch to be deleted.

git branch -D <branch>

Note: These delete the local branch only

To delete a remote branch from terminal.

git push origin --delete <branch>

Note: This deletes the remote branch only

vi. To rename a branch

To rename a branch while on another branch

git branch -m <oldName> <newName>

To rename your current working branch

git branch -m <newName>

If you want upstream to reflect your changes, that is the branch upstream to have the same naming as your local branch

git push origin -u <newName>

vii. To set local branch to track remote branch

 git branch --set-upstream-to=origin/<remoteBranchName> <localBranchName>

vii. Pushing a branch for the first time

If you clone a project, created a branch, worked on it and want to push it to upstream for the very first time

git push --set-upstream origin <branchName>

After this is done, just do git push whenever you wish to push that branch to the one upstream

🡅 back to TOC

5. Pushing And Pulling

i. To push local branch for the first time

This is to push a branch that was created locally for the very first time. That is, it does not exist remotely.

 git push --set-upstream origin <branchName>

For short

git push -u origin <branchname>

ii. To push

To push a branch which already exists and has already been set to an upstream

git push

Note: The local branch must be set to track to remote branch. Use this command to set the branch to upstream.

iii. To push to a specific origin

git push origin <remoteBranchName>

iv. To pull

To pull from the remote branch and directly merge/integrate into HEAD recursively

git pull

Use this command to set the branch to upstream.

v. To pull from a specific origin

To pull from the specific remote branch and directly merge/integrate into HEAD

git pull origin <branchName>

🡅 back to TOC

6. To fetch

i. Synchronizing to the central repository

To synchronize your local repository to that of the central repository's main branch

git fetch origin

Any branch that was behind the central repository's main branch will be downloaded.

ii. Fetching a remote branch

To fetch and update a branch exists locally and remotely or to fetch a remote branch locally. Checkout to that branch

git fetch <remote> <branch>

🡅 back to TOC

7. Merging

Merging is simply combining (or merging) branches
As a beginner with git, when working in a team with others, I merge my branches on Github (after creating pull requests) so I could compare changes and easily resolve any conflicts. Then pull the work down to my local branch

i. Merging two local branches

On the terminal, to merge a branch into another, you have to be in the branch you want to merge into. Then run the command

git merge <branch-to-be-merged>

ii. Merging a remote branch into a local branch

First fetch the branch, then merge using the merge command above

Stackoverflow introduces filters

𝐁𝐚𝐛𝐢 ✨ — Fri, 01 Apr 2022 02:18:18 +0000

On MARCH 31st 2022, Stackoverflow added filters to its site. There are 8 different styles, looks inspired by the OG GOAT, Windows 95, and Hot Dog mode

The stackoverflow blog was, hilariously, a whole vibe but ended with an april fools tag.

What are your thoughts on the new trend?

5 Awesome HTML and CSS projects to build (with codepen preview)

𝐁𝐚𝐛𝐢 ✨ — Mon, 14 Feb 2022 01:42:03 +0000

Coding is a fun and exciting practice but how do you measure your progress in your learning journey?

Here are some cool ideas your could build to put your skills to a test.

1. Survey Forms

Survey forms are very popular first projects and are a great way to test your skills on HTML form validation. Also, creating a survey form is a great way to test the different form elements (radio, checkboxes, textareas, etc.) all in one form.

You could start with a simple form like this:

and then move to forms with more styling and responsiveness like this survey form:

2. Tribute Page
A tribute page is one of the simplest web pages you could build as a beginner as it requires just basic skills in HTML and CSS

You could experiment with different concepts in CSS like adding images, links, paragraphs and then using CSS to beautify the page. This is an example of a simple responsive tribute page:

..and this is an example of a vibrant tribute page by Michael Schneider:

3. Landing pages

Creating a landing page is a delightful process. You let your imaginations fly. Also, you get to test several skills in HTML and CSS like positioning contents on the page, footers, creating columns and sections, color palettes and the list goes on.

You could start with something simple like Brad Traversy's video landing page

and then challenge your skill to build more complicated pages like this product landing page:

4. Technical Documentation

Even without javascript, it is possible to create a technical documentation page with just HTML and CSS. You have the freedom to create.

To build the technical documentation, you could use this sample freeCodeCamp provides.

With CSS, you could create sleek documentation page like Markus Lising's page

or may decide to spice up your page with animations like this documentation

5. Personal Portfolio

There is a temptation to want to create a portfolio only when you've built more skills or learned more technologies. Good news, you don't need to wait for a certain time in the future. You can do it now, with just HTML and CSS.

If you have doubts, here a some amazing portfolio's other have built...

credit: Thiago Ferreira

credit: Aaron Cuddeback

credit: Thomas Vaeth

Conclusion

Building project while studying definitely helps grasping knowledge, skills and also learning other things you might have skipped. These are some of the projects I worked on while starting out with HTML and CSS. I hope building them helped you as they helped me.

Happy coding! 🌱

Aside: All the pens I didn't reference are mine.

                                                      Babi💞

Forem: 𝐁𝐚𝐛𝐢 ✨

Javascript cheat sheet: .slice() and .splice()

What you should know

1) .slice()

2) .splice()

My very first Tech YouTube video

JSX for beginners (and how it differs from HTML)

What is JSX

Why use JSX

How JSX differs from HTML

1. Self-closing tags

2. Adding JavaScript expressions

3. HTML attributes change naming conventions

4. Inline CSS is an object

🎨 Understanding the CSS rgb model (Visualized)

Secondary colors

1. Yellow

2. Cyan

3. Magenta

Tertiary Colors

1. Orange

2. Spring Green

3. Violet

4. Chartreuse green

5. Azure

6. Rose

Interesting! Make different image parts clickable with HTML only (codepen preview)

Understanding how image maps work

For example

Example: Clickable World Map

An Act of Kindness that Helped your Career

Setting up a new dev machine

8 Shocking HTML tips you probably don't know about

1. Capture attribute to open your device camera

2. Automatic website refresh

3. Activate spellcheck

4. Specify file type to be uploaded

5. Prevent translation

6. Entering multiple items into the input tag

7. Creating a poster(thumbnail) for your videos

8. Automatically download on link click

Grinding as a developer

A set of handy git commands for beginners to make your life easier!

1. First-Time Git Setup ⚒

i. To setup your Git username

ii. To setup your Git username

iii. To check Git configuration

2. Creating A Repo 🖊

i. To create a local repo

ii. To clone an existing repo

iii. Linking to a remote repo

3. Managing Local Changes (including undos) 🛠

i. Checking files you've worked on without committing (unstaged files)

ii. To stage files

iii. To unstage (unadd or uncommit 😄) files

iv. To commit staged files

v. To stage and commit all changes at once

vi. To correct your last commit message

vii. To rollback commits

4. Managing Branches

i. To list all existing local branches

ii. To list all branches (remote and local)

iii. To create a new branch on the current head

iv. To switch to an existing branch an update current working directory

v. git checkout -b

vi. To delete a branch

vi. To rename a branch

vii. To set local branch to track remote branch

vii. Pushing a branch for the first time

5. Pushing And Pulling

i. To push local branch for the first time

ii. To push

iii. To push to a specific origin

iv. To pull

v. To pull from a specific origin

6. To fetch

i. Synchronizing to the central repository

ii. Fetching a remote branch

7. Merging

i. Merging two local branches