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:
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…
📄 Table of Contents
- Using flickity
- https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/
- Vanilla JS carousel coding technique.
- https://css-tricks.com/css-only-carousel/
<!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>…
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.
📄 Table of contents
- Why to Reset in CSS
- Responsive Images
- Grid Layout
- Vertical Centering of Dynamic Content
- 8 CSS -tips tricks
◉ 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:
…
📄 Table of Contents
- how to run a ruby file
- dynamically Add & Remove element with jQuery
Dynamically add and remove element with jQuery
📄 Table of Contents
- why ruby
Control Flow: conditional statements
Looping / Iterator
📄 Table of Contents
- why ruby
- how to run a ruby file
- Encapsulation
- Inheritance
- Modules (inbuilt + custom)
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…
📄 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
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.
