Forem: Sampad Sarker

The Easiest Way to Install SASS

Sampad Sarker — Sun, 03 Mar 2024 07:33:33 +0000

In the realm of front-end development, numerous methods exist for installing SASS. However, I've uncovered a remarkably straightforward method for installing SASS that avoids bloating your project's size. Let's dive into this simple method together, making sure your SASS setup is smooth and lightweight.

Step 1:
Install Node.js from here. Once installed, verify if Node.js was installed properly by executing the following command on the terminal (Win+R, then type cmd)

node -v

Step 2:
Install SASS globally.

node install -g sass

To ensure that SASS was installed correctly, run the following command in the terminal.

sass --version

Step 3:
Transpile SASS to your specified location.

sass --watch "..\path of scss file\..\scss\main.scss":"..\path of CSS file\..\css\style.css"

TIP: Drag and drop the file on the terminal, then automatically it finds the location.

Keep the terminal open while working with SASS.

Note: There are no restrictions on opening the terminal at a specific location.

Congratulations! You've successfully set up Sass for your project. Don't forget to keep your terminal open while working with SASS to monitor changes and updates seamlessly. Happy styling, and may your code always be as sleek as your SASS!

How to Debug ⚙🛠

Sampad Sarker — Mon, 31 Oct 2022 11:38:46 +0000

Follow the simple three steps

step 1: Understand the problem statement very clearly.
step 2: Develop an algorithm on the problem(step by step solution).
step 3: Logic building.
step 4: Code on pen & paper.
step 5: Dry run the code.( if you want to read more about dry run)

If don't get proper result at step 5 go to step 1 again.

Now CSS Has :has(),The Mind-blowing Feature

Sampad Sarker — Sun, 23 Oct 2022 06:03:44 +0000

One of the most-awaited features in CSS is :has() functional pseudo-class. It is a level 4 CSS selector.

The :has() checks whether an element has a particular child element or group of child element in its arguments and based on that a certain style is applied.

On Which Part of :has(), Style Will Be Applied ?
The :has() is more than a parent selector. It is very important to understand which element should be styled by :has().

section:has(article) { … }--> "section" element will be styled.
section:has(article) img { … }--> "img" element will be styled, not "section" element.

Few Property of :has()
1.The selector list of :has() is forgiving.
2.The specificity of :has() is that of its most specific argument like :is().

Let's take a deep dive🤿 to demystify the :has()

Selecting Parent Element
The default behaviour of :has() is to select the parent.
Example code

Selecting Child Element
Selecting the child or direct child.
Example code

Grouping of Multiple Children
Selecting more than one child at a time.
Example code

Selecting the Previous Sibling Element
Selecting the Previous Sibling Element is possible by combined use of CSS adjacent sibling combinator with the :has().
Example code

Conditional Decorations
Based on child element under any condition, different style can be applied.
Example code

Styling Empty States
It is possible to style elements that contain nothing using :empty and :has() together very easily.
Example code

Layout Customize
Layout can be changed according to child element with or without condition.
Example code

Change Theme Without Js
Theme mood toggle Without JS, it is possible now for the pseudo-class ":has()". You should thank this CSS feature, shouldn't you?
Example code

Browser Support Check
At the time of publishing this post, the :has() achieves global 76.16% of browser support. Few browser didn't adopt it(Firefox is one of them 😟).I hope, it will be supported 100% by all browsers.
Example code

Caution
⚠ The :has() pseudo-class can not be nested within another :has().
⚠ The :has() does not take any pseudo-elements in its argument.

All examples' live code here⤵

Thanks for reading all the way through 🎉🥳🎈.
I hope you learned something new from this post. Feel free to leave your comments, advice, and suggestions so that I'll publish better posts in the future.

Understanding :is() by Examples

Sampad Sarker — Mon, 17 Oct 2022 06:05:34 +0000

The :is() a functional CSS pseudo-class. Originally it was named :matches() and :any(), now this selector is renamed to :is().

What does it do?
It takes a selector or a collection of selector(separated by comma) as argument and select any single element or group of elements based on the argument.

Let's go to clarify the concept through examples.

Example 1
normal nesting. Make a group of child element.

⚠ Be careful about space between main and :is().If there is no space, nesting will not work. What will happen when without space, it will be discussed after few moment later.

Example 2
Apply the same styling to more than one element. That is the beauty of :is().Make a group of parent element.

Example 3
Multiple use of :is() for complex nesting. Here parents elements and child elements are different but combine them in a single line.

Example 4
It is also possible to same lavel styling using :is().There is no space before :is().

🤞Hope, with this example, you may have clear idea when to put space or not before :is().

Example 5
Use combinator(>, +, ~) with :is().

Here, anchore tag(<a>) doesn't change the color, because it is not a direct child. But other child works well because :is() has "forgiving selector" feature.

⚠⚡:is() does not work with pseudo-elements.

:is(::before, ::after) {...} is invalid.

Specificity of :is()
The specificity of :is() will be the highest specificity of the selector from selector list in its argument.

:is(selector1, selector2, .className)--> specificity is 10 beacuse .className.
:is(selector1, #idName, selector2, .className)--> specificity is 100 because #idName.

All examples' live code

That's all 🎉
Thanks for reading till the end.👍

Take a Full-Page Screenshot in Browser (without extension or add-on)

Sampad Sarker — Mon, 03 Oct 2022 11:57:17 +0000

Google Chrome

Chrome browser contains default screenshot feature in developer tools.

To take a full-page screenshot, follow these instructions:

1.Open Chrome’s menu (three dots on the right corner).

2.More tools > Developer tools or press F12.

3.Click on the three-dot icon from the top-right corner and then select Run command. As a hotkey, you can press 'ctrl+shift+p' on Windows or 'command+shift+p' on Mac.

4.Type screenshot into the search box.

5.Select capture full-size screenshot.

6.That's all, chrome browser will save the full page screenshot into your downloads folder.

Mozilla Firefox

You can snap a scrolling screenshot with Mozilla's built-in feature.

Follow these steps to take a full-page screenshot.

1.Open Mozilla's menu (three bars on the right corner).

2.More tools > Customize toolbar...

3.Find out Screenshot icon and click and drag the Screenshot tool into the toolbar or right click on it and select add to toolbar.

4.Now click on screenshot tool icon and select save full page or save visible(if necessary).

5.Finally click on download which appeared after taking the screenshot. This screenshot can be found into mozilla browser's download folder.

10 HTML Tags for SEO🔍

Sampad Sarker — Sun, 25 Sep 2022 06:46:13 +0000

1.Use Title Tags

<title>Title of the webpage ...... </title>

Your content is labeled in this way, and search engines interpret this as the name of your page.

2.Meta Description Tags

<meta name="description" content="Learn html, css, Js and develop your own website or helps others to make their websites.">

When the article appears in search results, Google will also reveal this. The title and meta description tags should both contain your keywords.

3.Header Tags

Here is the hierarchy of header tags:
<h1></h1> – typically used for webpage title.

<h2></h2> – highlights the secondary titles of the webpage.

<h3></h3> – related points of the topic in the webpage.

<h4></h4> – supporting points from <h3>.

<h5></h5> – not commonly used, but excellent for supporting <h4> points.

4.Add alt in Images

<img src="cats.jpg" alt="cat is sleeping on couch">

The alt attribute tells search engines what the image is about. Search engines have no idea what the image is about unless it has an alt.

5.Building Links

Obtaining high-quality backlinks is a part of SEO. You should also pay attention to internal connections as well as exterior links.

<a href="http://mywebsite.com/" rel="nofollow">your anchor text</a>

The link will still function, but search engines will not accept it. It is useful to share links with visitors without affecting the SEO of the other pages.

6.Add Open Graph Tags

Open graph tags helps in improving social media's search and display capabilities. For instance, if your information is posted on Facebook, open graph will be used to display the information.

<meta name="og:title" property="og:title" content="The Title of Your Blog">

7.Twitter Card Tags

Twitter Cards work similar to OG with the exception that these are specifically for Twitter.

<meta name="twitter:card" content="summary">

It is advisable to optimize your cards to get the most out of the tags.

8.The Robots Tag

If you wish to block particular articles from being indexed, use the robots tag.

<meta name="robots" content="noindex, nofollow">

Google will not index the content or follow any of the links in this case. However, you must exercise caution when employing these HTML elements for SEO purposes.

9.Use Canonical Tags when necessary

When you develop a website, you can make it available in a variety of ways. As an example:

http://www.yourwebsite.com

https://www.yourwebsite.com

http://yourwebsite.com

https://yourwebsite.com

<link rel="canonical" href="https://yourwebsite.com/">

This tells Google that “https://yourwebsite.com/” is the URL on which you’re focusing.

10.Responsive Site Meta Tags

<meta name="viewport" content="width=device-width, initial-scale=1">
To inform that search engines should be made aware that your website is responsive.

5 Quick Steps Transpiling SCSS to CSS Using Node (with watch & minify mode)

Sampad Sarker — Tue, 20 Sep 2022 04:21:12 +0000

I use vscode editor on Windows10

1. Install Node.js

First download node from the official website nodejs.org, and install it.

2. Initialize NPM

Open vscode terminal. Run the command
npm init

Press enter to all the options(description, author, keyword etc.) one by one or put the information in every option(if you wish, but not mandatory). After that, package.json file will generate in your file structure.

3. Install Sass

Go to npm website to find sass package.

Execute the command on terminal
npm install sass

After that node_modules folder and package-lock.json file will be added the file structure.

4. Write sass Command

Go to the package.json file. In the scripts section remove "test": "echo \"Error: no test specified\" && exit 1" and add the small script



"scripts": {
    "scss": "sass --watch sass/style.scss css/style.css"
},

After executing the script, it will generate style.css and style.css.map in the css folder.

If you want to avoid style.css.map file, the script will be ```

"scripts": {
"scss-no-source-map": "sass --watch --no-source-map sass/style.scss css/style.css"
},


* If you want to generate compressed css, then add the script

"scripts": {

"minify": "sass --watch sass/style.scss --style compressed css/style.min.css"
},


* Altogether

"scripts": {
"scss": "sass --watch sass/style.scss css/style.css",
"scss-no-source-map": "sass --watch --no-source-map sass/style.scss css/style.css",
"minify": "sass --watch sass/style.scss --style compressed css/style.min.css",
"minify-no-source-map": "sass --watch --no-source-map sass/style.scss --style compressed css/style.min.css"
},


### 5. Run the Script 
Execute the command on terminal to run the script

`npm run scss`
or
`npm run scss-no-source-map`
or
`npm run minify`
or
`npm run minify-no-source-map`


**_<u>Point to be Noted</u>_**
In html file, you must link with the css file generated in css folder.

![css link in html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf8gp2sq0tek8y189aob.jpg)

For more effectiveness, use [live server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) on vscode.


HAPPY CODING!!!

Install and Customize The Live Sass Compiler

Sampad Sarker — Mon, 19 Sep 2022 05:02:58 +0000

Install

step 1: Go to vscode and find the extension named "Live Sass Compiler", which is now maintained by Glenn Marks at the time of writing this article.

step 2: At the very bottom of the vscode, click on Watch Sass. If any case, you don't find Watch Sass, then go to .scss file (not partial scss file ) and you will able to click on Watch Sass.

Customize

On vscode editor, press ctrl + shift + p
On search bar, type open setting
then click on
preference: open user setting(JSON) and you will be in settings.json file.

In the settings.json, put the following code very last of the json.

"liveSassCompile.settings.formats": [
    //by default generate css in root directory
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": null,
      "savePathReplacementPairs": null
    },

    //generate compressed css 
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": null,
      "savePathReplacementPairs": null
    },

    // generate css in another folder named css
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css",
      "savePathReplacementPairs": null
    }
  ]

For more effectiveness, use live server extension on vscode.

HAPPY😃 CODING👩‍💻 !!!

What I Discovered From The Course "Conquering Responsive Layouts" by Kevin Powell

Sampad Sarker — Fri, 16 Sep 2022 07:27:56 +0000

Always try to follow these key points to design responsive layout.

1.Do not use fixed width or height.

2.if needed, use percentage(%) for width or max-width property.

.container{
 width:80%;
 max-width:45rem;
}

.container{
 width:min(80%,45rem);
}

3.if needed, use min-height property.

4.Avoid using px unit, try to use em,rem,ch,ex unit.

5.Ensuring make the image responsive.

img{
 max-width:100%;
}

6.@media query
->Always try to put media query at the very last of css.
->Always use media query from smallest to biggest devices.
->To reduce complexity, use less number of media query.
->The less break points(@media query) you have, the easier the webpage to maintain.

Summery

Website are responsive before we right any css.
When our layouts run into issues, we're at fault in our css style, we have done wrong in our own css.
Desktop-first approach is the main culprit.
Writing mobile-first css tends to be the easier approach, even if you have a desktop layout.

N.B: The course is completely free, you can find the course from this link
course link

You Need Just 4 Steps to Responsive Design Approach

Sampad Sarker — Thu, 08 Sep 2022 07:12:47 +0000

step 1: At first, develop a html structure according to design, just only html (no css).

step 2: This only html structure provides you mobile-like small devices' design(check it on dev tool). Put typography, color, padding, margin in the html through css, but do not put any layout style.

step 3: Find out break points using dev tool and then use @media query according to that breakpoints. In this step, concentrate on layout. Use display:flex/grid/block/inline and other properties into @media query.

step 4: Use less number of @media query as much as possible to reduce complexity.

The Nuts and Bolts 🔩⚙ of Logical Margin 📏📐

Sampad Sarker — Fri, 01 Jul 2022 19:07:47 +0000

Understand the core difference in usage of logical margin (margin-block-start , margin-block-end , margin-inline-start , margin-inline-end) as well as logical padding, logical border.

Keep the image in mind.

By default:(writing-mode:horizontal-tb)

margin-block-start means == margin-top
margin-block-end means == margin-bottom
margin-inline-start means == margin-left
margin-inline-end means == margin-right

example:
codepen link

It behaves differently,
when using writing-mode:vertical-lr :

margin-block-start means == margin-left
margin-block-end means == margin-right
margin-inline-start means == margin-top 
margin-inline-end means == margin-bottom

example:
codepen link

It behaves another way,
when using writing-mode:vertical-rl :

margin-block-start means == margin-right
margin-block-end means == margin-left
margin-inline-start means == margin-top 
margin-inline-end means == margin-bottom

example:
codepen link

Basically, each margin-block/inline-start/end property will be mapped to a margin-top/left/bottom/right property based on the values of writing-mode , direction, and text-orientation. This concept is same for logical padding and logical border.

HAPPY CODING!!!😃

Dry run the code before compile

Sampad Sarker — Fri, 01 Jul 2022 14:07:44 +0000

What is dry run?
Tracing code manually on pen & paper.

Common mistakes in Dry run

❌ Skipping lines or skipping loop completely/half-completely.
❌ Don't track updated values of variables.
❌ Not tracing the real code rather than another imaginary code in your mind because of lack of concentration.
❌ Reading mistakes(silly mistakes like comma, semicolon , typos etc.).
❌ Conceptual lacking(not clear about execution sequence , execution context, data flow , loop execution etc.).

Good practice in Dry run

✔ Always write updated values of variables by drawing box shape . In case of loop, use table like chart to track every updated variables of every iteration.
✔ Read lines letter by letter.
✔ Evaluate arithmetic expression according to precedence rule of operator.
✔ Give enough time for dry run.

Why need dry run?

understand the code properly.
clear the coding concept.
find bugs easily.