DEV Community: Sudharshan S

My Visual Studio Code setup

Sudharshan S — Mon, 19 Sep 2022 01:03:31 +0000

Microsoft Visual Studio Code is so popular among developers around the world.

We have lot of customization options to do with our code.

How I setup my VS Code for development?

Theme - Ayu or GitHub

Icon - Ayu or vscode-icons

Font - Fira Code or Cascadia Code → free

In settings.json

`
{

“files.autoSave”: “afterDelay”,

“editor.fontFamily”: “‘Fira Code’, Consolas, ‘Courier New’, monospace”,

“editor.renderWhitespace”: “boundary”,

“editor.cursorStyle”: “line”,

“editor.wordWrap”: “on”,

“editor.letterSpacing”: 0.5,

“editor.lineHeight”: 25,

“editor.cursorBlinking”: “expand”,

“editor.cursorSmoothCaretAnimation”: true,

“editor.cursorWidth”: 5,

“editor.fontLigatures”: true,

“editor.fontWeight”: “normal”,

“workbench.colorTheme”: “Ayu Mirage”,

“workbench.iconTheme”: “ayu”,

“eslint.alwaysShowStatus”: true,

“liveServer.settings.CustomBrowser”: “chrome”,

“liveServer.settings.donotShowInfoMsg”: true,

“editor.formatOnPaste”: true,

“editor.formatOnSave”: true,

“editor.formatOnType”: true,

“[html]”: {

“editor.defaultFormatter”: “vscode.html-language-features”

“[css]”: {

“editor.defaultFormatter”: “vscode.css-language-features”

“[javascript]”: {

“editor.defaultFormatter”: “esbenp.prettier-vscode”

“[jsonc]”: {

“editor.defaultFormatter”: “vscode.json-language-features”

}

Now VS Code is way better :)

You can try the above settings to your environment. Definitely, you’ll fall in love with your VS Code❤

Responsive Button size✅

Sudharshan S — Thu, 04 Nov 2021 07:11:02 +0000

⭐ In HTML, button tag is used to create tappable buttons on the web page. It is mostly used for navigation bar and submit purpose.

⭐ The button should be more responsive whether he/she using mobile phones, tablets, laptop or desktop. Otherwise it will be awkward.

⭐ For user experience, to create responsive buttons use min-height and min-width and set the value 40 pixels to 48 pixels perfect for fingers while using phone.

👉 Watch below video to get understand
https://youtu.be/ZNDWrXE1mH4

✍️Note: height and width property alone can be a little dangerous because it won’t allow the element to resize if the content inside of it is bigger than the container.

Answer: Completely uninstall VS Code extensions

Sudharshan S — Wed, 03 Nov 2021 13:39:31 +0000

Feb 21 '21

For Windows - Users\username.vscode\extensions You may delete what extensions you don't want. And Click on hidden items then follow the below instructions - This PC -> C:\Users\username\AppData\Roaming\Code\CachedExtensionVSIXs and delete file which you uninstalled.

Open Full Answer

Answer: Does LESS have an "extend" feature?

Sudharshan S — Wed, 03 Nov 2021 13:38:42 +0000

Nov 3 '21

Less allows us to do :extend(.class) or :extend(#id)

Open Full Answer

HTML vs CSS vs JS - Differences✍

Sudharshan S — Fri, 29 Oct 2021 02:17:56 +0000

👉 HyperText Markup Language (HTML), determines how documents and web pages are displayed in a web browser, the language for the building blocks of any website.
⭐ HTML controls the layout of the content.
⭐ It provides structure for the web page design.
⭐ And it's a building block of any web pages.

👉 Cascading Style Sheet (CSS), it determines how a document created in HTML is styled. For Example - colors, fonts, grid, flexbox, layout and responsive features.
⭐ Applies style to the web page elements.
⭐ It varies screen sizes to make web pages more responsive.
⭐ Overall, CSS handles the look and feel of a web pages.

👉 JavaScript(JS), allows you to change both HTML and CSS elements on our website after the site has been loaded, which gives you the ability to make your site more interactive and engaging for users.
⭐ JS adds more interactivity to our web page.
⭐ It handles complexity of functions i.e. how our web page responds while using.
⭐ User friendly for our clients.

Variables Comparison JS✍

Sudharshan S — Tue, 19 Oct 2021 07:10:29 +0000

👉 var -> Var can be re-assigned, re-defined and has a function-scope. When we declared outside the function, it has a global scope and it attached itself to the window object.

👉 let -> Let can be re-assigned. It’s scope is within a block of code.

👉 const -> Const cannot be re-assigned or re-defined. It’s scope is within a block of code.

Execution Context✨

Sudharshan S — Mon, 18 Oct 2021 03:23:04 +0000

✏ In JavaScript, Execution Context is like a container. And it has
two components.
✏ They are, memory component or variable environment and code
component or thread of execution.
✏ In variable environment or memory component, it contains
variables, functions, and key-value pairs.
✏ But In thread of execution, it's a place where code is executed
at one line at a time. Because, JavaScript is a synchronous
single-threaded language i.e. JavaScript can only execute one
command at a time and in a specific order. It only go to the
next line once the current line has been finished execution.

Document Object Model🔥

Sudharshan S — Sun, 17 Oct 2021 07:22:37 +0000

👉 DOM stands for Document Object Model.

👉 DOM is 'World Wide Web Consortium' (W3C) standard.

👉 DOM is a programming interface for HTML documents.

👉 When browser try to render a HTML document, it creates an
object based on the HTML document called DOM.

👉 By using DOM, we can manipulate or change various elements
inside the HTML document.

Global Attributes - Contenteditable Attribute✍

Sudharshan S — Tue, 28 Sep 2021 11:56:47 +0000

In HTML Contenteditable Attribute, is a Global Attribute.

By clicking on the paragraph, the content of it can be edited similar to an input text field.

It has two attribute values: true and false.

true - it specifies that the element is editable.
false - it specifies that the element is not editable.

Comment out whitespace between inline elements

Sudharshan S — Tue, 28 Sep 2021 03:50:34 +0000

Inline display elements, usually such as span or a, will include up to one white-space character before and after them in the document. In order to avoid very long lines in the markup (that are hard to read) and unintentional white-space (which affects formatting), the white-space can be commented out.

If you trying without a comment between the inline elements, and there will be one space between them. Sometimes picking up the space character is desired.

In above image, we use both an HTML comment to nullify the newline character, and without it, you can notice a small formatting differences.

Contenteditable Attribute✨

Sudharshan S — Mon, 27 Sep 2021 15:42:46 +0000

In Hypertext Markup Language (HTML), contenteditable attribute specify whether the content of an element can be edited.

Upon clicking on the selected element, the content of it can be edited similar to an input text field.

CSS Positioning (Static Positioning)

Sudharshan S — Mon, 27 Sep 2021 13:01:57 +0000

Static Positioning is the default positioning property used in CSS.
It always goes according to the normal flow of the page.
It will not affected by the top, right, bottom, and left properties.