What happens when we type a URL in the browser (In Depth)?
If you are reading this then i would recommend to read this article first for a clear visibility that what we will understand in depth 🙂
https://jogendras.wordpress.com/2017/07/17/what-happens-when-we-type-a-url-in-the-browser/
Have you ever wondered, precisely –
- What happens in the background when we type a URL in the browser?
- How does a web page life-cycle sequence work?
- How browser knows, where to send request for the requested page?
- What happens on the Web Server when a request for a web page comes in?
- How does the Web server handle the incoming request?
- How is the HTML that is emitted to the client generated?
- How browser renders the page on the screen?
- Etc…
If you are also looking answers of above mentioned questions then this article is definitely for you. In this article, we will take a deeper look at the sequence of events that take place when we visit a ASP.NET page URL –
- URL is…
View original post 622 more words
What Is REST API?
REST is an architectural style which stands for Representational State Transfer.
An API for a website is that allows two software programs to communicate with each another. A REST-Ful API is an application program interface that uses HTTP requests to GET, PUT, POST and DELETE data. REST is a logical choice for building APIs that allow users to connect and interact with cloud services. RESTful APIs are used by such sites as Amazon, Google, LinkedIn and Twitter.
A RESTful API explicitly takes advantage of HTTP methodologies defined by the RFC 2616 protocol. They use GET to retrieve a resource; PUT to change the state of or update a resource, which can be an object, file or block; POST to create that resource; and DELETE to remove it.
Why REST ?
REST systems aim for –
- Fast performance – component interactions can be the dominant factor in user-perceived performance and network efficiency
- Reliability – is the resistance to failure at the system level in the presence of failures within components, connectors, or data
- Scalability – ability to grow, by re-using components that can be managed and updated without affecting the system as a whole, even while it is running.
- Simplicity of a uniform Interface
- Visibility of communication between components by service agents
The REST architectural style describes six constraints. These constraints, applied to the architecture, were originally communicated by Roy Fielding in his doctoral dissertation in 2000 and defines the basis of RESTful-style. If a service violates any of the required constraints, it cannot be considered RESTful.
The formal REST constraints are as follows:
- Client-Server– The client-server constraint works on the concept that the client and the server should be separate from each other and allowed to evolve individually and independently. In other words, I should be able to make changes to my mobile application without impacting either the data structure or the database design on the server. At the same time, I should be able to modify the database or make changes to my server application without impacting the mobile client. This creates a separation of concerns, letting each application grow and scale independently of the other and allowing your organization to grow quickly and efficiently.
- Stateless : – Each request from client to server must contain all of the information necessary to understand the request, and cannot take advantage of any stored context on the server. Session state is therefore kept entirely on the client.
- Cacheable : – Cache constraints require that the data within a response to a request be implicitly or explicitly labeled as cacheable or non-cacheable. If a response is cacheable, then a client cache is given the right to reuse that response data for later, equivalent requests.
- Uniform interface: – The uniform interface lets the client talk to the server in a single language, independent of the architectural backend of either. This interface should provide an unchanging, standardized means of communicating between the client and the server, such as using HTTP with URI resources, CRUD (Create, Read, Update, Delete), and JSON.
- Layered system: As the name implies, a layered system is a system comprised of layers, with each layer having a specific functionality and responsibility. If we think of a Model View Controller framework, each layer has its own responsibilities, with the models comprising how the data should be formed, the controller focusing on the incoming actions and the view focusing on the output. Each layer is separate but also interacts with the other. In REST API design, the same principle holds true, with different layers of the architecture working together to build a hierarchy that helps create a more scalable and modular application.
- Code on demand (optional) : Perhaps the least known of the six constraints, and the only optional constraint, Code on Demand allows for code or applets to be transmitted via the API for use within the application. In essence, it creates a smart application that is no longer solely dependent on its own code structure. However, perhaps because it’s ahead of its time, Code on Demand has struggled for adoption as Web APIs are consumed across multiple languages and the transmission of code raises security questions and concerns. (For example, the directory would have to be writeable, and the firewall would have to let what may normally be restricted content through.)
REFERENCES-
https://www.mulesoft.com/resources/api/what-is-rest-api-design
SQL SERVER : JOINS
SQL Server : JOINS are used to retrieve data from multiple tables. A SQL Server JOIN is performed whenever two or more tables are joined in a SQL statement.
There are 4 different types of SQL Server joins:
1) INNER JOIN -or- SIMPLE JOIN
2) LEFT JOIN -or- LEFT OUTER JOIN
3) RIGHT JOIN -or- RIGHT OUTER JOIN
4) FULL JOIN -or- FULL OUTER JOIN
5) SELF JOIN
6) CROSS JOIN
INNER JOIN:- INNER JOINS return all rows from multiple tables where the join condition is met.
INNER JOIN would return the…
View original post 552 more words
What happens when we type a URL in the browser?
If you are curious to know what happens in the background when we type a URL in the browser then this article is definitely for you. Below are the sequence of events that occurs when we enter a URL in the browser’s address bar-
- You type the URL into address bar in your preferred browser
- The browser parses the URL to find the protocol, host, port, and path.
- Browser checks cache, if requested object is in cache and is fresh, skip to #15
- Browser asks OS for entered domain’s IP address
- OS makes a DNS lookup and replies the IP address to the browser
- Browser opens a TCP connection to the server
- When a connection is open, browser sends the HTTP request to the host
- The host forwards the request to the server software (most often Apache, IIS) configured to listen on the specified port
- Server handles the…
View original post 293 more words
What is CSS Flexbox and how to use it?
Before the CSS Flexbox Layout module, there were four layout modes:
- Block, for sections in a web page
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
- CSS Flexbox is a whole module and not a single CSS property, it involves a set of properties.
- Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).
- The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container.
- The main idea behind the flex layout is to give the container the ability to alter its item’s width/height (and order) to best fill the available space
- A flex container expands items to fill available free space, or shrinks them to prevent overflow.
- Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
Working with Flexbox-
- When working with flexbox we need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.
- Items will be laid out either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
Properties for the Parent (flex container):
- display: flex | inline-flex; – Allows us to create a flex container (a flex context for all its direct children),
- flex-direction : row | row-reverse | column | column-reverse – Allows us to change the direction in which our flex items display. default is row.
- flex-wrap: nowrap | wrap | wrap-reverse; – Specifies whether the flex items should wrap or not. nowrap is default.
nowrap(default): all flex items will be on one linewrap: flex items will wrap onto multiple lines, from top to bottom.wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
- flex-flow: <‘flex-direction’> || <‘flex-wrap’> : is a shorthand property for setting both the flex-direction and flex-wrap properties.
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; : This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
flex-start(default): items are packed toward the start lineflex-end: items are packed toward to end linecenter: items are centered along the linespace-between: items are evenly distributed in the line; first item is on the start line, last item on the end linespace-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
- align-items: stretch | flex-start | flex-end | center | baseline; – property is used to align the flex items vertically.
stretch(default): stretch to fill the container (still respect min-width/max-width)flex-start: cross-start margin edge of the items is placed on the cross-start lineflex-end: cross-end margin edge of the items is placed on the cross-end linecenter: items are centered in the cross-axisbaseline: items are aligned such as their baselines align
- align-content: flex-start | flex-end | center | space-between | space-around | stretch; This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis
Properties for the Children (flex items):
- order: <integer>; By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
- flex-grow: <number>/* default 0 */; property specifies how much a flex item will grow relative to the rest of the flex items. If all items have
flex-growset to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others - flex-shrink: <number>; /* default 1 */ – property specifies how much a flex item will shrink relative to the rest of the flex items.
- flex-basis: <length> | auto; /* default auto */ –
- flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] – is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
References-
https://www.w3schools.com/css/css3_flexbox.asp#flex-flow
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
jogendra@.net 