📄 Table of contents
- Why to Reset in CSS
- Responsive Images
- Grid Layout
◉ 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:
By default, an element’s height and width are determined in the following…
📄 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 create a file with the extension . rb , navigate to that file’s directory from the command line, and run it using $ ruby filename. rb (the dollar sign is just the command prompt). You’ll be able to gets from and puts to the command line now! …
📄 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 (JavaServer Pages)…
📄 Table of contents
- What is Bootstrap
- Get Started with Bootstrap
- Bootstrap CSS
- Bootstrap v3.0 vs v4.0
- Rules of the Grid
Bootstrap
Bootstrap is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web by using HTML, CSS and JS framework.
It contains mobile first styles throughout the entire library, instead of using them in the separate files.
The last stable release of Bootstrap v3.3.7 was in July 2016 and in August 2017, Bootstrap 4.0.0 beta version released.
How to Get Started with Bootstrap.
Some people will ask or explain “How to install Bootstrap”. Well, you don’t really “install” it. …
Why should I switch my website to RWD?
Your website looks great of the desktop screen but it may not be true when your site is viewed on a smartphone or a tablet. Once you make the design responsive, the website will look good (and readable) on all screens.
With Responsive Design you can create one design and it will automatically adapt itself based on the screen size of the mobile device. This approach offers plenty of advantages:
- It saves time and money as you don’t have to maintain separate websites for desktops and mobile phones.
- Responsive Design is good for your website’s SEO (search rankings) as every page on your site will have a single URL and thus Google juice is preserved. You don’t have to worry about situations where some sites link to your mobile site while others link to your desktop site. …
📄 Table of contents:
4. Differences between Shadow DOM and Virtual DOM
DOM (Document Object Model) is a fundamental concept in front-end, and for sure, everyone who tried to learn programming has heard about it more than once. For beginners, it’s not so easy to understand what it exactly is and how to manipulate it. DOM manipulation isn’t so easy and comfortable, and the most important, it brings a lot of issues with performance. Nowadays, there are two essential concepts of DOM came with progressive web frameworks like Angular, React.js or Vue.js, Shadow DOM and Virtual DOM. …
Server Based Authentication (The Traditional Method)
Since the HTTP protocol is stateless, this means that if we authenticate a user with a username and password, then on the next request, our application won’t know who we are. We would have to authenticate again.
The traditional way of having our applications remember who we are is to store the user logged in information on the server. This can be done in a few different ways on the session, usually in memory or stored on the disk.
As the web, applications, and the rise of the mobile application have come about, this method of authentication has shown problems, especially in scalability. …
About
