TECHY360
Everything You Need To Know About Tech

20 tips from the Junior Front-end developer

0 57

At the beginning of the study, every bit of knowledge is important. For this article, we have selected a list of useful tips for a very green front-end developer.

HTML

This invention was launched in 1993 and is still the main and most important language for creating sites. First, there was SGML – the grandfather of HTML – then it was modified in XHTML, and today you use the most (so far) logically complete version – HTML5.

Its code is very peculiar and interesting, and anyone can quickly learn it. Almost every HTML document contains the head, body, and footer tags – what could be simpler? These tags are enclosed in angle brackets (<>).

The appearance of a website up to a certain point can be described using a markup language, but then you have to connect another tool. For example, to connect JavaScript, you need to use a special tag and provide a link to the script file.

HTML Tips 

Any newbie makes mistakes, and this is quite normal. To reduce the number of errors, practice and experience are needed. Just do not mention and do not immediately study, so let’s start with the most common tips.

Always close tags

Each open tag must be closed! You can’t leave tags in this form if you don’t need the consequences. Suppose there is a div to which a hover effect is attached. If you leave it open, then this effect will be inherited by all elements until it reaches the </div> tag. 

This is especially important when working in a team: colleagues (and you along with them) will be “very happy” to lose “a little” time on finding ill-fated closing brackets.

Void elements

Void (empty) elements have only an opening tag, and a closing one may not be specified. The rest of the elements must have either a start and end tag, or only a start tag, marked as self-closing. Only in this case, it should not be framed on both sides.

The following tags belong to void: are, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.

Use div layout

Div is the heart of modern HTML. Using this element, you can clean up the layout, create a convenient document structure and get a beautiful appearance. Here is an example:

The card consists of four elements: a picture, a caption, a subtitle, and a button. If we want to become a good front-end developer, we simply have to separate all the elements and have convenient and readable code:

Avoid Inline-Style

In the past, this was the only way to style an element until someone came up with CSS to allow us to store all the styles separately. Today, using inline styles is not a good practice, because there is a high probability of creating a mess in the document.

This is an example of what an inline style looks like. There are only two parameters, but imagine that you wanted to make four or five styles for each element on the page. In this case, inline is a bad option.

Scripts are always at the end

As a web developer, you must ensure that the pages of your creation load as quickly as possible. When the site has a JavaScript file with hundreds of lines, the resource slows down significantly, because the browser will not load the entire page until the JS file is fully loaded.

Write lowercase tag names

Wean yourself from the habit of writing tags with a capital letter – this is another indicator of a bad tone. The browser will understand your markup without any problems, but, as a proper developer, you should be careful with your code and try to make it legible and beautiful. This is optional but very desirable.

CSS

It is a style sheet language created in 1996. It is used to set style properties for web documents such as XHTML, HTML, HTML5, XML, SVG, and RSS.

Selectors

Selectors help determine which object to apply style properties too. CSS selectors come in several forms: a type selector, a class selector, an identifier selector, a universal selector, and an attribute selector.

Type selector: it will be applicable to each element matching the name of the selector.

Class selector: starts at the point followed by the class name of the .class_name element. Such a selector is very useful when you need to reuse a style for another element.

Id selector: unlike a class selector, the id selector is unique (there cannot be two elements with the same identifier in a document). This selector is the most common when working with JavaScript.

Related Posts
1 of 26

Universal selector: each tag in the HTML document will correspond to this selector. Often this famous “*” is used to create a default rule.

Attribute selector: a special type of selector for searching by attributes.

CSS Essential Tips

As in programming, in CSS, creating an incorrect or incorrect class name and clumsy structure leads to a headache in the future. We will give you some tips to help.

Object-Oriented CSS

The goal is to make dynamic CSS more manageable by applying the principles of object-oriented design from Java and Ruby. OOCSS makes CSS more understandable, reusable, scalable, and easy to manage.

Block, Element, Modifier (BEM)

Special page layout. BEM has three parts. A block is the external parent of a component. The element is the “innards” of the component. The modifier is used in the case of several BEM on one node. If everything seems incomprehensible, keep a link to the BEM manual.

Don’t go deep

One of the best practices in HTML that can maintain the correct nesting depth for the right CSS combination is to create no more than four depth levels.

Create CSS Import File

Imagine that in your project there is a mountain of CSS files, when connected, a bunch of lines of code is created. Just create a file to import CSS, put all the above files in it, and declare it in the HTML document.

Use flexbox

Previously, in order to create a flexible container, you had to contrive and torment yourself with floats to a headache. Do not be killed – use Flex, keeping beautiful and readable code.

Javascript

JavaScript is an object-oriented, prototype-based, imperative and dynamic programming language with a dialect base based on ECMAScript. He was born back in 1995 and was usually used on the client-side, but today JavaScript allows you to create and manage a server.

Essential JS Tips

It is always difficult to learn typesetting, the basics of JS and simultaneously code for practice. But there are some points that will help you understand what awaits you.

Control flow

This is the order in which script instructions are executed. Actions are performed in order from the first line in the file to the last until there are structures (conditions and loops) that change the sequence.

if-else. This condition is Boolean. This means that when the condition is true, some code inside the if the statement is executed, i.e. code will not be implemented until true returns.

let age = 25;
if(age == 25){
  console.log(`I'm: ${age}`)
}else{
  console.log('Age is not equal to 25')
}

The result in the console will be the phrase “I’m 25”. If you change the value of age, the result will be – “Age is not equal to 25.”

switch. This construction is similar to if-else, but with a huge difference: it has case blocks (analog of if), break (analog of the end of the condition) and default (analog of else).

let x= 10;
switch (x)
{ 
    case 5:
        console.log("X value is 5");
        break;
    case 10:
        console.log("X value is 10");
        break;
    case 15:
        console.log("X value is 15");
        break;
    default:
        console.log("Unknown value");
        break;
}

for. The for loop will execute based on the conditions in parentheses. There are several options, such as for infor offor await of. We advise you to study more detailed information separately.

//Usual for
for (var i = 0; i < 9; i++) {
  console.log ('Psss, man!'); // Pssss, man!
}
//For in
var myObj = {city: "Envigado", state: "Antioquia", country: "Colombia"}
for (var key in myObj) {  
  console.log(myObj[key]); //Envigado Antioquia Colombia
}
//For of
let iterable = [10, 20, 30];
for (values for iterations) {
  value += 1;
  console.log(value); //11 21 31
}

Manipulations with the DOM. JavaScript allows you to add interactivity to your site. There are a lot of frameworks for this, such as jQuery, but you need to know the basics to understand how everything works inside. For example:

This code creates the h1 tag with the text “Hello world” inside.

Asynchrony. This is working through async / await with events (promises) that appear regardless of the main program execution flow.

// Promise
var IsIphone = true;
var phoneType = new Promise (
     function (resolve, reject) {
         if (IsIphone) {
             var phone = {
                 type: 'Iphone X',
                 color: 'black'
             };
             resolve (phone); // completed
         } else {
             var reason = new Error ("This is not Iphone X");
             reject (reason); // rejection
         }

     }
);
 phoneType.then(res =&gt; console.log(res)) 
 .catch(err =&gt; console.log(err))
 
 //Async Await
 
 function square(x) {
  return new Promise(resolve =&gt; {
    setTimeout(() =&gt; {
      resolve(Math.pow(x, 2));
    }, 2000);
  });
}

async function layer(x)
{
  const value = await square(x);
  console.log(value);
}

layer(20); //400

Test-Driven-Development (TDD). This software development process is based on the repetition of very short development cycles (specific test cases), followed by code modernization and completion of tests.

Functional programming. With this approach, you can create software only with a function, avoiding the shared states, mutations and side effects.

// Normal functions

const showMessage = (m) =&gt; console.log (m)
showMessage ('Test')

// Factory Functions

const user = () =&gt; {
   return {
     name: 'Ivan',
     title: 'React Developer',
     hobby: 'Eat plenty'
   }
};
user ();

Instead of a point

Front-end developers must constantly improve. Continue training, improve the quality of your code, perfect your design skills and do not stop in front of difficulties – they harden!

And what tips have helped you become a cool front-end?

Comments
Loading...

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More