DEV Community: Tarandeep Singh

How to do wiring in VanillaJS

Tarandeep Singh — Mon, 09 Aug 2021 23:46:54 +0000

After an unbelievable start to my blogging journey, with my first two blogs crossing over 120+ bookmarks combined, here I am with my third blog! This time around we are going to touch on the basics of JavaScript.

"VanillaJS" is a term that developers use to describe regular JavaScript. It means using the inbuilt JavaScript methods and objects without any additional libraries or frameworks.

Why VanillaJS?

So why use VanillaJS instead of libraries or frameworks? Well, we gotta admit libraries like ReactJS are just amazing but VanillaJS is faster than any other JavaScript framework because it has fewer overheads. Moreover, Using frameworks or libraries in JS is a little like using Bootstrap or Tailwind in CSS, we might miss out on the fundamentals, it eliminates control over your abilities to solve the problem in a different most probably in a better way. For beginners, it's better to start off with VanillaJS and then shift to any framework with the confidence of knowing what actually is going on in that framework!

What is wiring?

Wiring is basically connecting different components with a wire. Pretty much like we did in electric circuits while studying physics! Remember connecting a bulb, switch and battery using a wire? That's it! So connecting different code components like input, output and processing is what we are aiming for.

Wiring a Button

Create a button in HTML & give it an id <button id="btn-click">Click</button>
Refer button using querySelector() in "app.js" var btnClick = document.querySelector("#btn-click");
Add event listener to button btnClick.addEventListner("click", function clickEventHandler() { }) If you are an absolute beginner then do read about the querySelector(), event listener & callbacks in JavaScript at MDN Docs

Wiring a textarea input

Create a textarea input tag & give it an id <textarea id="txt-input"></textarea>
Now refer it in js file var txtInput = document.querySelector("#txt-input");
Read the value of the tag. You can do this only inside event. For this we are using the same event listener we wrote in 3rd point of 'Wiring a Button' btnClick.addEventListner("click", function clickEventHandler() { txtInput.value; })

Wiring a div to show output

Create an output div with an id <div id="output"></div>
Refer it in js var outputDiv = document.querySelector("#output");
Use innerText to write to this div dynamically when button click happens btnClick.addEventListner("click", function clickEventHandler() { outputDiv.innerText = txtInput.value; })

Now our wiring is complete and the web app is ready to take input in textarea and onclick of a button it'll show output in our output div element.

Using this simple concept I have made two fun translator web apps:

Minion Translator: See it in action! | View Source Code
Yoda Translator: See it in action! | View Source Code

That's all for this one! You can check out my other blogs here.
Do tell me in the comments if you would like the next blog to be on ReactJS!

You can follow me on Twitter and LinkedIn.

Amazing CSS Tips & Tricks - Part 2

Tarandeep Singh — Thu, 29 Jul 2021 19:55:37 +0000

After an amazing response on my first "Amazing CSS Tips & Tricks" blog, here I am with Part-2. So gear up and get ready to take a dive into CSS!

Clamp it Down

Making the websites responsive is a big headache for most developers as they have to write lengthy code with lots of media queries. But I have a life-saver for you guys. You can use functions like min, max, and clamp to refactor your code. The following code shows how you can set the width to a clamped value that has a minimum of 200 pixels, a max of 600, and a preferred value of 50%.

article {
    width: clamp(200px, 50%, 600px);
}

The following comparison image shows how I turned 13 lines of code into just 1 using this trick:

The link pseudo-class

A lot of developers and designers often miss this simple yet effective CSS trick that solves usability issues with visitors.

a:link { color: blue; }
a:visited { color: purple; }

The link: pseudo-class controls all links that haven’t been clicked on yet & the :visited pseudo-class handles the styling of all of the links user has already visited. This tells the visitors where they have already been on your site, and where they have yet to explore.

Drop Caps

Drop caps remind me of the traditional printed books & newspapers. I just love it as it is a great way to start a page with written content. That first, large letter really grabs your attention. We can use :first-letter to create a drop cap in CSS. Here’s an example:

p:first-letter {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  float: left;
  font-size: 6rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0;
}

Output:

Hover Effects

This might be an easy one, yet very useful. If you want to highlight something whenever the user hovers the mouse over it then add :hover to that button, text link, block section or icon. Here's how the CSS would look if you wanted to change the color of h2 tag whenever the user hovers over it:

.entry h2{
    font-size:24px;
    color:#000;
    font-weight:700;
}

.entry h2:hover{
    color:#f00;
}

Transition for Hover Effect

For hover effects, on menus or images in your website, you don’t want colors snapping too quickly as they might not look pleasing to the end-user. So ideally, we should ease the change gradually, which is where the transition property comes into play. The following code shows how in the same hover effect used above, we can make the change happen over .4 seconds, instead of just instantly snapping to red.

.entry h2 {
  transition: color 0.3s ease;
}

.entry h2:hover{
    color:#f00;
}

That's all for this one! I want to thank all of you guys for such an overwhelming response on my first blog. I was amazed to see how it got 60+ bookmarks in just 24 hours of posting it! If you have not seen it, Check it out here.
Tell me in the comments which trick did you guys liked the most!

You can follow me on Twitter and LinkedIn.

Amazing CSS Tips & Tricks

Tarandeep Singh — Mon, 26 Jul 2021 14:32:14 +0000

Wanna know how to use modern CSS features to write clean code by using some stunning CSS tricks? You have just landed at the right place!

A Tip For Beginners

Here's a quick tip for those who have just started to learn CSS - DON'T use Bootstrap or Tailwind! No doubt they are great tools to get a nice-looking UI quickly but using these will mean that you'll be missing on CSS fundamentals. I have personally done this mistake & oh boy did I regret it.

Grid is Great

Unlike flexbox which only deals with individual columns & rows, Grid allows you to think about the big picture. When you set an element to display: grid; you can then define its children as a bunch of columns & rows. Have a look at the amount of code we have eliminated by using grid instead of flexbox in the image below.
Click here to read more about CSS Grid Layout

CSS Debugging

We often use Chrome developer tools for debugging our code (including CSS) but you'll be surprised to know that Firefox developer tools are much superior especially when it comes to CSS. On inspecting an element in Firefox, you'll have a break-down of the box-model like you have in Chrome but you can also edit properties on it directly, for instance changing the padding or margin and it will also give you a breakdown of all the properties that are influencing the box-model. Not only this, Firefox also provides really nice graphics for flex & grid layouts.

Image Filters

It's fun to play around with images in CSS, but did you know that we can apply amazing effects to those images. In fact CSS allows using lots of filters on the images to help developers play with the graphics without changing it in Photoshop. Let’s have a look at some of the filters:

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

I have much more to write and share with you guys but it's getting a little long, so comment below if you want part 2 of Amazing CSS Tips & Tricks.

You can follow me on Twitter and LinkedIn.