Forem: AkashKumarYadav

5 Reasons to use SVG's in your next project

AkashKumarYadav — Tue, 12 Jan 2021 00:25:01 +0000

What is SVG ?

Let’s get technical for a second. SVG stands for “Scalable Vector Graphics” and is an XML based, vector image format.

SVGs are predominantly found on the web, and while they have similar uses to JPEG, PNG and WebP image types, their DNA is extremely different.

So why are they different?

Well, traditional image types like JPEG, PNG and GIF are bitmap-based, meaning they consist of a set amount of pixels. Typically, this means that as soon as you start to increase or decrease an image of this type, you are presented with jagged lines, blurry artifacts and a pixelated mess.

WHY ?

1. Resolution

2. Animation

3. Accessibility and SEO

4. Speed

5. Practicality

Resolution

An SVG will scale indefinitely and will remain super sharp at any resolution.
It doesn’t matter about your screen size, zoom level, resolution or whether or not you have a ‘retina’ display. SVG is vector based, paths, shapes and fills. This allows for infinite resolution, much like when creating artwork for print and using shapes, the same principles apply!

Animation

SVGs can be animated and styled with CSS. Animations (transformation/transition) that you use on HTML elements can also be used on an SVG element. There are instances where you can’t use CSS to animate SVGs but these instances can usually be covered with JavaScript

This opens up a whole world of creativity when it comes to the web

Accessibility and SEO

Google index’s SVGs, which is good news. SVG content whether it is in a standalone file or embedded directly in HTML is indexed.

SPEED

Due to the nature of vector graphics, the data that determines the file size are the layers, effects, masks, colors, and gradients used.

In comparison, bitmap-based images record each and every pixel in the image as well as the number of colors used. Admittedly, it’s a little more complicated than that, but the thing to take away from this is that for the most part, a bitmap-based image will be more expensive than an SVG counterpart.

On top of this, you can make your SVG files even smaller by compressing them with gzip. This means that fewer bytes need to be sent from the server or CDN if gzip compression is enabled.

Practicality

Graphs: Yes, graphs… SVGs are great at vector shapes, lending itself to things like infographics and graphs very well indeed.
Logos: Logos are usually vector based, and rightly so, The beauty here is, you could define an SVG document as your logo and then use it wherever you like without worrying about size, resolution or load times. The same factors apply for icons too.

Vim Cheat Sheet

AkashKumarYadav — Sun, 10 Jan 2021 23:45:07 +0000

Global

:h[elp] keyword - open help for keyword
:sav[eas] file - save file as
:clo[se] - close current pane
:ter[minal] - open a terminal window
_K _- open man page for word under the cursor

Tip Run vimtutor in a terminal to learn the first Vim commands.

Cursor movement

h - move cursor left
j - move cursor down
k - move cursor up
l - move cursor right
H - move to top of screen
M - move to middle of screen
L - move to bottom of screen
w - jump forwards to the start of a word
W - jump forwards to the start of a word (words can contain punctuation)
e - jump forwards to the end of a word
E - jump forwards to the end of a word (words can contain punctuation)
b - jump backwards to the start of a word
B - jump backwards to the start of a word (words can contain punctuation)
% - move to matching character (default supported pairs: '()', '{}', '[]'
- use :h matchpairs in vim for more info)
0 - jump to the start of the line
^ - jump to the first non-blank character of the line
$ - jump to the end of the line
g_ - jump to the last non-blank character of the line
gg - go to the first line of the document
G - go to the last line of the document
5gg or 5G __- go to line 5
__fx - jump to next occurrence of character x
tx - jump to before next occurrence of character x
Fx - jump to previous occurence of character x
Tx - jump to after previous occurence of character x
; - repeat previous f, t, F or T movement
, - repeat previous f, t, F or T movement, backwards
} - jump to next paragraph (or function/block, when editing code)
{ __- jump to previous paragraph (or function/block, when editing code)
__zz - center cursor on screen
Ctrl + e __- move screen down one line (without moving cursor)
__Ctrl + y - move screen up one line (without moving cursor)
Ctrl + b - move back one full screen
Ctrl + f - move forward one full screen
Ctrl + d - move forward 1/2 a screen
Ctrl + u - move back 1/2 a screen

Tip Prefix a cursor movement command with a number to repeat it. For example, 4j moves down 4 lines.

Insert mode - inserting/appending text
i - insert before the cursor
I _- insert at the beginning of the line
__a _- insert (append) after the cursor
__A - insert (append) at the end of the line
o - append (open) a new line below the current line
O - append (open) a new line above the current line
ea - insert (append) at the end of the word
Ctrl + h - delete the character before the cursor during insert mode
Ctrl + w - delete word before the cursor during insert mode
Ctrl + j - begin new line during insert mode
Ctrl + t - indent (move right) line one shiftwidth during insert mode
Ctrl + d - de-indent (move left) line one shiftwidth during insert mode
Ctrl + n - insert (auto-complete) next match before the cursor during insert mode
Ctrl + p __ - insert (auto-complete) previous match before the cursor during insert mode
__Esc - exit insert mode

Editing

r - replace a single character
J - join line below to the current one with one space in between
gJ - join line below to the current one without space in between
gwip - reflow paragraph
g~ - switch case up to motion
gu - change to lowercase up to motion
gU - change to uppercase up to motion
cc - change (replace) entire line
C - change (replace) to the end of the line
c$ - change (replace) to the end of the line
ciw - change (replace) entire word
cw - change (replace) to the end of the word
s - delete character and substitute text
S - delete line and substitute text (same as cc)
xp - transpose two letters (delete and paste)
u - undo
U - restore (undo) last changed line
Ctrl + r _- redo
_. - repeat last command

Marking text (visual mode)

v - start visual mode, mark lines, then do a command (like y-yank)
V - start linewise visual mode
o - move to other end of marked area
Ctrl + v - start visual block mode
O - move to other corner of block
aw - mark a word
ab - a block with ()
aB - a block with {}
at - a block with "<" ">" tags
ib - inner block with ()
iB - inner block with {}
it - inner block with "<" ">" tags
Esc - exit visual mode

Tip Instead of b or B one can also use ( or { respectively.

Visual commands

> _- shift text right
_< - shift text left
y - yank (copy) marked text
d - delete marked text
~ - switch case
u - change marked text to lowercase
U - change marked text to uppercase
Registers
:reg[isters] - show registers content
"xy - yank into register x
"xp - paste contents of register x
"+y - yank into the system clipboard register
"+p - paste from the system clipboard register
Tip Registers are being stored in ~/.viminfo, and will be loaded again on next restart of vim.
Tip Special registers:
0 - last yank
" - unnamed register, last delete or yank
% - current file name

alternate file name

* _- clipboard contents (X11 primary)
_ + - clipboard contents (X11 clipboard)
/ - last search pattern
: - last command-line
. - last inserted text
_ - _- last small (less than a line) delete
_ = _- expression register
_ __- black hole register

Marks and positions

:marks - list of marks
ma - set current position for mark A
`a - jump to position of mark A
y`a - yank text to position of mark A
`0 - go to the position where Vim was previously exited
`" - go to the position when last editing this file
`. - go to the position of the last change in this file
- go to the position before the last jump
:ju[mps] - list of jumps
Ctrl + i - go to newer position in jump list
Ctrl + o - go to older position in jump list
:changes - list of changes
g, - go to newer position in change list
g; - go to older position in change list
Ctrl + ] - jump to the tag under cursor

Tip To jump to a mark you can either use a backtick (`) or an apostrophe ('). Using an apostrophe jumps to the beginning (first non-black) of the line holding the mark.

Macros__

__ qa__ - record macro a
q - stop recording macro
@a _- run macro a
_@@ - rerun last run macro
Cut and paste
yy - yank (copy) a line
2yy - yank (copy) 2 lines
yw - yank (copy) the characters of the word from the cursor position to the start of the next word
y$ - yank (copy) to end of line
p - put (paste) the clipboard after cursor
P - put (paste) before cursor
dd - delete (cut) a line
2dd - delete (cut) 2 lines
dw - delete (cut) the characters of the word from the cursor position to the start of the next word
D - delete (cut) to the end of the line
d$ - delete (cut) to the end of the line
x - delete (cut) character

Tabs

:tabnew or :tabnew {page.words.file} - open a file in a new tab
Ctrl + wT - move the current split window into its own tab
gt or :tabn[ext] - move to the next tab
gT or :tabp[revious] - move to the previous tab
#gt _- move to tab number #
_:tabm[ove] # - move current tab to the #th position (indexed from 0)
:tabc[lose] _- close the current tab and all its windows
_:tabo[nly] _- close all tabs except for the current one
_:tabdo command - run the command on all tabs (e.g. :tabdo q - closes all opened tabs)

Working with multiple files

:e[dit] file - edit a file in a new buffer
:bn[ext] or :bn - go to the next buffer
:bp[revious] or :bp - go to the previous buffer
:bd[elete] - delete a buffer (close a file)
:b# - go to a buffer by #
:b file - go to a buffer by file
:ls _- list all open buffers
_:sp[lit] file - open a file in a new buffer and split window
:vs[plit] file - open a file in a new buffer and vertically split window
:vert[ical] ba[ll] - edit all buffers as vertical windows
:tab ba[ll] - edit all buffers as tabs
Ctrl + ws - split window
Ctrl + wv - split window vertically
Ctrl + ww __ - switch windows
__Ctrl + wq - quit a window
Ctrl + wx - exchange current window with next one
Ctrl + w= - make all windows equal height & width
_Ctrl + wh _- move cursor to the left window (vertical split)
_Ctrl + wl _- move cursor to the right window (vertical split)
_Ctrl + wj _- move cursor to the window below (horizontal split)
_Ctrl + wk _- move cursor to the window above (horizontal split)

Diff

zf - manually define a fold up to motion
zd __- delete fold under the cursor
__za - toggle fold under the cursor
zo - open fold under the cursor
zc - close fold under the cursor
zr - reduce (open) all folds by one level
zm - fold more (close) all folds by one level
zi - toggle folding functionality
]c - jump to start of next change
[c __ - jump to start of previous change
__do or :diffg[et] - obtain (get) difference (from other buffer)
dp or :diffpu[t] - put difference (to other buffer)
:diffthis - make current window part of diff
:dif[fupdate] - update differences
:diffo[ff] - switch off diff mode for current window

Tip The commands for folding (e.g. za) operate on one level. To operate on all levels, use uppercase letters (e.g. zA).
Tip To view the differences of files, one can directly start Vim in diff mode by running vimdiff in a terminal. One can even set this as git difftool.

ThankYou 😊

Top 5 vs CODE extensions for web developers

AkashKumarYadav — Sat, 29 Aug 2020 19:52:45 +0000

A list of essential Visual Studio Code extensions to help you become a more efficient web developer.

1. Live Server

A must-have for any developer creating webpages using HTML and CSS. Once installed all you have to do is open your project, look for the Go Live button on the status bar at the bottom, or use the command Alt+L Alt+O in order to launch a quick development live server so you can view your current project live on any browser.

2. GitLens

If you know and work with git, you will want this extension. This customizable extension lets you better understand your code by easily allowing you to view when, why, and by whom the code was added/edited.

3. IntelliSense for CSS class names in HTML

You don’t need to remember all the CSS class names while you are working on your HTML file. This extension will provide you with a completion list for the HTML class attribute based on your workspace or external files referenced beforehand.

Alternative: HTML CSS Support
Complementary: CSS Peek

4. Visual Studio IntelliCode

This extension uses AI technology to help Python, TypeScript/JavaScript, and Java developers. As you code, it will show a recommended completion items list sorted by context, rather than alphabetically or by most recent.

5. Rainbow Brackets

Visual help for those programmers that need to worry about closures, like javascript programmers. It does this by providing different colors for round brackets, square brackets, and squiggly brackets.

Alternative: Bracket Pair Colorizer 2

There is no shame in using tools to help you. Quite the contrary, a smart developer is one that will use these to make their lives easier and become more efficient in the process!