Enoch Barcenas

Enoch Barcenas

1670487490

5+ Useful JavaScript Libraries That You Need to Know

This tutorial shows 5+ useful JavaScript libraries that will help you in your development journey: immutable-js, Driver.js, Amplitude.js, Spin.js, Tsparticles, Panolens.js and Picmo

There is a proverb “You don’t have to reinvent the wheel”. Libraries are the best example of that. It helps you to write complex and time-consuming functionality in an easy way. According to me, a good project uses some of the best libraries available

I do not think JavaScript needs any introduction. It is one of the most used programming languages for almost every purpose. Here I have compiled 7 useful JavaScript libraries that will help you in your development journey.

  1. immutable-js
  2. Driver.js
  3. Amplitude.js
  4. Spin.js
  5. Tsparticles
  6. Panolens.js
  7. Picmo

1. immutable-js

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API that does not update the data in place, but instead always yields newly updated data. This library provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record. These data structures are highly efficient on modern JavaScript VMs by using structural sharing via hash maps tries and vector tries as popularized by Clojure and Scala, minimizing the need to copy or cache data. This is also one of the most starred libraries with more than 32k stars on GitHub.

2. Driver.js

If you need some sort of overlay for the page then this is a good resource for you. A common use case could be dimming the background when the user is interacting with some component. This library is written in Vanilla JS, has zero dependencies, and is highly customizable. It has several options allowing you to manipulate how it behaves and also provides you the hooks to manipulate the elements as they are highlighted, about to be highlighted, or deselected. It has more than 14k stars on GitHub.

3. Amplitude.js

In HTML5, the audio tag allows users to add common audio formats to their web page. The problem is that the audio playback interface is controlled by the browser. This library puts you in control of the design by simply applying a class and/or attributes to page elements. You can then style these elements through CSS and control your audio. It goes above and beyond by adding playlist capabilities (next, previous, shuffle), song metadata, and visualizations. This library has more than 3.5k stars on GitHub.

4. Spin.js

Showing a spinner while loading data is one of the common practices to create a better user experience. As you have guessed by the name this library provides an animated loading spinner. It includes lots of features like no images, no dependencies, highly configurable, and many more. It has more than 9k stars on GitHub.

5. Tsparticles

This library will help you to easily create highly customizable JavaScript particle effects, confetti explosions, and fireworks animations and use them as animated backgrounds for your website. It also includes ready-to-use components for React.js, Vue.js, Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot, and Web Components. It has more than 4k stars on GitHub.

6. Panolens.js

If you want to add a panorama image viewing functionality in your app then this is a good resource for you. This library provides an event-driven and WebGL-based panorama viewer. It is lightweight and flexible. It has more than 2.5k stars on GitHub.

7. Picmo

This library will help you to add a fully featured emoji picker to your app with a few lines of code. It includes lots of features like emoji data loaded once from a CDN and cached in the browser for subsequent sessions, searchable by name or tags, full support for skin tone variations where applicable, and many more. It has more than 1k stars on GitHub.

That’s all for today. I believe these libraries will help you a lot in your development journey.

If you know of any other beautiful JavaScript libraries, please share them in the comments. Until we meet again…Cheers!

Original article source at https://javascript.plainenglish.io

#javascript #js #programming #developer #morioh #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

5+ Useful JavaScript Libraries That You Need to Know
Callum Slater

Callum Slater

1670481684

Top 10 Python Web Frameworks You Should Know

This tutorial shows top 10 Python Web Development Frameworks that you can consider for creating web applications: Django, Flask, CherryPy, Pyramid, Grok, TurboGears, Zope3, Bottle, Web2py and Tornado

Python is one of the best frameworks available for web application development. Although other frameworks exist, Python is the most promising and offers various features required to develop ultra-modern web applications. 

If you are looking for a framework to launch a professional web-based application, then Python will be the right choice. This article is dedicated to the Python Web Framework, and here we have tried to cover all the related aspects.   

The most important and necessary part of the web development process is to develop the actual website or web application that end-users will use to serve their purpose. It does not matter what kind of platform it will be, whether it will be using Android or iOS, Windows or Mac OS X, etc. 

It should be developed in such a way that it suits the best end-user requirements and should provide them with all the functionality they are looking for on their website/web application.

Python web framework is used to develop ultra-modern web applications, which have become the prime requirement of any business or organization to expand their business by providing the best services to their clients and customers worldwide. 

So before choosing the Python Web Framework, it’s important to know its features and utility and why it’s superior to other web frameworks like Ruby on Rails, NodeJS, etc. After knowing about its features and utility, you can decide why you should go with this framework and why this framework is the perfect choice for your web application development project.

Reading the basic information about it would be best to understand the Python web framework deeply.

What Is Python Web Framework?

Python frameworks are known to provide a robust infrastructure for developing software applications. Specifically, in terms of web development, it facilitates the developers to create a web application with speed. In addition, python-based web applications remain reliable through execution and scalable for future expansion. 

From a programming language point of view, it is a robust, general-purpose, object-oriented, and interpreted programming language. Moreover, it is a cost-effective and time-efficient language, so a python web development company chose it for web application development.  

The Python Frameworks Are Categorized Into Three:

1. Full-Stack Framework 

As its name implies, full-stack python web frameworks are perfect and the best -fit for backend and frontend development. It offers tools for developing GUI (graphical user interface) and backend tasks like database connectivity, security mechanism development, etc. The best example is the Django framework, which is counted as one of the best Python frameworks and is popular among developer communities. 

2. Micro-framework 

A micro-framework might offer support for routing, templating, and other features. A developer who works with a micro-framework would understand the relevant language's standard libraries and third-party package ecosystem to complete their project. 

Many Python websites use micro frameworks because they work with fewer resources and are lightweight. They also don't require separate tools for databases or templates, so it is easier to integrate them with other cloud services.

Its main specialty is its simplicity and extensibility, which makes Python micro frameworks different from others. However, it also has some limitations compared to the full-stack Python framework. 

3. Asynchronous Framework

These are event-driven frameworks. The best part about Python's asynchronous framework is that instead of waiting for line-by-line handling, it does not wait for any event to be executed before starting another. An asynchronous Framework is used to develop complex web applications. It is a highly scalable tool that handles a high volume of concurrent requests without slowing down or crashing. 

The list of features that make it the best framework to use for web development includes:

  • Supports several different programming languages.
  • Aims at scalability and concurrency.
  • It's robust, maintained, and has a helpful community.

Some Facts About Python Web Framework

  • Python - is an open-source programming language created by a Dutch programmer named Guido Van Rossum. 
  • More than 48% of developers around the world use Python frameworks. 
  • Its community size is 10 million, which connects worldwide programmers. 
  • On Google, 29.9% of search queries were placed about Python. 

Python Remains Most Popular Programming Language

Source: Statista

Advantages of Python Web Framework

The framework is a set of code written in a programming language, which provides some functionality for programmers to save time and cut down on the time it would take to write all the code from scratch. These are used by programmers when creating web applications, as these web apps often use server-side scripting.  

In this respect, Python has a plethora of frameworks that offer robust web development solutions for programmers for various purposes. One such framework is Django; Django is an open-source Python web application framework designed for the rapid development of dynamic websites and back-ends. 

Similar utilities are Flask which allows the creation of single-file scripts or small programs; Pyramid, which offers sophisticated routing capabilities with clustered configuration files; and more.  

One of the best things about the Python framework is that it offers all the things, utilities, and tools that a programmer needs to create fantastic software applications. When developing a product with modern methodologies, choosing Python development services from an experienced developer is the smartest choice. 

 

AZQuotes

Source: AZQuotes

Software development companies widely use the Python web framework. It is a one-of-a-kind programming language, making it a versatile choice for developing custom web applications and mobile apps. It has several advantages over other frameworks. Following are some of them:

  • Require less code
  • Robust
  • Easy maintenance
  • Open-source
  • Rapid development

Let’s expand these advantages to have a deep understanding ahead.  

Easy for All

Python language is one of the programming languages from high -the level language family. Still, the best part is its syntax is much simple as we write some words in English like print, exit, etc. it makes the developers and others understand the code in a much easier way.  

Less Coding but Impactive

Compared to the programming languages like Java and C++, it facilitates the developers to write less code but in an impactful way to achieve the desired outcome. Moreover, its short coding quality makes it one of the best programming languages for developing complex applications. 

Enhanced Productivity 

It is counted as one of the best programming languages any web app development company uses to create professional or business class applications. Instead of understanding the syntax, a developer can focus on writing the direct code.  

Creation Prototypes Seamless

Python facilitates the developers to create the prototype seamlessly. That is why developers prefer python web development frameworks for web application development.  

Flexibility

In terms of flexibility, Python programming language is the most flexible as it can be effortlessly integrated with others. You can use it for different scenarios. The integration can happen with C, Java, .Net, C#, and other languages. 

Top 10 Python Web Development Frameworks

In this blog section, we will read about top-10 python web development frameworks that you can consider in 2022 for creating web applications. 

  1. Django
  2. Flask
  3. CherryPy 
  4. Pyramid
  5. Grok
  6. TurboGears
  7. Zope3
  8. Bottle
  9. Web2py
  10. Tornado

So, let's begin with the list. 


1. Django

The Django framework is the top-most choice of any web development company. Developers use this framework to develop complex web and mobile apps on high-quality standards. Due to its open-source nature, Django is cost-effective but most powerful among other python web frameworks that facilitate the developers to create APIs and business class web applications. Currently, 12000 web applications have been developed, and more are yet to come.  

Highlights

  • Built-in-Authentication;
  • Assist with pattern definition;
  • Powered URL system;
  • Automatic admin interface;
  • Supports multiple cache mechanisms.

2. Flask

It comes under a BSD license and influences the Sinatra Ruby Framework. It utilizes WSGI Toolbox and Jinja2 template, which makes it more special than others. Flask's prime application is to support the developers in creating a robust application base. Some big brands, like LinkedIn, Pinterest, etc., use Flask Python Framework. If we compare it with Django, it is best suited for less-size projects.  

Highlights

  • Complete WSGI compilant; 
  • Best choice for small projects;
  • Built-in development server and debugger;
  • Supports unit testing.

3. CherryPy 

CherryPy is another fantastic Python web development framework and one of the top choices of Python developers. It has a multi-hung server and can run with any Python-supported framework. Offerings like date access, templates, session handling, file management, and more have reserved their name in the top-10 Python web development frameworks list.  

Highlights

  • HTTP/1.1 Compliant; 
  • Effortlessly runs on various HTTP servers;
  • Multiple built-in tools;
  • Empowered configuration system.

4. Pyramid

In a very short time, Pyramid gained popularity among experienced developers. Python 3 is compatible, or in simple words, you can say that Python 3 is required to work with the Pyramid framework. Its objective is to facilitate developers to create high-quality web applications with less complexity. As a result, the pyramid framework is one of the top choices of experienced web developers.  

Highlights 

  • Supports flexible authentication mechanism;
  • Allows HTML structure validation; 
  • Full documentation;
  • Facilitates execution of large and small applications.

5. Grok

If you are looking for agile development experience, then Grok is the Python framework that you are looking for. The objective behind the development of Grok framework is to speed up the application development process. While creating the applications, developers choose independent libraries available to them. Grok is a full-stack Python web development framework.  

Highlights

  • Offers a strong foundation for web app development;
  • Empowers web developers to leverage Zope3; 
  • Integrated security mechanism;
  • Facilitates custom web app development.

6. TurboGears

Turbogears is an excellent Python web framework that is designed to overcome all inadequacies of other python family frameworks. Furthermore, it facilitates software developers to create applications quickly. Turbogears offers elements such as SQLAlchemy, Repoze, WebOb, and others to create the applications fast. 

Highlights

  • Multidatabase support; 
  • Accessible command-line tools;
  • Offers Mochikit JavaScript library integration; 
  • MVC-style architecture. 

7. Zope3

Zope3 is a web framework written in Python based on the Zope Toolkit. It is designed to be scalable and extensible with low latency. This framework aims to provide developers with the ability to build web applications that are easily modularized, highly maintainable, and easily plugged into other systems. or databases. Zope3 was originally developed by Zope Corporation and is now maintained as part of the Zope Foundation.  

Highlights

  • Suitable for developing a content management system;
  • Offers data storage in the form of ZODB; 
  • The default interface is ZMI, aka Zope Management Interface; 
  • Its libraries offer flexibility.

8. Bottle

The bottle is Python's simple, fast, and lightweight web framework. It is a "batteries included" Python framework. It's a lightweight WSGI-based web framework that provides fast reverse-proxy servers. In addition, it supports CSV routing, HTTP file serving, templating with Jinja2 & Blueprints, URL routing with the popular Chameleon templating engine, and more. The most famous example of the Bottle framework is - Netflix, which uses it for its web interface.

Highlights

  • Built-in template engine; 
  • WSGI framework with CGI;
  • Easy access to data, file uploads, and cookies; 
  • Speed optimization.   

9. Web2py

Web2Py is a Python web framework that makes it easy to create dynamic websites and powerful internet applications. It offers SQL/JDBC as its database interface, includes support for Google App Engine, and a well-documented, correct, and clear interface designed for beginners and experts. Web2py enables the user to build web applications the same way one would build an application on their computer.

Highlights

  • Facilitates quick web development; 
  • Support Model View Control Architecture;
  • Provides web-based IDE;
  • Web app security.

10. Tornado

The Tornado Python framework has been around for over 10 years and is still used today. Tornado was originally developed by Martelli et al. in 2005 as a lightweight web framework for Python with an emphasis on extending its capabilities through plugins at the time of its adoption to the needs of modern web development. It has become more popular in recent years due to handling asynchronous event-driven I/O for web applications.  

Highlights

  • Facilitates 3rd Party authentication;
  • Offers real-time programming; 
  • Result-oriented framework;
  • Provide web templates.

Wrapping It Up!

Python is a general-purpose and high-level programming language. It provides an interesting balance of simplicity and power. As a result, we can see that Python web development frameworks are storming over the web development industry. There are many reasons for this, but the most important one is that it provides an easy-to-learn, versatile toolkit with a built-in application server.

Python web frameworks are now used to create the next top most popular sites on the internet, like Pinterest and YouTube. It has proven to be more robust than other programming languages, and developers are moving towards Python because of its simplicity. 

Original article source at https://dzone.com

#python #django #flask #cherrypy #pyramid #grok #turbogears #zope3 #bottle #web2py #tornado #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

Top 10 Python Web Frameworks You Should Know
Dylan  Iqbal

Dylan Iqbal

1670381828

Learn PostCSS In 15 Minutes

Learn PostCSS in this tutorial. PostCSS is a tool for transforming CSS with JavaScript. PostCSS is like the babel of CSS. PostCSS takes a CSS file and provides an API to analyze and modify its rules (by transforming them into an Abstract Syntax Tree).

CSS keeps releasing new features that I want to use right away, but there is always at least one browser that doesn’t support the new features and I am forced to wait years to use them, or at least that used to be the case. Instead I now use PostCSS to transpile all my CSS to CSS that any browser can understand while still being able to use modern CSS features when I write my CSS. PostCSS is like the babel of CSS.


⏱️ Timestamps:

00:00 - Introduction
00:42 - Starting Files
01:12 - Basic Setup
04:14 - Using Plugins
09:33 - Using PostCSS With Frameworks
13:09 - Pros of PostCSS


An Introduction to PostCSS

CSS preprocessors are popular, but they have some drawbacks. In this introduction to PostCSS, we’ll explore the advantages of PostCSS, how it works, and what its extensive range of plugins can achieve.

The Value and Limitations of Preprocessors

Most CSS developers are familiar with preprocessors. Tools including Sass, Less, and Stylus introduced concepts such as file partials, nesting, variables, and mixins. Some features are gradually appearing in native CSS, but a preprocessor is still useful for managing large codebases and maintaining style and coding consistency.

It may be difficult to imagine life without a CSS preprocessor, but there are downsides:

Preprocessors are not extendable or limitable. Most preprocessors are a black box which provide you a specific set of supported features. It may be possible to write custom functions, but functionality beyond the scope of that tool is remains impossible — such as inlining an SVG as a background image.

Similarly, you can’t stop developers using options you’d rather avoid such as @extend or deep nesting. Linting can help, but it won’t stop the preprocessor compiling a valid file.

Preprocessors provide their own syntax. Preprocessor code may resemble CSS, but no browser can parse the file natively. The syntax is different and, if your tool changes or is unavailable, your code will require updates to make it usable.

The benefits more than outweigh these risks, but there is an alternative …

What is PostCSS?

PostCSS is not a preprocessor (although it can behave like one). It’s a Node.js tool which takes valid CSS and enhances it. Even those using Sass, Less, or Stylus often run a PostCSS step after the initial CSS compilation. You may have encountered the PostCSS Autoprefixer plugin which automatically prepends -webkit, -moz, and -ms vendor prefixes to CSS properties which require them.

On its own, PostCSS does nothing. It’s a parser which tokenizes CSS code to create an abstract syntax tree. A plugin can process this tree and update properties accordingly. Once all plugins have completed their work, PostCSS reformats everything back into a string and outputs to a CSS file.

Around 350 plugins are available, and most perform a single task such as inlining @import declarations, simplifying calc() functions, handling image assets, syntax linting, minifying, and more. A more user friendly plugin search is available at the PostCSS plugins catalogue.

PostCSS benefits include:

You start with standard CSS. PostCSS is to CSS what Babel is to JavaScript. It can take a standard stylesheet which works in recent browsers and output CSS which works everywhere — for example, transpiling the newer inset property back into top, bottom, left, and right properties. Over time, you could drop this process as more browsers support inset.

Admittedly, some plugins allow you to parse preprocessor-like syntax which isn’t standard CSS, but you don’t have to use them.

Use the plugins and features you need. PostCSS is configurable, and you can adopt the plugins you require. For example, you could support partials and nesting but not permit variables, loops, mixins, maps, and other features available in Sass.

Provide a custom configuration for every project. A individual project configuration can enhance or reduce the set of plugins used elsewhere. The options are far more varied than any preprocessor.

Write your own PostCSS plugins. A wide range of plugins is available for extending syntax, parsing future properties, adding fallbacks, optimizing code, processing colors, images, fonts, and even writing CSS in other languages such as Spanish and Russian.

In the unlikely event you can’t find what you need, you can write your own PostCSS plugin in JavaScript.

You’re possibly using PostCSS already. You may be able to remove your preprocessor dependencies if you’re already running a PostCSS plugin such as AutoPrefixer. PostCSS is not necessarily faster or more lightweight than using a preprocessor, but it can handle all CSS processing in a single step.

Installing PostCSS

PostCSS requires Node.js, but this tutorial demonstrates how to install and run PostCSS from any folder — even those that aren’t Node.js projects. You can also use PostCSS from webpack, Parcel, Gulp.js, and other tools, but we’ll stick to the command line.

Install PostCSS globally on your system by running the following:

npm install -g postcss-cli

Ensure it’s working by entering this:

postcss --help

Installing Your First PostCSS Plugin

You’ll require at least one plugin to do anything practical. The PostCSS import plugin is a good option which inlines all @import declarations and merges your CSS into a single file. Install it globally like so:

npm install -g postcss-import

To test this plugin, open or create a new project folder such as cssproject, then create a src subfolder for your source files. Create a main.css file to load all partials:

/* src/main.css */
@import '_reset';
@import '_elements';

Then create a _reset.css file in the same folder:

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

Follow this with an _elements.css file:

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

Run PostCSS from the project’s root folder by passing the input CSS file, a list of plugins to --use, and an --output filename:

postcss ./src/main.css --use postcss-import --output ./styles.css

If you don’t have any errors, the following code will be output to a new styles.css file in the project root:

/* src/main.css */
/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}
/* src/elements.css */
body {
  font-family: sans-serif;
}
label {
  user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...

Note that PostCSS can output CSS files anywhere, but the output folder must exist; it will not create the folder structure for you.

Enabling and Disabling Source Maps

An inline source map is output by default. When the compiled CSS file is used in an HTML page, examining it in the browser’s developer tools will show the original src file and line. For example, viewing <body> styles will highlight src/_elements.css line 2 rather than styles.css line 8.

You can create an external source map by adding a --map (or -m) switch to the postcss command. There’s little benefit other than the CSS file is cleaner and the browser doesn’t need to load the source map unless the developer tools are open.

You can remove the source map with --no-map. Always use this option when outputting CSS files for production deployment.

Install and Use the AutoPrefixer Plugin

The Autoprefixer plugin is often a developer’s first encounter with PostCSS. It adds vendor prefixes according to browser usage and rules defined at caniuse.com. Vendor prefixes are less used in modern browsers which hide experimental functionality behind flags. However, there are still properties such as user-select which require -webkit-, -moz-, and -ms- prefixes.

Install the plugin globally with this:

npm install -g autoprefixer

Then reference it as another --use option on your postcss command:

postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

Examine the label declaration from line 11 of styles.css to view the vendor-prefixed properties:

label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

AutoPrefixer uses the browserlist module to determine which browser prefixes to add. The default is:

  • > 0.5%: a browser with at least 0.5% market share
  • last 2 versions: the last two releases of those browsers
  • Firefox ESR: including Firefox Extended Support Releases
  • not dead: any browser that is not discontinued

You can change these defaults by creating a .browserslistrc file. For example:

> 2%

Or you can add a "browserslist" array to package.json in a Node.js project. For example:

"browserslist": [
   "> 2%"
]

Targeting browsers with a 2% or more market share only requires a -webkit- prefix in Safari:

label {
  -webkit-user-select: none;
          user-select: none;
}

Minify CSS with cssnano

cssnano minifies CSS by stripping whitespace, comments, and other unnecessary characters. Results will vary, but you can expect a 30% file reduction which you can deploy to production servers for better web page performance.

Install cssnano globally:

npm install -g cssnano

Then add it to your postcss command. We’ll also include --no-map to disable the source map:

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css

This reduces the CSS file to 97 characters:

*{margin:0;padding:0}body{font-family:sans-serif}label{-webkit-user-select:none;user-select:none}

Automatically Build when Source Files Change

The PostCSS --watch option automatically builds your CSS file when any of the source files change. You may also want to add the --verbose switch which reports when a build occurs:

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css --watch --verbose

Your terminal will show Waiting for file changes. Make a change to any file and styles.css is rebuilt. PostCSS will also report any problems such as syntax errors.

To finish, press Ctrl | Cmd + C in the terminal.

Create a PostCSS Configuration File

The postcss command will become long and cumbersome as you add further plugins and options. You can create a JavaScript configuration file which defines all the options and can logically determine whether it’s running in a development or production environment.

Create a configuration file named postcss.config.cjs in the root of your project folder. Aso note the following:

  • you can put the file in another folder, but you’ll need to specify --config <dir> when running postcss
  • you can use postcss.config.js as the file name, but PostCSS may fail in Node.js projects which have "type": "module" set in package.json

Add the following code to postcss.config.cjs:

// PostCSS configruation
module.exports = (cfg) => {

  const devMode = (cfg.env === 'development');

  return {

    map: devMode ? 'inline' : null,
    plugins: [
      require('postcss-import')(),
      require('autoprefixer')(),
      devMode ? null : require('cssnano')()
    ]

  };

};

PostCSS passes a cfg object which contains the command line options. For example:

{
  cwd: '/home/yourname/cssproject',
  env: undefined,
  options: {
    map: { inline: true },
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/yourname/cssproject/src',
    basename: 'main.css',
    extname: '.css'
  }
}

The module must return an object with optional properties:

  • map: the source map setting
  • parser: whether to use a non-CSS syntax parser (such as the scss plugin)
  • plugins: an array of plugins and configurations to process in the order specified

The code above detects whether the postcss command has an --env option. This is a shortcut for setting the NODE_ENV environment variable. To compile CSS in development mode, run postcss with --env development and, optionally, set --watch --verbose. This creates an inline source map and does not minify the output:

postcss ./src/main.css --output ./styles.css --env development --watch --verbose

To run in production mode and compile minified CSS without a source map, use this:

postcss ./src/main.css --output ./styles.css

Ideally, you could run these as terminal or npm scripts to reducing typing effort further.

PostCSS Progress

You now know the basics of PostCSS. Enhancing the functionality is a matter of adding and configuring further plugins. Invest some time and you’ll soon have a workflow you can adapt for any web project.


#postcss #css #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

Learn PostCSS In 15 Minutes
Thomas  Granger

Thomas Granger

1670377224

Top 60+ CSS Interview Questions and Answers

This tutorial shows top 60+ CSS Interview Questions and Answers by popular companies: basic CSS interview questions, intermediate CSS interview questions, advanced CSS interview questions, and frequently asked CSS interview questions

Web applications and websites are increasing in every industry, and CSS is essential to build attractive websites. Currently, there is a tremendous demand for web developers who have a good knowledge of HTML and CSS. To build a career in web designing, candidates need to interviews where they ask CSS interview questions. 

In this article, we have consolidated a list of CSS interview questions and divided the questions into four sections: basic CSS interview questions, intermediate CSS interview questions, advanced CSS interview questions, and frequently asked CSS interview questions. This list would be helpful for both experienced professionals and freshers. Let us start with this CSS interview questions guide. 

Table of Contents

  1. Basic CSS Interview Questions
  2. Intermediate CSS Interview Questions
  3. Advanced CSS Interview Questions
  4. Frequently Asked CSS Interview Questions
  5. Conclusion

Basic CSS Interview Questions

Let us begin with the basic CSS interview questions!

1. Name some CSS frameworks. 

CSS frameworks are libraries that make web page styling easier. Some of them are Foundation, Bootstrap, Gumby, Ukit, Semantic UI, etc. 

2. What do you understand by the universal sector?

A universal selector is a selector that matches any element type's name instead of selecting elements of a particular type. 

Example: 

<style>    

* {    

   color: blue;    

   font-size: 10px;    

}     

</style>   

3. Tell us about the use of the ruleset.

The ruleset is used for the identification of selectors, which can be attached with other selectors. The two parts of a ruleset are:

  • Declaration block: contains one or more semicolon-separated declarations
  • Sector: indicates the HTML element needed to be styled

4. What are the elements of the CSS Box Model?

The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border). 

5. Differentiate between CSS3 and CSS2.

The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements. 

6. How can CSS be integrated into an HTML page?

There are three ways of integrating CSS into HTML: using style tags in the head section, using inline-styling, writing CSS in a separate file, and linking into the HTML page by the link tag. 

7. Explain a few advantages of CSS. 

With CSS, different documents can be controlled using a single site, styles can be grouped in complex situations using selectors and grouping methods, and multiple HTML elements can have classes. 

8. What is meant by RGB stream?

RGB represents colors in CSS. The three streams are namely Red, Green, and Blue. The intensity of colors is represented using numbers 0 to 256. This allows CSS to have a spectrum of visible colors. 

9. What was the purpose of developing CSS?

CSS was developed to define the visual appearances of websites. It allows developers to separate the structure and content of a website that was not possible before. 

10. What is the difference between a class and an ID?

Ans. Class is a way of using HTML elements for styling. They are not unique and have multiple elements. Whereas ID is unique and it can be assigned to a single element. 

Intermediate CSS Interview Questions

In the next section, let us learn some intermediate level CSS interview questions!

1. Define z-index.

This is one of the most frequently asked CSS interview questions. Z-index is used to specify the stack order of elements that overlap each other. Its default value is zero and can take both negative and positive values. A higher z-index value is stacked above the lower index element. It takes the following values- auto, number, initial, and inherit. 

2. What are the benefits of CSS Sprites?

With CSS sprites, loading multiple images is not an issue. 

  • Blinking is not seen. 
  • Advanced downloading of assets does not take place until needed. 

3. How can you target h3 and h2 with the same styling?

Multiple elements can be targeted by separating with a comma:

h2, h3 {color: red;}

4. Name media types allowed by CSS.

The different media types allowed by CSS are: 

  • speech
  • audio
  • visual
  • tactile media
  • continuous or paged media
  • grip media or bitmap
  • interactive media

5. How can you use CSS to control image repetition?

The background-repeat property is used to control the image. Example:

h3 {

background-repeat: none;

 }

6. Tell us about the property used for image scroll controlling?

The background-attachment property is used to set whether the background image is fixed or it scrolls with the rest of the page. Example for a fixed background-image:

body {

  background-image: url(‘url_of_image’);

  background-repeat: no-repeat;

  background-attachment: fixed;

}

7. Name some font-related CSS attributes. 

The font-related attributes are Font- style, variant, weight, family, size, etc. 

8. Define contextual selectors.

In CSS, contextual selectors allow developers to specify styles of different parts of the document. Styles can be assigned directly to specific HTML tags or create independent classes and assign tags to them. 

9. Explain responsive web design. 

Responsive Design is a web page creation approach that uses flexible images, flexible layouts, and CSS media queries. This design approach aims to build web pages that detect the orientation and screen size of the visitors so that the layout can be changed accordingly.  

10. Tell us about the general CSS nomenclature.

In CSS, the styling commands are written in value and property fashion. CSS includes a system terminator- semicolon. The entire style is wrapped in curly braces and attached to the selector. This creates a style sheet that can be applied to an HTML page.

11. What are the limitations of CSS?

  1. CSS cannot always assure compatibility with every browser; you need to be cautious while choosing the style selector.
  2. The parent selector tag is not available, thus you can’t select the parent selector tag.
  3. Some selectors can lead to cross-browser issues due to their less browser-friendly behavior.
  4. We cannot request a webpage through CSS.

12. How to include CSS in the webpage?

  1. With the help of a link tag, you can include an external style sheet file as a CSS file into your HTML file.
  2. You can add CSS styles included within your HTML page and write it in the stand-alone stylesheet form of CSS.
  3. CSS can be included directly in the HTML tag by adding an inline style to HTML elements.
  4. One can import an external stylesheet file as a new CSS file by using the @import rule. 

13. What are the different types of Selectors in CSS?

Universal Selector, Element type Selector, ID selector, Class selector, Descendant combinatory, Child Combinator, General Sibling Combinator, Adjacent sibling combinator, and Attribute selector.

14. What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?

CSS preprocessor is a tool used to enhance the basic functionality and let us use the complex logical syntax such as variables, functions, mixins, and code nesting within vanilla CSS scripts themselves.

  1. Sass (Syntactically Awesome Style Sheets) uses .sass extension. It is used for indentation; it doesn’t use semicolons or curly brackets.
  2. Less (Leener Stylesheets) uses .less extension. It is easy to add to any JavaScript Project by using NPM or less.js file. Here, @ is used to define the variables. 
  3. Stylus provides great flexibility in writing syntax. It is able to use native CSS as well as the exclusion of brackets, colons, and semicolons. There is no need to use @ or $ to define the variables.

People use SASS, LESS, and Stylus in order to extend the basic functionality of vanilla CSS.

15. What is VH/VW (viewport height/ viewport width) in CSS?

VH and VW are CSS units used to measure viewport height and viewport width respectively in percentage form in the responsive design techniques. E.g. If the height of the browser is 1000px, then VH is 1/100 of the height of the viewport that is 1000px*(1/100) = 10px, which is the height of the browser.  The same applies to VW (viewport width).

16. Difference between reset vs normalize CSS? How do they differ?

  1. Reset CSS is used to remove all built-in styles in the browser such as paddings, margins, and font sizes, and can be reset using all the elements.
  2. Normalize CSS is used to make all built-in styles in the browser consistent and correct bugs as per varying browsers.

17. What is the difference between inline, inline-block, and block?

  1. Block Elements are <div> and <p>. They usually start on a new line and can take space for an entire row or width.
  2. Inline elements are <a>, <span>, <strong>, and <img> tags. They don't start on a new line. However, they appear on the same line as the content and tags beside them.
  3. Inline block elements have padding and margins and set height and width values. Though, they are similar to inline elements. 

18. Is it important to test the webpage in different browsers?

Yes, it is the most crucial thing or the most important trial to do when you design a webpage for the first time and make changes to it. Testing your website periodically in different browsers will help you make every webpage compatible with it as browsers have been going through many updates.

19. What are Pseudo classes?

Pseudo-classes are the type of pseudo-elements that don’t exist in a normal document tree. It allows selecting the regular elements under certain conditions especially when we try to hover over the link; the anchor tags are :link, :visited, :hover, :active, :focus

In this example, the color will be red on the anchor tag when it’s hovered.

/* mouse over link */

a:hover {

color: #FFOOFF;

}

20. How do you specify units in the CSS? What are the different ways to do it?

There are mainly four different units in the CSS that are px, em, pt, and percentage (%).

  1. Px (Pixel) is used for fine-grained control and alignment and not cascade. To get it sharp, we can use 1px or multiple of px.
  2. Em is used to maintain relative size and responsive fonts. 1em = 16px having also the same font size. It is advisable to set the font size to 10px in common practice.
  3. Pt (point) is a fixed-size unit that is used in print. 1pt = 1/72 inch.
  4. Percentage (%) is used to set the font size with respect to the font size of the body. Thus, it is necessary to set the reasonable font size of the body.

21. Does margin-top or margin-bottom have an effect on inline elements?

No, mMargin-top or margin-bottom does not have an effect on the inline elements.

22. What property is used for changing the font face?

The font-family property is used for changing the font face that is applied to the element in the DOM.

23. What are the differences between adaptive design and responsive design?

Adaptive Design:

  • Main focus is to develop a website in multiple fixed layout sizes.
  • Offers good control over the design to develop variation in screens.
  • It is very time-consuming and takes a lot of effort to build the best possible adaptive design as examining it will need to go for many options with respect to the realities of the end user.
  • There are six standard screen sizes for the appropriate layouts; they are 320px, 480px, 760px, 960px, 1200px, 1600px to design.

Responsive Design

  • Main focus is to show content with respect to browser space.
  • Offers less control over the design.
  • It takes less time to build the design and there is no screen size issue irrespective of content.
  • It uses CSS media queries to design the screen layouts with respect to specific devices and property changes in the screen.

24. How are the CSS selectors matched against the elements by the browser?

Initially, there is a filtration of elements in the DOM via browsers with respect to key selectors that are traversed until we get parents' elements to determine the matches. Then the browser works on finding all the span elements present in the DOM and traverses them to parent elements to check whether they are matched to paragraph p elements. At last, when the browser finds all matches as parents, the matching process will be stopped and there will be black color applied to the content.

25. How is the border-box different from the content box?

Border-box consists of properties such as content, padding, and the border with respect to height and width. However, Content-box is a default value property used for the box-sizing as well as it helps to add border and padding to give proper height and width to the box without having a border and padding properties.

26. How is opacity specified in CSS3?

Opacity is the measure of content transparency. It is measured in the range from 0 to 1. Value 1 means the content is completely opaque. It is not supportable in the internet browser. Also, the 60% of opacity is applicable in the div section where we need to apply the filter property (polyfill) to make it completely opaque.

27. What is cascading in CSS?

Cascading is defined as the process of style declaration and its weight that will help the browser in selecting the styling rules with respect to time.

28. When does DOM reflow occur?

DOM reflow occurs when you insert, move, update, remove, and animate the elements in the DOM as well as when you modify content on the page and change style.

29. Different Box Sizing Property?

Content-box, Padding-box and Border-box

30. How to center align a div inside another div?

A div inside another div A is center aligned with the help of aligning div property to content via HTML script and CSS to the element in the DOM.

31. What is the grid system?

The CSS grid system is a type of powerful layout of 2 dimensional systems with respect to columns and rows.

32. What are the different ways to hide the element using CSS?

display: none, visibility: hidden, position: absolute

33. What does the: root pseudo-class refer to?

The: root selector pseudo-class refers to the CSS selector level 3. It helps to target the highest-level parent element present in the DOM.

34. What does Accessibility (a11y) mean?

Accessibility is to make the system accessible in such a manner that the website should have the text-to-speech capability, for people with physical disabilities, designed with the help of software or hardware combinations.

35. How do I restore the default value of a property?

keyword “initial” is used to restore the default value of a property.

36. Difference between CSS grid vs flexbox?0

  1. CSS Grid Layout is a two-dimensional system along with rows and columns. It is used for large-sized layouts.
  2. Flexbox is a Grid layout with a one-dimensional system either within a row or a column. It is used for the components of an application.

37. How does Calc work?

Calc can be used to specify the result of the mathematical operation of two or more elements. For example to specify the width elements by the addition of two or more elements, we can write as

.foo {

Width: calc(100px+50px)

}

38. What do CSS Custom properties variables mean?

CSS Custom properties variables are defined for CSS variables as well as cascading variables with specific values that can be reused.

39. What is the difference between CSS variables and pre-processor (SASS, LESS, Stylus) variables?

  1. CSS variables don’t need a pre-processor. It is cascaded, accessed, and manipulated in JavaScript.
  2. Preprocessor variables don’t cascade.

40. What does * { box-sizing: border-box; } do? What are its advantages?

Box-sizing: border-box is used to provide the inner dimension for the elements in the document by providing padding and border with respect to the height and width of the content.

41. What does !important mean in CSS?

The style “!important” in the CSS has the highest precedence. Also, the cascaded property will be overridden with it.

42. What is progressive rendering? How do you implement progressive rendering on the website? What are its advantages?

Progressive rendering is the process of improving the performance of a webpage with respect to loading time in order to display the content speedily. The use of loading the lazy loading of the image with the help of Intersection Observer API via viewport. 

43. Does style1.css have to be downloaded and parsed before style2.css can be fetched?

No. The CSS file will be downloaded via browser in order to appear on the HTML page.

44. How to determine if the browser supports a certain feature?

@support tag in the CSS is used to scan and determine whether the browser supports a certain feature or not.

45. How does absolute positioning work?

Absolute positioning is used to place the element which is then removed from the HTML document from the normal workflow without creating any space for the element in the HTML page layout. The element can be positioned respectively to the closest positioned ancestor; otherwise, if the ancestor is not found, the element is placed with respect to the initial container box. The values provided to the top, right, left and bottom determine the final position of the element.

46. Does this property work overflow: hidden?

Overflow: the hidden property is used to specify the content’s clipping. We need to add scrollbars to the content area at the time of specified container size exceeding the content limit where the content gets enclosed. This makes the content invisible via clipping; also the overflow value will be hidden.

Advanced CSS Interview Questions

Here are some advanced CSS interview questions!

1. When should you use translate () instead of absolute positioning?

Translate is a CSS transform value. On changing opacity or transform, browser reflow or repaint is not triggered. Transform requires the browser to create a GPU layer for elements but using the CPU changes absolutes positioning properties. Translate () is more efficient and results in shorter paint times. On using translate (), element occupies original space, unlike in changing absolute positioning. 

2. Name different ways to position some aspects in CSS. 

The positioning property specifies the positioning method type. The five different position values are fixed, static, absolute, sticky, and relative. The elements are positioned using top, left, right, and bottom properties. These properties need to be set first, and they work depending on position value. 

3. What are mixins?

A mixin is similar to a function block of code returning a single value—mixin output lines of Sass code that directly compiles into CSS styles. At the same time, the function returns a value that becomes the value for a CSS property or something that can be passed to another mixin.

4. How can you optimize the webpage for prints?

Identify and control 'content areas' of the website. A website generally has a footer, header, sidebar, navbar, and main content area. Most of the work is done by controlling the content area. So, conquer print media without changing the website's integrity by using page breaks, creating a stylesheet for print, size your page for print, and avoid unnecessary HTML tables.  

5. What is meant by CSS working under the hood?

When a browser displays a document, it combines style information and document content. The document is processed in two stages:

  • Conversion of HTML and CSS into Document Object Model
  • DOM displays contents of browser

6. Differentiate between the use of ID selector and class selector.

ID Selector:

<style>

{

text-align: right;

color: blue;

}

</style>

CSS class Selector: 

<style>

.right {

text-align: right;

color: blue;

}

</style>

7. Tell us about CSS float property.

The float property of CSS positions an image to the right or left as needed, including text wrapping around it. All properties of elements used before it remain unchanged. 

8. What do you understand by pseudo-elements?

Pseudo-elements provide special effects to some selectors. CSS finds use in applying styles in HTML markups. If additional markup or style is not feasible for a document, the pseudo-elements help by allowing extra markup without interfering with the original document. 

9. Differentiate between logical and physical tags.

Logical tags mainly focus on content and are older as compared to physical ones. Logical ones do not find much usage in presentation and terms of aesthetics. At the same time, physical ones find application in presentation. 

10. How media types in CSS work?

The four types of media properties are print, speech, and screen. Example of using print-media type: 

@media print {

h2 {

background-color: blue;

 }

}

Frequently Asked CSS Interview Questions

In this last section, we look at the most frequently asked CSS interview questions!

1. Tell us something about CSS3.

CSS3 is divided into modules and is supported by almost every browser. Many graphics-related characteristics are introduced in CSS3 like box-shadow, Border-radius, and flexbox. A user can create precise multiple background images using properties like background-position, background-repeat, and background-image styles. 

2. How is a CSS selector used?

With a CSS selector, we can choose the content we want to style to bridge between HTML files and style sheets. CSS selector syntax is "select" HTML elements created on their class, id, type, etc. 

3. What are CSS image scripts?

A group of images placed into one image is a CSS image script. It can reduce load time and project multiple images into a single web page. 

4. Explain CSS specificity.

CSS specificity is a rank or score that decides style declaration to be used to an element. ID selectors have high specificity, while universal selector * has low specificity. The four CSS categories that authorize the selector's specificity level are IDs, inline style, elements/pseudo-elements, and classes and attributes. 

5. Define gradients in CSS. 

A property of CSS that allows displaying smooth transformation between two or more specified colors. The types of gradients are linear and radial. 

6. What are the properties of flexbox?

The properties of flexbox are flex-direction, wrap, flow, content, and align-items, and content. 

7. Tell us about the use of the CSS Box Model.

The CSS Box model is a box binding HTML element that includes padding, border, margin, and the actual content. With the box model, we get the authority to add a border all around elements and define space between elements. 

8. What are the position states in CSS?

The four-position states in CSS are relative, static, absolute, and fixed. The default position state is static. 

9. Differentiate between absolute and relative in CSS. 

The main difference is that relative is used for the same tag in CSS. If we write right:20 px, then padding shifts 20 px in the right. Whereas absolute is relative to the non-static parent, i.e., if we write right:20 px, the result will be 20 px far from the right edge of the parent element.  

10. What is common between class and ID?

Both class and ID are used in HTML to assign a value from CSS. The ID is used as an element, whereas the class is used as a block. 

Conclusion

With this, we conclude our CSS interview questions article, and there is a high probability that your interviewer asks you these questions. Be thorough with your answers.

Original article source at https://www.simplilearn.com

#css #interviewquestions #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 
 

Top 60+ CSS Interview Questions and Answers
Poppy Cooke

Poppy Cooke

1670376424

Top 45+ C# Interview Questions and Answers

This tutorial shows top 45+ Interview Questions and Answers in C#. C# is a simple, modern and a general-purpose Object-oriented programming language developed by Microsoft within its .NET framework. 

In this C# Interview Questions tutorial, I will introduce you to the most commonly asked Interview Questions in C# and what should be your approach to do the same.

I have categorized the questions into three sections:

  • Beginner’s level
  • Intermediate level
  • Advance level

Let’s get started.


Beginner’s Level

Q1. List down the differences between Public, Static and void keywords?

Ans-

KeywordDescription

Public

It is an access specifier which states that the method of a class can be accessed publicly

Static

It is a keyword used for declaring a member of a type, specific to that type

void

It states that the method does not return any value
using System;
class test
{
static void main(String args[])// main is the method that gets executed first
{
Console.Writeline("Welcome to the world of C#");
}
}

Q2. Define C# and list the features.

Ans- C# is an object-oriented, typed safe and manage language that is compiled by .NET framework and was developed by Microsoft back in 2000. The idea was that it will be used in the development of all kinds of software aiming at different platforms like Windows, Web, mobile using only one programming language. Fast forward to the present day it is one of the most popular programming languages worldwide, millions of developers use this language to build all kinds of software.

Some of the features of C#(sharp) are:

  • Use of Constructors and Destructors
  • Easy to grasp
  • General Purpose and Object-Oriented
  • Structured language
  • Platform independent for compilation
  • Part of .NET framework

Let’s move on to the next question,

Q3. List down the reason behind the usage of C# language.

Ans-  There are several reasons for the usage of C# as a programming platform. Some of them are listed below.

  • Easy to pickup
  • Component oriented language
  • Follows a Structured approach
  • Produces readable and efficient programmes
  • Once written can be compiled on different platforms
  • Passing parameters is easy

Q4. What are the advantages of using C#?

Ans-  Following are the advantages of using C#:

  • Easy to learn
  • Object-Oriented language
  • The syntax is easy to grasp
  • Component oriented
  • Part of the .NET framework

Q5. What are the different types of comments in C#?

Ans- Below listed are the types of comments followed in C#:

a. Single line comments

// hello, this is a single line comment

b. Multiline comments

/* Hello this is a multiline comment
 last line of comment*/

c. XML comments

/// Hello this is XML comment

Q6. Illustrate the process of code compilation in C#?

Ans-  There exist four steps in the process of code compilation:

  1. Compilation of Source code in managed  code
  2. Clubbing the newly created code into assembly
  3. Loading the CLR (Common Language Runtime)
  4. Execution of assembly through CLR

Q7. List down the access modifiers available in C#.

Ans- Following are the access modifiers available for general use:

Public- When an attribute or method is defined as public it can be accessed from any part of code.

Private- A private attribute or method can be accessed from within the class itself.

Protected- When a user defines a method or attribute as protected then it can be accessed only within that class and the one inheriting the class.

Internal- When an attribute or method is defined as internal then it will be accessed from that class at the current assembly position.

Protected Internal- When you define an attribute or method as protected internal, then it’s access restricted to classes within the current project assembly or different types defined by that class.

Moving ahead in C# Interview questions, let’s unfold some functionalities used in C#.

Q8. List down the different IDE’s Provided by Microsoft for C# Development.

Ans- Below listed are few IDE’s for C# development:

  • Visual Studio Express (VCE)
  • Visual Studio (VS)
  • Visual Web Developer
  • MonoDevelop
  • browxy

Q9. Distinguish between Continue and Break Statement?

Ans- Using break statement you can ‘jump out’ of the loop whereas while making use of continue statement you can jump over an iteration and continue the loop execution.

Example (Break Statement):

using System;
using System.Collections;
using System.Linq;
using System.Text;
 
namespace break_example{
Class break_Stmnt{
public static void main(String args[]){
for(int i=0;i<=6;i++)
{
if(i==5)
{
break;
}
Console.Readline("The number is +i");
}
}
}

Output:

the number is 0;
the number is 1;
the number is 2;
the number is 3;
the number is 4;

Example (Continue Statement):

using System;
using System.Collections;
using System.Linq;
using System.Text;
 
namespace continue_example{
Class continue_Stmnt{
public static void main(String args[]){
for(int i=0;i<=6;i++)
{
if(i==5)
{
continue;
}
Console.Readline("The number is +i");
}
}
}

Output:

the number is 0;
the number is 1;
the number is 2;
the number is 3;
the number is 5;

Q10. What are the different approaches of passing parameters to a method?

Ans- There are three ways of passing parameters to a method:

Value Parameters-  Under this method the actual value of an argument is copied to the formal parameter of the function. In, this case the changes made into the formal parameter of the function have no effect on the actual value of the argument.

Reference Parameters- This method copies the argument referring to the memory location into the formal parameter. Meaning changes made to the parameter affect the argument.

Output Parameters- This method returns more than one value.

 Let’s move ahead in C# Interview Questions and see the next category.

Intermediate level C# Interview Questions

Q11. Distinguish between finally and finalize blocks?

Ans- finally block is called after the execution of try and catch blocks, It is used for exception handling whether or not the exception has been caught this block of code gets executed. Generally, this block of code has a cleaner code.

The finalize method is called just before the garbage collection. Main priorities are to perform clean up operation for unmanaged code, it is automatically invoked when an instance is not subsequently called.

Q12. What is Managed or Unmanaged Code?

Ans- Managed code is one which is executed by CLR (Common Language Runtime) in simple terms it means all the application code is dependent on the .NET platform, considered as overseen in view of them. Unmanaged code is any code that is executed by runtime application of some other structure different from .NET platform. The runtime of application will deal with memory, security and other execution activities.

Q13. What is an Object?

Ans- Object is an instance of a class, It is used for accessing the methods of a class. “New” keyword is used for the creation of an object, a class that creates an object in the memory location contains the information about methods, variables, and behavior of that class.

Q14. What is a Class?

Ans- A class is a blueprint of an object. It defines different kinds of data and functionalities objects will have. A class enables you to create your own custom types by clubbing together variables of different types, methods, and events. In C# a class is defined by a class keyword.

Q15. Define an abstract class?

Ans- It is a type of class whose objects can’t be instantiated, It contains something like a single approach or technique and indicated by the keyword ‘abstract’.

Q16. Define sealed classes in C#?

Ans- You create sealed classes in situations when you want to restrict the class to be inherited. For doing this sealed modifiers are used. If you forcefully specify a sealed class as a base class then a compilation error occurs.

Q17. Define a Partial class?

Ans- A partial class is the only one that essentially splits the definition of a class into multiple classes in either same source code files or multiple source code files. One can create a class definition in multiple files but that is compiled as one class at run-time and when an instance of this class is created, one can access all methods from every source file with the same object. It is indicated by the keyword ‘partial’.

Q18. List down the fundamental OOP concepts?

Ans- There are four fundamental OOP (Object Oriented Programming) concept they are listed as follows:

  • Inheritance-  Ever heard of this dialogue from relatives “you look exactly like your father/mother” the reason behind this is called ‘inheritance’. From the Programming aspect, It generally means “inheriting or transfer of characteristics from parent to child class without any modification”. The new class is called the derived/child class and the one from which it is derived is called a parent/base class.

Polymorphism- You all must have used GPS for navigating the route, Isn’t it amazing how many different routes you come across for the same destination depending on the traffic, from a programming point of view this is called ‘polymorphism’. It is one such OOP methodology where one task can be performed in several different ways. To put it in simple words, it is a property of an object which allows it to take multiple forms.

Encapsulation- In a raw form, encapsulation basically means binding up of data in a single class.A class shouldn’t be directly accessed but be prefixed in an underscore.

Abstraction- Suppose you booked a movie ticket from bookmyshow using net banking or any other process. You don’t know the procedure of how the pin is generated or how the verification is done. This is called ‘abstraction’ from the programming aspect, it basically means you only show the implementation details of a particular process and hide the details from the user. It is used to simplify complex problems by modeling classes appropriate to the problem.An abstract class cannot be instantiated which simply means you cannot create objects for this type of class. It can only be used for inheriting the functionalities.

Q19. Explain the process of inheriting a class into another class?

Ans- Colon is used as an inheritance operator in C#. Place the colon and the class name.

public class Derivedclass: childclass

Q20. Define method overloading in C#?

Ans- Method overloading essentially is creating multiple methods with the same name and unique signatures with the same class. When you
compile, the compiler makes use of overload resolution to determine the specific method which will be invoked.

Q21. List the differences between method overriding and method overloading?

Ans- Under Method overriding the definition of the derived class is changed which in turn changes the method behavior. Method overloading is simply creating a method with the same name under the same class under different signatures.

Q22. Explain StreamReader/StreamWriter class?

Ans- Streamreader and StreamWriter are classes of namespace.System.IO. Used when we want to read or write charact90, Reader based data,
respectively.

members of StreamReader are: close(), Read(), Readline().
members of Streamwriter are: close(), write(), writeline().

Example program:

Class Testprogram
{
using(StreamReader sr = new StreamReader("C:Readme.txt")
{
// Any code to read//
}
using(StreamWriter sr = ndew StreamWriter("C:Readme.txt")
{
// Any code to write//
}
}

Q23. What is an Interface?

Ans- An Interface is basically a class with no implementation. It contains only the declaration of properties, attributes, and events.

Q24. Distinguish between a class and struct?

Ans- Given below are the differences between a class and struct:

Class

Struct

It supports inheritance

It does not support inheritance

It is Pass by reference

It is pass by value

Members are private by default

Members are public by default

Considered good for larger complex objects

Considered good for small models

Q25. List the difference between the Virtual method and the Abstract method?

Ans- Virtual method must always have a default implementation. However, it can be overridden in a derived class by the keyword override.

An Abstract method doesn’t have any implementation. It resides in the abstract class, and also it is mandatory that the derived class must implement abstract class. Use of override keyword is not necessary.

Q26. Illustrate Namespaces in C#?

Ans- Namespaces are used for organizing large code projects. “System” is one of the most popular and widely used namespaces in C#. One can create their own namespace and use one into another called nesting.

Q27. Define using statement in C#?

Ans- “Using” keyword simply denotes that the particular namespace is being used by the program. For ex- using System, Here System is a namespace. The class console is defined under system, so we can use the Console.Writeline(…) or Readline in our program.

Q28. Define an Escape Sequence, Name few strings in Escape Sequence?

Ans-  An Escape Sequence is denoted by a backslash (). The backslash merely indicates that the character it is following should be interpreted literally or is a special character. An escape sequence is a single character.

Few escape sequences are as follows:

n – newline character

b – backspace

– backlash

‘ – Single quote

” – Double quote

Q29. Define Boxing and Unboxing in C#?

Ans- Converting a value type to the reference type is called boxing.

Example:

int value = 10
//-------Boxing--------//
object boxedvalue = value1;

Explicit conversion of the same reference type i.e. converting it back to the value type is called Unboxing.

Example:

//----------------Unboxing-------// int UnBoxing = int(boxedvalue);

Q30. Define an array?

Ans- An array is used to store multiple variables of the same type. Collection of variables stored in a contiguous memory location.

Example:
double numbers = new double[10];
int[] Score = new int[4] {25,24,23,22,21,20}

Above given example above is of a Single Dimensional array. It is a linear array where values are stored in a single row. A multidimensional array is the one having more than one dimension. A good example would be of a rectangle.

Example:

int[,] numbers = new int[4,3]{ {1,2} {2,3} {3,4} {4,5} };

Q31. Define a Jagged Array in C#?

Ans- A Jagged array is referred to as an “array of arrays”. It is an array whose elements are arrays, the element of the same can be of different dimensions and sizes. The length of each array index can differ.

Example:

int[][] jagArray = new int[5][];

Q32. Distinguish between Array and Arraylist in C#?

Ans-

ArrayArrayList

 Array uses the vector array for storing the elements

ArrayList uses the LinkedList to store the elements

Size of the Array must be defined until redim used(vb)

There’s no need for specifying storage size.

An array is a specific data type storage

ArrayList can store everything as an object

Typecasting is not necessary

Typecasting is necessary

There is no RunTime exception

There is a RunTime error exception

Elements can’t be inserted or deleted in between

Elements can be inserted or deleted in between

Q33. Define Collections?

Ans- A collection essentially works like a container for instances of other classes. Every class implements Collection Interface.

Q34. Write a short note on Interface?

Ans- An Interface is a class with no implementation. It consists of a declaration of methods, Parameters, and values.

Advance Level

Q35. Illustrate Serialization?

Ans- A process that involves converting some code into its binary format is known as a serialization in C#. In doing so it gives the flexibility where code can be stored easily and or written to a disk or some other storage device. Serialization is used when there is a strict need for not losing the original code.

Serialization in C# is of three types:

Binary Serialization- It is fast and demands less space, converts any code into its binary format. Serialize and restore public and non-public properties.

SOAP- Generates a complete SOAP compliant envelope used by any system by its ability to understand SOAP. Classes under this type of Serialization reside in System.Runtime.Serialization. 

XML Serialization- It serializes all the public properties to XML document. Readability being one factor, an XML document can also be manipulated in various ways. Classes under this type reside in System.sml.Serialization.

Q36. Define Parsing? Explain how to Parse a DateTime String?

Ans- Parsing is a method of converting a string into another data type.

Example:

string text = "200";
int num = int.Parse(text);

In the above-given example, 200 is an integer. So, the Parse method converts the string 200 into its own base type, i.e. int.
To parse a DateTime String let’s see a small example.

Example:

string dateTime = "Aug 26,2019"; Datetime parsedvalue = Datetime.Parse(dateTime);

Q37. Define Delegate?

Ans- Delegate is a variable that holds the reference to a method. It is a function pointer of the reference type. All Delegates are derived from the
System.Delegate namespace. Both Delegate and the method that it refers to can have the same signature. Let’s see a small example.

Example:

public Delegate int myDel(int number); //declaring a delegate
public class Program
{
public int SubstractNumbers(int a) //Class Program has the method same signature as delegate called  
{
int difference = a - 10;
return difference;
}
public void start()
{
myDel DelegateExample = SubstractNumbers;
}
}

Q38. Distinguish between System.String and System.Text.StringBuilder classes?

Ans – System.String is immutable. Whenever you modify the value of a string variable then a new memory is allocated to the new value and previous memory allocation is released. System.Text.StringBuilder is mutable i.e. supports the fact that a variety of operations can be performed
without allocating a seperate memory location for the already modified string.

Q39. Illustrate the differences between the System.Array.CopyTo() and System.Array.Clone()?

Ans – Using the Clone() method, a new array object is created containing all elements of the original array. Using the CopyTo() method all the elements of the existing array gets copied into another existing array. Both use a shallow copy method.

Q40. Write the Syntax for catching an exception in C#?

Ans – To catch an Exception we make use of try-catch blocks. The catch block has a parameter of the system.Exception type.

Example:

try
{
GetAllData();
}
catch(Exception ex){
}

Q41. Explain about generics in C#.NET?

Ans- Generics are used to make reusable code classes which decrease the code redundancy,

  • Increase type safety, performance, and optimization
  • Using Generics one can do a variety of things like create collections
  • To create Generic collection, System.namespace
  • The generic namespace should be used inspite of classes such as ArrayList in the System
  • Generics instigates the usage of a parameterized type

Q42. List down the differences between “dispose” and “finalize” methods in C#.

Ans- Dispose() is called when we want an object to release unmanaged resources with them. Whereas, Finalize() is used for the same purpose but
it doesn’t assure garbage collection of an object.

Q43. Define C# I/O classes? List the commonly used classes?

Ans- C# consists of System.IO namespace which has classes that compute and perform various operations on files like creating, deleting, opening
and closing etc.

Few commonly used I/O classes are listed below:

File- Helps in manipulating file.
StreamWriter- Generally used for writting characters to a stream.
StreamReader- Generally used for reading characters to a stream.
StringWriter- Used for writing a string buffer.
Stringreader- Used for reading a string buffer.

Q44. Define thread? Explain about Multithreading?

Ans- Thread is a set of instructions that when executed enables the program to perform concurrent processing. Concurrent processing helps in doing more than one process at a time. By default, C# consists of only thread. Other threads can be created to execute the code in parallel with original thread.

Thread follows a life cycle where it starts whenever a thread is created and gets terminated immediately after the execution. The namespace it follows is System.Threading which has to be included to create threads and use its members.

Threads are created by extending the thread class. Start() method marks the beginning of the thread execution.

//callThread is our target method//
ThreadStart methodThread = new ThreadStart(CallThread);
Thread childThread = new Thread(methodThread);
childThread.start();

C# can also execute more than proceeses/task at a time which is done by handling different processes at different time labeled as “multithreading”.
Several operations of the same are listed below:

  • Start
  • Sleep
  • Abort
  • Suspend
  • Resume 
  • Join

Q45. What are Events?

Ans- Events in C# follow a concept where it consists of a Publisher, Subscriber, Notification and a handler. You can think of an event as nothing but an encapsulated delegate.

Example:


public Delegate void TestEvent();
public TestEvent TestEvent1;

Q46. Explain Synchronous and Asynchronous Operations?

Ans- Synchronization is a way of creating a thread-safe code where only a single thread will access the code in a given time. A synchronous call waits for completion of method and then continous the program flow. Synchronous programming adversely affects the UI operations that normally happens when user tries to perform time-consuming operations since only one thread is used.

In Asynchronous operation, the method call immediately returns allowing the program to perform other operations while the method called completes its share of work in certain circumstances.

Q47. Explain Async and Await?

Ans- Async and Await keywords are mostly used for creating asynchronous methods in C#. Usage of the same is shown through an example:

public async Task>CalculateCount()
{
await Task.Delay(2000);
return 1;
}
public async task mytestmethod()
{
Task> count = CalculateCount();
int result = await count;
}

In the above-given code async keyword is used for method declaration. The Count is of a task type int which calls the method CalculateCount(). CalculateCount() starts execution and calculates something.

Q48. Explain Deadlock?

Ans- A deadlock is a situation that arises when a process isn’t able to complete it’s execution because two or more than two processes are waiting for each other to finish. This usually occurs in multi-threading. In this, a shared resource is being held up by a process and another process is waiting for the first process to get over or release it, and the thread holding the locked item is waiting for another process to complete.

Q49. Illustrate Race Condition?

Ans-  A Race Condition occurs in a situation when two threads access the same resource and try to change it at the same time. The thread which accesses the resource first cannot be predicted. Let me take a small example where two threads X1 and X2 are trying to access the same shared resource called T. And if both threads try to write the value to T, then the last value written to T will be saved.

Q50. What is Thread Pooling?

Ans- A Thread pool is a collection of threads that perform tasks without disturbing the primary thread. Once the task is completed by a thread it returns to the primary thread.

This brings us to the end of this article on C# Interview Questions. I hope it helped in adding up to your knowledge. Wishing you all the best for your interview. Happy learning.

Original article source at https://www.edureka.co

#csharp #interviewquestions #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

Top 45+ C# Interview Questions and Answers

Everything You Need to Know About Using Web Fonts in CSS

Learn how to use web fonts in CSS. In this tutorial, we’ll discuss various techniques and best practices for adding custom fonts to CSS webpages. Everything you need to know about using web fonts in CSS, including how to use variable fonts, and web fronts from a font repository.

In the early days, designers were limited to popular system fonts such as Arial, Verdana, and Times New Roman. This handful of fonts was guaranteed to be available across all browsers and platforms — they are the so-called web safe fonts. Reliable custom font use was only possible with image replacement or plugins such as Flash.

The solution to this custom font issue was web fonts. Web fonts enable you to set the font for your text in CSS, using fonts that are available on the web, and are downloaded along with your website as it is accessed. Basic support for web fonts was introduced in Internet Explorer 4.0, released in 1997. However, it took more than a decade for cross-browser support of web fonts to be implemented through the @font-face rule set.

The wide availability of open source fonts has encouraged usage of a wide range of fonts by people were previously reluctant to use commercial typefaces with restrictive licenses.

In this tutorial, we’ll discuss various techniques and best practices for adding custom fonts to CSS webpages.

Table of contents

  • Do you really need web fonts?
  • What fonts can you use in CSS?
  • How to use web fonts in CSS
  • How to use web fonts from a font repository
  • How to use your own web font files in CSS
  • FOUT, FOIT, and FOFT
  • Handling font weights and styles in CSS
  • Variable fonts
  • Using variable font files

Do you really need web fonts?

Just because you can add dozens of fonts to every page doesn’t mean you should. Here’s why:

  • Designers recommend using fonts sparingly, with just one or two typefaces per document
  • Custom fonts typically require a few hundred KB. The more you add, the larger your page weight, and the worse your page performance. This can be especially problematic on mobile devices and slower networks
  • The days of every site using standard OS fonts such as Helvetica or Times New Roman are long gone

Example Of Web Fonts

What fonts can you use in CSS?

You can set the font of text through the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if it is not available, it will use a browser default font. This is the most basic example:

body {
  font-family: Arial;
}

Because you can’t guarantee the availability of the fonts you want to use on your webpages (even a web font can fail), you can supply a font stack so that the browser has multiple fonts it can choose from. You can specify one or more font family as a comma-separated list to font-family. When displaying a webpage, a browser will travel down the list of font-family values until it finds a font available on the system it is running on.

CSS defines five generic names for fonts: serif, sans-serif, monospace, cursive, and fantasy. The exact font face used from these generic names can vary between each browser and each operating system that they are displayed on. It represents a worst-case scenario where the browser tried its best to provide a font that looks appropriate for that category of font. Here is a typical example of a font stack:

body {
  font-family: Arial, Helvetica, sans-serif;
}

Web apps may feel more native if they use a standard system font. For example, the following stack implemented at GitHub targets system fonts available across MacOS, iOS, Windows, Linux, and Android platforms:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Medium and the WordPress admin panels use a similar version:

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

You can use a web-safe font such as Arial, and it can provide a noticeable performance boost because it is one of the few fonts guaranteed to be available locally. The list of web-safe fonts will change as operating systems evolve, but it’s reasonable to consider the following fonts web safe, at least for now:

  • Arial (sans-serif)
  • Courier New (monospace)
  • Georgia (serif)
  • Times New Roman (serif)
  • Trebuchet MS (sans-serif)
  • Verdana (sans-serif)

The cssfontstack.com website maintains a list of web-safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.

If you want to use a different font, then you need to reach for a web font. You can source these fonts from a font repository such as Google Fonts, you can buy them directly from a font foundry (font design studio) such as Hoefler & Co, or find some open source font projects, like Fira Code.

How to use web fonts in CSS

With the @font-face CSS at-rule, you can specify a font for a website that is not installed on the user’s computer. The font can be located on a remote server or it can be locally installed.

The @font-face has a number of descriptors to identify and describe the font. The most common descriptors you will want to specify are:

  • font-family: Specifies a name that will be used as the value for font properties.
  • font-weight: Specifies the weight (or boldness) of the font. Accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400;
  • font-style: Specifies whether a font should be styled with a normal, italic, or oblique face from its font-family
  • src: Specifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the user’s computer

Here is a basic example using the Lato font as the font throughout the website (for body):

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  src: url("https://mdn.github.io/web-fonts/LatoReg.ttf");
}

body {
  font-family: Lato, sans-serif;
}

The source of this file is on a remote server. If you want to tell the browser to use the user’s local copy of the “Lato” font, you can use the local() function.

The src property works similarly to the font-family property where you can supply a comma-separated list of sources, and the browser will run through the list until one is found. For example, we can modify our previous example to instruct the browser to look for the local copy first.

If the user does not have that font installed, then the downloadable font named LatoRef.ttf is used instead:

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  src: local("Lato"), url("https://mdn.github.io/web-fonts/LatoReg.ttf");
}

body {
  font-family: Lato, sans-serif;
}

How to use web fonts in CSS from a font repository

If a system typeface makes your marketing manager wince, there are several repositories that offer a wide range of open source fonts that are served from a CDN. Popular options include:

Google Fonts is probably the most popular font repository because all the fonts are free and have open source licenses. It provides a searchable, filterable list of fonts:

Google Fonts Example

Google Fonts has a CSS API, which enables you to use the web fonts directly from the Google servers. Let’s discuss how you can add a font to your website from Google Fonts.

Example: How to add the Open Sans font in CSS

When you select your desired font on Google Fonts, it will show you a list of the font type and font weight variants. You can select the variants you are interested in and it will add them to cart. The cart by accessed by clicking the icon in the top right corner:

Adding Open Sans Font In CSS From Google Fonts

Inside the cart (right-side of screenshot above), you get two options for embedding your selected fonts to your webpage. You can add it using link element to the HTML, or you can add an @import statement to the CSS. Selecting the option will show you a code snippet that you can copy.

To embed a font in a page, use the standard <link> tag in the HTML head. It will look like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

This contains some additional link elements that contain the preconnect keyword for the rel attribute. These act as a hint to the browser that the user needs resources from the target resource’s origin, and therefore the browser can preemptively initiate a connection to that origin. This can speed up the downloading of the font files.

Alternatively, you can use a CSS @import:

<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

The downside of this method is that this blocks the processing of further style sheets until the font styles have been parsed, but this can be mitigated.

There is a display parameter in the URL, which is used to set the font-display descriptor for the font. This lets you control what happens while the font is unavailable. The value swap gives the font face an extremely small block period (100ms or less is recommended in most cases) and an infinite swap period. Specifying a value other than the default auto is usually appropriate as it does not block processing.

The font can then be used in CSS through the font-family or font properties:

body {
  font-family: "Open Sans", sans-serif;
}

You can optimize the request by modifying the URL. For example, you can request multiple font families using family parameter:

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

You can also request other individual styles, such as specific weights, using a special notation. For example, to request weights 400 and 700 for the Crimson Pro font, the URL looks like this:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700

You are most likely going to generate these URLs through the web app, so I would not worry about learning the API in depth. You can refer to the Google Fonts API v2 quickstart guide for more information.

How to use your own web font files in CSS

Any font file can be used in your webpage but make sure you check that you have permission from the owner of the typeface. All modern browsers support WOFF and WOFF2 formats. WOFF2 offers typical compression savings of 30 percent. For older or more obscure applications, TTF, EOT, or SVG may be an option.

The Font Squirrel Webfont Generator provides a simple tool to upload one or more fonts, tweak settings, and download a kit containing the converted fonts and CSS code:

Font Squirrel Webfont Generator

By default the Webfont Generator provides a WOFF2 font, a WOFF fallback, and the appropriate CSS @font-face settings. For example:

@font-face {
  font-family: 'mytypeface';
  src: url('mytypeface-webfont.woff2') format('woff2'),
       url('mytypeface-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: mytypeface, serif;
}

FOUT, FOIT, and FOFT

A web font may take several seconds to download, especially on a slower device or network. Strategies about handling this loading period are quite a deep topic. Zach Leatherman wrote a comprehensive list of font loading strategies that have been widely shared. I will outline the broad strokes here.

While the font is downloading, the browser can choose to:

  • Show a Flash of Unstyled Text (FOUT). The first available fallback is used immediately, then replaced by the web font once it has loaded. This process is used by IE, Edge 18 and below, and older editions of Firefox and Opera
  • Show a Flash of Invisible Text (FOIT). No text is shown until the web font has loaded. This process is used in all modern browsers, which typically wait three seconds before reverting to a fallback
  • Show a Flash of Faux Text (FOFT). The idea here is we split font loading into three stages:
    • Step 1: Use fallback font when web fonts aren’t loaded yet
    • Step 2: Load the regular (also called “book” or “roman”) variant of the font first. This replaces most of the text. Bold and italics will be faked by the browser (hence “faux text”).
    • Step 3: Load the rest of the fonts

Zach recommends two strategies in his article:

  1. FOUT with Class – This is the best approach for most situations. This works if we use a font-hosting company or host the font ourselves.
  2. Critical FOFT – Most performant approach. This only works if we host our own fonts.

You can read Zell Liew’s article,The best font loading strategies and how to execute them, to understand how to execute these strategies.

Handling font weights and styles in CSS

Each font file has its own weight (boldness), style (italic slant), stretch, and variants. The browser will attempt its own interpolations if you make adjustments to the CSS without loading an associated font. Rendering will be slower, fonts may look worse, readability could be affected, and widths could be dramatically different and break layouts. For example:

/* load font with a weight of 300 */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300')
body {
  font-family: "Open Sans", serif;
}
/* but use a weight of 600 - do not do this! */
strong {
  font-weight: 600;
}

The solution is to load a separate font file for every weight and style you require, then explicitly set all styles accordingly:

/* load font with weights of 300 and 600 */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
/* weight 300 for all elements */
* {
  font-weight: 300;
}
body {
  font-family: "Open Sans", serif;
}
/* weight 600 for bold elements */
h1, h2, h3, strong {
  font-weight: 600;
}

Variable fonts

Variable fonts are an evolution of the OpenType font specification that enables many variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. Now, browser support is almost ubiquitous for variable fonts.

The core concept of the variable font format is the concept of an axis of variation describing the allowable range of that particular aspect of the typeface design. So the ‘weight axis’ describes how light or how bold the letterforms can be; the ‘width axis’ describes how narrow or how wide they can be; the ‘italic axis’ describes if italic letterforms are present and can be turned on or off and so on:

Variable Font Width Axis Vector Limits

An axis can be a range or a binary choice. Weight might range from 1 to 999, whereas italics might be 0 or 1 (off or on). For a range, any value between these two extremes can be used, enabling fine control of the appearance of text.

Here are some axes you can control with CSS properties.

Weight

The weight axis is the thickness of the font. It can be set between 1 and 1000 using:

font-weight: 400;

It is also possible to use font-variation-settings: "wght" 400;, but it is poorly supported by browsers.

Italic

The italic axis is either on or off because standard and italic characters can be different:

font-style: italic;

It is also possible to use font-variation-settings: 'ital' 1; , but it is poorly supported by browsers.

Width

The font can be stretched to produce condensed or extended variations. 100% is normally considered the default with ranges above or below that value for narrower or wider widths accordingly:

font-stretch: 80%;

It is also possible to use font-variation-settings: 'wdth' 80;, but it is poorly supported by browsers.

Slant

The slant  —  or oblique  —  differs from italic in that the letterforms are not changed but can vary on an axis typically between zero and 20 degrees:

font-style: oblique 10deg;

It is possible to use font-variation-settings: 'slnt' 10;, but it is poorly supported by browsers.

Using variable font files

Variable font files can be found in most font repositories now, such as Google Fonts. There are some sites that are specific to variable fonts such as v-fonts and Axis-Praxis.

Variable font files can be loaded using @font-face with a woff2-variations format and the allowable ranges. For example:

@font-face {
  font-family: 'MyVariableFont';
  src: 'myvariablefont.woff2' format('woff2-variations');
  font-weight: 200 800;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 20deg;
}

Specific styles can then be set in any selector with multiple CSS properties:

p {
  font-family: 'MyVariableFont';
  font-weight: 300;
  font-stretch: 100%;
  font-style: oblique 0deg;
}

You can also use the shorthand font-variation-settings property (poorly supported):

p {
  font-family: 'MyVariableFont';
  font-variation-settings: 'wght' 300, 'wdth' 100, 'slnt' 0;
}

Because variable fonts are so well supported now, it is not necessary to have a fallback.

Conclusion

Web fonts have revolutionized typography on the web. Designers have fewer constraints now for using custom fonts, and now have more advanced control of the appearance of text.

However, there are important considerations to understand with regard to performance and UX of using web fonts. You should be aware of the implications of unstyled text while a font is being downloaded, and mitigate the impact it has on layout and appearance. Having so much choice of fonts and the ability to use variable fonts presents web developers with more options, but there are still challenges with making the right tradeoffs between the desired design and the desired performance.

Original article source at https://blog.logrocket.com

#css #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

Everything You Need to Know About Using Web Fonts in CSS
React Tutorial

React Tutorial

1670308413

React JS for Beginners - Full Course

Learn about React.js in this full course for beginners. You'll know to build web apps in React JS, using patterns like functional components and hooks.

React JS Full Course for Beginners - Includes Project Tasks & Examples

React, also known as react.js or Reactjs, is a frontend programming language based on JavaScript and is used for application development and building user interfaces.  It is one of the most popular front-end JavaScript libraries.

After completing this course, you will be able to build web apps in React JS, using patterns like functional components and hooks.

Enjoy the video!

⏰Timestamps⏰

00:00 Intro   
00:22 Outline 
00:53 Introduction to ReactJS 
06:11 Download and Install ReactJS and IDE 
13:28 Run ReactJS and File Structure 
20:03 Hello world in ReactJS 
24:57 Create New File 
29:15 ReactJS Files and Folders Structures  
37:24 Components in ReactJS 
47:21 Class Component and JSX in React 
54:30 On Click Event and Function Calling 
01:04:32 State in Functional and Class Components 
01:18:02 Props in Functional and Class Components 
01:42:46 Pass Functions in Components as Props 
01:51:28 Hooks in ReactJS 
01:56:35 useEffect (Hook) in ReactJS 
02:07:49 useReducer Hook in ReactJS 
02:16:14 Pure Component with States and Props in ReactJS 
02:31:26 How to useMemo Hook in ReactJS 
02:41:57 Controlled and Uncontrolled Components in ReactJS 
02:58:53 High Order Component in ReactJS (HOC) 
03:09:59 Get Method in ReactJS 
03:20:55 Routing in ReactJS 
03:32:57 Page Not Found in ReactJS 
03:45:35 Previous State in Functional Component 
03:56:46 Previous Props in ReactJS 
04:06:11 Outro

#react #reactjs #javascript #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

React JS  for Beginners - Full Course

CSS Flexbox Layout in 6 Minutes

In this tutorial, we will go over the CSS Flexbox layout. Here’s a list of 10 example flexbox layouts with CSS that you can copy and paste to get started with your own layouts.

In theory, it’s pretty straightforward to use flexbox (Flexible Box Module) to build complex layouts, but I’ve often found myself adding display: flex to an element and then promptly spending an eternity trying to figure out how to make anything behave like I expect it to. If you’re anything like me: here’s a list of 10 example flexbox layouts with CSS that you can copy and paste to get started with your own layouts. We’ll walk through these basic layout patterns (click to jump to an example):

 

Every example assumes that your HTML contains an element with a class of container which then contains several children that all have a class of item (the number of children varies per example):

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

Stretch all, fixed spacing

The most basic flexbox pattern: getting a few boxes to stretch and fill the full width of their parent element. All you need to do is to set display: flex on the container, and a flex-grow value above 0 on the children:

.container {
  display: flex;
}

.item {
  flex-grow: 1;
  height: 100px;
}

.item + .item {
  margin-left: 2%;
}

We use a + selector to only add gaps between pairs of items (essentially just skipping the left margin for the first item in the list).

Increasing flex-grow will increase the amount of space that an element is allowed to stretch to compared to any other element. If we set flex-growto 2 on the middle element here, we would basically divide up the available space into 6 chunks (1 chunk for each item plus 1 extra for the middle item, 1+1+2+1+1). The middle item gets two chunks (flex-grow: 2) worth of space, and all other elements get one chunk (flex-grow: 1).

Stretch middle, fixed spacing

A common app and web pattern is to create a top bar where we want to stretch only the middle element, but keep the right most and left most elements fixed. If we just want one element to stretch, we can set a fixed width (e.g. 100px) on an element that should stay static, and flex-grow: 1 on the element that should stretch:

.container {
  display: flex;
}

.item {
  height: 100px;
  width: 100px; /* A fixed width as the default */
}

.item-center { 
  flex-grow: 1; /* Set the middle element to grow and stretch */
}

.item + .item { 
  margin-left: 2%; 
}

Even if the middle element here has a defined width of 100px, flex-grow will make it stretch to take up all the available space.

Alternating grid

A layout pattern that I use on my blog overview is to create a grid with some variation: after every row of two equally sized items there’s one item that takes up an entire row:


To accomplish this we need to:

  1. Set flex-wrap: wrap on the container (or all items would be rendered on a single row)
  2. Set justify-content: space-between on the container, to only create space between the elements (and not between the edge of the parent element and items)
  3. Set every item’s width to 49% (or something similar that is equal to or less than 50%)
  4. Set every third item’s width to 100% so that it fills that entire row. We can target every third item in the list with the nth-child() selector.
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 48%;
  height: 100px;
  margin-bottom: 2%;
}

.item:nth-child(3n) {
  width: 100%;
}

If you want the first row to be full-width and the two following items to share a row, note that you can’t write .item:nth-child(1n) { width: 100% }—that would target all items. You have to target the first item by selecting every third element, and then stepping back two items: .item:nth-child(3n-2) { width: 100% }.

3x3 grid

We can create a 3x3 grid by setting flex-grow to 0 and flex-basis to the preferred width for all children (here done using the flex short-hand: flex: 0 32%). The margins between the items are the leftovers from every row, i.e. (100%-32x3)/2=2%. I’ve matched the margin (margin-bottom: 2%) to achieve even spacing between all elements:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 0 32%;
  height: 100px;
  margin-bottom: 2%; /* (100-32*3)/2 */
}

You can change the flex-basis to increase or decrease the number of items on each row. flex: 0 24% would put 4 items on every row, flex: 0 19% would put 5 items on every row, and so on so forth.

3x3 grid, constrained proportions (1:1)

We can create a grid full of items with constrained proportions by using a somewhat hacky padding CSS trick. If we use % when setting padding on an element the padding is set relative to that item’s parent’s width, .container in this case. We can use that effect to create a square by setting an item’s width and padding-bottom to the same value (and effectively setting the height of that element through padding-bottom):

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 32%;
  padding-bottom: 32%; /* Same as width, sets height */
  margin-bottom: 2%; /* (100-32*3)/2 */
  position: relative;
}

Since we’ve created an element that is effectively made up of only padding, and there’s no place left for content, we need to set position: relative on the .item in this example and add a child element with position: absolute, and use that element to “reset” the canvas and add content.

3x3 grid, constrained proportions (16:9)

To change the proportions of the items all you need to do is change the proportions of the width and padding-bottom on the .item. Changing the width would affect the number of items on each row, so as to not affect the grid structure we can for example change padding-bottom to 18% to create 16:9 (equivalent to 32:18) rectangles.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 32%;
  padding-bottom: 18%; /* 32:18, i.e. 16:9 */
  margin-bottom: 2%; /* (100-32*3)/2 */
}

Graph: vertical bars

If you want to use flexbox to create a simple graph visualization, all you need to do is to set align-items of the container to flex-end and define a height for each bar. flex-end will make sure that the bars are anchored to the bottom of the graph.

.container {
  display: flex;
  height: 300px;
  justify-content: space-between;
  align-items: flex-end;
}

.item { width: 14%; }
.item-1 { height: 40%; }
.item-2 { height: 50%; }
.item-3 { height: 60%; }
.item-4 { height: 20%; }
.item-5 { height: 30%; }

Graph: horizontal bars

Using the same technique as for vertical bars, we can simply add flex-direction on the container with a value of column to create a set of horizontal bars. flex-direction can have a value of row (default) or column, where a row runs horizontally (→) and a column runs vertically (↓). You can also reverse the direction of both by using row-reverse (←) and column-reverse (↑) respectively.

.container {
  display: flex;
  height: 300px;
  justify-content: space-between;
  flex-direction: column;
}

.item { height: 14%; }
.item-1 { width: 40%; }
.item-2 { width: 50%; }
.item-3 { width: 60%; }
.item-4 { width: 20%; }
.item-5 { width: 30%; }

Vertical stack (centered)

To create a vertical stack and make the items run from top to bottom all we need to do is to change the flex-direction from the default value of row to column:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  height: 40px;
  margin-bottom: 10px;
}

Masonry (or mosaic)

You’ve probably seen masonry (or mosaic) layouts all over the internet, but it’s likely that they were all powered by Masonry or a similar JavaScript library. Flexbox might seem like a great candidate to finally create this layout with CSS only, and it’s certainly possible, but it’s surprisingly hacky.

One of the main challenges of creating a masonry layout with flexbox is that to make an item affect the positioning of an item above and below it we need to change the flex-direction of the container to column, which makes items run from top to bottom. This creates a layout that looks great, and similar to the masonry effect, but it could be confusing for users; it creates an unexpected ordering of elements. If you read from left to right the elements would seem to be shuffled and appear in a seemingly random order, for example 1, 3, 6, 2, 4, 7, 8, etc.

Luckily, we can use the order property to change in which order elements are rendered. We can combine that property with some clever use of the nth-child() selector to order items dynamically depending on their original order. If we want to create a masonry layout with three columns we can divide all the items into three “groups”, like so:

/* Re-order items into rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

I’ve written another post that explains in detail how this works and why. This will set the order to 1 for the 1st element, 4th element, 7th element, etc. Elements with the same order value will be ordered on ascending order according to the source code order, or which value was set first, so in this example we’re producing three sets ordered like so: 1, 4, 7, 10 (3n+1) with order: 1, 2, 5, 8 (3n+2) with order: 2, and 3, 6, 9 (3n) with order: 3. These three groups represent our three columns. Put together the order becomes 1, 4, 7, 10, 2, 5, 8, 3, 6, 9.

If we make sure to render each of those groups as one column (no more, no less), it’ll create the illusion that the items have returned to their original order when you read from left to right. If we visually parse the grid as rows, the first row will contain the first element from every group (1, 2, 3), the second row will contain the second element from every group (4, 5, 6), and so on so forth. We then insert elements between the columns that take up 100% of the parent’s height, which force the columns to line break and not accidentally merge with adjacent columns. Here’s the full CSS snippet:

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 580px;
}

.item {
  width: 32%;
  margin-bottom: 2%; /* (100-32*3)/2 */
}

/* Re-order items into rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

Visually this achieves something that is very close to the masonry effect. How is the tab order affected? Luckily, not at all. order only changes the visual representation of objects, not the tab order, so tabbing through the grid will work as intended.

#css #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

 

CSS Flexbox Layout in 6 Minutes
Riley Lambert

Riley Lambert

1670293928

Top 45+ OOPs Interview Questions and Answers

The most frequently asked OOPs Interview Questions for freshers which will help you ace your interviews. This tutorial covers important questions from Inheritance, Polymorphism, Encapsulation, Data Abstraction, etc.
 

Object-Oriented Programming is one of the main concepts in the programming world, therefore, every interview that you attend requires knowledge of OOPs. This article compiles the most frequently asked OOPs Interview Questions for freshers which will help you ace your interviews. So go ahead and get prepared.

Let’s take a quick look at all the topics of discussion:

  • Basic OOPs Interview Questions
  • OOPs Interview Questions Classes and Objects
  • Interview Questions on Features of OOPs
    • Inheritance 
    • Polymorphism
    • Encapsulation
    • Data abstraction
  • Methods and functions Interview Questions
  • Exception handling Interview Questions
  • Limitations of OOPs

OOPs Interview Questions

  1. What is the difference between OOP and SOP?
  2. What is OOPs?
  3. Why use OOPs?
  4. What are the main features of OOPs?
  5. What is an object?
  6. What is a class?
  7. What is the difference between a class and a structure?
  8. Can you call the base class method without creating an instance?
  9. What is the difference between a class and an object?
  10. What is inheritance?

Basic OOPs Interview Questions for Freshers

1. What is the difference between OOP and SOP?

Object-Oriented ProgrammingStructural Programming
Object-Oriented Programming is a type of programming which is based on objects rather than just functions and proceduresProvides logical structure to a program where programs are divided functions
Bottom-up approachTop-down approach
Provides data hidingDoes not provide data hiding
Can solve problems of any complexityCan solve moderate problems
Code can be reused thereby reducing redundancyDoes not support code reusability

2. What is Object Oriented Programming?

Object-Oriented Programming(OOPs) is a type of programming that is based on objects rather than just functions and procedures. Individual objects are grouped into classes. OOPs implements real-world entities like inheritance, polymorphism, hiding, etc into programming. It also allows binding data and code together.

3. Why use OOPs?

  • OOPs allows clarity in programming thereby allowing simplicity in solving complex problems
  • Code can be reused through inheritance thereby reducing redundancy
  • Data and code are bound together by encapsulation
  • OOPs allows data hiding, therefore, private data is kept confidential
  • Problems can be divided into different parts making it simple to solve
  • The concept of polymorphism gives flexibility to the program by allowing the entities to have multiple forms

 

4. What are the main features of OOPs?

  • Inheritance
  • Encapsulation
  • Polymorphism
  • Data Abstraction

Classes and Objects OOPs Interview Questions and Answers

5. What is an object?

An object is a real-world entity which is the basic unit of OOPs for example chair, cat, dog, etc. Different objects have different states or attributes, and behaviors.

6. What is a class?

A class is a prototype that consists of objects in different states and with different behaviors. It has a number of methods that are common the objects present within that class.

7. What is the difference between a class and a structure?

Class: User-defined blueprint from which objects are created. It consists of methods or set of instructions that are to be performed on the objects.

Structure: A structure is basically a user-defined collection of variables which are of different data types.

8. Can you call the base class method without creating an instance?

Yes, you can call the base class without instantiating it if:

  • It is a static method
  • The base class is inherited by some other subclass

9. What is the difference between a class and an object?

ObjectClass
A real-world entity which is an instance of a classA class is basically a template or a blueprint within which objects can be created
An object acts like a variable of the classBinds methods and data together into a single unit
An object is a physical entityA class is a logical entity
Objects take memory space when they are createdA class does not take memory space when created
Objects can be declared as and when requiredClasses are declared just once

OOPs Interview Questions – Inheritance

10. What is inheritance?

Inheritance is a feature of OOPs which allows classes inherit common properties from other classes. For example, if there is a class such as ‘vehicle’, other classes like ‘car’, ‘bike’, etc can inherit common properties from the vehicle class. This property helps you get rid of redundant code thereby reducing the overall size of the code.

11. What are the different types of inheritance?

  • Single inheritance
  • Multiple inheritance
  • Multilevel inheritance
  • Hierarchical inheritance
  • Hybrid inheritance

12. What is the difference between multiple and multilevel inheritance?

Multiple InheritanceMultilevel Inheritance
Multiple inheritance comes into picture when a class inherits more than one base classMultilevel inheritance means a class inherits from another class which itself is a subclass of some other base class
Example: A class defining a child inherits from two base classes Mother and FatherExample: A class describing a sports car will inherit from a base class Car which inturn inherits another class Vehicle

13. What is hybrid inheritance?

Hybrid inheritance is a combination of multiple and multi-level inheritance.

14. What is hierarchical inheritance?

Hierarchical inheritance refers to inheritance where one base class has more than one subclasses. For example, the vehicle class can have ‘car’, ‘bike’, etc as its subclasses.

15. What are the limitations of inheritance?

  • Increases the time and effort required to execute a program as it requires jumping back and forth between different classes
  • The parent class and the child class get tightly coupled
  • Any modifications to the program would require changes both in the parent as well as the child class
  • Needs careful implementation else would lead to incorrect results

16. What is a superclass?

A superclass or base class is a class that acts as a parent to some other class or classes. For example, the Vehicle class is a superclass of class Car.

17. What is a subclass?

A class that inherits from another class is called the subclass. For example, the class Car is a subclass or a derived of Vehicle class.

OOPs Interview Questions – Polymorphism

18. What is polymorphism?

Polymorphism refers to the ability to exist in multiple forms. Multiple definitions can be given to a single interface. For example, if you have a class named Vehicle, it can have a method named speed but you cannot define it because different vehicles have different speed. This method will be defined in the subclasses with different definitions for different vehicles.

19. What is static polymorphism?

Static polymorphism (static binding) is a kind of polymorphism that occurs at compile time. An example of compile-time polymorphism is method overloading.

20. What is dynamic polymorphism?

Runtime polymorphism or dynamic polymorphism (dynamic binding) is a type of polymorphism which is resolved during runtime. An example of runtime polymorphism is method overriding.

21. What is method overloading?

Method overloading is a feature of OOPs which makes it possible to give the same name to more than one methods within a class if the arguments passed differ.

22. What is method overriding?

Method overriding is a feature of OOPs by which the child class or the subclass can redefine methods present in the base class or parent class. Here, the method that is overridden has the same name as well as the signature meaning the arguments passed and the return type.

23. What is operator overloading?

Operator overloading refers to implementing operators using user-defined types based on the arguments passed along with it.

24. Differentiate between overloading and overriding.

OverloadingOverriding
Two or more methods having the same name but different parameters or signatureChild class redefining methods present in the base class with the same parameters/ signature
Resolved during compile-timeResolved during runtime

OOPs Interview Questions – Encapsulation

25. What is encapsulation?

Encapsulation refers to binding the data and the code that works on that together in a single unit. For example, a class. Encapsulation also allows data-hiding as the data specified in one class is hidden from other classes.

26. What are ‘access specifiers’?

Access specifiers or access modifiers are keywords that determine the accessibility of methods, classes, etc in OOPs. These access specifiers allow the implementation of encapsulation. The most common access specifiers are public, private and protected. However, there are a few more which are specific to the programming languages.

27. What is the difference between public, private and protected access modifiers?

 

NameAccessibility from own classAccessibility from derived classAccessibility from world

Public

Yes

Yes

Yes

Private

Yes

No

No

Protected

Yes

Yes

No

Data abstraction

28. What is data abstraction?

Data abstraction is a very important feature of OOPs that allows displaying only the important information and hiding the implementation details. For example, while riding a bike, you know that if you raise the accelerator, the speed will increase, but you don’t know how it actually happens. This is data abstraction as the implementation details are hidden from the rider.

29. How to achieve data abstraction?

Data abstraction can be achieved through:

  • Abstract class
  • Abstract method

30. What is an abstract class?

An abstract class is a class that consists of abstract methods. These methods are basically declared but not defined. If these methods are to be used in some subclass, they need to be exclusively defined in the subclass.

31. Can you create an instance of an abstract class?

No. Instances of an abstract class cannot be created because it does not have a complete implementation. However, instances of subclass inheriting the abstract class can be created.

32. What is an interface?

It is a concept of OOPs that allows you to declare methods without defining them. Interfaces, unlike classes, are not blueprints because they do not contain detailed instructions or actions to be performed. Any class that implements an interface defines the methods of the interface.

33. Differentiate between data abstraction and encapsulation.

 

Data abstractionEncapsulation
Solves the problem at the design levelSolves the problem at the implementation level
Allows showing important aspects while hiding implementation detailsBinds code and data together into a single unit and hides it from the world

Methods and Functions OOPs interview questions

34. What are virtual functions?

Virtual functions are functions that are present in the parent class and are overridden by the subclass. These functions are used to achieve runtime polymorphism.

35. What are pure virtual functions?

Pure virtual functions or abstract functions are functions that are only declared in the base class. This means that they do not contain any definition in the base class and need to be redefined in the subclass.

36. What is a constructor?

A constructor is a special type of method that has the same name as the class and is used to initialize objects of that class.

37. What is a destructor?

A destructor is a method that is automatically invoked when an object is destroyed. The destructor also recovers the heap space that was allocated to the destroyed object, closes the files and database connections of the object, etc.

38. Types of constructors

Types of constructors differ from language to language. However, all the possible constructors are:

  • Default constructor
  • Parameterized constructor
  • Copy constructor
  • Static constructor
  • Private constructor

39. What is a copy constructor?

A copy constructor creates objects by copying variables from another object of the same class. The main aim of a copy constructor is to create a new object from an existing one.

40. What is the use of ‘finalize’?

Finalize as an object method used to free up unmanaged resources and cleanup before Garbage Collection(GC). It performs memory management tasks.

41. What is Garbage Collection(GC)?

GC is an implementation of automatic memory management. The Garbage collector frees up space occupied by objects that are no longer in existence.

42. Differentiate between a class and a method.

ClassMethod
A class is basically a template that binds the code and data together into a single unit. Classes consist of methods, variables, etcCallable set of instructions also called a procedure or function that are to be performed on the given data

43. Differentiate between an abstract class and an interface?

 

Basis for comparisonAbstract ClassInterface

Methods

Can have abstract as well as other methodsOnly abstract methods

Final Variables

May contain final and non-final variablesVariables declared are final by default

Accessibility of Data Members

Can be private, public, etcPublic by default

Implementation

Can provide the implementation of an interfaceCannot provide the implementation of an abstract class

44. What is a final variable?

A variable whose value does not change. It always refers to the same object by the property of non-transversity.

OOPs Interview Questions – Exception Handling

45. What is an exception?

An exception is a kind of notification that interrupts the normal execution of a program. Exceptions provide a pattern to the error and transfer the error to the exception handler to resolve it. The state of the program is saved as soon as an exception is raised.

46. What is exception handling?

Exception handling in Object-Oriented Programming is a very important concept that is used to manage errors. An exception handler allows errors to be thrown and caught and implements a centralized mechanism to resolve them.

47. What is the difference between an error and an exception?

ErrorException
Errors are problems that should not be encountered by applicationsConditions that an application might try to catch

48. What is a try/ catch block?

A try/ catch block is used to handle exceptions. The try block defines a set of statements that may lead to an error. The catch block basically catches the exception.

49. What is a finally block?

A finally block consists of code that is used to execute important code such as closing a connection, etc. This block executes when the try block exits. It also makes sure that finally block executes even in case some unexpected exception is encountered.

OOPs Interview Questions – Limitations of OOPs

50. What are the limitations of OOPs?

  • Usually not suitable for small problems
  • Requires intensive testing
  • Takes more time to solve the problem
  • Requires proper planning
  • The programmer should think of solving a problem in terms of objects

Original article source at https://www.edureka.co

#oop #interviewquestions #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment

Top 45+ OOPs Interview Questions and Answers
Alfie Mellor

Alfie Mellor

1670293147

Top 70+ CSS Interview Questions and Answers

Top 70+ CSS interview questions and answers asked by popular companies. Prepare for the frequently ask'd CSS questions from beginners to advanced level. Get hired fast!

Web applications and websites are increasing in every industry, and CSS is essential to build attractive websites. Currently, there is a tremendous demand for web developers who have a good knowledge of HTML and CSS. To build a career in web designing, candidates need to interviews where they ask CSS interview questions. 

In this article, we have consolidated a list of CSS interview questions and divided the questions into four sections: basic CSS interview questions, intermediate CSS interview questions, advanced CSS interview questions, and frequently asked CSS interview questions. This list would be helpful for both experienced professionals and freshers. Let us start with this CSS interview questions guide. 

Table of Contents

  1. Basic CSS Interview Questions
  2. Intermediate CSS Interview Questions
  3. Advanced CSS Interview Questions
  4. Frequently Asked CSS Interview Questions
  5. Conclusion

Basic CSS Interview Questions

Let us begin with the basic CSS interview questions!

1. Name some CSS frameworks. 

CSS frameworks are libraries that make web page styling easier. Some of them are Foundation, Bootstrap, Gumby, Ukit, Semantic UI, etc. 

2. What do you understand by the universal sector?

A universal selector is a selector that matches any element type's name instead of selecting elements of a particular type. 

Example: 

<style>    

* {    

   color: blue;    

   font-size: 10px;    

}     

</style>    

3. Tell us about the use of the ruleset.

The ruleset is used for the identification of selectors, which can be attached with other selectors. The two parts of a ruleset are:

  • Declaration block: contains one or more semicolon-separated declarations
  • Sector: indicates the HTML element needed to be styled

4. What are the elements of the CSS Box Model?

The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border). 

5. Differentiate between CSS3 and CSS2.

The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements. 

6. How can CSS be integrated into an HTML page?

There are three ways of integrating CSS into HTML: using style tags in the head section, using inline-styling, writing CSS in a separate file, and linking into the HTML page by the link tag. 

7. Explain a few advantages of CSS. 

With CSS, different documents can be controlled using a single site, styles can be grouped in complex situations using selectors and grouping methods, and multiple HTML elements can have classes. 

8. What is meant by RGB stream?

RGB represents colors in CSS. The three streams are namely Red, Green, and Blue. The intensity of colors is represented using numbers 0 to 256. This allows CSS to have a spectrum of visible colors. 

9. What was the purpose of developing CSS?

CSS was developed to define the visual appearances of websites. It allows developers to separate the structure and content of a website that was not possible before. 

10. What is the difference between a class and an ID?

Ans. Class is a way of using HTML elements for styling. They are not unique and have multiple elements. Whereas ID is unique and it can be assigned to a single element. 

Intermediate CSS Interview Questions

In the next section, let us learn some intermediate level CSS interview questions!

1. Define z-index.

This is one of the most frequently asked CSS interview questions. Z-index is used to specify the stack order of elements that overlap each other. Its default value is zero and can take both negative and positive values. A higher z-index value is stacked above the lower index element. It takes the following values- auto, number, initial, and inherit. 

2. What are the benefits of CSS Sprites?

With CSS sprites, loading multiple images is not an issue. 

  • Blinking is not seen. 
  • Advanced downloading of assets does not take place until needed. 

3. How can you target h3 and h2 with the same styling?

Multiple elements can be targeted by separating with a comma:

h2, h3 {color: red;}

4. Name media types allowed by CSS.

The different media types allowed by CSS are: 

  • speech
  • audio
  • visual
  • tactile media
  • continuous or paged media
  • grip media or bitmap
  • interactive media

5. How can you use CSS to control image repetition?

The background-repeat property is used to control the image. Example:

h3 {

background-repeat: none;

 }

6. Tell us about the property used for image scroll controlling?

The background-attachment property is used to set whether the background image is fixed or it scrolls with the rest of the page. Example for a fixed background-image:

body {

  background-image: url(‘url_of_image’);

  background-repeat: no-repeat;

  background-attachment: fixed;

}

7. Name some font-related CSS attributes. 

The font-related attributes are Font- style, variant, weight, family, size, etc. 

8. Define contextual selectors.

In CSS, contextual selectors allow developers to specify styles of different parts of the document. Styles can be assigned directly to specific HTML tags or create independent classes and assign tags to them. 

9. Explain responsive web design. 

Responsive Design is a web page creation approach that uses flexible images, flexible layouts, and CSS media queries. This design approach aims to build web pages that detect the orientation and screen size of the visitors so that the layout can be changed accordingly.  

10. Tell us about the general CSS nomenclature.

In CSS, the styling commands are written in value and property fashion. CSS includes a system terminator- semicolon. The entire style is wrapped in curly braces and attached to the selector. This creates a style sheet that can be applied to an HTML page.

11. What are the limitations of CSS?

  1. CSS cannot always assure compatibility with every browser; you need to be cautious while choosing the style selector.
  2. The parent selector tag is not available, thus you can’t select the parent selector tag.
  3. Some selectors can lead to cross-browser issues due to their less browser-friendly behavior.
  4. We cannot request a webpage through CSS.

12. How to include CSS in the webpage?

  1. With the help of a link tag, you can include an external style sheet file as a CSS file into your HTML file.
  2. You can add CSS styles included within your HTML page and write it in the stand-alone stylesheet form of CSS.
  3. CSS can be included directly in the HTML tag by adding an inline style to HTML elements.
  4. One can import an external stylesheet file as a new CSS file by using the @import rule. 

13. What are the different types of Selectors in CSS?

Universal Selector, Element type Selector, ID selector, Class selector, Descendant combinatory, Child Combinator, General Sibling Combinator, Adjacent sibling combinator, and Attribute selector.

14. What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?

CSS preprocessor is a tool used to enhance the basic functionality and let us use the complex logical syntax such as variables, functions, mixins, and code nesting within vanilla CSS scripts themselves.

  1. Sass (Syntactically Awesome Style Sheets) uses .sass extension. It is used for indentation; it doesn’t use semicolons or curly brackets.
  2. Less (Leener Stylesheets) uses .less extension. It is easy to add to any JavaScript Project by using NPM or less.js file. Here, @ is used to define the variables. 
  3. Stylus provides great flexibility in writing syntax. It is able to use native CSS as well as the exclusion of brackets, colons, and semicolons. There is no need to use @ or $ to define the variables.

People use SASS, LESS, and Stylus in order to extend the basic functionality of vanilla CSS.

15. What is VH/VW (viewport height/ viewport width) in CSS?

VH and VW are CSS units used to measure viewport height and viewport width respectively in percentage form in the responsive design techniques. E.g. If the height of the browser is 1000px, then VH is 1/100 of the height of the viewport that is 1000px*(1/100) = 10px, which is the height of the browser.  The same applies to VW (viewport width).

16. Difference between reset vs normalize CSS? How do they differ?

  1. Reset CSS is used to remove all built-in styles in the browser such as paddings, margins, and font sizes, and can be reset using all the elements.
  2. Normalize CSS is used to make all built-in styles in the browser consistent and correct bugs as per varying browsers.

17. What is the difference between inline, inline-block, and block?

  1. Block Elements are <div> and <p>. They usually start on a new line and can take space for an entire row or width.
  2. Inline elements are <a>, <span>, <strong>, and <img> tags. They don't start on a new line. However, they appear on the same line as the content and tags beside them.
  3. Inline block elements have padding and margins and set height and width values. Though, they are similar to inline elements. 

18. Is it important to test the webpage in different browsers?

Yes, it is the most crucial thing or the most important trial to do when you design a webpage for the first time and make changes to it. Testing your website periodically in different browsers will help you make every webpage compatible with it as browsers have been going through many updates.

19. What are Pseudo classes?

Pseudo-classes are the type of pseudo-elements that don’t exist in a normal document tree. It allows selecting the regular elements under certain conditions especially when we try to hover over the link; the anchor tags are :link, :visited, :hover, :active, :focus

In this example, the color will be red on the anchor tag when it’s hovered.

/* mouse over link */

a:hover {

color: #FFOOFF;

}

20. How do you specify units in the CSS? What are the different ways to do it?

There are mainly four different units in the CSS that are px, em, pt, and percentage (%).

  1. Px (Pixel) is used for fine-grained control and alignment and not cascade. To get it sharp, we can use 1px or multiple of px.
  2. Em is used to maintain relative size and responsive fonts. 1em = 16px having also the same font size. It is advisable to set the font size to 10px in common practice.
  3. Pt (point) is a fixed-size unit that is used in print. 1pt = 1/72 inch.
  4. Percentage (%) is used to set the font size with respect to the font size of the body. Thus, it is necessary to set the reasonable font size of the body.

21. Does margin-top or margin-bottom have an effect on inline elements?

No, mMargin-top or margin-bottom does not have an effect on the inline elements.

22. What property is used for changing the font face?

The font-family property is used for changing the font face that is applied to the element in the DOM.

23. What are the differences between adaptive design and responsive design?

Adaptive Design:

  • Main focus is to develop a website in multiple fixed layout sizes.
  • Offers good control over the design to develop variation in screens.
  • It is very time-consuming and takes a lot of effort to build the best possible adaptive design as examining it will need to go for many options with respect to the realities of the end user.
  • There are six standard screen sizes for the appropriate layouts; they are 320px, 480px, 760px, 960px, 1200px, 1600px to design.

Responsive Design

  • Main focus is to show content with respect to browser space.
  • Offers less control over the design.
  • It takes less time to build the design and there is no screen size issue irrespective of content.
  • It uses CSS media queries to design the screen layouts with respect to specific devices and property changes in the screen.

24. How are the CSS selectors matched against the elements by the browser?

Initially, there is a filtration of elements in the DOM via browsers with respect to key selectors that are traversed until we get parents' elements to determine the matches. Then the browser works on finding all the span elements present in the DOM and traverses them to parent elements to check whether they are matched to paragraph p elements. At last, when the browser finds all matches as parents, the matching process will be stopped and there will be black color applied to the content.

25. How is the border-box different from the content box?

Border-box consists of properties such as content, padding, and the border with respect to height and width. However, Content-box is a default value property used for the box-sizing as well as it helps to add border and padding to give proper height and width to the box without having a border and padding properties.

26. How is opacity specified in CSS3?

Opacity is the measure of content transparency. It is measured in the range from 0 to 1. Value 1 means the content is completely opaque. It is not supportable in the internet browser. Also, the 60% of opacity is applicable in the div section where we need to apply the filter property (polyfill) to make it completely opaque.

27. What is cascading in CSS?

Cascading is defined as the process of style declaration and its weight that will help the browser in selecting the styling rules with respect to time.

28. When does DOM reflow occur?

DOM reflow occurs when you insert, move, update, remove, and animate the elements in the DOM as well as when you modify content on the page and change style.

29. Different Box Sizing Property?

Content-box, Padding-box and Border-box

30. How to center align a div inside another div?

A div inside another div A is center aligned with the help of aligning div property to content via HTML script and CSS to the element in the DOM.

31. What is the grid system?

The CSS grid system is a type of powerful layout of 2 dimensional systems with respect to columns and rows.

32. What are the different ways to hide the element using CSS?

display: none, visibility: hidden, position: absolute

33. What does the: root pseudo-class refer to?

The: root selector pseudo-class refers to the CSS selector level 3. It helps to target the highest-level parent element present in the DOM.

34. What does Accessibility (a11y) mean?

Accessibility is to make the system accessible in such a manner that the website should have the text-to-speech capability, for people with physical disabilities, designed with the help of software or hardware combinations.

35. How do I restore the default value of a property?

keyword “initial” is used to restore the default value of a property.

36. Difference between CSS grid vs flexbox?0

  1. CSS Grid Layout is a two-dimensional system along with rows and columns. It is used for large-sized layouts.
  2. Flexbox is a Grid layout with a one-dimensional system either within a row or a column. It is used for the components of an application.

37. How does Calc work?

Calc can be used to specify the result of the mathematical operation of two or more elements. For example to specify the width elements by the addition of two or more elements, we can write as

.foo {

Width: calc(100px+50px)

}

38. What do CSS Custom properties variables mean?

CSS Custom properties variables are defined for CSS variables as well as cascading variables with specific values that can be reused.

39. What is the difference between CSS variables and pre-processor (SASS, LESS, Stylus) variables?

  1. CSS variables don’t need a pre-processor. It is cascaded, accessed, and manipulated in JavaScript.
  2. Preprocessor variables don’t cascade.

40. What does * { box-sizing: border-box; } do? What are its advantages?

Box-sizing: border-box is used to provide the inner dimension for the elements in the document by providing padding and border with respect to the height and width of the content.

41. What does !important mean in CSS?

The style “!important” in the CSS has the highest precedence. Also, the cascaded property will be overridden with it.

42. What is progressive rendering? How do you implement progressive rendering on the website? What are its advantages?

Progressive rendering is the process of improving the performance of a webpage with respect to loading time in order to display the content speedily. The use of loading the lazy loading of the image with the help of Intersection Observer API via viewport. 

43. Does style1.css have to be downloaded and parsed before style2.css can be fetched?

No. The CSS file will be downloaded via browser in order to appear on the HTML page.

44. How to determine if the browser supports a certain feature?

@support tag in the CSS is used to scan and determine whether the browser supports a certain feature or not.

45. How does absolute positioning work?

Absolute positioning is used to place the element which is then removed from the HTML document from the normal workflow without creating any space for the element in the HTML page layout. The element can be positioned respectively to the closest positioned ancestor; otherwise, if the ancestor is not found, the element is placed with respect to the initial container box. The values provided to the top, right, left and bottom determine the final position of the element.

46. Does this property work overflow: hidden?

Overflow: the hidden property is used to specify the content’s clipping. We need to add scrollbars to the content area at the time of specified container size exceeding the content limit where the content gets enclosed. This makes the content invisible via clipping; also the overflow value will be hidden.


Advanced CSS Interview Questions

Here are some advanced CSS interview questions!

1. When should you use translate () instead of absolute positioning?

Translate is a CSS transform value. On changing opacity or transform, browser reflow or repaint is not triggered. Transform requires the browser to create a GPU layer for elements but using the CPU changes absolutes positioning properties. Translate () is more efficient and results in shorter paint times. On using translate (), element occupies original space, unlike in changing absolute positioning. 

2. Name different ways to position some aspects in CSS. 

The positioning property specifies the positioning method type. The five different position values are fixed, static, absolute, sticky, and relative. The elements are positioned using top, left, right, and bottom properties. These properties need to be set first, and they work depending on position value. 

3. What are mixins?

A mixin is similar to a function block of code returning a single value—mixin output lines of Sass code that directly compiles into CSS styles. At the same time, the function returns a value that becomes the value for a CSS property or something that can be passed to another mixin.

4. How can you optimize the webpage for prints?

Identify and control 'content areas' of the website. A website generally has a footer, header, sidebar, navbar, and main content area. Most of the work is done by controlling the content area. So, conquer print media without changing the website's integrity by using page breaks, creating a stylesheet for print, size your page for print, and avoid unnecessary HTML tables.  

5. What is meant by CSS working under the hood?

When a browser displays a document, it combines style information and document content. The document is processed in two stages:

  • Conversion of HTML and CSS into Document Object Model
  • DOM displays contents of browser

6. Differentiate between the use of ID selector and class selector.

ID Selector:

<style>

{

text-align: right;

color: blue;

}

</style>

CSS class Selector: 

<style>

.right {

text-align: right;

color: blue;

}

</style>

7. Tell us about CSS float property.

The float property of CSS positions an image to the right or left as needed, including text wrapping around it. All properties of elements used before it remain unchanged. 

8. What do you understand by pseudo-elements?

Pseudo-elements provide special effects to some selectors. CSS finds use in applying styles in HTML markups. If additional markup or style is not feasible for a document, the pseudo-elements help by allowing extra markup without interfering with the original document. 

9. Differentiate between logical and physical tags.

Logical tags mainly focus on content and are older as compared to physical ones. Logical ones do not find much usage in presentation and terms of aesthetics. At the same time, physical ones find application in presentation. 

10. How media types in CSS work?

The four types of media properties are print, speech, and screen. Example of using print-media type: 

@media print {

h2 {

background-color: blue;

 }

}

Frequently Asked CSS Interview Questions

In this last section, we look at the most frequently asked CSS interview questions!

1. Tell us something about CSS3.

CSS3 is divided into modules and is supported by almost every browser. Many graphics-related characteristics are introduced in CSS3 like box-shadow, Border-radius, and flexbox. A user can create precise multiple background images using properties like background-position, background-repeat, and background-image styles. 

2. How is a CSS selector used?

With a CSS selector, we can choose the content we want to style to bridge between HTML files and style sheets. CSS selector syntax is "select" HTML elements created on their class, id, type, etc. 

3. What are CSS image scripts?

A group of images placed into one image is a CSS image script. It can reduce load time and project multiple images into a single web page. 

4. Explain CSS specificity.

CSS specificity is a rank or score that decides style declaration to be used to an element. ID selectors have high specificity, while universal selector * has low specificity. The four CSS categories that authorize the selector's specificity level are IDs, inline style, elements/pseudo-elements, and classes and attributes. 

5. Define gradients in CSS. 

A property of CSS that allows displaying smooth transformation between two or more specified colors. The types of gradients are linear and radial. 

6. What are the properties of flexbox?

The properties of flexbox are flex-direction, wrap, flow, content, and align-items, and content. 

7. Tell us about the use of the CSS Box Model.

The CSS Box model is a box binding HTML element that includes padding, border, margin, and the actual content. With the box model, we get the authority to add a border all around elements and define space between elements. 

8. What are the position states in CSS?

The four-position states in CSS are relative, static, absolute, and fixed. The default position state is static. 

9. Differentiate between absolute and relative in CSS. 

The main difference is that relative is used for the same tag in CSS. If we write right:20 px, then padding shifts 20 px in the right. Whereas absolute is relative to the non-static parent, i.e., if we write right:20 px, the result will be 20 px far from the right edge of the parent element.  

10. What is common between class and ID?

Both class and ID are used in HTML to assign a value from CSS. The ID is used as an element, whereas the class is used as a block. 

Conclusion

With this, we conclude our CSS interview questions article, and there is a high probability that your interviewer asks you these questions. Be thorough with your answers.

Original article source at https://www.simplilearn.com

#css #interviewquestions #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

Top 70+ CSS Interview Questions and Answers
Dcode show

Dcode show

1670264807

A Simple And Clean Gradient Background Animation Using Only CSS

A Simple And Clean Gradient Background Animation Using Only CSS
#css #webdeveloper #webdevelopment #html5 #html #css #css3 #javascript
https://youtu.be/-Uiuf8rTPSc

A Simple And Clean Gradient Background Animation Using Only CSS

Learn Python - Full Course for Beginners

This Python full course will cover all the basics to advanced concepts of Python programming: Python Installation, Object-oriented programming concepts, Type Hierarchy, Operator Precedence, Conditional Statements, Iterators, Modules, Packages, Generators, List Comprehensions, Regular Expression, Serialization, Closures & decorators, and more

Python Full Course | Python Tutorial For Beginners | Python Programming

This Python programming full course video will cover all the basics to advanced concepts of Python programming. This Python Full Course is filled with real-life examples along with in-depth hands-on demos.

  • Introduction
  • Python Installation
  • Object-oriented programming concepts
  • Python project
  • Type Hierarchy
  • Operator Precedence
  • Conditional Statements
  • Iterators, Modules, Packages, Generators
  • List Comprehensions
  • Regular Expression
  • Serialization 
  • Closures & decorators

What is Python?

Python is a high-level object-oriented programming language developed by Guido van Rossum in 1989 and was first released in 1991. Python is often called a batteries included language due to its comprehensive standard library. A fun fact about Python is that The name Python was actually taken from the popular BBC comedy show of that time, "Monty Python's Flying Circus". Python is widely used these days from data analytics, machine learning, and web development. Python allows you to write programs in fewer lines of code than most programming languages. Python as a programming language is growing rapidly. It's the right time to get trained in Python.

Following are the standard or built-in data type of Python: 
1. Numeric data types
2. Text data type
3. Sequence data type
4. Mapping data type
5. Set data type
6. Boolean data type
7. Binary data type

#python #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment #datascience #machinelearning #deeplearning #ai #artificialintelligence 

Learn Python - Full Course for Beginners
Dylan  Iqbal

Dylan Iqbal

1669867472

The Ultimate Guide to Web Accessibility

This tutorial shows out barriers to web accessibility, discuss the Web Content Accessibility Guidelines (WCAG), and share a basic checklist that all developers can use when building their websites and applications.

The World Health Organization reports that about 15% (1.2 billion) of the world's population lives with some form of disability.

This means that as developers, our focus on making websites and applications accessible helps more people use these resources.

In this article, I'll point out barriers to web accessibility, discuss the Web Content Accessibility Guidelines (WCAG), and share a basic checklist that all developers can use when building their websites and applications.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee, W3C Director and inventor of the World Wide Web.

a11y

Image credit: Interactive Schools

What is Web Accessibility?

A person is said to be disabled when they’re faced with a condition – permanent or temporary – that makes it difficult or impossible for them to achieve a desired task.

In effect, web accessibility involves removing all barriers that prevent any users from accessing the web equally.

What are the Barriers to Accessibility?

The barriers to accessibility include visual, auditory, cognitive and motor.

Visual barriers constitute conditions which make it difficult for people to view images, videos, and gifs. These conditions can include low vision, colour blindness, or even total vision loss.

Auditory barriers constitute conditions which make it difficult or impossible for people to consume audio content.

Those who have difficulty concentrating, learning or remembering new things are faced with cognitive barriers.

And people who have partial or total loss of function in a body part and find it difficult to navigate websites using devices such as a mouse experience motor barriers.

To resolve these barriers of web or digital accessibility, the Web Accessibility Initiative (WAI) of World Wide Consortium (W3C) created the Web Content Accessibility Guidelines (WCAG).

What are Web Content Accessibility Guidelines?

They are globally accepted standards that guide developers and organisations in building an accessible web.

pour-accessibility

Image credit: Site Improve

Most of the barriers to web accessibility faced by people with disabilities can be put into four categories. The WCAG addresses each category to ensure accessibility is achieved.

Perceivable: It requires that users can identify content and interface elements using their senses. Most users rely primarily on visual senses, while others rely on sound.

Operable: It requires that users can use controls, buttons, navigation, and other interactive elements by themselves. It takes into consideration that disabled users will use assistive technology like voice recognition, keyboards, screen readers, and so on.

Understandable: It requires that users can comprehend the content and learn and remember how to use your site. The site should have a consistent format, predictable design and usage patterns, as well as an appropriate tone.

Robust: It requires that users of varying abilities and conditions can reliably interpret and interact with content using a technology or device of their choice.

Web Accessibility Checklist

As developers, these are a few of the things to look out for when building websites or application in order to ensure that people of varying abilities can access them equally.  

How to make images accessible

All images should have descriptive sentence-like alt texts instead of just a word or clause. For example, the image below should have an alt text as shown in the code beneath it.

pizza

Photo by Hybrid Storytellers on Unsplash

<img alt="a right hand removing a slice from a whole pizza" src="https://unsplash.com/photos/XYyUxXw_oQw"/>

Image Alt text Code sample

The code above shows a sentence-like, descriptive alternative text for the image. The goal of the alt text should be to describe the image in such a way that people using screen readers feel like they can visualize or imagine exactly what image is being described.

ImageAlt-1

Image Alt text output

The next level of accessibility as seen in the above image, is to write alt texts so that users who may be encountering connectivity issues have an idea of the image before they see it.

How to make links accessible

Links should be descriptive and suggestive, and you should label all links with exactly what they do.

Avoid embedding your links in vague texts such as ‘here’. For instance, if we wanted to refer to my most recent article, for the sake of users who rely on screen readers, this is how to do it.

<p>
Check out my most recent article on <a href="https://www.freecodecamp.org/news/web-layouts-use-css-grid-and-flex-to-create-responsive-webpages/">Web Layouts – How to Use CSS Grid and Flex to Create a Responsive Web Page</a>
</p>

Accessible HTML Link code sample

In the code above, the link tag is wrapped around the whole title of the article instead of simply making the link text a vague 'here'. This way, everyone who sees, reads, or hears it knows exactly what resource will be found when the link is clicked.

AccessibilityLink

Link output image

When screen readers get to a link that is as descriptive as what we have in the image above, it makes it very easy for visually impaired users to know what the link does and, in effect, decide whether or not to visit it.

Video and audio accessibility

All videos should have subtitles and captions. Similarly, all audio should have transcripts, so that people with hearing challenges can still follow along and understand.

 <video id="video" controls preload="metadata">
     <source src="assets/samplevideo.mp4" type="video/mp4" />
     <track
     label="English"
     kind="subtitles"
     srclang="en"
     src="assets/samplevideo-en.srt"
     default />
 </video>

HTML Video with subtitle

The code above shows a video element that introduces the track tag for adding subtitles so that users who are not able to hear the accompanying audio can read to follow along.

How to select colours for accessibility

When selecting colours for your websites, consider people who are colour-blind and those who have issues with sight.

When we use colours with poor contrast, it makes it difficult for users to read or navigate content on a web page. This means that we must always ensure that even in bad lighting conditions, our foreground and background colours have enough contrast between them for button, links, images, icons, texts and so on.

If you're unsure whether two colours complement each other in an accessible way, check using this online colour checker tool.

wcagcolorcheceker

Use a color checker tool to check color contrast

You can also add this Web Accessibility Checker Chrome Extension to your browser for onsite accessibility checks.

How to make transitions and animations accessible

Use transitions and animations sparingly and only when extremely necessary in order not to trigger some users.

There are those who get dizzy or experience seizures when they encounter elements that move rapidly. Provide a way for such users to pause, hide, or stop the animation by making those controls available.

How to create accessible page structure and navigation

Use the appropriate HTML tags to semantically structure websites. Your site should be easy to navigate especially with assistive technology.

Page titles should be descriptive so users can easily differentiate between tabs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Web Accessibility Site | Checklist for Developers</title>
</head>
<body>
  <header>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  </header>
  <main>
    <section>
      <div>
        <h1>
          Welcome to Web Accessibility
        </h1>
        <p>
          This is semantic structuring with HTML tag
        </p>
      </div>
    </section>
  </main>
  <footer>
    <a href="https://codehemaa.com">My website</a>
  </footer>
</body>
</html>

HTML Semantic page structuring code

The code above shows a web page with a descriptive title. I've used the right semantic tags to properly structure the page by distinguishing the header from the main body and footer.

I've also properly labelled sections, divs, and headings. This helps screen recorders to properly spell out exactly what element and content is present on the page.

Conclusion

If the inventor of the web stated emphatically “access by everyone regardless of disability is an essential aspect” of the web, then as developers we must strive to achieve just that. Plus, it's just the right thing to do.

You should consider accessibility even before you start to build your sites – not done after as damage control. Going forward, we ought to strive for inclusion by contributing to build a more a11y-conscious and a11y-friendly web.

Thanks for reading 👋🏾. I hope you found it helpful.

Original article source at https://www.freecodecamp.org

#programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

The Ultimate Guide to Web Accessibility
Rachel Cole

Rachel Cole

1669771307

Learn Core Java in 11 Hours

Java Full Course | Java Tutorial For Beginners | Core Java Full Course

This video is based on Core Java Tutorial for Beginners. The Core Java Full Course in 11 Hours video will ensure all the major fundamentals are covered. This Java Programming tutorial is dedicated to helping beginners with a better learning experience.

❓What is Java?

Java is an object-oriented, class-based, high-level programming language used for software development, mobile application development, website development, desktop application development, and much more. Java is one of the current IT industry's leading and in-demand programming languages.

#java #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

Learn Core Java in 11 Hours

Learn HTML and CSS - Full Course for Beginners

Learn HTML & CSS in this full course for beginners. Learn HTML & CSS to jump start your career in Web Development

The course is split into 4 easy to follow sections:

1.) HTML Section

2.) CSS Section

3.) Code Challenge Final

4.) Course Project


In the HTML and CSS sections you create websites using HTML and CSS.

Add these websites to boost your resume for job interviews.

There are numerous code challenges to practice what you learn, as well as quizzes to make sure you know what you have learned.

In the code challenge final you build a responsive website for a mobile device.

In the course project you build a clone of the UK BBC news website and host it on Github for potential employers to see. This is how I got my first job interview as a web developer!

By the end of this course you will have everything you need to land a web developer job.

What you’ll learn

  •    Make Any Website Responsive & Mobile Friendly
  •    Create Your Own HTML & CSS Websites From Scratch & Host Them For Free
  •    Impress Employers With The BBC Website Clone You Will Make In The Course Project

Are there any course requirements or prerequisites?

  •    Internet Access
  •    Google Chrome Browser

Who this course is for:

  •    Entrepreneurs
  •    Beginner Programmers
  •    People Seeking A New Career In Web Development
  •    Web Designers Who Want To Implement Their Designs

#html #css #programming #developer #softwaredeveloper #computerscience #webdev #webdeveloper #webdevelopment 

Learn HTML and CSS - Full Course for Beginners