DEV Community: LeafKn

😎 Make VS Code your home 🏠 using these awesome extensions 💻

LeafKn — Sat, 09 Apr 2022 11:06:36 +0000

Wait... VS Code my home? What do you mean huh?
Making it your home means never wanting to leave that beautiful editor.

Here I show you some of the most useful extensions for VS Code that makes the editor so nice that you will code this way:

Let's start!

1. Live Share

This extension is pretty pretty useful for collaborative coding. I have myself used it quite a few times.
You just need to start a live session with that button in the image below and a link will be copied to your clipboard. Other team members just need to use that link.

2. Indent Rainbow

This extension makes coding so beautiful. The rainbow indents (as can be seen in the gif below) look so pretty that I don't want to go to any other place to code!

3. Live SASS Compiler

If you are a frontend dev and have worked with SASS on VS Code, you must have used this extension. But if you are that Somewhere-in-my-own-world-yeah human then I tell you to use it.
Just a click of the Watch SASS button and your SASS will be continuously watched and will get converted to CSS in no time!

4. Code Spell Checker

If english is not your first language or you make a lot of typos or you just love those squiggly lines under text, then this extension is for you!
Underlines the text that is not in its dictionary and suggest the closest possible words.

5. GitLens

If you use Git, then you must be using this. BUT if you are again that I-am-still-in-my-world human, this extension gives superpower to Git.
Wondering how, watch the gif below!

6. Code Runner

You know, I know that this whole file will give a lotta errors in the console but the lines 5 to 10 seems perfect. I just wanna run those but... how?
Code Runner got you covered. This runs the lines you select (yes exactly those lines)

7. Polacode

If you write blogs or you are I-love-code-images human, this extension is very useful.
See the gif below to see how it works.

Output:

8. Chronicler

Well, if you have watched those gifs attentively then you must have noticed I am recording those with something called Chronicler.
This extension is pretty useful to record gifs like those.
Visit the extension link on more information of how to use it.

9. JavaScript (ES6) Code Snippets

This one - I can't live without. This makes writing JavaScript way fast and interesting. See the gif below and visit the extension link to know more about the code letters you can use.

Plus, of-course this Emmet Cheat Sheet.

It is already available in VS Code and makes writing code (again) faster!

Hope this helps you! See you around!

💪Become a Front-end Master using these awesome tools 🖱

LeafKn — Sun, 27 Mar 2022 17:42:07 +0000

Front-end development refers to developing the part of a computer system or application with which the user interacts directly.
If you are a front-end developer, full-stack developer, aspiring front-end developer or a creature that can breathe and read this -- this post is for you!

Got seatbelts? Let's go

1. Coolers

Provide you a color scheme generator along with many awesome trending color schemes!

2. ColorBox

Lets you create your own color scheme with a whole variety of tools!

3. Adobe Color

Spin around the color wheel, know more about colors through playing with them along with many insanely nice color schemes available at one search!

4. Wordmark

Type in your sentence/word and scroll to see how it will look in web safe fonts!

5. PNGtoSVG

Simply convert your png to svg and use it in your projects.

6. CSS3 Generator

Provides perfect CSS3 code that works on every browser!

7. CSS Filters

Apply filters using the tools and use what please you.

8. Fancy Border Generator

Bored of those basic border radius things, here create fancy-fancy borders for your divs or buttons or any element you like!

9. Blob Maker

Blobs.. makes your website look so blobby and cute. Create them with this awesome tool and have blobby fun.

10. Blob Maker 2

One more blob creator. This one is pretty cool too! I use both ;)

11. Get Waves

Create wavy wavy website using this great tool.

12. Clippy

The best clipping tool I use most. Helps create really nice clip paths!

Hope this helps you! See you around!

Emojicode😎 (Conditionals)

LeafKn — Fri, 11 Mar 2022 10:28:38 +0000

Wuhuuu.. here comes the last part of the Emojicode series.

In this part, I'll introduce you to conditionals and how to make more complex programs with Emojicode 💪.

Conditionals 🙄❓

You are feeling hungry, what should you do? Well, eat! This is a conditional.
The condition here is - If in this world I ever feel hungry then I should get up and eat 😋 else I should continue doing stuff that I actually procrastinate 😪.

In Emojicode, Conditionals take an expression, which is code that evaluates to determine a value, and checks if it is 👍 (true) or 👎 (false).

Using Emojicode, we can add this decision making ability into our program using the ↪️ statement. ↪️ checks if the condition is 👍 or 👎 and if the condition evaluates to 👍, it runs a block of code.

↪️ 👍 🍇
  😀 🔤Hello World!🔤❗️
🍉

💭 Result: Hello World

↪️ 👎 🍇
  😀 🔤Hello World!🔤❗️
🍉

💭 Result: *Nothing is printed*

Now, what happens when your condition is not 👍. Like you have gone to your kitchen and you have nothing to eat. Oof, now you'll have to prepare yourself to go out and bring something to eat (hard work 💪).
Here comes 🙅, this executes code for the backup plan.

👎 ➡️ foodPresentInKitchen

↪️ foodPresentInKitchen 🍇
  😀 🔤Take food, eat and live.🔤❗️
🍉
🙅 🍇
  😀 🔤Go out and bring something to eat.🔤❗️
🍉

Comparison Operators:

What about other data types, like 🔤(strings) and 💯(numbers).
We use comparison operators.
One of them is 🙌.

Expression	Evaluates to
6 🙌 6	👍
🔤Hello🔤 🙌 🔤Hello🔤	👍
2 🙌 3	👎
🔤Emoji🔤 🙌 🔤code🔤	👎

Now, you are in the market and you go to a shop. You need a pizza and a coke bottle. You are so extreme lazy that you don't want to go to two different shops to buy them. You look for a shop selling both. This is how you'll work:

🔤Yes🔤 ➡️ shopHasCoke
🔤Yes🔤 ➡️ shopHasPizza

↪️ shopHasCoke 🙌 shopHasPizza 🍇
  😀 🔤No more hard work, get into the shop right away!🔤❗️
🍉
🙅 🍇
  😀 🔤Sadly, look for another shop 😭🔤❗️
🍉

💭 Prints "No more hard work, get into the shop right away!" because both have equal values that is "Yes"

Other comparison operators:

Operator	Operation
◀️	Less than
▶️	Greater than
◀️🙌	Less than or equal to
▶️🙌	Greater than or equal to

Now, for the sake of continuing this senseless story, you are unable to find any such shop 😭. You can only get greens now.
Oof, you will need to chain one more conditional here that will execute if the above conditions are false but the new condition is true.

🔤No🔤 ➡️ shopHasCoke
🔤No🔤 ➡️ shopHasPizza
👍 ➡️ shopHasGreens

↪️ shopHasCoke 🙌 shopHasPizza 🍇
  😀 🔤No more hard work, get into the shop right away and eat happily.🔤❗️
🍉
🙅↪️ shopHasGreens 🍇
  😀 🔤Get right into the shop and eat sadly.🔤❗️
🍉
🙅 🍇
  😀 🔤Fellow human, sleep hungry today 😴🔤❗️
🍉

💭 Prints: Get right into the shop and eat sadly.

AND and OR (Logical Operators):

Sometimes we need to run a piece of code if all conditions provided are true but sometimes we need to run a piece of code even if one of the provided conditions is true.

You are lucky enough to manage to get greens. You are in your kitchen trying to create a salad. You need salt, greens(of-course) and a plate to serve in.

👍 ➡️ hasGreens 
👍 ➡️ hasSalt
👍 ➡️ hasPlate

↪️ hasGreens 🤝 hasSalt 🤝 hasPlate 🍇
  😀 🔤Let's make a sal.. sal.. salad!🔤❗️
🍉
🙅 🍇
  😀 🔤First, get all the stuff in front of you.🔤❗️
🍉

💭 Prints: Let's make a sal.. sal.. salad!

So you have two plates. One is white and other is purple. You are unable to find one but anyway anyone will work. This is where we will use 👐 operator. This will execute the code once any of the condition evaluated to 👍.

👍 ➡️ hasWhite 
👎 ➡️ hasPurple
↪️ hasWhite 👐 hasPurple 🍇
  😀 🔤Let's serve our salad.🔤❗️
🍉
🙅 🍇
  😀 🔤At-least go and find either plate.🔤❗️
🍉

💭 Prints: Let's serve our salad.

Other stuff that is not covered in this series.

a. You can group expressions like this:

🤜 3 ✖️ 2 🤛 ➕ 🤜 2 ✖️ 2 🤛

This is similar to: (3*2) + (2*2)

b. There are loops

🏁 🍇
   💭 Creating a list of text
   🍿🔤hello🔤 🔤hi🔤 🔤howdy🔤 🔤hiii🔤🍆 ➡️ list

   💭 Looping through the list
   🔂 typeOfHello list 🍇
     😀 typeOfHello❗️
   🍉
🍉

💭 Prints:
💭🔜
hello
hi
howdy
hiii
🔚💭

etc..

Every syntax of Emojicode can be found in the official docs. To become an emojicode master, go to their official docs and play with emojis 💪.

Yay, we have completed the Emojicode series.

See you again!

Emojicode😎 (Variables)

LeafKn — Wed, 09 Mar 2022 09:52:06 +0000

Part 2 of the Series on Emojicode.

Let's dive deep into coding with emojis.
In this part, I'll try to introduce you to what variables are and how are they implemented in Emojicode 💪.

Variable 🙄❓

A variable is simply a name that represents a particular piece of your computer’s memory that has been set aside for you to store, retrieve, and use data.
Variable store data types. We had a small introduction to strings in the last part - which is a data type!
Data types are just to tell computer what type of data it is.

Declaring and Assigning Variables:

Emojicode lets you declare two types of variables:

Declaring a constant variable:

🔤Earth🔤 ➡️ planet
💭🔜 planet is variable, ➡️ is assigning operator,  Earth is a string and is the value of planet variable 🔚💭

Declaring a mutable variable:

6 ➡️ 🖍🆕 coins
💭🔜 coin is a variable, ➡️ is assigning operator,  6 is an integer and is the value of coin variable, 🖍🆕 means mutable 🔚💭

💭 Mutable variables *need* to be mutated or emojicode will smash an error on you.

String Interpolation (printing your variable):

Just declaring variable is boring 🥱, we need to print them out.
To print variables, we need to wrap them around 🧲.

Arithmetic Operations:

Emoji	Operation	Example
➕	addition	2 ➕ 2 ➡️ number 💭 number is 4
➖	subtraction	2 ➖ 2 ➡️ number 💭 number is 0
✖️	multiplication	2 ✖️ 2 ➡️ number 💭 number is 4
➗	division	2 ➗ 2 ➡️ number 💭 number is 1
🚮	modulo	2 🚮 2 ➡️ number 💭 number is 0

Mutate the mutables 😎! Operator Assignments.

In Emojicode, operator assignment provides a short-hand method for modifying the value of variables.

Suppose we have a variable like this:

2 ➡️ 🖍🆕 mutate   💭 mutate is 0

Emoji	Operation	Example
⬅️➕	addition assignment	mutate ⬅️➕ 1 💭 mutate is now 3
⬅️➖	subtraction assignment	mutate ⬅️➖ 1 💭 mutate is now 2
⬅️✖️	multiplication assignment	mutate ⬅️✖️ 2 💭 mutate is 4
⬅️➗	division assignment	mutate ⬅️➗ 2 💭 mutate is now 2
🚮	modulo assignment

Let's code a program 💻

This is a very basic program. Pardon me if you are hecker 😁

See you in next part! Stay tuned :)

Emojicode - Code with emojis 😎 (Introduction)

LeafKn — Mon, 07 Mar 2022 10:24:04 +0000

Let's make our code beautiful and attractive...
Let's code with emojis!

In this article I'll cover Introduction to Emojicode -> 1st article/blog of 3 part series.

What is this - programming in emojis 😕?

Yeahhh.. programming with emojis.
Emojicode is an open-source, strongly-typed programming language consisting of emojis created by Theo Weidmann.

Let's begin! 🤩

So before getting to the basics of programming, let me tell you where you can code this language.

You can run your Emojicode programs locally by following the steps of installation on their main website: Install Locally
You can start right away using the online editor of TIO: Online TIO Editor

Extension:

We write Emojicode programs in files with the extension .emojic or .🍇

Basic Structure:

All code will be inside 🏁 block. The 🏁 block indicates all the code that should run when the file is executed.
For larger programs, we use 🍇 and 🍉 to add more blocks.

🍇 --> the start of the code block
🍉 --> the end of the code block

So, basic emojicode file will look like this:

🏁 🍇
  code here..
🍉

Print stuff:

To print in Emojicode, we use the 😀 ❗️

😀 code to print.. ❗️

Strings:

If you have ever worked with a programming language then you must have worked with strings. But for newbies - Strings are a form of data type for computer. Strings are pieces of text.

Strings in Emojicode has to be wrapped around 🔤
Here's an example of printing a string in emojicode:

Comments

Comments are lines of code that you don't want to execute. Comments can explain what the code is doing or leave instructions.
There are two types of comments:

Single-line --> comment out a single line and starts with a 💭 in emojicode.
Multi-line --> comment out multiple lines and starts with 💭🔜 and ends with 🔚💭 in emojicode.

🏁 🍇
💭 single-line comment
💭 printing a string
  😀 🔤Practicing comments🔤❗️
  💭🔜 Multi-line comment 🔚💭
🍉

TIP: Press Win + . key combination on windows or Control + Command + Spacebar on mac to bring the emoji keyboard.

Thank You! Stay Tuned for other parts :)

Learn coding for free!

LeafKn — Sun, 27 Feb 2022 15:44:44 +0000

Ohhh.. there are a lot of articles showing the best free coding courses online.. and see - here's another one oof.

I'll make sure that this is not boring for you. It is based on my experience :)

1. Khan Academy

So, here is from where I started learning how to code.
It has very nice introductory courses but not a very good place to go if you are familiar with the basics.

2. Scrimba

This website doesn't offer all courses free but there are a lot of well-made courses that can be accessed freely. Good to make a start as well as enhancement.

3. freeCodeCamp

Hmm.. must have heard in many articles plus it already has free in its name. Actually, it is pretty pretty good to learn coding. Pretty good to enhance or to make a start.

4. MIT OpenCourseWare courses

Who'd not like to learn from the lectures given at the world's one of the best universities - MIT? Yes, you are right - at MIT OCW you can find introductory and even follow-ups courses for programming.

Hopefully this helps!
Thank You :)