DEV Community: Akhlak Hossain Jim

HTML Attributes

Akhlak Hossain Jim — Thu, 10 Mar 2022 06:25:24 +0000

What are attributes?

In an easy way, it's the first creepy thing you will learn in HTML that won't make any sense at the time. Because, well it doesn't affect much for most of them.

But for some, it's necessary like img, a, etc.

In a professional way, as a web developer, we develop code for vast fo people and we need a beautiful and interactive website that a user will love. So we use them.

I will talk about the common attributes,

`src` and `alt`

src is an essential attribute for the <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> tag to function. So in img tag, we use something like this <img src="my_image.png" alt="" > So, src use for mentioning the URL for the image. And don't forget to use a descriptive alt tag, because if anything goes wrong with the URL it will show the text instead. So finally It will look something like this <img src="my_image.png" alt="a demo image" >. Another reason for using alt text is, the people uses a browser reader for their browsing experience the browser reader reads the alt text for an img tag.

`href`

It is necessary for the a tag to work. It defines the address you will be going after clicking the text within an a tag. So, we use it like <a href="https://ah-jim-seed.web.app/">my website</a>.

class and id

Oh man, These are the most common day-to-day used attributes for you as a web developer. You will use them to style an element or make that interactive. You can use in any HTML element in the opening tag like <tagName class="" id=""> ie, <div class="demo__class" id="unique_ID">. One thing to keep in mind here, the class can be repeatable on the page but the ids should be unique on that particular page and they are not required to write HTML code.

height, width, and style

These are optional and you use them in any of the tags you can use in the body tag. So, height defines the right of that element, width defines the width, and style let you use CSS within the tag itself. you can write them this way <p height="100px" width="20px" style="color: red;">...</p>

lang

Lang is used to defining the language used in the element. The value are language code, it can be used as <html lang="en">.

In the head tag we use different sets of tags and attributes we will discuss them next week.

Reat.js Internationalization

Akhlak Hossain Jim — Wed, 02 Mar 2022 17:03:52 +0000

I recently learned about the implementation of internationalization in react app. Let me tell you the process.

There is a lot of libraries to help you implement i18n in React.js but I used i18next for the task.

Installation:

npm install i18next react-i18next i18next-browser-languagedetector

Let's install a few packages to make it work. Like i18next, react-i18next, and i18next-browser-languagedetector.

Just run the snippet in the terminal.

Then create a file named "i18n.js" or whatever you have chosen to, then add the following code:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";


import English from "./en/translations";
import Bangla from "./bn/translations";


i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // we init with resources
    resources: {
      English: English,
      Bangla: Bangla,

    },
    fallbackLng: "English",
    debug: true,


    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations",


    keySeparator: false, // we use content as keys


    interpolation: {
      escapeValue: false,
    },
  });


export default i18n;

I know there is no such file called English in the "./en/translations" folder, and we will create that later. But for now, let's move on to the next step.

In the index.js file add the following line.

import "./i18n";

By this translations are now globally accessible.

Now let's create the translations,

First, create folders and files in the following structure:

and add translations,

In en/translations.js

const English = {
  translations: {
    "NAME": "Akhlak Hossain Jim",
    ...
  },
};

export default English;

And in bn/translations.js

const Bangla = {
  translations: {
    "NAME": "আখলাক হোসেন জিম",
    ...
  },
};

export default Bangla;

In this way, you can set as many keys and values with short names and strings.

And it's now time for using it. Let's go to the App.js file or wherever you want to use, and use as follows:

import { useTranslation } from "react-i18next";


export default function App() {
  const { t } = useTranslation();


  return (
    <div>{t("NAME")}</div>
  );
}

And now it's all set.

These are the basic steps for adding i18next.

Tag Breakdown🧱

Akhlak Hossain Jim — Tue, 01 Feb 2022 07:04:25 +0000

Have you wondered, why are we writing HTML elements like <p>...</p> or some structure like that?

And what the cr*p is an HTML element, in the first place?

Let me demonstrate first for an example,

<p>My Cat is very grumpy</p>

Opening tag: It instructs a browser, "Hey you, now start reading content after me as a paragraph, or whatever the tag I meant for."
So, as

Browsers read from Top to Bottom & Left to Right.

It will read the content as a paragraph.

Content: This is the part we, as a user or viewer see. So, the letters you are seeing as a word and sentence, is the part that is written as content in HTML.

Closing Tag: This is the sign for browsers that, "You have done a good job, now you can stop reading content as paragraph and move on for next instruction."

So, let's back to the second question: What an HTML element is?
So, in general,

The consistency of the opening tag, content, and closing tag is called an HTML element.

But, that's not the only way of writing an element. Elements can be a lot more complex and nested in other elements. Like, hope you remembered from the last week <h1> tag and <p> tag was inside <body> tag/element. And we can nest other tags as well, like:

<p>My cat is <strong>very grumpy.</strong></p>

Will display 'My cat is very grumpy.'

But, there is some tag/element that don't need content or closing tag, ie:

<img src="image.jpg" alt="" >

This tag is used for showing an image. So, this will be an image element, but it doesn't need any content or closing tag. It's called a self-closing tag (But there is a lot. So we will dedicate our week to the image element later on.)

And tag uses attributes simply for their name or some complex instruction or accessibility. We will be discussing those in the next week so till then, stay safe.

Visit This Web App for all posts in one place.

Center a Div | Jim

Akhlak Hossain Jim — Sat, 29 Jan 2022 11:23:24 +0000

Centering a div can be tricky at the beginning.

But no worries, It's simple and you can do it in a lot of ways,

Side note: HTML code:

<div class='parent'>
  <div class='child'></div>
</div>

Using flex:

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

and whatever the case is your child element is always centered.

Using grid:

.parent {
  display: grid;
  align-items: center;
  justify-content: center;
}

Using grid: (you kidding! again!)

.parent {
  display: grid;
  place-items: center;
}

It's just a shortcut of using grid.

Involving both elements:

.parent {
  display: flex;
}
.parent .child {
  margin: auto;
}

or,

.parent {
  display: grid;
}
.parent .child {
  margin: auto;
}

And there you go. You can now center your element however you want.

See, this Pen as an example reference.

HTML Anatomy | Jim

Akhlak Hossain Jim — Sat, 29 Jan 2022 09:34:07 +0000

As HTML is the soul of the web, we must know how it works (we will focus on writing HTML).
Even though the HTML has different versions in his family, we only speak in the updated version, which is HTML5. So let's start wondering about HTML5.
So this is the basic HTML page structure:

<!DOCTYPE html>
<html>
  <head>

  <title>Title of the Page</title>

  </head>


  <body>

    <h1>A Heading</h1>
    <p>A paragraph.</p>

  </body>
</html>

There you go with your first HTML code.
But wait a minute 😗, what is that? I got the 'Title of the Page', 'A Heading', and 'A Paragraph', but what are those in <..>..</..>?
Right these are HTML tags. Let me break it down.
First,

<!DOCTYPE html>

is telling the browser, "Hey, look, I am an HTML5 document. So don't try to read me like other versions of my family, Just read me like me (HTML5)".
So, the browser hears the soul and reads the rest.
Then,

<html></html>

This tag is the root element of the HTML page. So whatever you are seeing right now is in between this tag.
Next, we have,

<head></head>

Which tells the browser some useful information about your website/page that you and I don't see so often. In between, we declare the title, description, keywords that appear in the search result. It also holds the CSS and JavaScript contents, character set declarations, and more. Which we will be discussing later on. let's move on to the

<title></title>

tag. Oh, man! Shouldn't you give your page a name? And if you are saving the page to the bookmark, what is the name your browser should remember(save)/reference it? So this is how the web knows the name of your web or HTML page. Like

Oh, that's a lot we don't see, do we?
Now, time to discover what viewers are seeing on the website.

<body></body>

This tag tells the browser, "Browser, listen, I've given you a lot of information that viewers can't see. Now whatever declared in between me, show that to the viewers."
Let's declare some,

<h1>A Heading</h1>

<p>A paragraph.</p>

Which gives us,

With <h1></h1> you the browser give me a big size of heading.
And with <p></p> you just declared a simple text.
Note, Html doesn't care about extra spaces. Extra spaces will be removed automatically by the browser.
With everything we just discussed, the web page looks like,

To know even more, visit: MDN Doc
Subscribe to LinkedIn News Letter
To see everything in one place, Check and install this web app: Web App

Console.table() | Jim

Akhlak Hossain Jim — Sun, 16 Jan 2022 15:22:46 +0000

What is console.table()?

I know you are mostly using console.log() for displaying some data for a lot of reasons. One of the reasons might be to just show a fetched array of data.

Please stop doing that, there is a best method for showing an array of data, which actually shows the JSON/array data as a data table. Which makes debugging or seeing data in a more readable way. You can see the field name at the top just like the table.

It is as you can guess is console.table().

It shows all the fields even if some object might not have that particular field value(the box remains empty). So you don't have to look through all the data if you know, how hard it is to see a big array of objects.

So, at least try that out to make your life easier.

To know more check the MDN documentation: here.

MongoDB Submission Post Jim Airbnb

Akhlak Hossain Jim — Wed, 12 Jan 2022 12:23:49 +0000

Overview of My Submission

Submission Category: Choose Your Own Adventure

Link to Code Here.

Additional Resources / Info

See video here.

Tech Stack:

Frontend:

React.js

Backend:

Node.jd
express.js

Database:

MongoDB

What is SSR or Server-side rendering?

Akhlak Hossain Jim — Mon, 10 Jan 2022 17:54:42 +0000

In the arena of SPAs (Single Page Application) or React/Vue/Angular it's essential to know what server-side rendering is.

So, What is server-side rendering?

Server-side rendering is what you can say rendering in server.

As all JS libraries give us some functions that actually render all HTML, all styles, and all interactivity. So, that is what gives you the fast loading. But here comes the tricky part all browsers may not support JavaScript or in some cases, you shouldn't rely on JavaScript.

So in server-side rendering, all JavaScript functions run in the Server, and when your browser requests for data, it provides the compiled HTML, CSS, etc. Your website just renders like a pure HTML, CSS-written website.

Okay, But why should I care?

In this bright time of technology we just don't write HTML. It's the digital face of your brand. So you must ensure that everyone can see what you intended everyone to see. You cannot predict the end-user issues or what and what not that browser doesn't supports but for sure that browser supports plain HTML, CSS, so you should provide that as much as you can, to prevent unexpected behavior or an error.

That's where server-side rendering comes in handy. As it provides the server-side rendering, it actually helps the browser or any browser that asks for data to show it doesn't matter if that browser supports JavaScript or not.

How can we do that?

There are lots of frameworks out there, are just ready for use like Next.js, Gatsby.js. I personally like to use Next.js but every other framework is fine as well. It also provides code splitting and a whole other bunch of handy functionality. But with all of this, It's just making sure your powerful JS framework gives the most out of it, by ensuring server-side rendering.

Are there any other rendering methods out there?

Yes, as from previous you can guess that the framework provided JS functions can be run by and in your browser (which all updated browsers can just run fine) but ensuring the best user experience is what we frontend developers do.

So lastly, there is a lot of libraries and frameworks for you to make a difference, choose what works for you best and keep accessibility in mind and do good deeds.

Import your Contribution from Bitbucket to GitHub | By Jim

Akhlak Hossain Jim — Sun, 19 Dec 2021 15:30:15 +0000

GitHub is one of the most popular Version Control Software in the software industry. And also popular with software developers because of its simplicity, beginner-friendly, and a lot of functionality that developers love.

One of the most valuable functionality is showing the account's activity. And even a lot of company asks to provide candidates GitHub profile for consideration. For that, it becomes important to show your activities there.

But the problem is, GitHub isn't the only solution out there. There is Bitbucket, GitLab, and many more for Version Control. So, let's say your company is using Bitbucket instead of GitHub. Using them is pretty much the same with git-bash. But in GitHub, that won't be recorded as an activity. That's problematic because you also need to show the activities on GitHub.

So, how can you make your Bitbucket activities visible in GitHub as well?
You can find some tools to do that, But you can also solve the issue using PowerShell.
And I found it very easy and useful.

So you can run the below code to do all things at once.

git clone --mirror https://user-name@bitbucket.org/some-app.git ; cd .\some-app.git ; git remote rename origin bitbucket ; git remote add origin https://github.com/user-name/github-version.git ; git push origin master ; cd .. ; Remove-Item ".\some-app.git" -Recurse -Force

Alert You should have a repo dedicated to the project you are transferring. Replace the some-app.git to your [repo name].git, and change the user-name to your user name. And that's it, you are good to go.

If you want to know more about what's going on? Then, read below.

So, let me break down the steps for you to understand what's going on there,

So first of all, you are pulling your code from Bitbucket to your Local machine by using git clone --mirror https://user-name@bitbucket.org/some-app.git.
Note: Use your repo link instead of https://user-name@bitbucket.org/some-app.git.

After that, what we are doing is we are just going to that directory we just pulled out from Bitbucket by cd .\some-app.git
Note: use the .\some-app.git should be your [repo name].git.

Now, It's time to get excited. Because we are gonna be pushing this to GitHub.

So first, we are changing the origin of the project (origin is something that tells in which Version Control Software is the item has been stored ) by git remote rename origin bitbucket.

Secondly, we are adding the origin to a Github repo by git remote add origin https://github.com/user-name/github-version.git.
Note: You should have a Github repo dedicated to the project and change the https://github.com/user-name/github-version.git link to your repo link.

Thirdly, we are pushing the codes to Github by git push origin master.

Finally, we are gonna be cleaning the files/folders in your local machine by cd .. going back to the parent folder and removing all files by Remove-Item ".\some-app.git" -Recurse -Force.

Bonus, You can do the same to add your contribution from GitLab to Github with the same process but instead of bitbucket or bitbucket repo link add gitlab and gitlab repo link.

Please let me any questions in the comment. And please share.

Thanks,
Akhlak Hossain Jim