DEV Community: Rezaul karim

Text Styling in CSS

Rezaul karim — Wed, 22 Jun 2022 09:51:26 +0000

CSS Text Styling

Text Styling: There on Many texts and images are the website, isn’t it? The more beautiful the text, the more beautiful the website. To give CSS we have given below all the features / rules of the text. There is no problem if not understanding anything by reading, everything will be easily understood when we look at the example.

color Used to give color to writing.
direction We write English and Bengali from left to right, some countries have to write like Arabic from right to left. This will be from right to left or from left to right so the direction is set with CSS rule.
letter-spacing This property is used to set the distance from one letter to another.
line-height The height of a line is set by that.
text-align How to format / align the text, right or left or center is set.
text-decoration Used to give a line in the middle of a writing or above or in the middle.
text-indent In newspapers we often see that there is a little gap before the word in the first line. Such a gap is given in the HTML file with text-indent.
text-transform Used to change text in lowercase or uppercase letters.
word-spacing Used to give space between each word in the text.

In addition to these, there are some other properties of CSS text styling.

CSS Text Color:

In the meantime, we’ve seen the text-color change . Let’s see again

p{
  color:red;
}

Which will change the text of all the ‘P’ tags to red. Instead of the name of the color, the color code can also be given.

CSS Text Direction:

We write English and others from left to right, some countries have to write like Arabic from right to left. This will be from right to left or from left to right so the direction is set with CSS rule. Left-to-right is set by default. The way we write. If you create a web site for a country that writes from right to left, you need to set it right-to-left. And it sets:

body{
  direction:rtl;
}

rtl means right-to-left;

CSS Letter Spacing:

letter-spacing: This property is used to set the distance from one letter to another.

body{
  letter-spacing:5px;
}

The more pixels I give, the more space there will be between the two characters. Again if letter-spacing: -5px; Di, then one color will fall on another color.

For example, paste the following code into an HTML file and then look in the browser:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {letter-spacing:5px;}
      h1 {letter-spacing:-3px;}
    </style>
  </head>

  <body>.
    <h1>This is a heading </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.     Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>

  </body>
</html>

CSS Text Align

How the text-align texts are set / aligned is set to right or left or center. Three types can be aligned, center, left & right. Normally all the text is left aligned. For example, paste the following code into an HTML file and then look in the browser:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .center{text-align:center}
      .left {text-align:left}
      .right {text-align:right}
    </style>
  </head>

  <body>
    <h1 class="center">This is centered text</h1>
    <h1 class="left">This is left aligned text</h1>
    <h1 class="right">This is right aligned text</h1>
  </body>
 </html>

CSS Text Decoration

Used to take a text with text-decoration or to give a line above or in the middle. Three types of text-decoration can be done, underline, overline and line-through. For example, paste the following code into an HTML file and then look in the browser:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #underline {text-decoration:underline;}
      #overline {text-decoration:overline;}
      #line_through{text-decoration:line-through;}

    </style>
  </head>

  <body>
    <h1 id="underline">a text with underline</h1>
    <h1 id="overline">a text with overline </h1>
    <h1 id="line_through">a text with line-through with it</h1>
  </body>

 </html>

Read full article about CSS Text Styling properties continue reading on...

For more exciting tips and tricks about programming and coding please read our others articles

Find My page on Instagram: @stack.content

Find Me on Twitter: @mrezaulkarim_

Text Typing Animation (running text)

Rezaul karim — Thu, 16 Jun 2022 07:07:52 +0000

Beautiful Portfolio Gallery

Rezaul karim — Sun, 24 Apr 2022 08:22:39 +0000

Describe CSS Background Properties

Rezaul karim — Sat, 23 Apr 2022 10:18:33 +0000

CSS Background Properties

We regularly see that the back of a website is the different color. Some websites also have images on the back. Somewhere again there is more than one image. Some of these are set with CSS Background Properties. CSS Background is used to set a color or an image behind an entire web page or a specific HTML element or a small part of an element. We can use the following style rules to give CSS Background Properties which are mostly used.

background-color: Used to give a specific color.

background-image: Used to give one or more images.

background-repeat: The rule is written whether to repeat the image file or not.

background-attachment: The rule is written whether the image used in the background will scroll or stay in a certain place.

background-position: The rule is where the position of the image will be written.

I will try to give examples of all these on one page. Let’s start with background-color. background-color is the color of the back of an element. And it is written like this:

background-color:

h1{
background-color:red;
}

Color code can also be used instead of color name. If you go here, you will find the names and codes of HTML color.

h1{
background-color:#808080;
}

background-image:

background-image: background-image Sets an image behind the HTML element. Here we will set an image in the background of our entire site with background-image. For that we will write:

body {
background-image: url(background.png);
}

You have to set where the image is in brackets with url. So we did above. If the image and the html file are in the same folder, then just enter the name of the image. E.g. background-image: url (highway.jpg);

Now let’s come to background-repeat:

If our image is much smaller than our web page, then it can be seen that the image is shown again and again. We can turn it off if we want.

body {
background-image: url(background.png);
background-repeat:no-repeat;
}

★ No-repeat will show the image only once.

We can repeat a direction such as x axis or y axis if we want. For example background-repeat: repeat-x will repeat the x axis. background-repeat: If you repeat-y, the y axis will repeat.

For more about CSS Background properties continue reading...

CSS Font Face

Rezaul karim — Tue, 28 Sep 2021 15:10:57 +0000

Note: Before reading this article, you need to know about CSS Font Family. I assume you know about the CSS font family.

Font Face is a great feature of CSS. Think You like a font you want to use, what next? Yes, that's why Fontface.

Fontface is written in CSS. And you have to write as follows:

@font-face
{
font-family: FontFace;
src: url('MyFavoriteFont.ttf')
 ,url('MyFavoriteFont.eot'); /* For IE */
}

font-family: FontFace; You can name your font family with this. You can give any name instead of FontFace. And later you can use the CSS font the way Family uses it: font-family: FontFace;

Add the url of your font with src: url (‘MyFavoriteFont.ttf’). IE does not support ttf [True Type Font]. For that you have to use eot (Embedded OpenType) font. For this we have added utl of eot font with a comma. If you do not have eot font, then you can get it by doing a little search on Google.

Our fontface is ready. Now we can use it anywhere. As much as you want.

To use, you have to write the font family as you write it

.myDiv
{
font-family:FontFace;
}

And the whole example:

<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: FontFace;
src: url('MyFavoriteFont.ttf')
 ,url('MyFavoriteFont.eot'); /* For IE */
}

.myDiv
{
font-family:FontFace;
}
</style>
</head>
<body>

<div class="myDiv">
Some text with CSS3 Font Face feature.
</div>

</body>
</html>

Enter the name of your font in place of ‘MyFavoriteFont.ttf’. Note: You must enter the url where you will upload the fonts. Now if you open a directory with fonts and put the fonts in it, you have to type ‘fonts / MyFavoriteFont.ttf’ etc.
If you don't want to bother so much, you can use it in a simpler way. There are many fonts uploaded to Google Web Fonts. http://www.google.com/fonts/

You can use it by going here and selecting the font of your choice and clicking on the Quick Use button. Add the following link to the header section of your site:

<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>

Nothing more to do. Then just add the name of the font to the fontfamily: font-family: ‘Caesar Dressing’, cursive;

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Sonsie+One' rel='stylesheet' type='text/css'>
<style>
.myDiv
{
font-family: 'Sonsie One', cursive;
text-align:center;
margin-top:10%;
color:#808080;
}
</style>
</head>
<body>

<div class="myDiv">
Some text with CSS3 Font Face feature.
</div>

</body>
</html>

You can also read:

For more exciting tips and tricks about programming and coding please read our others articles

Find My page on Instagram: @stack.content

Find Me on Twitter: @mrezaulkarim_

Learn about Node.js - Popular JavaScript Runtime ⚡

Rezaul karim — Tue, 14 Sep 2021 05:48:06 +0000

What is Node.js ?

Node.js is a server-side JavaScript run-time environment that works cross-platform and is open source. Node.js uses event drive and non-blocking models that make this framework light weight and efficient. Node.js package ecosystem - "NPM" is the world's largest ecosystem of open source libraries.

Actually node.js is -

A platform that allows us to run on a JavaScript computer or server.
Helps to read, delete and update files.
Helps to easily communicate with the database.

Recommended:

Why is Node.js so popular?

It uses JavaScript.
Very fast (using V8 engine and non-blocking code)
Open source package has many large ecosystems such as - NPM
Very good for real time services such as - Chat service.

Let's know about some features of Node JS:

1) Swift: Node that S's library code execution is much faster.

2) I / 0 Asynchronous and Even-Driven: All APIs are asynchronous which means the server does not wait for the API to back up the data.

3) Single threaded: Node that uses single threaded model with S event loop.

4) High Scalable: Node that S uses an event mechanism that allows the server to respond to non-blocking manners that make it scalable.

5) No buffering: Node that s processing time significantly reduces when uploading audio and video files. So buffering is not.

6) Open Source: Being open source, Node JS has come up with many amazing models that are used to add better capability to Node JS applications.

7) License: It is licensed under MIT.

Recommended:

For more exciting tips and tricks about programming and coding please read our others articles

Find My page on Instagram: @stack.content

Find Me on Twitter: @mrezaulkarim_

A huge list of web design tools

Rezaul karim — Sat, 07 Aug 2021 09:59:46 +0000

This is a very big list of Web Design tools for designers. If you want improve your skills and be a productive designer, hope these resources help a lot. Maybe, some resources you known already and some you find here that you don't know before.

We categorize all the resources as:

Typography
Infographics
Colors
Stock Photos
Stock Graphics
Graphics/Pictures Editor
Logo Design
Prototyping
Collaboration
Inspiration

Recommended:

1. Typography

★ Google Fonts
https://fonts.google.com/

Find and use high quality fonts for your website.

★ Fonts Ninja
https://www.fonts.ninja/

Identify that cool font on the page you are browsing.

★ FontStruct
https://fontstruct.com/

FontStruct is a free, font-building tool. With FontStruct you can easily create fonts using geometrical shapes.

★ Font Squirrel
https://www.fontsquirrel.com/

Take advantage of the best database of free fonts.

★ 1001 Fonts
https://www.1001fonts.com/

Scan a huge library of fonts for personal or commercial use.

★ What font is
https://www.whatfontis.com/

Using a catalogue of 790K+ fonts (commercial or free) and font finder AI, for every image uploaded It shows over 60 fonts. Upload your image and easily determine its font.

★ Type Light
https://www.cr8software.net/typelight.html

freeware, bare-bones font editor. With Type light you can design, edit and convert OpenType TrueType and PostScript fonts.

★ Font Flame
https://besttoolsfor.webflow.io/tool/fontflame

It’s the Tinder for font pairing. Easily see what fonts work together.Swipe to find the best match.

2. Infographics:

★ Canva
https://www.canva.com/

Amazingly simple design graphic software to create any content you need.

★ Easelly
https://easel.ly/

Easelly is a simple infographic maker that lets you visualize any kind of information.

★ Infogram
https://infogram.com/

Create engaging infographics and reports in minutes. Infogram is an intuitive visualization tool that empowers people and teams to create beautiful content.

★ Visage
https://visage.co

Anyone can create effective, on-brand graphics to engage audiences of any size.

★ Vizualize me
https://vizualize.me

Your CV is boring? Turn it into an original infographics.

★ Venngage
https://venngage.com/

Make hundreds of infographics, media, posts and reports with this simple tool.

★ Draw.io – Diagrams.net
https://app.diagrams.net/

A complete flowchart maker suitable for both internal and external projects.

★ Piktochart
https://piktochart.com

Improve your internal and external communication with Piktochart. Quickly turn any text- or data-heavy content into a visual story that your audience will love.

★ Visme
https://visme.co

Create visual brand experiences for your business whether you are a seasoned designer or a total novice.

★ Gliffy
https://www.gliffy.com/

Gliffy’s diagramming software was built by a pair of engineers who wanted all the ease of drawing diagrams on a whiteboard packed into one powerful, enterprise-grade diagram tool.

3. Graphics/Picture editor:

★ Illustrator
https://www.adobe.com/products/illustrator.html

One of the best web design tools. Build amazing vector arts with this must have tool.

★ Photoshop
https://www.photoshop.com/en

Another most used web design tools. Create and enhance your photoshops, webdesigns and even your 3D Artworks.

★ Daz Studio
https://www.daz3d.com/

Make incredibly realstick humans and animals in 3D.

★ DrawPlus
https://download.cnet.com/Serif-DrawPlus-Starter-Edition/3000-2191_4-75547730.html

Draw handsome vector arts at a reasonable price

★ Pixlr
https://pixlr.com/

Pixlr the Online Photo Editor that lets you edit photos and create great designs right in your browser for Free.

★ Inkspace
https://inkscape.org/

The open source alternative of Illustrator.

★ Aviary
https://aviary.en.uptodown.com/android

Edit your photo from a mobile app or web app.

★ Blender
https://blender.org

Open source and entirely free 3D creation software.

★ GIMP
https://www.gimp.org/

GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.

★ Affinity Photo
https://affinity.serif.com/en-gb/photo/

Professional Photo editing software for Mac Only

For full articles in more organized way on my blog please Continue Reading

For more exciting tips and tricks about programming and coding please read our others articles

Find My page on Instagram: @stack.content

Find Me on Twitter: @rezaulkarim014

Useful CSS Shorthand Properties

Rezaul karim — Thu, 17 Jun 2021 12:22:38 +0000

#Please Do Not Copy & Paste this Article on Your Website

CSS Shorthand

CSS Shorthand properties are properties that let you set the values of multiple other CSS properties simultaneously. Using shorthand property, you can write more short and often more readable style sheets, saving time and energy.

This Shorthand properties makes your code optimized and ‘SEO’ friendly. Let’s discover some useful CSS Shorthand properties :-

01. Background:

Longhand:

The following declarations …

.class {
     background-color: #ddd;
     background-image: url(image.png);
     background-repeat: no-repeat;
     background-position: top left;
     background-attachment: fixed;
  }

Shorthand:

… can be shortened to just one declaration:

.class {
      background: #ddd url(img.png) no-repeat top left fixed;
  }

02. Font

Longhand:

The following declarations …

.class {
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 1em;
    line-height: 1.6;
    font-family: Arial, Helvetica, sans-serif;
  }

Shorthand:

… can be shortened to just one declaration:

.class {
      font: bold italic small-caps 1em/1.6 Arial, sans-serif;
  }

03. Margin

Longhand:

The following declarations …

.class {
     margin-top: 1em;
     margin-right: 1.5em;
     margin-bottom: 2em;
     margin-left: 2.5em;
  }

Shorthand:

… can be shortened to just one declaration:

.class {
      margin: 1em 1.5em 2em 2.5em;
  }
/* or */
.class {
      margin: 5em 3em;
  } /* up/down - 5em & left/right - 3em */

04. Padding

Longhand:

The following declarations …

.class {
     padding-top: 1em;
     padding-right: 1.5em;
     padding-bottom: 2em;
     padding-left: 2.5em;
  }

Shorthand:

… can be shortened to just one declaration:

.class {
      padding: 1em 1.5em 2em 2.5em;
  }
/* or */
.class {
      padding: 5em 3em;
  } /* up/down - 5em & left/right - 3em */

05. Border

Longhand:

The following declarations …

.class {
     border-width: 1px;
     border-style: solid;
     border-color: black;
  }

Shorthand:

… can be shortened to just one declaration:

.class {
      border: 1px solid black;
  }

06. Animation

Longhand:

The following declarations …

.class {
     animation-name: motion;
     animation-duration: 2s;
     animation-timing-function: ease-in;
     animation-delay: 1s;
     animation-direction: alternate;
     animation-iteration-count: infinite;
     animation-fill-mode: none;
     animation-play-state: running;
  }

Shorthand:

… can be shortened to just one declaration:

 .class {
      animation: motion 2s ease-in 1s alternate infinite none running;
  }

07. Outline

Longhand:

The following declarations …

.class {
     outline-width: thick;
     outline-style: dotted;
     outline-color: red;
  }

Shorthand:

… can be shortened to just one declaration:

 .class {
      outline: thick dotted red;
  }

08. Transition

Longhand:

The following declarations …

.class {
    transition-property: extend;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;  
  }

Shorthand:

… can be shortened to just one declaration:

.class {
    transition: extend 2s linear 1s;
  }

09. Text-decoration

Longhand:

The following declarations …

.class {
    text-decoration-color: blue;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;  
  }

Shorthand:

… can be shortened to just one declaration:

 .class {
    text-decoration: blue underline solid 2px;
  }

10. Flex

Longhand:

The following declarations …

.class {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: auto;
  }

Shorthand:

… can be shortened to just one declaration:

.class {
      flex: 1 1 auto;
  }

11. List

Longhand:

The following declarations …

.class {
     list-style-type: square;
     list-style-position: inside;
     list-style-image: url("image.png");
  }

Shorthand:

… can be shortened to just one declaration:

.class {
      list: square inside url("image.png");
  }

12. Columns

Longhand:

The following declarations …

.class {
    column-width: 40px;
    column-count: 4;  
  }

Shorthand:

… can be shortened to just one declaration:

.class {
    columns: 40px 4;
  }

13. Grid

Longhand:

The following declarations …

.class {
    grid-template-rows: 100px auto 300px;
    grid-template-columns: repeat(2, 1fr) 100px;  
  }

Shorthand:

… can be shortened to just one declaration:

.class {
    grid: 100px auto 300px / repeat(2, 1fr) 100px;
  }

14. Grid-area

Longhand:

The following declarations …

.class {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 4;
  }

Shorthand:

… can be shortened to just one declaration:

.class {
    grid-area: 2 / 1 / span 2 / span 3;
  }

15. Grid-row

Longhand:

The following declarations …

.class {
    grid-row-start: 1;
    grid-row-end: 3; /* or */ 
    grid-row-end: span 2; 
  }

Shorthand:

… can be shortened to just one declaration:

.class {
    grid-row: 1 / 3 ;
    /* or */
    grid-row: 1 / span 2;
  }

16. Grid-column

Longhand:

The following declarations …

.class {
    grid-column-start: 1;
    grid-column-end: 3; /* or */
    grid-column-end: span 2;  
  }

Shorthand:

… shortened to just following one declaration:

 .class {
    grid-column: 1 / 3 ;
    /* or */
    grid-column: 1 / span 2; 
  }

These are the most useful CSS Shorthand properties. You can use on your project. And Let me know if you get any help with this.

Read this article on my blog.

For more exciting tips and tricks please read our others articles

Find My page on Instagram: @stack.content

Awesome Animation Libraries – (CSS + JavaScript )

Rezaul karim — Wed, 16 Jun 2021 17:59:35 +0000

#Please Do Not Copy & Paste this Article on Your Website

After Designing a static website with HTML and CSS most of the time, you need to add some animation on your website.

There are many CSS animation and JavaScript animation you can find on the Internet. But sometimes you may confused what should you use on your website.Don’t worry, here we discuss about top 10 Animation Libraries.

These libraries are really good fit with your website and you can find all the beautiful and most uses animation libraries here. However, you can easily use any one from this list below:

To begin with:

1. wow.js

Very powerful and friendly animation library it is.Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

You can easily download it from here .

2. animate CSS animation

Animate CSS is free animation libraries. It deliver the most power for the smallest file size. Relatively, easy to use for reasonably code-savvy designers and developers.

You can easily download it from here .

3. bounce.js

Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations. Animation that you can do with bounce.js: scale, rotate, translate, skew and so on …

You can easily download it from here .

Recommended: CSS Shorthand Properties

4. csshake -CSS animation

csshake. Some CSS classes to move your DOM!

You could download the complete csshake.css file or separated files for each shake animation (i.e csshake-little.css). Each one expanded or minified.

5. anime js

Anime. js is a lightweight JavaScript animation library with a simple, yet powerful API. There are many JavaScript animation libraries out there. But anime.js is one of the best. It’s easy to use. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

6. GSAP – GreenSock

Professional-grade JavaScript animation for the modern web. One of the most Important animation libraries.Some core features:

Crazy fast, Freakishly robust, Compatible, Animate anything, Lightweight & expandable, No dependencies, Advanced sequencing, Permissive license and so on …

You can easily download it from here .

7. mo js

Motion for the web. mo·js is A Complete Motion Graphics Library For The Website. That is a** fast, retina ready, modular and open source*. Using mo js on your site will enhance the user experience, enrich your content visually and create **delightful animations* precisely.

8. konva.js

Konva.js – HTML5 2d canvas js library for desktop and mobile applications.

Object Oriented API with support of many shapes.
Support for desktop and mobile devices.
Animations and tweens.
Node nesting, grouping and event bubbling and so on …

You can easily download it from here .

9. animista CSS animation

Animista is a place where you can play with a collection of ready to use CSS animations. Tweak them and download only those you will actually use.

10. wicked CSS animation

Finally, wicked css. A library for CSS3 animations. The animations includes regular CSS3 animations to be used in all settings. Additionally, the library includes a number of wicked animations, which aren’t applicable in all situations. And they can be fun to play with.

You can easily download it from here

In conclusion, here are the top 10 animation libraries you can use on your website .Thanks for reading and Share if you like this article.

Read this article on my blog.

For more exciting tips and tricks please read our others articles

Find My page on Instagram: @stack.content

Useful Tips for Increasing Your Productivity

Rezaul karim — Mon, 14 Jun 2021 19:40:06 +0000

#Please Do Not Copy & Paste this Article on Your Website

Programming Productivity

Hello everybody. So today we are going to discuss about 5 tips to increasing programming productivity. Tip number one

1. Leverage The Power of Habit:

Leverage The Power of Habit is to build productive routines. I asked you guys for book recommendations on Twitter and one of the books I got was The Power of Habit now, I actually started listening to the audio book of it and I thought it was really interesting because it helped me understand how I became more productive in the past years.

And now that I can pinpoint that it was because I was building A habit out of the things I want to be productive on that. I was able to make a routine and start cranking out code videos work stuff. You name it? Now essentially what you want to do is for the next 21 days do something every day. This could be coding flossing or whatever you want that you think is productive and after 21 days will be so hard for you to stop that’ll become second nature to you tip. Number two,

2. Start multitasking:

Try Start multitasking the mundane stuff for things that doesn’t require much concentration to do. Do something else that’s more productive while you do that. It would save you surprisingly a lot of time. For example when I clean my room or do something super boring that I usually do not like at all. I would just you know, whip out an audio book and just start listening to it and that way I can actually learn stuff. Why do those mundane tasks? Another example would be when I brush my teeth, I would read. Else or I would check my social media accounts and then little by little I’m actually saving a lot of time in the long run. Tip number three,

3. keep yourself busy and accountable with deadlines and stakeholders:

Now. One of the things I like to do is actually to fill out my calendar with lots of focus blocks and deadlines. That way I barely have time to procrastinate the deadlines I set for myself or even better that I promise to other people will keep me accountable for actually Completing the projects that way I can’t procrastinate because I just have a lot to finish and a lot of people are depending on me to finish them. Tip number four

4. When taking a break don’t think about work just have fun:

This is important because I see a lot of people have faster productive time, but they also have faster fun time. For example. I see a lot of people studying while watching TV shows that’s terrible because you end up not enjoying the show nor learning the things you’re trying to learn. So what I give myself a break I make sure I don’t think about anything else. I love TV shows. So I turn off my phone and immerse myself and surprisingly you’ll actually learn a lot more by doing that like, for example, I love to watch Pop videos and actually On the law of cinematography by dissecting these videos and just focusing on it. But if I was quoting while watching these Pop videos, I’d never appreciate them as much. Tip number 5

5. Exercise to increase programming productivity!

Now I’m a big fan of weightlifting so I might be biased here but I truly believe that exercising will make you sharper exercise. In helps you relieve stress because it releases endorphins which are feel good hormones. That way allows you to refresh your mind and be a lot more productive throughout the day. It doesn’t even need to be super intense. As long as you get your heart rate up and work on moving your body more you feel the benefits right away exercise is a powerful habit and can be a good Hammer too, you know Teaching you to how to build these productive habits. So I highly recommend going to the gym or exercising regularly.

Last word about increasing your programming productivity!

So in conclusion, the most important point I want to get across is that if you really want to be good at something or you want to change an aspect of your life then make it a habit.And improve your programming productivity. Now you might say. Oh, yeah, it’s not as easy as it sounds though. And you’re absolutely right.

You know building habits extremely hard and I find it hard myself. But if you really care about thing you want to achieve then you will put the effort into it.

and that’s why I want to keep myself accountable for what I say. So basically choose something that you always want to do or something that you want to get good at and together. We’ll make it a new habit.

Read this article on my blog.

For more exciting tips and tricks please read our others articles

Find My page on Instagram: @stack.content

Programmers work life balance

Rezaul karim — Sun, 13 Jun 2021 08:43:54 +0000

#Please Do Not Copy & Paste this Article on Your Website

In this article, Discuss about why programmers work life balance is critical to maintaining your mental health. And preventing you from burning out. So I think it’s really important that programmers developers software and engineers.

Programmers work life:

You know anyone that’s doing a lot of mentally strenuous work everyday. Maintain healthy work-life balance to prevent burning.Now often in startup culture you see that, they usually have a lot of younger employees who don’t have families or have more time.

They can dedicate to working and being at the office and while that’s fine when you’re young and you have that kind of schedule and that availability. If you want to know further Career and get ahead and maybe really rack up that experience early on. And you want to spend 12 hours at the office a day. That’s fine.

Why need work life balance:

But when you’re older and you have a family, is not realistic to maintain that. And if you try to do that, you’ll eventually burn out. It’ll happen if you work too much you’ll burn out and if right now you’re self-taught programmer and you’re studying everyday and you’re spending hours upon hours on your laptop doing tutorials and building projects and working on your resume working on your portfolio into Doing everything that you got to do to try to get that first job. It can be really difficult and it can be really hard to maintain that.

So it’s okay to take a break. Although you want to code all the time and you want it and you want to try to code as much as you can until you get that first job. You can and realistically you’ll, it’s not good for you to try to do that all day every single day.

So you want to take those breaks when you have time. Take breaks.Get away from The get out. Get some fresh air who do something that you enjoy doing that is not code related. Your all your side projects don’t have to be based around code.

Try To Maintain:

I know that in your software development career early on you feel that a lot of your extra-curricular work needs to be code related. And that’s simply not true. You might feel that you need to stay Cutting Edge and work with the latest tech. If you’re not working with the latest tech in your current role. While that’s fine don’t focus on that stuff too much. And maybe focus on it a little bit more when you’re trying to look for a new job. It doesn’t have to be about code all the time.

And it’s okay to take breaks. You know work-life balance may not mean much to you. But it’s definitely something you should think about. We think about it when you’re looking for a job and applying for jobs. And really look into what kind of work-life benefits do they offer and consider that. Because you’re going to be there for a few years and you’re going to dedicate a bunch of time there and you don’t want to You don’t want to end up.

He’s somewhere that you’re not going to enjoy working and it doesn’t offer you the kind of work-life balance that you’re looking for. You know, those things are important to you if having holidays off is important. If having flexible schedules and flexible days, if just being able to call in sick and not have to worry about it. Important to you make sure that you look for that make sure that your You’re checking all the time. Is where you can get this information and I mean don’t be scared to ask around online either post stuff on Reddit post questions,

Important Note:

Wherever you need to to find out about a company that you may be applying for. And if work-life balance is really important to you and it should be work-life balance should be important to everyone. You should make sure that the company you’re applying for offers those things. Or if you’re applying right now and you don’t have a job. If you do have a job and you don’t and you’re not happy with the way that your work-life balance is at that job.

Make sure to think about this the next the next job you look for you know, my first job.

The programmer’s work life balance wasn’t terrible, but it wasn’t all that great. I did take some work home with me more than I want to you. Really never want to take any work home with you. That just developed bad habits to have you end up burning out. And working way more than you should just kind of think about. Like, what do you make an hour at out at one point is your hourly wage work that if you’re making 50 bucks an hour. Because you’re making a hundred grand a year.

Some Idea:

That’s cool and all but if you’re working 14-16 hour days because you have that kind of company culture. That Send you to work that much that’s just a recipe for Burnout. And really at the end of the day how much money are you really making an hour? If you’re working double the time that you should be seized. And this also relates to if you’re trying to learn how to code to remember. You know, many people circumstances are different when I was learning how to code.

My family was just getting started and I had that extra time and my schedule at work a lot. Allowed me to work and study at the same time. And I had enough time off and availability during my days off to be able to study and dedicate that much time.

But some people only have a few hours a day and and honestly just try to be as consistent as you can. And if you start feeling like you’re burning out think about if you’re just spending too much time working you’re learning how to code and you have A job and you have a family and you know, you have to you have to learn how to code and you feel like it’s just something that you have to do and you realize that you’ve been doing it for a couple months and you’re no longer having any fun and doing anything that brings you any Joy.

Thinking on work life balance:

You’re just working and tending the things around the house and learning how to code. You’ve given up all your extracurricular activities and you’ve given up. Your hobbies because you’re determined to learn how to code I kind of did that myself and it’s not healthy. It wasn’t healthy for me and I got lucky that I did it burn out but you know. Everyone’s different you just make sure that you listen to to how you’re feeling and play it by ear.

And remember that this is a Marathon not a Sprint, you know, you’re going to be learning for a while and it’s going to take you a while to get a job.

Final Thoughts:

Some people do get a job soon and quickly. But a lot of people would take some a little longer. So don’t rush to get to the Finish Line because the thing is once you get there. You’re going to realize that your journey is just started and you’re going to be learning all the time.

Every day And it’s never going to end.It’s a good thing and I enjoy and if you’re learning how to code and you’ve already been doing it for a while. You’ve probably already got that personality that enjoys trying to figure out . I’m trying to work on stuff and try to solve problems and and that’s good. And use that to keep you going. But realize when you’re not having fun and you need a break because that’s important, too.

Read this article on my blog.

For more exciting tips and tricks please read our others articles

Find My page on Instagram: @stack.content

Learn About Application Programming Interface?

Rezaul karim — Tue, 08 Jun 2021 14:33:28 +0000

#Please Do Not Copy & Paste this Article on Your Website

Application Programming Interface

In this article. I’m going to be talking about what an application programming interface. Both in general and related specifically to web development. Let’s start now.

To get started API stands for application programming interface. Which is just a fancy way of saying what one application exposes to another. That is the API. Let’s take an

Example of a restaurant to describe how an API Works in non-technical terms.

So when you go to a restaurant you don’t go directly up to this chef and tell him what you want to order. You need to look at the In order something off of the menu. Because the menu tells you what the restaurant offers that is their API. This menu the API essentially tells you what that certain application is giving to you and the things that you can use from the application. So you go to the restaurant and you order something off of that menu. Then after you order something from that menu you tell them what you want. And restaurant is Going to give you whatever you ordered off of that menu. They’re going to give you back data.

So when you access an API that API you’re going to send it what you want, then it will send you back information based on what you wanted It.

But if you go to this restaurant, for example a steak restaurant and you try to order a peanut butter jelly sandwich, they’re going to throw an error at you. They’re going to tell you we don’t serve peanut butter jelly sandwiches. You have to choose something on the menu and this makes API’s secure because the only exposed what you want to expose to the rest of the world.

Web Application’s Role:

For example, a web application is not going to expose to the database with all the Information passwords. They’re only going to expose to you the login and sign up pages and not the actual database itself. This makes that website secure because they’re only exposing the parts that they want to some of the most common forms of API’s that you’ll run into as a developer are going to be rest API’s on the web and library API’s from code that you pull into your project.

Web API’s

Let’s first talk about these web API’s, which are going to be most likely rest API access. These API’s exposed different endpoints also known as URLs, which you can access to get certain data from that API. You can also access these endpoint in order to modify data on these servers, but it only is what the application actually exposes to you and wants to let you modify.

For example, you may be able to update it user through a rest API, but they’re not going to let you update the password. They’re only going to let you update the name in the email. For example. You also will to get users from this API, but they’re not going to return to you the password of the user the does give you the name and the email. This is a way that these servers can be secured by only exposing the information. They want through this API which is the contract that the server and the client are having between each other.

Common Application Programming Interface

The other most common Application Programming Interface, which is not really referred to commonly as an API. But is still technically API is an actual library that you pull into your code. These libraries have a bunch of different methods to find on them that do specific things. When you call them and return to you specific data when you call them, this is exactly what an API is it’s a contract between this Library code that you’ve installed and your actual project that using that libraries code you have different ways that you can access it only. Of the methods that they And you aren’t able to access the internals of that Library unless it’s through the methods that the API of the library exposes to you.

In Conclusion

The common theme with API’s is that the only exposed to exactly what they want you to be able to access. And hide away absolutely everything else that they can in order to make their API as secure as possible. Also commonly with web API. You’re going to need some form of token to authenticate yourself with this API. Which will allow the application to know whose axis in the API.

In order to limit what that person can access based on their specific permissions in conclusion. API’s are absolutely everywhere from technology to non technology related fields, and it’s really just a contract between two things. Look how they can interact with one another.

It’s mostly used to make things more secure and easier to use. Because you know how you can use something. And it hides away all the stuff that you cannot access which makes it secure.

That’s all an API is.

Read this article on my blog.

For more exciting tips and tricks please read our others articles

Find My page on Instagram: @stack.content