Life @ Uki2: January 2018

Thursday, January 4, 2018

Node JS - Day 39

Node.js is open source, completely free, and used by thousands of developers around the world. It is used to develop I/O intensive web applications like video streaming sites, single-page applications, and other web applications.

Features of Node.js

Asynchronous and Event Driven
Very Fast
Single Threaded but Highly Scalable
No Buffering

Where to Use Node.js?

Following are the areas where Node.js is proving itself as a perfect technology partner.

I/O bound Applications
Data Streaming Applications
Data Intensive Real-time Applications (DIRT)
JSON APIs based Applications
Single Page Applications

Node JS code have the following three important keyword..

Import required modules − We use the require directive to load Node.js modules.

Creating server − A server which will listen to client's requests

Read request and return response − The server created in an earlier step will read the HTTP request made by the client which can be a browser or a console and return the response.

Tuesday, January 2, 2018

Responsive Design - Day 38

It's important for websites to resize and reorganize their content to best fit screens of all sizes. When a website doesn't respond to different screen sizes, the website may look odd or become indecipherable on certain devices.

Media Queries

CSS uses media queries to adapt a website's content to different screen sizes. With media queries, CSS can detect the size of the current screen and apply different CSS styles depending on the width of the screen.

@media only screen and (max-width: 480px) { body { font-size: 12px; } }.

1. @media — This begins a media query rule and instructs the CSS compiler on how to parse the rest of the rule.

2. only screen — Indicates what types of devices should use this rule. In early attempts to target different devices, CSS incorporated different media types (screen, print, handheld). The rationale was that by knowing the media type, the proper CSS rules could be applied. However, “handheld” and “screen” devices began to occupy a much wider range of sizes and having only one CSS rule per media device was not sufficient. screen is the media type always used for displaying content, no matter the type of device. The only keyword is added to indicate that this rule only applies to one media type (screen).

3. and (max-width : 480px) — This part of the rule is called a media feature, and instructs the CSS compiler to apply the CSS styles to devices with a width of 480 pixels or smaller. Media features are the conditions that must be met in order to render the CSS within a media query.

CSS rules are nested inside of the media query's curly braces. The rules will be applied when the media query is met. In the example above, the text in the body element is set to a font-size of 12px when the user's screen is less than 480px.

Responsive Design - Day 37

Responsive design! Responsive design refers to the ability of a website to resize and reorganize its content based on:

The size of other content on the website.
The size of the screen the website is being viewed on.

Em
Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as em in CSS.

.p { font-size: 2em; }

Here, no base font has been specified, therefore the font size of the paragraph element will be set relative to the default font size of the browser. Assuming the default font size is 16 pixels, then the font size of the heading element will be 32 pixels.

Rem
Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the root element. The root element is the <html> tag.

html { font-size: 20px; }
h1 { font-size: 2rem; }

Here, font-size of whole html tag to 20px. So, font-size of Heading will be 40px.
One advantage of using rems is that all elements are compared to the same font size value, making it easy to predict how large or small font will appear.