DEV Community: Hamza

Awesome VSCode extensions for a better coding experience [ Part 2 ]

Hamza — Sat, 04 Jun 2022 08:00:45 +0000

Imagine yourself typing all the HTML boilerplate code when you decided to make a new project or imagine not being able to recall the name of that single property in css and searching the web for it. Why am I talking about all this? It's obvious because this kind of stuff would really suck. So, that brings us to the wonderful extensions that we have in vscode made by a lot of people and you can use them for free.

What are vscode extensions anyway?

VSCode extensions let you add debuggers and various tools to your environment and works through various custom settings that the extensions bring with them.

VSCode extensions are a great way to reduce your workload and make it easy for you to write your code and format it. You can even create your own vscode extensions but we won't talk about it here. There are a lots of extensions available on vscode as of today but I will mention some of which I find really useful.

1. ES7 React/Redux/GraphQl/React-Native Snippets:

This extension right here is something else altogether 🤯, it consists of such a wide variety of code snippets, and yes for all the technologies mentioned in the title itself. If you really want to get all your work done quicker do check this one out.

Some snippets:

imp -> import moduleName from 'module'

imrse -> import React, { useState, useEffect } from 'react'

graphql -> import { compose, graphql } from react-apollo'

And not only these but it also provides snippets for react components:

rafce -> ( will give you 👇 )

import React from 'react'

const $1 = () => {
return

$0
}

export default $1

and a lot lot more...
Check for the link at the end of the post.

2. HTML Snippets:

HTML snippets extensions is one of the most helpful extension as provides HTML5 tags, colorization to HTML tags and also various snippets. Noe it's functionality has been absorbed into the VSCode main HTML extension. But in any case this something really helpful.

You just have to type the tag name and press tab and it generates the tag for:

button (press tab) -> <button></button>

button.btn#btn-round (press tab) -> <button class="btn" id="btn-round"></button>

Check for the link at the end of the post.

3. JavaScript ES6 Code Snippets:

As we have been seeing above, this one is not any different other than the fact that extension provides snippets for javascript and some really helpful one's at that. Do check it out.

Here are some helpful snippets:

fre -> array.forEach(currentItem => {})

fof -> for(const item of object) {}

cas -> console.assert(expression, object)

clg -> console.log(object)

Check for the link at the end of the post.

4. Live Sass Compiler:

Here's a really amazing extension that can convert sass/scss into css and on top of that it even goes on and supports live browser reload. Generally there are other ways to compile sass/scss into css like:

sass --watch input.scss output.css

What the command above will do is, it will watch your sass/scss input file and convert into a css output file. Here, input.scss is the name of input file and output is the name of the resultant css file.

But Live Sass Compiler changes it all with just a single click sass/scss compiling initiation with custom settings. You just have to create a sass/scss file and click the button in bottom right saying (Watch Sass).

Here are my settings for scss compilation, open settings and paste this piece of code in settings.json file:

"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css"
}
],
"liveSassCompile.settings.generateMap": false,

Check for the link at the end of the post.

5. Markdown Preview Enhanced:

Markdown Preview Enhanced is an extension that gives you the ability to look at the preview at your markdown code, and you don't even have to switch between vscode and browser for it. The preview window appears right beside the .md file with just a click or a shortcut ( cmd-k v or ctrl-k v ).

It looks something like this:

To explore more and download these extensions visit here:

Awesome VSCode extensions for a better coding experience [ Part 1 ]

Hamza — Sat, 04 Jun 2022 07:54:21 +0000

What are vscode extensions anyway?

VSCode extensions let you add debuggers and various tools to your environment and works through various custom settings that the extensions bring with them.

1. Auto Close Tag:

As you can probably figure out from the name here this extension automatically closes the HTML/XML opening tags you write. You can customize or change the settings from the vscode auto close tag settings.
It can even be used to close the self closing tags in HTML.

2. Auto Rename Tag:

This very extension lets you rename both the opening and the closing tag at once saving you the pain of renaming the tags one by one.

3. Bracket Pair Colorizer: ( Now integrated into VSCode )

This extension colors bracket pairs based on their positioning in the code i.e. bracket pairs adjacent to each other will have different set of color from each other.

This makes the code look really clean and makes it easy to figure out the block of code you want to go to.

4. Indent Rainbows: ( Now integrated into VSCode )

This extension is not all that different from the Bracket Pair Colorizer, just that it does the same with levels of indentations which can prove to be helpful in a language like python.

5. Live Server:

Not much needs to be said about one of the most popular and useful extensions of all in VSCode where you can see live previews and changes of your work with just a single click.

To explore more and download these extensions visit here:

CSS short-hands all the time, a good idea?

Hamza — Fri, 03 Jun 2022 13:25:25 +0000

Yes yes, I know we all love using shorthand properties wherever we can while writing our CSS, but have you ever considered about the possibilities where you were trying to get something done, set a certain property on a certain element and you would just end up seeing either no results or something totally unwanted? Well I have, a lot of times but I didn't figure it out until very recently when I was just scrolling down the YouTube homepage and I came across a video from "Kevin Powell", I believe a lot of you know him and he made a specific video on how using shorthand properties sometimes can result in unnecessary headache.

Lets get into some of the examples:

Margin:

margin: 0

As we all know it is a shorthand for:

margin-top
margin-right
margin-bottom
margin-left

In the example above if you see the code properly I intended to have a top and bottom margin of 1rem for both text fields but due to the .center class being after the .text class its properties take priority and the margin top and bottom become 0.

A possible solution is to use the individual properties:

But if you find doing this inconvenient the there is another better solution at your disposal as you can see in the example below:

Here you have now seen two new properties or maybe you are already familiar with these:

margin-inline:
- Handles margin on the horizontal axis.
- Is a shorthand for:
  - margin-inline-start
  - margin-inline-end
margin-block
- Handles margin on the vertical axis
- Is a shorthand for:
  - margin-block-start
  - margin-block-end

Also, padding is kind of similar shorthand property so keep in mind to use individual properties when needed.

Background:

Now, just like margin property background property is a shorthand too but it is a shorthand for a bunch of other properties which can sometimes lead to unintended results, one such situation could be when you are trying to add an image as a background but you already have another class that sets:

background: #111

This can sometimes be problematic as it will set all other individual properties to initial value. Also I won't go deep into this topic as people prefer to do things their own way and some even prefer using frameworks instead of writing their own CSS.

Here's the link to the YouTube video if you want to be evn clear about this topic:

Kevin Powell CSS Shorthands

Style your jupyter notebook

Hamza — Sun, 15 Aug 2021 07:21:55 +0000

Hello Everyone, Today I will talk about how you can style your jupyter notebook and make it look the way you prefer. If you are a python programmer, jupyter notebook is an awesome platform. If you want jupyter notebook on your system, you can either install Anaconda Navigator or just directly install jupyter notebook on your system.
So, after you are done setting up jupyter notebook on your system you need to navigate to the following path in your system:

C:\Users\{username}\.jupyter

Here username can be your name, you all know what that is any way.
Now, here you might see a folder named custom which consists of a custom.css file or you may not. But do not panic you can always create a custom folder with a custom.css file on your own. Make sure you do not change the names of folders and files.

Here are some specifiers to keep in mind:

#notebook-container : can be used to style the container of input boxes.
.notebook_app : class name of the whole body of the app.
body > #header : controls the styling of the header.
.navbar-default : controls styling of the navbar.
.navbar-default .navbar-nav > li > a : styling links in navbar
#kernel_indicator : styling the kernel indicator.
div.input_area : styling the input area
div.cell : styles the cell containing the input area
.dropdown-menu : styles the dropdown menus of the navigation links.
div.output_wrapper : styles the output wrapper

So, let's get started. Now I will walk you through some css that you can apply to your jupyter notebook.

Style the Container of all the input areas

CSS:

#notebook-container{
    box-shadow: none !important;
}

Here I have just removed the box shadow of the container but you can do your own kind of styling like giving it a border-radius or something.

You can change the appearance the whole page itself using the following selector

CSS:

.notebook_app {
    background: #fff !important;
}

Here I just made the whole body's background to white but you can do your own styling.

You can style the header using the following code

CSS:

body > #header {
    background:  #000;
    color: #fff;
}

I changed the color of the header to black and the font color to white link in the picture below.

You can personalize the navbar using the code below

CSS:

.navbar-default {
    background: none;
    border: none;
}

If you are looking to style the links inside the navbar then this is the way to do it

CSS:

.navbar-default .navbar-nav > li > a, #kernel_indicator {
    color: rgba(255, 255, 255, 0.25);
    border-bottom: 2px solid #f57b00;
    transition: all 0.25s;
}

.navbar-default .navbar-nav > li > a:hover, #kernel_indicator:hover {
    border-bottom: 2px solid #fff;
    color: rgba(255, 255, 255, 1);
}

Well this piece of code also styles the kernel_indicator which you can see on the right end with python written inside it.

Style the input area and the cell that contains it

CSS:

div.input_area {
    border: none;
    border-radius: 0;
    background: #f7f7f7;
    line-height: 1.5em;
    margin: 0.5em 0;
    padding: 0;
}

div.cell {
    transition: all 0.25s;
    border: none;
    position: relative;
    top: 0;
}

See the changes in the picture below

Style the dropdown menus

CSS:

.dropdown-menu {
    z-index: 999999 !important;
    background-color: #000;
    color: #fff;
    opacity: 0.95;
}

There's a lot more to it.
I know what I did doesn't look all that awesome but hey, now that you know how, you can do much more.
Here's the full CSS:

/*This file contains any manual css for this page that needs to override the global styles.
This is only required when different pages style the same element differently. This is just
a hack to deal with our current css styles and no new styling should be added in this file.*/

#ipython-main-app {
    position: relative;
}

#jupyter-main-app {
    position: relative;
}

#notebook-container{
    box-shadow: none !important;
}

.container {
    width: 80% !important;
}

.notebook_app {
    background: #fff !important;
}

body > #header {
    background:  #000;
    color: #fff;
}

.navbar-default {
    background: none;
    border: none;
}

.navbar-default .navbar-nav > li > a, #kernel_indicator {
    color: rgba(255, 255, 255, 0.25);
    border-bottom: 2px solid #f57b00;
    transition: all 0.25s;
}

.navbar-default .navbar-nav > li > a:hover, #kernel_indicator:hover {
    border-bottom: 2px solid #fff;
    color: rgba(255, 255, 255, 1);
}

div.input_area {
    border: none;
    border-radius: 0;
    background: #f7f7f7;
    line-height: 1.5em;
    margin: 0.5em 0;
    padding: 0;
}

div.cell {
    transition: all 0.25s;
    border: none;
    position: relative;
    top: 0;
}

div.cell.selected, div.cell.selected.jupyter-soft-selected {
    border: none;
    background: transparent;
    box-shadow: 0 6px 18px #aaa;
    z-index: 10;
    top: -10px;
}


div#pager {
    opacity: 0.85;
    z-index: 9999;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: transparent;
    border-bottom: 2px solid #fff;
}

.dropdown-menu {
    z-index: 999999 !important;
    background-color: #000;
    color: #fff;
    opacity: 0.95;
}

.dropdown-menu > li > a {
    color: #fff;
}

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
    color: rgba(255, 255, 255, 0.25);
}

.navbar-nav > li > .dropdown-menu {
    border: none;
    box-shadow: none;
}

div.output_wrapper {
    background: #eee;
}

div.cell.unselected div.output_area{
    box-shadow: inset 0 0 25px #aaa;
    padding: 1em 0;
    overflow-x: auto;
    transition: all 0.25s;
}

div.cell.selected .output_area {
    box-shadow: inset 0 0 5px #aaa;
    padding: 0.5em 0;
    overflow-x: auto;
}

div.cell.selected .div.output_scroll {
    box-shadow: none;
}

div.output_wrapper {
    margin: 0 0 1em;
    transition: all 0.25s;
}

div.cell.selected .output_wrapper {
    margin: 0;
}

.dataframe {
    background: #fff;
    box-shadow: 0px 1px 2px #bbb;
}

.dataframe thead th, .dataframe tbody td {
    text-align: right;
    padding: 1em;
}

.output, div.output_scroll {
    box-shadow: none;
}

.rendered_html pre code {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #2a7bbd;
    color: #444;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

h1, .h1 {
    font-size: 33px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 2.5em !important;
    color: #2a7bbd;
}

How I Scraped Anime Filler List Website to get list of episodes of anime

Hamza — Sun, 15 Aug 2021 06:49:26 +0000

At the start of this year I was learning Web Development, mainly ( HTML, CSS, JavaScript ) and I wanted to make projects to get a better understanding of concepts. Since I loved watching anime at that time, I thought it would be a great idea to make a clone of 'Anime Filler Website'. So, I started working on it. But instead of using an API ( or I couldn't find one ) I went along with the idea of scraping Anime Filler Website for the details I needed.

Here's how I did it:

These are the libraries I used. I used 'requests' to send request to the required website and get the response back along with the required data. I used 'bs4' (BeautifulSoup) so that we can parse the data that we got from the request. I used the library 'json' to convert python array of objects into json array of objects. And lastly I used 'shutil' to move the json file from one location to another.

Here I created a list of anime that I wanted to get the episode list of. It is a big list so I did not mention all the name in the image.

The function getJsons() in the above image is the main program. It takes the name of the anime as in the website as a parameter. It then makes a request to the website and gets back a response which is then stored in the variable 'result'. Then using bs4 it converts the text data inside result to a parsable data and stores it inside the variable 'soup'. Then we are free to select whichever HTML tag we want from the variable soup using soup.select() and then filtering the arrays to get only the text inside the HTML tags.
Then it initializes an array so that we can store our python objects inside it. Loops throuhgh the list of the textContents and checks if the selected episode is a filler, if it is a filler then adds an HTML class 'red' as a class in the object else add a class 'green'. Stores all the data under required titles in the object and then finally appends the object to the array.
It then converts the resultant array into a json array of bbjects using library 'json'. It then makes a file with anime-name.json and stores our array inside it.
Finally using library 'shutil' it moves the json file from current directory to where we want it.

We run this function for all the anime in the anime list.
Thank You!! Hope you learned something from the post.
Here is the link to the github repo of my project AnimVille