Forem: Nikita Hlopov

Accessible collapsible mobile navigation?

Nikita Hlopov — Wed, 06 May 2020 13:48:54 +0000

Hello!

Upon searching the internet I realized that I couldn't find a decent explanation/example of an accessible collapsible menu with the classic "Hamburger" button.

Bootstrap example is pretty close to what I'm looking for. The hamburger button has aria attributes but
I feel like it's missing the accessibility features on the actual navigation when it gets toggled.

Having said that, am I overcomplicating things or can someone point me to a resource/example of accessible navigation.

Thanks.

What's the dark mode priority should be?

Nikita Hlopov — Thu, 30 Apr 2020 08:37:08 +0000

From the UX perspective, what's the dark mode priority should be on a site,
localStorage or user default computer theme?

E.g. If a user has a dark theme by default (on a computer), and then the user enabled the light theme (switch on a site), then the next time the user enters a site what value should be applied (default or saved from the localStorage)?

Or have I misunderstood this whole dark mode and doing something wrong?

3 ways to add distinct underline style for the anchor tags

Nikita Hlopov — Mon, 30 Mar 2020 08:13:34 +0000

Add some slick underline styles to your anchor tags with these 3 ways.

text-decoration
border
box-shadow

1. text-decoration

The first and most obvious way is to use the text-decoration property to give your links a distinctive style. The text-decoration property is a shorthand that:

sets the appearance of decorative lines on text

This property will set text-decoration-line, text-decoration-color, text-decoration-style. However it can take from one up to three parameters.

a {
  text-decoration: underline;
}

You can add more unique styles by throwing in the color and style properties:

a {
  text-decoration: underline dotted #047cea;
}

Available styles are:

solid;
double;
dotted;
dashed;
wavy.

2. border

The border-bottom property will allow you to make underline more custom.

a {
  text-decoration: none;
  border-bottom: 1px dashed #047cea;
}

Now you can control underline's width and use styles specific only to the border property like:

dotted;
dashed;
solid;
double;
groove;
ridge;
inset;
outset.

Another benefit of using the border-bottom property is you can control the space between the text and the underline by adding a padding property.

a {
  text-decoration: none;
  border-bottom: 1px dashed #047cea;
  padding-bottom: 2px; 
}

3. box-shadow

The last one is box-shadow property. Like the border it will allow you to control the width of the underline and space between the text as well.

a {
  text-decoration: none;
  box-shadow: 0 2px #047cea;
  padding-bottom: 3px;
}

Along with other properties like blur and spread which can create some funky effects.

a {
  text-decoration: none;
  box-shadow: 0 2px 2px -2px #047cea;
}

To conclude, if you want something more than a default styling use border or box-shadow. These properties also allow using transitions on them so you can get creative with hover effects. 😉

I've put together a collection of possible anchor tag styles on CodePen, check 'em out.

Cover photo by LUM3N on Unsplash

Become more productive with these 5 terminal tips

Nikita Hlopov — Mon, 16 Mar 2020 13:44:14 +0000

Five small tips to improve your terminal skills that I've learned from my teammate.

Change directory from root
Line navigation
Remove the line
Repeat the previous command with sudo
Suggestions with Tab button

1. Change directory from root

From any directory location in your terminal, you can start directory change from the root folder. Right after cd command add a Space and a / to begin change. E.g.:

cd /

and then:

cd /var/log/

2. Line navigation

Navigate through your line with ease. Either jump to the start and end of the line:

fn + shift(⇧) + ← - Jump to the start of the line
fn + shift(⇧) + → - Jump to the end of the line

or jump by word:

alt(⌥) + ← - Jump to the previous word
alt(⌥) + → - Jump to the next word

3. Remove the line

This command will remove all text in the current line and leave cursor blinking at the start:

ctrl(⌃) + u

4. Repeat the previous command with `sudo`

Very handy if you need to repeat the command with superuser permissions:

sudo !!

5. Suggestions with Tab button

Double-clicking on Tab button while writing a path to a file will show you suggestions (contents) of the directory. It comes in handy when you need to type in a long path.

That's it for now. Happy coding. 👩‍💻👨‍💻

Cover image via Unsplash by Goran Ivos

⚛️ Initiate a React app with multiple components on a single DOM element

Nikita Hlopov — Mon, 09 Mar 2020 13:22:10 +0000

In this article, I'll go through the use case of rendering multiple React components to a single DOM element of a React app.

There might be a case when your app consists of independent components that might need to be initiated from different places on different conditions but inside a single container.

Turns out that React can handle these cases with ease.

Initiate a generic React app
Initiate a React app with multiple components

Initiate a generic React app

Usually, the generic React app begins like so:

HTML have a single div container element:

<div id="app"></div>

The React part is a single component that gets rendered inside a given DOM container:

const appContainer = document.getElementById('app')

function Form () {
  const handleSubmit = (e) => {
    e.preventDefault()
  }
  return (<form onSubmit={handleSubmit}>
    <input type="email" placeholder="email@example.com" />
    <input type="submit" value="Submit" />
  </form>)
}

ReactDOM.render(<Form />, appContainer)

Initiate a React app with multiple components

To initiate your app with multiple components you need to wrap them in a React Fragment inside the ReactDOM.render method.

Fragments let you group a list of children without adding extra nodes to the DOM.

const appContainer = document.getElementById('app')

function Form () {
  const handleSubmit = (e) => {
    e.preventDefault()
  }
  return (<form onSubmit={handleSubmit}>
    <input type="email" placeholder="email@example.com" />
    <input type="submit" value="Submit" />
  </form>)
}

function Content () {
  return <h2>Subscribe to our newsletter</h2>
}

ReactDOM.render(
  <>
    <Content />
    <Form />
  </>, appContainer)

Conclusion

The good part about it is that you can wrap those components in a variable and render them based on a condition if necessary.

const formComponent = <Form />
const contentComponent = isVisible ? <Content /> : null

const components = <>
  {contentComponent}
  {formComponent}
</>

ReactDOM.render(components, appContainer)

In a complex environment (ours is a WordPress plugin), it is a great way to control what gets delivered to the user.

See full example on CodePen:

5 reasons to write Semantic HTML

Nikita Hlopov — Wed, 04 Mar 2020 17:47:35 +0000

I’ll go through a list of 5 reasons why web developers should pay more attention to semantic HTML.

Another repost of my original article on the importance of writing semantic HTML

Understandable code
Screen readers
Search engines (SEO)
Usability (UX)
Default styling

What does MDN say about Semantic HTML:

In programming, Semantics refers to the meaning of a piece of code — for example ... "what purpose or role does that HTML element have" (rather than "what does it look like?".)

So the number one reason is:

1. Understandable code

By giving meaning to your markup, you make it more understandable. From a human perspective semantic code is more readable, understandable and easier to maintain. Imagine looking at the code like this:

<div id=”brown-fox”>
  <div>A story of quick brown fox</div>
  <div>The quick brown fox jumps over the lazy dog.</div>
  <div>Properties:</div>
  <div>- quick</div>
  <div>- brown</div>
  <div>- jumpy</div>
<div>

The same structure but with meaningful tags:

<section id=”brown-fox”>
  <h2>A story of quick brown fox</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <h3>Properties:</h3>
  <ul>
    <li>quick</li>
    <li>brown</li>
    <li>jumpy</li>
  </ul>
<section>

You can immediately spot the difference. Straight off the bat, you can tell what each part of the structure does.

2. Screen readers

Not only humans (programmers) have the need to understand the meaning of the page structure, so do the machines, one of them are screen readers.

A screen reader is a form of assistive technology which is essential to people who are blind, as well as useful to people who are visually impaired, illiterate, or have a learning disability.
—Wikipedia

A screen reader analyzes the contents of the web page and outputs the results via speech. This means whatever a screen reader sees, it will read. So it’s quite important to structurize your web page with a meaning. However modern screen readers are quite “smart” and handle web pages very well.

Both MAC and Windows have built-in screen readers. For MAC it is VoiceOver, for Windows it is Narrator.

3. Search engines (SEO)

Moving on from one machine type to another. The structure of your web page can affect SEO (Search Engine Optimization) results.

SEO stands for ‘Search Engine Optimization’. It’s the practice of optimizing your web pages to make them reach a high position in the search results of Google or other search engines. —YOAST

However semantic HTML is not the primary factor that affects the SEO of the page, but it helps page crawlers understand the structure of this page. A page with proper semantic HTML will have a chance to rank higher in the search results.

4. Usability (UX)

By using semantics not only you are aiding the machines, but you can also help people and make their lives better. The use of proper semantic HTML can boost up your website usability and accessibility. I think you all will agree with me, that you like resources that are intuitive and easy to use.

Sometimes small adjustments or fine-tuning can make a huge difference for users. For instance, adding a label element next to input, or adding a proper attribute to the same input element.

5. Default styling

The good thing about semantic HTML, that elements come with default styling. Even without additional CSS the page that is built with proper semantic HTML will look good, be accessible and is going to provide the meaning and outline the structure.

Even though the default styling can vary from browser to browser, the main look of the page will remain.

Default styling comes to the rescue when something goes wrong and your CSS fails.

Below I’ll share a list of resources I have found useful when I was learning about semantic HTML and Semantic Web in particular.

Blogs:

Docs:

Videos:

Do you even use CSS floats these days 🤔

Nikita Hlopov — Thu, 20 Feb 2020 09:22:22 +0000

I was wondering if anyone is still using CSS float property today?
If so what's the reason or possible application for that?

Feedback for a project

Nikita Hlopov — Wed, 05 Feb 2020 16:13:20 +0000

I'd like to ask a community for a feedback on a little project I've made a while ago.
It's a small web app to generate CSS theme https://nikitahl.github.io/css-base/. Does it make any sense? Can someone actually benefit from it or get some sort of a value from it, or it's just a useless tool.
Please be honest.
Thanks.

Cool Chrome Dev Tools tricks and tips you might not know about

Nikita Hlopov — Tue, 04 Feb 2020 21:05:15 +0000

Google Chrome browser has been my favorite browser for development for quite some time. And the Dev Tools capabilities is one of the reasons for that.

This article is a repost of the one I've made a year ago on my own blog - Cool Chrome Dev Tools tricks and tips you might not know about.

Below you will find a list of cool tricks and tips I've found in Chrome Dev Tools over the years.

Dev Tools theme
Dev Tools panel layout
Switch between Dev Tools panels
Switch between CSS properties
Toggle element visibility
Edit element attributes
Search DOM tree
Add devices
Add new styles shortcut
Edit any text content on the page
Store value as a global variable in console
Increment CSS values
DOM elements as global variables
Switch between color formats
Return the value of the last expression evaluated in the console
Bonus: Expand all sub-properties of an object that's been logged to the console

1. Dev Tools theme

There's a way to toggle between Light and Dark theme for Dev Tools. Inside Settings under Appearance choose between Light and Dark themes.

2. Dev Tools panel layout

In some cases, it is more comfortable to work with a certain type of panel layout.
You can select between three possible layouts:

horizontal;
vertical;
auto.

It can be set inside Settings under Appearance.

3. Switch between Dev Tools panels

There's an easy way to switch between Dev Tools panels via keyboard.

cmd + ]/[ for MAC;
ctrl + ]/[ for Windows and Linux.

4. Switching between CSS properties

While in the Styles panel click on the CSS property and press:

tab to jump to the next property;
tab + shift to jump to the previous property.

5. Toggle element visibility

You can easily toggle element visibility inside element DOM tree by pressing h key on selected element.

6. Edit element attributes

Inside element DOM tree press enter key on the selected element to edit attribute. Press tab to edit next attribute, press tab + shift edit previous attribute.

7. Search DOM tree

To find any attribute, element, content or any other string inside DOM tree just press:

cmd + f for MAC;
ctrl + f for Windows and Linux.

8. Add devices

You can enable/disable existing devices or add a custom device inside Device toolbar.
Inside Settings click on the Devices tab. You will see a list of existing devices where you can enable/disable devices. Or you can add a new one by clicking on the Add custom device... button.

9. Add new styles shortcut

To quickly add a new style like:

Color;
Background color;
Text-shadow;
Box-shadow.

Hover over a small icon ( ⋮ ) in the bottom left corner and the above options will appear.
To insert a new style rule below click on the + icon.

10. Edit any text content on the page

In the console write document.designMode = "on" and you will be able to edit any text content on the page instantly.

11. Store value as a global variable in console

Any returned data of object or function type can be stored as a global variable in the console. E.g. console.log(['a', 'b']) will return an array. Right click on it and select Store as a global variable which will be accessible via temp1 keyword in the console.

Note: These variables are temporary and are only available during the current session, meaning after page refresh they will be gone.

12. Increment CSS values

Numeric CSS values can easily be incremented and decremented by using certain key combinations:

Increment value by 1 ↑;
Dcrement value by 1 ↓;
Increment value by 0.1 alt + ↑;
Dcrement value by 0.1 alt + ↓;
Increment value by 10 shift + ↑;
Dcrement value by 10 shift + ↓;
Increment value by 100 cmd + ↑ (MAC), ctrl + ↑ (Windows and Linux);
Dcrement value by 100 cmd + ↓ (MAC), ctrl + ↓ (Windows and Linux).

13. DOM elements as global variables

A DOM element can be stored and accessed as a global variable in the console. In the DOM tree right click on the element tag and click Store as a global variable.

Note: These variables are temporary and are only available during the current session, meaning after page refresh they will be gone.

14. Switch between color formats

You can easily change the color format by holding shift key and click on the Color Preview box next to the value.

15. Return the value of the last expression evaluated in the console

$_ in the Console returns the value of the last expression evaluated.

Bonus: Expand all sub-properties of an object that's been logged to the console

Once the object is logged, hold alt key and click expand ▸ icon.

Writing and debugging Cypress tests

Nikita Hlopov — Thu, 30 Jan 2020 22:36:49 +0000

I want to share the knowledge I and my team gained after implementing Cypress e2e tests in our project.

Intro

About a year ago we've (Visual Composer dev team) picked Cypress as our main tool for e2e tests. It was a new experience for the whole team as none of us was familiar with e2e testing. Over that period of time not only we've covered a large amount of functionality with tests but also we've learned quite a bit.

Recently I've made a small demo for our team of developers to summarise what we already know. The purpose of this demo was to:

Share knowledge and to establish common understanding and principles for e2e tests among all developers in our team

That inspired me to write an article.

Outline

Conventionally we can split the app testing process into two parts:

writing tests - when a developer actually writes the code
debugging tests - fixing issues when the test is failing

So that's what I'm going to share with you in a form of tips and solutions.

NOTE: Even though our product may be very specific I think these tips can be applicable to a wide variety of projects.

Writing tests

These tips helped me to write tests and to tackle issues faster and with ease.

1. Cypress syntax is similar to jQuery

If you know jQuery then understanding that Cypress commands are similar to the jQuery counterparts like selectors and chaining will make your Cypress learning curve much smoother.

E.g. the cy.get() command will return a collection of elements. Knowing that you'll be able to handle further chaining or resolve the possible error.

2. Cypress is lacking some features

Some of the functionality cannot be tested like hover effect or testing within and iframe.

The good part is that the Cypress team is aware of that and communicating to the community on possible solutions and workarounds.

3. Cypress resources

Continuing the thought from the previous point, I really like Cypress API documentation and their GitHub repo's Issues.

I was able to resolve almost every problem just by checking their docs or searching GitHub issues. Stackoverflow helped me as well. 😅

Overall I find the Cypress team quite engaging and willing to help.

4. Folder structure

We are sticking to the recommended folder and file structure in the official Cypress docs.

Since our project is quite large and multiple components that need to be tested are stored in multiple repositories, having a unified structure helps a lot.

5. Cypress strange behavior

In our case sometimes Cypress may render duplicate elements. I'm not sure if this is a project-specific issue, but I couldn't find any information on that topic.

The point is if a specific issue is occurring in your tests, you need to share that information across your team and prepare a solution for such cases.

Btw, the solution to our issue is since we're only checking the single element we're adding an index with a bracket notation to select the first element.

cy.get('.vce-row-content')[0]
  .children()
  .should('have.length', 3)

6. CSS values are computed values

When checking for CSS values it's important to understand that Cypress will compare your assertion to a computed CSS value. That is equal to the one you get when using the getComputedStyle() method.

Debugging

We separate debugging into two types.

Local
Pipeline

Local debugging

Usually, it's quite simple but sometimes developers get stuck and having a hard time resolving the issue. Even though the Cypress itself helps to troubleshoot.

1. Carefully read the error message

Developers are in a hurry and don't read the error message till the very end or read it superficially.

Sometimes it may contain a clue or a possible solution.

2. Additional data in the console

To retrieve additional data click on the step and the data will be outputted in the console.

3. Comment out commands

Comment out commands to get to the problem point faster. We have quite complex logic behind our tests, so they take quite a long time to run. In order to make the debugging process faster, I use that technique.

/* global describe, it, cy */

const ELEMENT_NAME = 'Text Block'

describe(ELEMENT_NAME, function () {
  it('Adds element to the page, checks automatically added elements, checks attributes', function () {
    cy.fixture('../fixtures/textBlock.json').then((settings) => {
      cy.createPage()
      cy.addElement(ELEMENT_NAME)

      // cy.setTinyMce({
      //   title: 'Content',
      //   text: settings.text,
      //   elementType: {
      //     name: settings.elementType.name
      //   },
      //   alignment: {
      //     name: settings.alignment.name
      //   }
      // })

      cy.setClassAndId(settings.customId, settings.customClass)

      // cy.setDO(settings.designOptions)

      cy.savePage()
      cy.viewPage()

      cy.get('.vce-text-block')
        .should('have.class', settings.customClass)
        .should('have.attr', 'id', settings.customId)

or go straight ahead to the exact page (our tests generate site pages in WordPress)

/* global describe, it, cy */

const ELEMENT_NAME = 'Text Block'

describe(ELEMENT_NAME, function () {
  it('Adds element to the page, checks automatically added elements, checks attributes', function () {
    cy.fixture('../fixtures/textBlock.json').then((settings) => {
      // cy.createPage()
      // cy.addElement(ELEMENT_NAME)

      // cy.setTinyMce({
      //   title: 'Content',
      //   text: settings.text,
      //   elementType: {
      //     name: settings.elementType.name
      //   },
      //   alignment: {
      //     name: settings.alignment.name
      //   }
      // })

      // cy.setClassAndId(settings.customId, settings.customClass)

      // cy.setDO(settings.designOptions)

      // cy.savePage()
      // cy.viewPage()

      cy.visit('http://localhost:8888/wp/auto-draft-4')

      cy.get('.vce-text-block')
        .should('have.class', settings.customClass)
        .should('have.attr', 'id', settings.customId)

Pipeline debugging

We use two different environments to run Cypress on the pipeline:

CircleCI on GitHub for our main project
Gitlab CI on GitLab for other projects

They both basically do the same stuff, the main difference is the interface.

On pipeline we use Docker image with:

Apache server
Pre-installed WordPress
Pre-installed theme
Pre-installed plugins

Debugging on the pipeline is essentially similar to a local.

1. Read the error message

Like in the Local debugging read the error, half of the times it will be enough. The image below is the error message from the GitLab CI terminal.

2. See artifacts (screenshot or video)

By default Cypress have screenshots enabled, but we also enabled video recording. To improve performance a little, we've enabled video recording only on failure. Video recording can be enabled in the cypress.json config file:

"video": true

Once the test is failed now we can check a screenshot or a video.

Artifacts on GitLab CI:

Artifacts on CircleCI:

3. Plugins for debugging

The following plugins can be used both locally and on the pipeline. We're saving up resources and using them rarely only for intricate cases. For the most part, it's enough with error messages and artifacts, but it's good to know that such plugins exist.

Saves the Cypress test command log as a JSON file if a test fails https://github.com/bahmutov/cypress-failed-log
A Cypress plugin that sends all logs that occur in the browser to stdout in the terminal https://github.com/flotwig/cypress-log-to-output

Inner docs

If your team or project has an inner knowledge base or even if you don't, start documenting. Over time there's just too much information piling in the heads of developers.

We've begun documenting howtos and practices on e2e testing. That way all developers now have a point of reference.

You don't have to scale to full-blown documentation at once. Start with a single document and a few code snippets. 😉

Conclusion

These are the techniques we use to write the e2e tests. I do hope that people can draw from our knowledge and improve their testing. Let us know what techniques and methods you are using by replying in the comments.

Check out our tests they are available in our GitHub repo.

9 Practical tips for beginner web developers

Nikita Hlopov — Mon, 09 Dec 2019 18:46:53 +0000

This is a list of 9 practical tips for beginner developers by a developer who was a beginner once as well.

This post is actually a repost of my original one I've made a while ago on my blog.

These days there is plenty of information around to start a career as a developer. In this article I just want to share tips from my own experience that I found useful when I was learning.

I hope that someone might find it useful and learn something new.

Coding courses/school;
Online coding courses/school;
Resources/study materials;
Code editors;
Command line/Terminal;
Online tools/services;
Browser Dev Tools;
Local server;
Social Media.

Coding courses/school

In my opinion, this is the best way to start. I've enrolled at a local coding school after learning by myself for some time.

The main advantage over all other methods is that you get a real life experience and mentoring from the teachers.

You can ask a question any time during a seminar, engage in the discussion, learn from and share experience with other students.

The teachers will not only tell you basic stuff but will also give valuable tips and pieces of advice how to improve yourself, share their own experience, tell stories from real life.

Overall, if you have the possibility I strongly recommend you to start by taking a real-life course on development.

Online coding courses/school

During my learning period, I've also been taking a few online courses. Actually, I do this to this date.

The cool part about it is that unlike the real-life coding courses/school, which most probably will have fixed study hours and location, you can attend it at any time and from anywhere your comfortable with.

Also, you can rewatch the video or go through an exercise over time.

Online courses tend to constantly update study material, so you'll always be up to date to new technologies and practices.

Most of these online courses have online communities where students share experience and ask questions.

Resources/study materials

If you're not taking courses/school of any kind, there are plenty of ways to get information online. Today you can find literally tons of information on almost any topic.

From my own experience what I use and can recommend is:

MDN - all time favorite and ultimate resource I refer up to this day (they have tutotials for beginners);
Can I use - mostly for checking browser compatibility;
StackOverflow - ask/search question for custom cases, but be aware that some answers may not be suitable or quite accurate for your case.

Resources I don't use on a daily basis, but is worth mentioning:

htmlreference.io - a list of all the HTML tags and attributes;
cssreference.io - a list of all the CSS properties;
ECMAScript 6 Features - ES6 features and examples;
youmightnotneedjquery - consider using Vanilla JS over jQuery when possible.

And lastly the Youtube. For a quick explanation or a tutorial, Youtube is the perfect spot. Lots of interesting and useful videos out there.

Code editors

You'll be writing a lot of code, so a proper code editor is a must. The code editor can make a big difference when you're writing a code. It will ease your life as a developer by helping easily navigate and edit code.

I've tried quite a few, each one of them has its own pros and cons. But I'm not going to make a comparison now, as this article isn't about that. I'm just going to list my favorite ones (all of them are FREE).

There are plenty of articles comparing code editors, and I encourage you to read them, but I suggest try them out as many as you can, and in time you'll find your favorite.

Command line/Terminal

Along with the web development technologies the command line experience is a must for a modern developer.

A lot of work will be dependant on the command line (e.g. git), as well as some technologies require you to have a command line knowledge.

If you're not familiar with the command line just yet, don't be intimidated, it's not that hard. Take your time and just practice, read tutorials and watch a few video explanations, its plenty out there.

There will be roughly only up to 10 commands that you'll have to memorize. For everything else there's Google. ;)

Online tools/services

Services like Github and Codepen does not only help you on your journey of becoming a web developer but also can serve as your own business card or a portfolio if you wish.

With the help of such services you can:

share your own code and projects with people;
see other people's code and projects (and learn from them);
collaborate with other developers;
engage in discussions;
get your code reviewed;
get inspired;
inspire others;
improve your creativity;
contribute to the Open Source community.

Getting a Github account is a good start, you can:

understand what is version control;
learn more about the command line;
get familiar with one of the most popular service for developers.

Browser Dev Tools

Being a web developer is not only about writing code or working with the command line. But also debugging! That said you should be proficient with browser's Dev Tool or Developer Tools.

You can start by opening a Dev Tools in your browser and just begin clicking and exploring.

With Dev Tools you can:

Inspect and edit DOM elements;
Inspect and edit element styles;
View messages and run JavaScript from the Console;
Debug JavaScript;
View and debug network activity.

And that's just some of the thing you can do there's much more.

Each browser's Dev Tools has its own traits, but for the most part, they're all the same.
My favorite browser to work with is Chrome. They have an awesome Dev Tools imho which they constantly update and maintain, as well as they have a complete documentation on Dev Tools.

Local server

It's a common practice to test your code locally right in the browser. But I strongly advise you to install a local server for testing purposes.

You'll get an experience of how your code actually works in an environment close to real one.
You'll need a local server:

for testing purposes;
to make AJAX calls;
if you're planning to learn any of the server-side languages.

A couple of the most popular local servers:

MAMP (Mac and Widows);
XAMPP (Mac, Windows, Linux).

Social Media

Being a developer also means that you constantly have to learn and improve yourself. That is why the final tip is - get a Twitter account and follow developers, software companies/blogs/groups/communities. It's an easy way to always be up to date with current technologies and trends.

Never stop learning.

5 HTML tags you should consider using more often

Nikita Hlopov — Tue, 26 Nov 2019 22:42:37 +0000

When writing HTML developers often use common tags like div, section, p, span and that's ok.

But to give your markup more meaning (make it more semantic) I suggest you start using following tags more often. So instead of plain old divs and spans try:

1. `address`

Use this tag whenever you need to wrap the contact information or a contact address.

<address>
  150 Deansgate,<br>
  Manchester M3 3EH,<br>
  United Kingdom
</address>

This tag may also include:

any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. - MDN

2. `del`

To mark the content that has been deleted from the document use del. This element comes with the default strike-through styling.

One of the most common uses for this element I found to be is displaying prices.

<p>
  The item is sold out <del>19.95$</del>
</p>

Often this element can be seen along side its counterpart ...

3. `ins`

It is used to show that the content has been added to the document instead.

Again nice example with prices, ins is the new price here:

<p>
  The item is on sale only <ins>9.95$</ins> <del>19.95$</del>
</p>

4. `small`

This tag is used to define side-comments and small print. The contents of the small tag is usually have smaller font-size style by default. One of the uses is to wrap copyright or legal text in the footer.

<footer>
  <p>Yoursitename</p>
  <small>Copyright © 2019</small>
</footer>

5. `time`

Finally this tag is used to display specific time or date. Often time tag comes along with the datetime attribute which indicates the time and/or date.

Often is used to display published post date and time.

<p>
  Published on <time datetime="2019-11-27T00:30">November 27, 2019</time>.
</p>

Forem: Nikita Hlopov

Accessible collapsible mobile navigation?

What's the dark mode priority should be?

3 ways to add distinct underline style for the anchor tags

1. text-decoration

2. border

3. box-shadow

Become more productive with these 5 terminal tips

1. Change directory from root

2. Line navigation

3. Remove the line

4. Repeat the previous command with sudo

5. Suggestions with Tab button

⚛️ Initiate a React app with multiple components on a single DOM element

Initiate a generic React app

Initiate a React app with multiple components

Conclusion

5 reasons to write Semantic HTML

1. Understandable code

2. Screen readers

3. Search engines (SEO)

4. Usability (UX)

5. Default styling

Do you even use CSS floats these days 🤔

Feedback for a project

Cool Chrome Dev Tools tricks and tips you might not know about

1. Dev Tools theme

2. Dev Tools panel layout

3. Switch between Dev Tools panels

4. Switching between CSS properties

5. Toggle element visibility

6. Edit element attributes

7. Search DOM tree

8. Add devices

9. Add new styles shortcut

10. Edit any text content on the page

11. Store value as a global variable in console

12. Increment CSS values

13. DOM elements as global variables

14. Switch between color formats

15. Return the value of the last expression evaluated in the console

Bonus: Expand all sub-properties of an object that's been logged to the console

Writing and debugging Cypress tests

Intro

Outline

Writing tests

1. Cypress syntax is similar to jQuery

2. Cypress is lacking some features

3. Cypress resources

4. Folder structure

5. Cypress strange behavior

6. CSS values are computed values

Debugging

Local debugging

1. Carefully read the error message

2. Additional data in the console

3. Comment out commands

Pipeline debugging

1. Read the error message

2. See artifacts (screenshot or video)

3. Plugins for debugging

Inner docs

Conclusion

9 Practical tips for beginner web developers

Coding courses/school

Online coding courses/school

Resources/study materials

Code editors

Command line/Terminal

Online tools/services

Browser Dev Tools

Local server

Social Media

5 HTML tags you should consider using more often

1. address

2. del

3. ins

4. small

5. time

4. Repeat the previous command with `sudo`

1. `address`

2. `del`

3. `ins`

4. `small`

5. `time`