Image for post
Image for post

When a web page is loaded, the browser creates a Document Object Model of the page. The DOM is a W3C (World Wide Web Consortium) standard.

The HTML DOM model is constructed as a tree of Objects:


Image for post
Image for post

Let us see mostly used new additions:

  • Dynamic Import
  • Nullish Coalescing Operator
  • Optional Chaining Operator
  • Private Class Variables
  • Promise.allSettled
  • Promise.Any

◉ Dynamic Imports

That means we do not have to import everything before, and we can import the dependencies only when we need them.

and we can import dependencies dynamically with async/await. As a result, the performance of the application improves by loading the modules at runtime.

How does it improve performance? With the conventional module system, we used to import the modules statically at the beginning of the program. Whether we need them now or later, we have to import them first…


Image for post
Image for post

📄 Table of Contents

<!DOCTYPE html><html><head><link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>#wrapper{position:relative;}#parent{position: absolute;width: 310px;height: 100px;border: 2px solid black;overflow:hidden;}.child{width: 100px;height: 100px;border: 1px solid red;float:left;}#leftarrow{position: absolute;height: 25px;width: 25px;position:absolute;}#rightarrow{position: absolute;height: 25px;width: 25px;position:absolute;}</style></head><body><script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script><div  id="wrapper"><div id="parent"><div class="child"> 1 </div><div class="child"> 2 </div><div class="child"> 3 </div><div class="child"> 4 </div><div class="child"> 5 </div></div></div>…

Image for post
Image for post

Haml is a markup language predominantly used with Ruby that cleanly and simply describes the HTML of any web document without the use of inline code. It is a popular alternative to using Rails templating language (.erb) and allows you to embed Ruby code into your markup.

It aims to reduce repetition in your markup by closing tags for you based on the structure of the indents in your code. The result is markup that is well-structured, DRY, logical, and easier to read.

This article is going to introduce you to writing your HTML as Haml.

It can be used…


Image for post
Image for post

📄 Table of contents

◉ Why css ‘reset’ is important for the web developer?

As a web developer, you can have zero lines of code in your stylesheet and your HTML will look slightly different depending on which browser you view it in.

That’s why we reset it. On reset-ting, we override any styling that you would otherwise inherit.

To ensure that any website will look the same across different browsers, everyone must reset or start about every project with a few lines of code in their top-level CSS file that look something like this:


Image for post
Image for post

📄 Table of Contents

  • why ruby

Control Flow: conditional statements

Looping / Iterator


Image for post
Image for post

📄 Table of Contents

Introduction / History

Ruby is a “dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.” created by Matz.

Why Ruby ?

For me the first reason to learn Ruby was that it is, in fact, a beautiful programming language. It is really natural to code it and always express my thoughts.

The second main reason was Rails. The well known framework that Twitter, Basecamp, Airbnb, Github, and so many companies use.

How do I run a Ruby file?

It’s easy — just…


Image for post
Image for post

📄 Table of contents

  • px, em , rem
  • Global CSS Reset

px, em, rem

em

An em is equal to the computed font-size of that element’s parent. For example, If there is a div element defined with font-size: 16px then for that div and for its children 1em = 16px.

Default font-size of the root element is provided by browser.

<div id="parent" class="parent">
Parent
<div id="outerChild" class="child">
Outer child
<div id="innerChild" class="child">
Inner child
</div>
</div>
</div>
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em;
}

Here, you can see we gave font-size: 20px to.parent and font-size: 1.5em to.child. Computed font sizes of both .child(#outerChild


Alternatives to vanilla HTML

Image for post
Image for post

HTML is the first language that many developers learn. While learners of CSS and JavaScript soon encounter tools to augment these languages — such as Sass (for CSS) or Babel (for JavaScript) — the same is rarely true of HTML.

So, in this article, we’ll explore four of the most popular templating engines for HTML. We’ll look into why you might choose to use them, and where you’re likely to encounter them in other tech-stacks.

We have HTML in other languages

There are several technology-specific solutions to writing HTML.

  • React.js has JSX,
  • Ruby has eRuby (or ERB),
  • PHP has, well, “HTML in PHP”.
  • Java has JSP…

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store