Forem: Mikhail Raevskiy

👨‍🔬️ Top 10 Data Scientist Skills Required in the Career

Mikhail Raevskiy — Tue, 26 Jan 2021 14:27:06 +0000

In this article, I describe how to master a profession from scratch and focus specifically on the key skills required to become a Data Scientist.

💻Hard Skills💻

1. Mathematical base

Knowledge of machine learning techniques is an integral part of the Data Scientist job. Working with machine learning algorithms requires an understanding of the basics of calculus (for example, partial differential equations ), linear algebra, statistics (including Bayesian theory), and probability theory. Knowledge of statistics helps the Data Scientist to critically assess the significance of data. The mathematical base is also important in developing new solutions, optimizing and adjusting the methods of existing analytical models.

Online courses in the following areas of mathematics with high student ratings:

2. Programming

Collecting, cleaning, processing, and organizing data are also important skills of a Data Scientist. For these tasks and the implementation of the machine learning models themselves, the programming languages Python and R are used. How to get started with Python, I discussed in the article “I Want to Learn How to Program in Python. Where to Begin?”.

Python courses:

R courses:

3. Working with databases

Most Data Scientist tasks require programming skills using the SQL query language. Despite the fact that NoSQL and Hadoop are also an important part of Data Science, SQL databases are still the main way of storing data. The Data Scientist must be able to produce complex queries in SQL.

Call me crazy, but I want to teach SQL to every data professional of any kind. I’m talking about people from HR, IT, sales, marketing, finance, vendors, and so on. If your goal is to make the most of your data-driven work, the Excel + SQL combination allows you to do amazing things. If your goal is to move into analytics (for example, as a business analyst), you definitely need SQL skills […] Why not start learning SQL this weekend?
*David Langer , Vice President of Schedulicity Analytics*

Related courses I found to be essential for Data Science specialist:

4. Data preprocessing

Data Scientist also prepares data for analysis. Often data in business projects is not structured (videos, images, tweets) and not ready for analysis. It is imperative to understand and know how to prepare the database to obtain the desired results without losing information. During the Exploratory Data Analysis (EDA) phase, it becomes clear what data problems need to be addressed and how the database needs to be transformed to build analytical models.

5. Algorithms

To work on creating machine learning projects, you will need knowledge of classic machine learning algorithms such as linear and logistic regression, decision tree, support vector machine. The following courses will help you understand the intricacies of machine learning algorithms:

6. Skills specific to the selected field of analysis

After gaining basic knowledge, you will need specific skills for your chosen field of work. For example, deep learning is a class of machine learning algorithms based on artificial neural networks. These techniques are commonly used to create more complex applications such as object recognition and generation algorithms, image processing, and computer vision. So it is a good idea to be aware of new state-of-the-art algorithms and solutions in different areas of both machine and deep learning.

Some useful resources here are:

▶ Deep Learning Digest
*A weekly digest of the new state-of-the-art (SOTA) Deep Learning approaches and solutions*medium.com

▶ AI In Plain English
*Where Artificial Intelligence, Machine Learning, Data Science and Big Data get together.*medium.com

🔊 Soft Skills 🔊

7. Ability to convey your idea

The Data Scientist must be able to communicate the message to a wide audience. This is especially important in the business area, where project customers may not have technical skills and terminology. Presentation of the results will require the skills of presenting information, the ability to convey the idea in simple language. Participate in Data Science conferences and online meetups. This is an opportunity not only to improve communication skills and small-talk with colleagues but also to get feedback.

Courses on Principles of a Successful Presentation:

Data Analysis and Presentation Skills: the PwC Approach Specialization;
Communicating Business Analytics Results — course by University of Colorado;
A Data Scientist’s Guide to Communicating Results is a guide to mastering effective presentation skills.

8. Teamwork

The Data Scientist profession involves teamwork on projects. This requires communication skills and a clear vision of their own role in the team. The successful outcome of a collective project directly depends on the effective interaction of the participants. The ability to hear a different opinion and make a joint decision is also important for team participation in Data Science Kaggle competitions.

Data Science is a team sport, and those who say “hitters are the best!” Are likely to face rebellion from the rest of the team. Every team member is valuable! If everyone plays their part well, then the business will continue to derive value from data.
*Ku Ping-Shung , Co-Founder / Director of Data Science Rex Workshop*

Successful teamwork comes with experience, and to master the intricacies, check out the following resources:

The 17 Indisputable Laws of Teamwork by John Maxwell — my personal handbook, highly recommend taking a look;
Peopleware: Productive Projects and Teams by Tom DeMarco and Timothy Lister — one of the favorite books of mine and team leads I worked with
Working in Teams: A Practical Guide — a course on the intricacies of teamwork and conflict resolution;

9. Ability to see the commercial side of the issue

A key Data Scientist skill for working in a business environment is the ability to find cost-effective solutions with minimal resource costs. Companies that use Data Science for profit, need for specialists who understand how to implement business ideas with data.

As organizations begin to fully capitalize on internal information assets and explore the integration of hundreds of third-party data sources, the Data Scientist’s role will continue to grow.
*Greg Boyd , director of the consulting firm Protiviti*

About the features of Data Science for business applications:

Data Science for Business — an interactive course from DataCamp;
A Guide to becoming Business-Oriented Data Scientist is a guide to the intricacies of Data Science in business applications.

10. Critical thinking

The skill of critical thinking helps to find approaches and solutions to problems that others do not see. Data Scientist critical thinking is about seeing all sides of a problem, considering data sources, and showing curiosity.

The Data Scientist must understand the business problem, be able to model and focus on what matters to solve it, not what is outsider and can be ignored. This skill, more than anything else, determines the success of the Data Scientist.
*Anand Rao , Head of Global Artificial Intelligence and Innovation in Data and Analytics, PwC*

Outcome

If you are looking to build a career as a Data Scientist, get started now. This area is constantly expanding and needs new specialists. To master the essential Data Scientist skills from scratch, enroll in the free online Data Science courses mentioned here, and become a professional ✨Data Scientist✨.

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.

https://slidetosubscribe.com/raevskymichail/

Learn more about Data Science and Machine Learning in my other stories:

▶Top 11 Python Libraries for Data Science You Must Know 🔝
*One of the reasons Python is so valuable to Data Science is its huge collection of data analysis and visualization…*medium.com

▶Top 4 Python Libraries for Interpreted Machine Learning
*Want to achieve a better explanation of machine learning models? Need a good visualization? Use these Python libraries.*medium.com

▶📽️ How Netflix Data Science Interviews Goes?
*Do you want to work for a cool, young, and famous company? Then you are on Netflix! We tell you what you need to know…*medium.com

👨‍🎓️📊 Data Scientist— 12 Steps From Beginner to Pro

Mikhail Raevskiy — Wed, 13 Jan 2021 13:56:07 +0000

12 steps for those looking to build a career in Data Science from scratch. Below there is a guide to action and a scattering of links to useful resources.

1. Decide who you want to become 💭

The field of data science is developing vigorously. But data science is not only neural networks, but also classical statistics and machine learning algorithms (which is more understandable for business processes), and overall everything related to the analysis, processing, and presentation of information in digital form.

It cannot yet be said that there is a clear division of labor in Data Science — this is a non-specialized profession. A rough analogy: just as there were pure **Computer Scientists *(computer scientists and programmers) who understood everything related to computers, so now there are **Data Scientists * who are engaged in everything related to data. The marker of the first movement towards specialization of labor is the sphere of online education.

One way or another, a data scientist works at the intersection of several areas:

▶️ Mathematics (including linear algebra, machine learning algorithms)
▶️ Programming (e.x. Python, R, SQL is usually a minimum requirement)
▶️ Business problems (yes, apart from Computer Science, you should understand what are business processes and how you can improve it)

Depending on your role in the team, some of these things will have to be done more. When choosing a vector of development, start from your own interests — learning will require significant resources, and without love for your work, you will quickly burn out. A mathematical base is necessary, but it is likely that the personal circle of tasks will be reduced to the use of existing tools and knowledge, and not to the invention of something new. As K. V. Vorontsov said in one interview:

People who know how to use ready-made algorithms need 50–100–500 times more. It seems that the problem of how to teach Computer Science and the problem of “more math or more engineering” has the following answer: you need both, but you have to teach mathematics to a carefully selected multitude of people who have realized themselves as creators, designers of new methods

2. Pull up the Math base ➕

If you want truly understand machine learning algorithms, you need first to understand Linear Algebra, Multivariable Calculus, probability theory, and mathematical statistics.

Stepik has suitable free video courses for each of the knowledge testing areas:

Linear Algebra for Data Science in R (4 hours of lessons)
Introduction to Calculus (48 hours)
Foundations of Probability in Python (5 hours)
Basics of Statistics, part 2 , part 3 (total 43 hours)

If illustrations, visualization are not enough, I highly recommend taking a look at the wonderful channel 3Blue1Brown. There are playlists for linear algebra, analysis, differential equations.

By the way, there is a detailed course of 175 videos on multivariate mathematical analysis on the **Khan Academy channel**.

When taking video lectures, do not forget about the possibility of fast-forwarding. To use motor memory and work deeper into the material, take notes.

3. Learn to program 👨‍💻️

Besides mathematics, you need to be able to program. Usually, Python or R is chosen as the main language for data analysts. Stepik has good courses in both languages, including with an emphasis on data analysis:

Newcomers to Data Science often have a question about which language to choose the main — created specifically for data processing R or universal Python. Although this is a hot topic, I personally started with R (in computational biology people like it more), however, now I know both languages and highly recommend starting first with Python, since a transition Python -> R is more smooth, compared to backward direction.

In short: if you are planning a career in Data Science, I recommend you master both languages. Knowing R concepts and libraries will keep you one step ahead of Python-only users, and vice versa. Here’s how data analyst Irina Goloshchapovawrites about it:

By combining the most powerful and stable R and Python libraries in some cases, you can improve the efficiency of calculations or avoid the invention of bicycles for the implementation of any statistical models.
Secondly, this is an increase in the speed and convenience of project execution, if different people in your team (or yourself) have good knowledge of different languages. A reasonable combination of existing R and Python programming skills can help.

But if you want to go, albeit not a simple, but easier way, then one Python is enough — you will find more courses and answers to all sorts of questions on it.

4. Learn to use the tools 🛠️

One of the most popular tools for sharing data analysis results is Jupyter notebooks:

Jupyter Notebooks and the Jupyter Lab Platform allow you to combine code, text in Markdown, and formulas in LaTeX, testing, and profiling in a single document. Alternatively, you can collaborate on notebooks using Google Colab or JupyterHub.

Learn to use Git as soon as possible. In the process, you will have to choose between a variety of models and architectural solutions — version control is very useful here.

Plus, there are many great Data Science projects on GitHub. Remember that open source is one of the easiest ways to gain the necessary teamwork experience and contribute to a common cause.

You will naturally come across other popular tools as you progress through the courses. For example, in Python for high-speed processing of data arrays, knowledge of NumPy is required, for tabular data presentation, Pandas dataframes are usually used, for visualization — MatplotLib or Plotly, ready-made classes of popular machine learning models are imported from Scikit-learn.

Few courses focus on this, but in practice, data is usually stored in databases — SQL or NoSQL. For further work, you will need to learn how to communicate with them:

For deep learning, you need to get familiar with frameworks — TensorFlow or PyTorch. There are others — we compared them in the article “Write your first Generative Adversarial Network Model on PyTorch” .

5. Take as many Data Science courses as you can 🎓

Courses:

Andrew Ng’s Machine Learning Course on Coursera is one of the most popular MOOCs out there. It is worth taking if only because it is often referred to other advanced courses. However, Octave / Matlab is used instead of standard Python and R.
Leskovets et al. Mining of massive datasets . There is a breakdown by chapters: pdf, exercises, presentations, videos.
Courses on DataCamp
Harvard Data Science Course (eDX)
Probabilistic Programming and Bayesian Methods for Hackers
Dive into Deep Learning: Free Interactive Book with Code, Math and Discussion http://d2l.ai

Textbooks:

Hasti et al. Elements of Statistical Learning

Hal Daumé III Academic Machine Learning Course
Shalev-Schwartz and Ben-David. Understanding Machine Learning: From Theory to Algorithms

David Barber. Bayesian Decision Theory and Machine Learning

Tom Mitchell. Machine Learning

Devroy et al. Probabilistic theory of pattern recognition

Neatly designed editions with easy copying of R in action: data analysis and graphing with R and Machine Learning in action

6. Join the Open Data Science community 👥

A lot of interesting things can be learned from the English-language news aggregators from the world of data science:

7. Take part in competitions 🤼

Register on Kaggle. Not only is it the most famous machine learning competition platform with cash prizes, but it is also a large community with a registry of datasets, Jupyter notebooks, mini-courses, and discussions. Participating in the Kaggle ranking on your resume can give you extra credit for your interview.

8. Explore specific Data Science questions 👁️‍🗨️

Data science is an incredibly broad interdisciplinary field, and special skills are required to solve specific problems. After familiarizing yourself with Kaggle, it will become clearer to you in which demanded knowledge you have gaps.

Also pay attention to the following courses:

Introduction to Deep Learning in Python.
Deep Learning for NLP in Python.
Introduction to Natural Language Processing.
Probabilistic Graphical Models Specialization.
Data Structures course.
Computer graphics: the basics (useful for working with models that process images).

YouTube channels also come in handy:

On the YouTube channel of the Computer Science Center, courses in special sections are conveniently organized into playlists:

Don’t stop learning. Browse the top and sidebar subreddits for topics related to machine learning:

9. At the end of each course, do a project 🏗️

Use new knowledge in the field of Data Science to benefit yourself and others. Create something that will make others say “wow”! Lots of project ideas are listed in **awesome-ai-usecases, **51 toy data proble, **practical-pandas-projects**.

You can start not from the project, but from an interesting dataset. List of popular registries:

Lots of discussions with project ideas can be found on Quora:

Create a public repository on GitHub for each project. Brush up the results, share them on your blog and community. Contribute to side projects, post your ideas and thoughts. All this will help you build a portfolio and get to know people working on related tasks.

10. Read scientific articles🔬

The main languages of data science are not Python or R, but English and the language of mathematics.

Preprints of articles are published on the ArXiv website. The most useful sections for data scientists:

It is simply impossible to keep track of all publications. The Reddit branches listed above will help to isolate the most important texts (since the author became the head of the AI department at Tesla, the site began to break more often, but it’s still the best tool). There is also such a list of articles with comments and recordings of webinars from the YouTube channel Kaggle with parsing of scientific articles related to data science algorithms.

11. Take a Data Science Internship / Job🕴

Data Science is a highly competitive profession in demand. But even the results of interviews are turned into data by community members. There are many lists of questions to prepare for a data scientist interview:

This year it is more difficult, but we hope that summer schools and internships will return soon:

Be sure to use your data mining skills to analyze the job market — analyze which skills are found in jobs more often to hone them as much as possible. Estimate how much income you can expect, taking into account spending on the site, rental housing, and moving to another city.

12. Share your experience with the community 📢

Share your project or find it with the Data Science community. Prepare a talk and speak at a local meetup. Start a blog where you will share your finds, your own ideas, and repositories.

Last but not least, enjoy how your skills help make the world a better place!

13. Read More

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.

https://slidetosubscribe.com/raevskymichail/

Python Dictionary and Methods - Explained

Mikhail Raevskiy — Wed, 11 Nov 2020 17:03:44 +0000

❓What is a dictionary❓

A dictionary is an unordered data structure that allows you to store key-value pairs. Here's an example of a Python Dictionary:

This dictionary uses strings as keys, but the key can be, in principle, any immutable data type. The value of a particular key can be anything. Here's another example of a dictionary where keys are numbers and values are strings:

An important clarification: if you try to use a mutable data type as a key, you will get an error:

In fact, the problem is not with mutable data types, but with non-hashable data types, but usually, they are the same thing.

Retrieving data from a dictionary 📖

Square brackets are used to get the value of a particular key []. Suppose we have a pair in our dictionary 'marathon': 26.

Again, you will get an error if you try to retrieve a value for a non-existent key. There are methods to avoid such mistakes, which we will talk about now.

Adding and updating keys 🔑

Adding new pairs to the dictionary is quite simple:

Updating existing values is exactly the same:

Deleting keys ❌

To remove a key and corresponding value from a dictionary one can use del

🍴 Methods 🍴

Python dictionaries have many different useful methods to help you in your work with them. Here are just a few of them.

👉 Update

The method update() is useful if you need to update several pairs at once. The method takes another dictionary as an argument.

If you are wondering why the data in the dictionary is not in the order in which it was entered, it is because the dictionaries are not ordered.

👉 Get

Let's suppose we have a dictionary:

The method get() returns the value for the specified key. If the specified key does not exist, the method will return None.

The method can be used to check for the presence of keys in the dictionary:

You can also specify a default value that will be returned instead of None if the key is not in the dictionary:

👉 Pop

The method pop() deletes the key and returns the corresponding value.

👉 Keys

The method keys() returns a collection of keys in the dictionary.

👉 Values

The method values() returns the collection of values in the dictionary.

👉 Items

The method items() returns key-value pairs.

👉 Iterating through a dictionary

You can iterate over each key in the dictionary.

Obviously, instead of story_count you can usestory_count.keys().

In the example code below, the loop for uses the methoditems() to get a key-value pair for each iteration.

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.

https://slidetosubscribe.com/raevskymichail/

SipMask — New SOTA in Instance Segmentation

Mikhail Raevskiy — Mon, 09 Nov 2020 19:36:17 +0000

SipMask is a one-stage neural network for instance segmentation of objects in an image. The model bypasses the previous one-stage state-of-the-art approaches on the COCO test-dev dataset. Compared to TensorMask, SipMask gives a 1% AP gain. Moreover, the model produces predictions 4 times faster. The model bypasses YOLACT by 3% in AP.

Instance Segmentation with SipMask. Source: https://arxiv.org/pdf/2007.14772v1.pdf

More about the model

A feature of the neural network architecture is the new spatial preservation (SP) module. The SP module is a feature pooling mechanism in a one-stage segmentation model. The idea of the module is to store spatial information about an object.

The overall architecture of our SipMask comprising fully convolutional mask specialized classification and regression branches. Source: https://arxiv.org/pdf/2007.14772v1.pdf

The model is based on the FCOS architecture. However, the two standard branches of classification and regression have been replaced with mask-specific classification and regression in order to adapt the model for instance segmentation. The classification unit predicts the rates of the classes and assigns spatial coefficients for the regions of the boundaries of objects. These coefficients are then used by the SP to predict the individual masks.

Comparison of competing architectures. Source: https://arxiv.org/pdf/2007.14772v1.pdf

Testing the model

The researchers validated the model on the COCO test dataset. Compared to state-of-the-art one-step approaches for instance segmentation, SipMask produces more accurate predictions.

Benchmarking results. Source: https://arxiv.org/pdf/2007.14772v1.pdf

The source code of the project is available in the repository on GitHub.

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.

https://slidetosubscribe.com/raevskymichail/

🚀Responsive Web Design 🚀: Why You Should Care

Mikhail Raevskiy — Tue, 03 Nov 2020 10:35:00 +0000

Source: tenor

Responsive layout changes the page's design depending on the user's behavior, platform, screen size, and device orientation and is an integral part of modern web development. It allows you to significantly save money and not draw a new design for each resolution, but to change individual elements' size and location.

This article will go over the basic elements of a website and how to adapt them.

Screen Resolution Adjustment

In principle, you can divide devices into different categories and typeset for each of them separately, but it will take too long, and who knows what standards will be in five years? Moreover, according to statistics, we have a whole range of different resolutions:

Source: jadeinkdesign

It is becoming obvious that we cannot continue to code for each device separately. But then what can we do?

👉 Solution #1 - making everything flexible

Of course, this is not ideal, but it fixes most of the problems.

The entire design here is a mix of responsive layers, images, and, in some places, smart markup. Creating responsive layers is a common practice, which is not the case with responsive images. However, if you need them, consider the following techniques:

For more information, we recommend that you check out Zoe Mickley Gillenwater's book "Flexible Web Design: Creating Liquid Layouts with CSS" and download the chapter "Creating Flexible Images".

If you reduce the entire image, the labels will become unreadable. Therefore, to preserve the logo, the picture is divided into two parts: the first part (illustration) is used as a background, the second (logo) is resized proportionally.

<h1 id="logo">
  <a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/></a>
</h1>

The element h1contains an image as a background, and the image is aligned to the background of the container (header).

👉 Solution #2 - flexible images

Working with images is one of the biggest challenges when working with responsive design. There are many ways to resize images, and most of them are fairly straightforward to implement. One solution is to use max-width in CSS:

img {max-width: 100%;}

The maximum width of an image is 100% of the width of the screen or browser window, so the smaller the width, the smaller the picture. Note that this is max-width not supported in IE, so use width: 100%.

The presented method is a good option for creating responsive images, but by changing only the size, we will leave the image weight the same, which will increase the loading time on mobile devices.

👉 Solution #3 - responsive images

The technique, presented by the Filament Group, not only resizes images but also compresses the resolution of images on small screens to speed up loading times.

Source: tprogger

This technique requires several files available on Github. First, we grab the JavaScript file (rwd-images.js), the .htaccess file, and rwd.gif (the image file). Then we use a bit of HTML to link the high and low resolutions: first a small image with the .r prefix (to indicate that the image should be responsive), then a link to the large image with data-fullsrc:

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

For any screen wider than 480 px, a high-resolution image (largeRes.jpg) will be loaded, and on small screens (smallRes.jpg).

👉 An interesting feature for iPhone

The iPhone and iPod Touch have a special feature: a design created for large screens simply shrinks in a browser with a small resolution without scrolling or additional mobile layout. However, images and text will not be visible:

Source: tprogger

To solve this problem, the tag is used meta:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

If initial-scale equal to one, the width of the images becomes equal to the width of the screen.

👉 Customizable page layout structure

For significant page size changes, it may be necessary to change the layout of the elements in general. This is conveniently done through a separate stylesheet or, more efficiently, through a CSS media query. This shouldn't be a problem as most styles will remain the same, and only a few will change.

For example, you have a master file with a style that specifies #wrapper, #content, #sidebar, #nav together with the colors, backgrounds, and fonts. If your main styles make the layout too narrow, short, wide, or tall, you can define that and include new styles.

**style.css (main):

/ * Main styles to be inherited by the child stylesheet * /

html,body{
   background...
   font...
   color...
}

h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}

/ * Structural elements * /
#wrapper{
  width: 80%;
  margin: 0 auto;

  background: #fff;
  padding: 20px;
}

#content{
  width: 54%;
  float: left;
  margin-right: 3%;
}

#sidebar-left{
  width: 20%;
  float: left;
  margin-right: 3%;
}

#sidebar-right{
  width: 20%;
  float: left;
}

**mobile.css (child):

#wrapper{
  width: 90%;
}

#content{
  width: 100%;
}

#sidebar-left{
  width: 100%;
  clear: both;

  /* Additional styling for our new layout */
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

#sidebar-right{
  width: 100%;
  clear: both;

  /* Additional styling for our new layout */
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

Source: tprogger

On a widescreen, the left and right side panels fit well on the side. On narrower screens, these blocks are located one below the other for greater convenience.

👉 CSS3 media queries

Let's take a look at how you can use CSS3 media queries to create responsive designs. min-widthsets the minimum width of the browser window or screen to which certain styles will be applied. If any value is lower than min-width, the styles will be ignored. max-widthdoes the opposite.

Example:

@media screen and (min-width: 600px) {
  .hereIsMyClass {
    width: 30%;
    float: right;
  }
}

The media query will only work when its min-widthis greater than or equal to 600 px.

@media screen and (max-width: 600px) {
  .aClassforSmallScreens {
    clear: both;
    font-size: 1.3em;
  }
}

In this case, the (ClassforSmallscreens) class will work when the screen width is less than or equal to 600 px.

While min-width, and max-widthcan be applied to the screen width, and the width of the browser window, we may need to work only with the device width. For example, to ignore browsers open in a small window. To do this, you can use min-device-widthand max-device-width:

@media screen and (max-device-width: 480px) {
  .classForiPhoneDisplay {
    font-size: 1.2em;
  }
}

@media screen and (min-device-width: 768px) {
  .minimumiPadWidth {
    clear: both;
    margin-bottom: 2px solid #ccc;
  }
}

Specifically for the iPad, media queries have an orientation property that can be either landscape (horizontal) or portrait (vertical):

@media screen and (orientation: landscape) {
  .iPadLandscape {
    width: 30%;
    float: right;
  }
}

@media screen and (orientation: portrait) {
  .iPadPortrait {
    clear: both;
  }
}

Also, the values of media queries can be combined:

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .classForaMediumScreen {
    background: #cc0000;
    width: 30%;
    float: right;
  }
}

This code will only run for screens or browser windows with a width of 800 to 1200 px.

You can load a specific sheet with styles for different values of media queries like this:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css"/>
<link rel="stylesheet" media="print" href="print.css"/>

👉 JavaScript

If your browser does not support CSS3 media queries, then the replacement of styles can be arranged using jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $(window).bind("resize", resizeWindow);
    function resizeWindow(e){
      var newWindowWidth = $(window).width();

      // If the width is less than 600 px, the mobile stylesheet is used
      if(newWindowWidth < 600){
        $("link[rel=stylesheet]").attr({href : "mobile.css"});
      } else if(newWindowWidth > 600){
        // If the width is more than 600 px, the stylesheet for the desktop is used
        $("link[rel=stylesheet]").attr({href : "style.css"});
      }
    }
  });
</script>

👉 Optional content display

Being able to shrink and swap elements to fit on small screens is great. But this is not the best option. For mobile devices, there is usually a wider set of changes: easier navigation, more focused content, lists or rows instead of columns.

Source: digg

Fortunately, CSS gives us the ability to show and hide content with incredible ease.

display: none;

display: none used for objects to be hidden.

Example:

Source: tprogger

Here's our markup:

<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>

<div id="content">
  <h2>Main Content</h2>
</div>

<div id="sidebar-left">
  <h2>A Left Sidebar</h2>
</div>

<div id="sidebar-right">
  <h2>A Right Sidebar</h2>
</div>

In the main stylesheet, we are changing the column references because we have a large enough screen to display all the content.

**style.css (main):

#content{
  width: 54%;
  float: left;
  margin-right: 3%;
}

#sidebar-left{
  width: 20%;
  float: left;
  margin-right: 3%;
}

#sidebar-right{
  width: 20%;
  float: left;
}
.sidebar-nav{
  display: none;
}

Now we hide the columns and show the links:

**mobile.css (simplified):

#content{
  width: 100%;
}

#sidebar-left{
  display: none;
}

#sidebar-right{
  display: none;
}
.sidebar-nav{
  display: inline;
}

If the screen size is reduced, you can, for example, use a script or an alternate style file to increase the white space or replace the navigation for more convenience. Thus, having the ability to hide and show elements, resize pictures, elements, and much more, you can adapt the design to any device and screen.

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.

https://slidetosubscribe.com/raevskymichail/

📝Python's Type Annotations 📝- Why You Always Should Use It

Mikhail Raevskiy — Sat, 31 Oct 2020 10:48:20 +0000

Python is a dynamically typed language and allows us to operate fairly freely on variables of different types. However, when writing code, we somehow assume which types of variables will be used (this may be caused by a limitation of the algorithm or business logic). And for the program to work correctly, it is important for us to find errors associated with transferring data of the wrong type as early as possible.

Keeping the idea of dynamic duck typing in modern versions of Python (3.6+) supports annotations of variable types, class fields, arguments, and return values of functions:

PEP 3107 - Function Annotations
PEP 484 - Type Hints
PEP 526 - Syntax for Variable Annotations
typing package

Type annotations are read by the Python interpreter and are not processed in any way but are available for use from third-party code and are primarily designed for static analyzers.

In this article, I want to explain the basics and give examples of using type annotations and eventually show why it made my life as a Python developer much easier 🙂.

First, let's understand what type annotations are

▶ Type annotations - The basics

The types themselves are used to indicate the basic types of variables:

str
int
float
bool
complex
bytes
etc.

Unlike older versions of Python, type annotations are not written in comments or docstrings but directly in the code. On the one hand, this breaks backward compatibility. On the other, it clearly means that this is part of the code and can be processed accordingly.

In the simplest case, the annotation contains the directly expected type. More complex cases will be discussed below. If a base class is specified as annotation, it can pass instances of its descendants as values. However, you can use only those capabilities that are implemented in the base class.

Variable annotations are written with a colon after the identifier. This can be followed by value initialization. For instance:

price: int = 5
title: "str"

Function parameters are annotated in the same way as variables, and the return value is specified after the arrow -> and before the trailing colon. Let me give an example of using type annotations in a python function:

def func(a: int, b: float) -> str:
    a: str = f"{a}, {b}"
    return a

For class fields, annotations must be specified explicitly when the class is defined. However, analyzers can automatically infer them based on the __init__ method, but in this case, they will not be available at runtime:

class Book:
    title: "str"
    author: str

    def __init__(self, title: "str, author: str) -> None:"
        self.title = title
        self.author = author

b: Book = Book(title="Fahrenheit 451", author="Bradbury")

▶ Type annotations - Built-in types

Although you can use standard types as annotations, there is a lot of useful stuff hidden in the module typing. Let's take a look at its' sub-modules.

1️⃣ Optional

If you mark a variable with a type int and try to assign to it None, there will be an error:

Incompatible types in assignment (expression has type "None", variable has type "int")

Exactly for such cases, the typing module provides an annotation Optional indicating a specific type. Please note that the type of an optional variable is indicated in square brackets:

from typing import Optional

amount: int
amount: None # Gives "Incompatible types" error

price: Optional[int]
price: None # Will work!

2️⃣ Any

Sometimes you don't want to restrict the possible types of a variable. For example, if it really doesn't matter, or if you plan on doing different types of handling yourself. In this case, annotation can be used Any. It will not swear at the following code:

some_item: Any = 1
print(some_item)
print(some_item.startswith("hello"))
print(some_item // 0)

The question may arise, why not use object? However, in this case, it is assumed that although any object can be passed, it can only be treated as an instance object:

some_object: object
print(some_object)
print(some_object.startswith("hello)) # ERROR: "object" has no attribute "startswith"

print(some_object // 0) # ERROR: Unsupported operand types for // ("object" and "int")

3️⃣ Union

For cases when it is necessary to allow the use of not all types, but only some, you can use the annotation typing.Union indicating the list of types in square brackets.

def hundreds(x: Union[int, float]) -> int:
    return (int(x) // 100) % 100

hundreds(100.0)
hundreds(100)
hundreds("100")
# ERROR: Argument 1 to "hundreds" has incompatible type "str"; expected "Union[int, float]"

By the way, the annotation Optional[T] is equivalent toUnion[T, None], although such a notation is not recommended.

4️⃣ Collections

The mechanism of type annotations supports the mechanism of generics (PEP484 - Generics, for more details in the second part of the article), which allows specifying the types of elements stored in them for containers.

5️⃣ Lists

To indicate that a variable contains a list, you can use the list type as an annotation. However, if you want to specify which elements the list contains, such an annotation will no longer work. For this, there is typing.List. Similar to the way we specified the type of an optional variable, we specify the type of the list items in square brackets.

titles: List[str] = ["hello", "world"]
titles.append(100500)
# ERROR: Argument 1 to "hundreds" has incompatible type "str"; expected "Union[int, float]"

titles = ["hello", 1]
# ERROR: List item 1 has incompatible type "int"; expected "str"

items: List = ["hello", 1]
# Everything is good!

The list is assumed to contain an indefinite number of similar items. But at the same time, there are no restrictions on annotation elements: You can use the Any, Optional, List, and others. If no element type is specified, it is assumed to be Any.

In addition to the list, there are similar annotations for sets: typing.Set and typing.FrozenSet.

6️⃣ Tuples

Tuples, unlike lists, are often used for different types of elements. The syntax is similar with one difference: the type of each element of the tuple is indicated in square brackets separately.

If you plan to use a tuple similarly to a list: store an unknown number of elements of the same type, you can use the ellipsis (...).

Annotation Tuple without specifying element types works the same way as Tuple[Any, ...]

price_container: Tuple[int] = (1,)
price_container: ("hello")
# ERROR: Incompatible types in assignment (expression has type "str", variable has type "Tuple[int]")

price_container = (1, 2)
# ERROR: Incompatible types in assignment (expression has type "Tuple[int, int]", variable has type "Tuple[int]")

price_with_title: Tuple[int, str] = (1, "hello")
# Everything is good!

prices: Tuple[int, ...] = (1, 2)
prices: (1,)
prices: (1, "str")
# ERROR: Incompatible types in assignment (expression has type "Tuple[int, str]", variable has type "Tuple[int]")

something: Tuple = (1, 2, "hello")
# Everything is good!

7️⃣ Dictionaries

Used for dictionaries typing.Dict. Key type and value type are annotated separately:

book_authors: Dict[str, str] = {"Fahrenheit 451": "Bradbury"}
book_authors["1984"] = 0
# ERROR: Incompatible types in assignment (expression has type "int", target has type "str")

book_authors[1984] = "Orwell"
# ERROR: Invalid index type "int" for "Dict[str, str]"; expected type "str"

Similarly used typing.DefaultDict and typing.OrderedDict

8️⃣ Function execution results

Any type annotations can be used to indicate the type of function result. But there are a few special cases.

If the function returns nothing (like how print), its result is always equal None. We also use for annotation None.

The correct options for completing such a function are: explicit return None, return without specifying a value, and termination without a call return:

def nothing(a: int) -> None:
    if a == 1:
        return
    elif a == 2:
        return
    elif a == 3:
        return "" # No return value expected
    else:
        pass

If the function never returns control (for example, how sys.exit), use the annotation NoReturn:

def forever() -> NoReturn:
    while True:
        pass

If this is a generator function, that is, its body contains an operator yield, you can use the annotation for the returned one Iterable[T], either Generator[YT, ST, RT]:

def generate_two() -> Iterable[int]:
    yield 1
    yield "2"
    # ERROR: Incompatible types in "yield" (actual type "str", expected type "int")

Instead of a conclusion

For many situations, the typing module has suitable types, but I will not cover everything, since the behavior is similar to those described. For example, there Iterator is a generic version for collections.abc.Iterator, typing.SupportsInt to indicate that an object supports a method __int__ or Callable for functions and objects that support a method __call__

The standard also defines the format of annotations in the form of comments and stub-files, which contain information only for static analyzers.

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.

https://subscribe.to/raevskymichail

Routing in Vue.js — Starting Guide

Mikhail Raevskiy — Tue, 22 Sep 2020 18:28:29 +0000

With the advent of web applications, it became necessary to modify URLs using JavaScript. History API of the browser came to the rescue.
Because of this, all major modern frameworks allow you to programmatically control routing that synchronizes the URL with the application view.
For routing in Vue applications, you can create your own integration with the History API, but it’s better to use the official Vue library — Vue-Router

Basic things

You can start using it even with a CDN installation:

<script src="https://unpkg.com/vue-router"></script>

But we’ll start right away with the “correct” option — Vue Cli:

yarn global add @vue/cli
# OR
npm i -g @vue/cli

Let’s create a project using the VUE CLI with a basic template — Default ([Vue 2] babel, eslint):

vue create vue-router-test-app

Minimal configuration

Add a router:

yarn add vue-router
# OR
npm i --save vue-router

Let’s add the minimal router configuration to /src/main.js:

import Vue from "vue";
import App from "@/App.vue";
import VueRouter from "vue-router";
import HelloWorld from "@/components/HelloWorld";

Vue.use(VueRouter);

const routes = [
  {
    path: "",
    component: HelloWorld,
  },
];

const router = new VueRouter({
  routes,
  mode: "history",
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

Routes are an array, each element of which is an object where you need to specify path and component.
To see the changes, you need to display the router component — routerView which is responsible for displaying. To do this, let's change /src/App.vue:

<template>
  <div id="app">
    <router-view /> 
  </div>
</template>

Now, go to http://localhost:8080/. We will see a page with a “/” route, where the HelloWorld.vue component is displayed, instead of the tag router-view that we wrote in App.vue.

Path hierarchy

Let’s add a route to main.js (array routes):

const routes = [
  {
    path: "",
    component: HelloWorld,
  },
  {
    path: "/board",
    component: {
      render: (h) => h("div", ["Board Page"]),
    },
  },
];

Let’s go to the address http://localhost:8080/board. We will see the second page displaying the render function.

Route Props

Let’s fix the child route for the “/” board route in main.js. For child components, you need to specify where in the parent component to display the child components router-view. In our case, this is in the render function:


import Board from "@/components/Board";
const routes = [
  {
    path: "",
    component: HelloWorld,
  },
  {
    path: "/board",
    component: {
      render: (h) => h("div", ["Board Page", h("router-view")]),
    },
    children: [
      {
        path: '/board/:id',
        component: Board,
      }
    ]
  },
];

Let me remind you that the render function in the template view will look like this:

<template>
  <div>
    Board Page
    <router-view />
  </div>
</template>

Let’s create a /src/components/Board.vue component with content:

<template>
  <div>Board with prop id: {{ id }}</div>
</template>
<script>
export default {
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};
</script>

Let’s go to the address http://localhost: 8080/board/21 and see the parent and child components Board passing the parameter id equal to 21.

Route parameters are available in the by component this.$route.params.

If we want to more explicitly display the dependence of the component on the input parameters, we use the setting props: true when configuring the route:

children: [
  {
    path: '/board/:id',
    component: Board,
    props: true,
  }
]

And in the /src/components/Board.vue component, accept idas an input parameter of the component:

<template>
  <div>Board with prop id: {{ id }}</div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: null,
    },
  },
};
</script>

Route meta


const routes = [
    {
      path: "",
      component: HelloWorld,
      meta: {
        dataInMeta: "test",
      },
    },
     ....
   ]

We can now access the route metadata from the HelloWorld.vue component as follows: this.$route.meta.dataInMeta.

Deeper Vue.js Routing (nested children)

You can go deeper into child components (up to server limits).

Let’s make a child route for the child route:

const routes = [
  {
    path: "",
    component: HelloWorld,
  },
  {
    path: "/board",
    component: {
      render: (h) => h("div", ["Board Page", h("router-view")]),
    },
    children: [
      {
        path: "/board/:id",
        component: Board,
        props: true,
        children: [
          {
            path: "child",
            component: {
              render: function(h) {
                return h("div", ["I'm Child with prop", this.propToChild]);
              },
              props: {
                propToChild: {
                  type: Number,
                  required: true,
                  default: null,
                },
              },
            },
          },
        ],
      },
    ],
  },
];

The render function is now written as a regular function since you need a component context:


<template>
  <div>
    Board with prop id: {{ id }}
    <router-view :prop-to-child="parseInt(id)" />
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: null,
    },
  },
};
</script>

We pass the parameters to the child component of the child component through the router-view component like a normal component. It sounds complicated but intuitive. And so, we lower the props in the child — child of the child: <router-view :prop-to-child="parseInt(id)" />

Explanation of Path

The view path: "child" means that we refer to the parent's path and continue its path:{parent-route}/child

Any other level of the route can be referenced from the child component:

children: [
      {
        path: "/first-level",
        ....
      }
    ]

This entry processes a page with the address: http://localhost:8080/first-level.

Wider Vue.js Routing (multiple router-views)

Can be used multiple router-view in 1 component. To do this, in the routes configuration, we write instead of component - components, which takes an object, where the key is the name attribute router-view. If you specify the key "default", then such a component will be displayed if it is router-view unnamed (without an attribute name).

/src/main.js :

const routes = [
  {
    path: "",
    component: HelloWorld,
  },
  {
    path: "/board",
    component: {
      render: (h) => h("div", ["Board Page", h("router-view")]),
    },
    children: [
      {
        path: "/board/:id",
        component: Board,
        props: true,
        children: [
          {
            path: "child",
            components: {
              default: { render: (h) => h("div", ["I'm Default"]) },
              user: { render: (h) => h("div", ["I'm User"]) },
              guest: { render: (h) => h("div", ["I'm Guest"]) },
            },
          },
        ],
      },
    ],
  },
];

/components/Board.vue :

<template>
  <div>
    Board with prop id: {{ id }}
    <div>
      <label for="is-user">
        Is User?
        <input v-model="isUser" id="is-user" type="checkbox" />
      </label>
      <router-view :prop-to-child="parseInt(id)" />
      <router-view v-if="isUser" name="user" />
      <router-view v-else name="guest" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      isUser: false,
    };
  },
};
</script>

Let’s go to the address: http://localhost:8080/board/23/child and see a small interactive with switching active router-views.

404 error page

To create an error page, just put the following construction at the end of the list of routes:


{
  path: "*",
  component: { render: (h) => h("div", ["404! Page Not Found!"]) },
},

Now, when following a nonexistent path (for example, ** http://localhost:8080/mistake **), an error component will be displayed.
It is better to write in this form:

{
  path: "/page-not-found",
  alias: '*',
  component: { render: (h) => h("div", ["404! Page Not Found!"]) },
},

Now we have an error page where we can redirect users with a clear conscience (what if one day we need to do this).

Route protection

Route protection is performed using route metadata and a beforeEach router hook:

import Vue from "vue";
import App from "@/App.vue";
import VueRouter from "vue-router";
import HelloWorld from "@/components/HelloWorld";
import Board from "@/components/Board";
Vue.use(VueRouter);
const routes = [
  {
    path: "",
    component: HelloWorld,
  },
  {
    path: "/board",
    component: {
      render: (h) => h("div", ["Board Page", h("router-view")]),
    },
    meta: {
      requiresAuth: true,
    },
    children: [
      {
        path: "/board/:id",
        component: Board,
        props: true,
        children: [
          {
            path: "child",
            components: {
              default: { render: (h) => h("div", ["I'm Default"]) },
              user: { render: (h) => h("div", ["I'm User"]) },
              guest: { render: (h) => h("div", ["I'm Guest"]) },
            },
          },
        ],
      },
    ],
  },
  {
    path: "/auth-required",
    component: { render: (h) => h("div", ["Auth required!"]) },
  },
  {
    path: "/*",
    component: { render: (h) => h("div", ["404! Page Not Found!"]) },
  },
];
const router = new VueRouter({
  routes,
  mode: "history",
});
const isAuthenticated = () => false;
router.beforeEach((to, from, next) => {
  if (to.matched.some((route) => route.meta?.requiresAuth)) {
    if (isAuthenticated()) {
      next();
    } else {
      next("/auth-required");
    }
  } else {
    next();
  }
});
Vue.config.productionTip = false;
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

Now, when trying to access a page that requires authorization, we will be redirected to the /auth-required page.

Navigation between routes

Software navigation

Programmatic navigation can be called from anywhere in your application like this:

$router.push('/dash/23/child')

If we want to pass parameters, we need to use a different approach based on the use of route names.
Let’s specify the name of the route /board/:id :

...
   children: [
      {
        path: "/board/:id",
        name: 'board',
        component: Board,
        props: true,
        children: [
   ....

Now we can pass parameters:
$router.push({ name: 'board', params: { id: 100500 }})

We will get an error «Invalid prop: type check failed for prop «id». Expected String with value «100500», got Number with value 100500».

The reason is that url- it is always a data type String, and we passed it programmatically id with a type Number. The fix is simple: we list the possible data types in the component.

components/Board.vue :

props: {
  id: {
    type: [String, Number],
    default: null,
  },
},

RouterLink component

The component routerLink allows you to create links within the site, which are converted into "native" browser links (tag <а>):

<router-link to='/dash/23/child'> Link </router-link>

Classes can be automatically added to such links:

router-link-exact-active - exact match;
router-link-active - partial (the child component specified in the to route attribute is active).

In order not to display the active parent class, it is enough to write the attribute exact:

<router-link to='/dash/23/child' exact> Link </router-link>

We can override the element we create:

<router-link tag="button" to='/dash'> Button </router-link>

Unfortunately, in this case, the classes are not assigned.

We can also pass an object:

<router-link :to="{ path: '/dash/23' "> Link </router-link>

<router-link :to="{ name: 'board', params: { id: 123 } }"> Link </router-link>

Best practics

We will devote this section to refactoring what we wrote above.

Create a folder structure for the router:

src/router/router.js
src/router/routes.js

Let’s transfer everything related to router settings to router.js:

mport Vue from "vue";
import VueRouter from "vue-router";
import routes from "/routes";
Vue.use(VueRouter);
const router = new VueRouter({
  routes,
  mode: "history",
  base: process.env.BASE_URL,
});
const isAuthenticated = () => true;
router.beforeEach((to, from, next) => {
  if (to.matched.some((route) => route.meta?.requiresAuth)) {
    if (isAuthenticated()) {
      next();
    } else {
      next("/auth-required");
    }
  } else {
    next();
  }
});
export default router;

Let’s transfer routes.js everything related to route settings.
And immediately replace the imports with dynamic ones.
If you already have a lot of routes assigned, manual changes can be time-consuming. The regular will help:

^import (\w+) from (".+")$

replaced by

const $1 = () => import(/* webpackChunkName: "$1" */ $2)

Now in Chrome Dev Tools, in the Network tab, you will see when-which component is loaded from the network, and earlier all routes were loaded immediately in 1 mega-bundle.

/src/router/routes.js :

const HelloWorld = () => import(/* webpackChunkName: "HelloWorld" */ "@/components/HelloWorld")
const Board = () => import(/* webpackChunkName: "Board" */ "@/components/Board")
const routes = [
  {
    path: "",
    component: HelloWorld,
  },
  {
    path: "/board",
    component: {
      render: (h) => h("div", ["Board Page", h("router-view")]),
    },
    meta: {
      requiresAuth: true,
    },
    children: [
      {
        path: "/board/:id",
        name: "board",
        component: Board,
        props: true,
        children: [
          {
            path: "child",
            components: {
              default: { render: (h) => h("div", ["I'm Default"]) },
              user: { render: (h) => h("div", ["I'm User"]) },
              guest: { render: (h) => h("div", ["I'm Guest"]) },
            },
          },
        ],
      },
    ],
  },
  {
    path: "/auth-required",
    component: { render: (h) => h("div", ["Auth required!"]) },
  },
  {
    path: "/*",
    component: { render: (h) => h("div", ["404! Page Not Found!"]) },
  },
];
export default routes;

Advanced tricks in Vue.s Routing

By “advanced” is meant the “pleasantness” of using them. Such techniques include, for example, topics such as:

division of rights by access levels;
animation of transitions between pages; l+ ading indication when switching between routes;
changing titles when switching between routes;
smooth scrolling across the page when moving back;
etc. So, everything in order.

Splitting rights by access levels

There is a situation when users have more than two states: not only authorization but others as well. For example, a paid subscription. From now on, we are thinking about an unlimited level of separation of rights. This is done in just a couple of dozen lines of code, but for brevity, convenience and not to reinvent the wheel, we will use a ready-made library. Let’s install it:

yarn add vue-router-middleware-plugin

Let’s create special middleware files for checking user rights:
router/middleware/authMiddleware.js :

const isLoggedIn = () => !!window.localStorage.getItem("logged-in")
const authMiddleware = async ({ /* to, from to,*/ redirect }) => {
  if (!isLoggedIn()) {
    redirect({
      name: "login",
    });
  }
};
export default authMiddleware;

router/middleware/guestMiddleware.js :


const isLoggedIn = () => !!window.localStorage.getItem("logged-in");
const guestMiddleware = async ({ /* to, from to,*/ redirect }) => {
  if (isLoggedIn()) {
    redirect({ name: "main" });
  }
};
export default guestMiddleware;

router/middleware/subscribersMiddleware.js :

const isSubscribed = () => Promise.resolve(!!window.localStorage.getItem("has-license"))
const subscribersMiddleware = async ({ /* to, from, */ redirect }) => {
  if (!await isSubscribed()) {
    console.log("isn't subscribed, redirect to license")
    redirect({ name: 'license' })
  }
}
export default subscribersMiddleware

The last listing shows an example of an asynchronous check, which means that you can access the store’s actions and make requests to the server.
Now let’s put an authorization check on all routes, and then we’ll make exceptions for some routes:
/src/router/router.js :

import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";
import MiddlewarePlugin from "vue-router-middleware-plugin";
import authMiddleware from "./middleware/authMiddleware";


Vue.use(VueRouter);
const router = new VueRouter({
  routes,
  mode: "history",
  base: process.env.BASE_URL,
});
Vue.use(MiddlewarePlugin, {
  router,
  middleware: [authMiddleware],
});
export default router;

Now let’s deal with specific routes.
Let’s work on the architecture of our application to make it more predictable. Let’s make a separate Auth.vue template and put it in pages, and the components that are used there, i.e. in the /auth section, put components in the appropriate section.

So a convenient structure is obtained:

pages
--Auth.vue
components
-- auth
---- Login.vue
---- Register.vue
---- Forgot.vue

Let’s create a helper function to generate such routes genAuthRoutes.

/src/router/routes.js :

import guestMiddleware from "./middleware/guestMiddleware";
import authMiddleware from "./middleware/authMiddleware";
import subscribersMiddleware from "./middleware/subscribersMiddleware";
const MainBoard = () =>
  import(/* webpackChunkName: "MainBoard" */ "@/pages/MainBoard");
const BoardComponent = () =>
  import(
    /* webpackChunkName: "BoardComponent" */ "@/components/board/BoardComponent"
  );
const clearAndUpper = (text) => text.replace(/-/, "").toUpperCase();
const toPascalCase = (text) => text.replace(/(^\w|-\w)/g, clearAndUpper);
const genAuthRoutes = ({ parent, tabs = [] }) => ({
  path: `/${parent}`,
  name: parent,
  component: () => import(/* webpackChunkName: "auth" */ "@/pages/Auth"),
  redirect: { name: tabs[0] },
  children: tabs.map((tab) => {
    const tabPascalCase = toPascalCase(tab);
    return {
      path: tab,
      name: tab,
      component: () =>
        import(
          /* webpackChunkName: "[request]" */ `@/components/${parent}/${tabPascalCase}`
        ),
      meta: {
        middleware: {
          ignore: [authMiddleware],
          attach: [guestMiddleware],
        },
      },
    };
  }),
}); 
const routes = [
  genAuthRoutes({ parent: "auth", tabs: ["login", "register", "forgot"] }),
  {
    path: "/",
    name: "main",
    component: MainBoard,
    children: [
      {
        path: "/board",
        name: "board",
        component: {
          render: (h) => h("div", ["Board Page", h("router-view")]),
        },
        children: [
          {
            path: "/board/:id",
            name: "board-child",
            component: BoardComponent,
            props: true,
            children: [
              {
                path: "child",
                components: {
                  default: { render: (h) => h("div", ["I'm Default"]) },
                  user: { render: (h) => h("div", ["I'm User"]) },
                  guest: { render: (h) => h("div", ["I'm Guest"]) },
                },
                meta: {
                  middleware: {
                    attach: [subscribersMiddleware],
                  },
                },
              },
            ],
          },
        ],
      },
      {
        path: "/license",
        name: "license",
        component: {
          render: (h) => h("div", ["License Page"]),
        },
      },
    ],
  },
  {
    path: "/auth-required",
    name: "auth-required",
    component: { render: (h) => h("div", ["Auth required!"]) },
    meta: {
      middleware: {
        ignore: [authMiddleware],
      },
    },
  },
  {
    path: "/*",
    component: { render: (h) => h("div", ["404! Page Not Found!"]) },
    meta: {
      middleware: {
        ignore: [authMiddleware],
      },
    },
  },
];
export default routes;

We remove the global authorization check in the property ignoreand add another check in the attachobject property meta.middleware:

```middleware: {
ignore: [authMiddleware],
attach: [guestMiddleware],
}



Let’s create the components:

+ /src/components/auth/Login.vue;
+ /src/components/auth/Register.vue;
+ /src/components/auth/Forgot.vue,

with a typical template:


```html
<template>
  <div>
    Forgot Page
  </div>
</template>

We’ll also refactor the page Board, let's call it MainBoard

/src/pages/MainBoard.vue :

<template>
  <div>
    <h1>Main Board Page</h1>
    <router-view />
  </div>
</template>

Accordingly, we add components to the appropriate category in components:

/src/components/board/BoardComponent.vue:

<template>
  <div>
    Board with prop id: {{ id }}
    <div>
      <label for="is-user">
        Is User?
        <input v-model="isUser" id="is-user" type="checkbox" />
      </label>
      <router-view :prop-to-child="parseInt(id)" />
      <router-view v-if="isUser" name="user" />
      <router-view v-else name="guest" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      isUser: false,
    };
  },
};
</script>

It remains to refactor the main component — /src/App.vue:

<template>
  <div id="app">
    <div class="links">
      <router-link :to="{ name: 'register' }">Register</router-link>
      <router-link :to="{ name: 'login' }">Login</router-link>
      <router-link :to="{ name: 'forgot' }">Forgot</router-link>
      <template v-if="loggedIn">
        <router-link :to="{ name: 'license' }">License</router-link>
        <router-link :to="{ name: 'board' }">Board</router-link>
        <router-link :to="{ name: 'board-child', params: { id: 33 } }"
          >Board:33</router-link
        >
        <router-link :to="{ path: '/board/33/child' }"
          >Board:33/child</router-link
        >
        <router-link :to="{ path: '/404' }">404</router-link>
      </template>
      <label for="logged-in"
        >Logged In
        <input type="checkbox" id="logged-in" v-model="loggedIn" />
      </label>
      <label for="has-license"
        >Has License
        <input type="checkbox" id="has-license" v-model="hasLicense" />
      </label>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      loggedIn: !!window.localStorage.getItem("logged-in"),
      hasLicense: !!window.localStorage.getItem("has-license"),
    };
  },
  watch: {
    loggedIn(e) {
      window.localStorage.setItem("logged-in", e ? true : "");
    },
    hasLicense(e) {
      window.localStorage.setItem("has-license", e ? true : "");
    },
  },
};
</script>
<style scoped>
.links > * {
  margin: 1em;
}
</style>

Now, uncheck “Logged In” and try to follow the route http: //localhost:8080/board. We will be immediately redirected to the “auth-required” page.

Check “Logged In”, uncheck “Has License” and navigate to http://localhost: 8080/board/33/child. We will be taken to the license page, however, if you uncheck “Logged In” and refresh the page, then we will go back to the “auth-required” page.

Now let’s check if it is possible to enter the authorization page when the user has already been authorized. Check the box “Logged In” and go to http://localhost:8080/auth/register. We will be redirected to the main page.

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.