Tools for Front-End Development

Web development can be divided into two parts – front-end and back-end. The front-end (client part) should include HTML-layout with CSS-styles and JavaScript, and the back-end – the server part, which is usually written in Python, PHP, Ruby, and so on.

In simpler words, what the end user sees in the browser, what catches his eye the most is the front-end.

And what is hidden from human eyes under the hood is a back-end.

As you may have noticed, if there is a long list of programming languages for the server side, then there is no competition for the client side of JavaScript.

The front-end is often also divided into design and development. Front-end designer is more concerned with creating user interfaces and knows HTML and CSS well.

He or she also has good tools for creating layouts, has a sense of beauty. Sometimes dislikes JavaScript, but skillfully uses add-ons such as jQuery.

Essentially enjoys implementing design solutions.Front-End developers pay more attention to writing code in JavaScript. Frames, algorithms, programming paradigms, etc. are not something incomprehensible to him.

So, what are the tools that facilitate the life of a front-end developer in 2021? Let’s discuss this actual topic.

It sounds ironic, but while front-end development has the modular benefits of components, it is still more monolithic than back-end micro-services.

Micro-front-end provides the ability to split the front-end architecture into different parts for multiple teams.

Each team manages the end-to-end lifecycle of a specific micro-front-end available for custom development, versioning, testing, rendering, updating, and deploying (for example, using tools such as Bit).

The modern ecosystem still has some disadvantages. The most common issues encountered are deploying separate front-ends, linking, differences in environments, and so on.

With Bit, you can isolate, version, develop, test, and update individual front-ends / components.

Currently, these capabilities are used when working with multiple applications (as well as for gradual refactoring of parts of existing applications through components).

Atomic design is more of a philosophy than a pure methodology.

The theory, presented by developer Brad Frost, compares the composition of web applications to the natural composition of atoms, molecules, organisms, and so on.

Atoms make up molecules (eg text input + button + label atom = search molecule). Molecules make up the body. Organisms live in a layer template, which can be fleshed out into a page presented to users.

The benefits of atomic components go beyond building modular UI applications with modular and reusable components.

This paradigm forces you to think about composition to better understand the role and API of each component, their hierarchy, and how to effectively abstract the process of creating an application.

In my opinion, the future belongs to them.

Why? Because these pure web components are independent of the framework, they can work without using it or without standardization.

They are free of JS and are supported by modern browsers. Their packet size and consumption are optimal and the DOM rendering is amazing.

These components provide a Custom Element, a JavaScript API for defining a new type of HTML tags, HTML templates for defining layers, and the shadow DOM that comes with the components.

Notable tools in this framework include Lit-HTML (and Lit-element), StencilJS, SvelteJS, and Bit.

The advent of component-based development has spawned many tools. One of the most famous is Bit and its Bit.dev hosting platform.

With Bit, you can isolate and export existing components into a dynamic, reusable shared collection.

On the bit.dev platform (or on the server), components can be remotely organized for multiple teams so that each team controls the development of their own components.

The platform also provides a built-in ecosystem for common components: it automatically documents UI components, renders them on an interactive platform, and even provides a built-in registry for installing them using npm / yarn.

Alternatively, you can use Bit import to import components and make changes to any repository.

In the short term, this approach will revolutionize component sharing, and in the long term, it will help to pave the way for micro fronts.

How? With it, you can already build versions, test, develop and update parts of the UI application.

While the challenges associated with global state management in an application become more apparent as the modularity of the interface increases, Redux is becoming a lifesaver for many teams.

Will we say goodbye to Redux in 2021? Sounds like no?

However, the emergence of new features in frameworks that handle state (React hooks, Context-API, etc.) paves the way for a future without global storage.

Tools like Mobx are becoming more popular every day due to their component-oriented and scalable nature.

ES Modules is the ECMAScript standard for working with modules in the browser. They can be used to easily encapsulate functionality into modules used via CDNs, etc.

With the release of Firefox 60, all major browsers will support ES modules, and the Node team is already working on adding support for them in Node.js.

In addition, they will be integrated into WebAssembly in the next few years.

CSS sprites are an important technique for optimizing loading times, combining many small graphics into one large graphics file.

The individual graphics can then be displayed by appropriately positioning the graphic as a background image at the desired location.

That sounds complicated and requires a lot of fine-tuning. It would be without the following useful tools:

Optimize Website: If you want to equip an existing website with CSS sprites (which I recommend to everyone), the SpriteMe tool can help.

Simply go to spriteme.org and drag the link displayed there into the bookmark bar of your browser. You can now call up the tool by clicking on the link.

It then analyzes the currently open website and suggests a sprite combination which can be downloaded directly as a finished graphic.

SpriteMe also generates the appropriate CSS code, which you only have to include on your website together with the graphic.

Sprite graphics from individual graphics: In order to automatically generate a Sprite graphic + CSS code from individual graphics, you simply upload your graphics as ZIP packed to the CSS Sprite Generator. The tool does the rest.

Generate CSS from Sprite Graphics: If you have already made a Sprite graphic yourself and now want the appropriate CSS code to address the individual graphics, you can use Sprite Cow.

There you upload the graphic, select individual elements and the CSS code is displayed immediately.

The CSS property border-radius is becoming more and more popular and saves many front-end developers having to push pixels.

Rounded buttons, boxes, circles and other shapes can be created with pure HTML + CSS. If it weren’t for this awfully long syntax:

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-border-top-left-radius: 10px;
-border-bottom-right-radius: 10px;

… for two rounded corners?! Well, four of the six lines come from the browser-specific prefixes (vendor prefixes), which hopefully will no longer exist at some point.

Nevertheless, the small, useful website border-radius.com (easy to remember!) Should be mentioned at this point.

There you simply enter the desired border-radius value at each corner of the rectangle, you get a preview and the associated CSS code appears in the middle.

Tip: If you want to completely ban the vendor prefixes, you can try one of the following two tools: CSS Prefixer (console, Python), Prefix free (JavaScript)

Who does not know that? You have a spontaneous idea or bits of CSS / JS code that you would like to try out.

Just a little trial and error. The page jsFiddle offers the easiest and fastest option. You have four windows on the full screen: “HTML”, “CSS”, “JavaScript” and “Result”.

Enter code, possibly select JavaScript framework, press “Run”, done!

The result is displayed directly in the “Result” window and of course you can interact with it.

But jsFiddle also offers many more options and functions such as saving “fiddles” in an account, clearing up the code, embedding “fiddles” in other websites, etc.

In addition, the service is still in the alpha stage, so we can look forward to further features and improvements.

If you place a lot of value on cross-browser compatibility and specify various default settings (screen size, color depth, JavaScript, Java, Flash).

There are a total of over 100 different browser variants. Each selected variant is placed in a queue and depending on how many other requests still have to be processed, it can take a while until you get all the screenshots.

If you want to take a closer look at your website in the problem child “Internet Explorer”, you can do so with the helpful IETester program.

You need a computer with Win XP or higher, and you can test pretty much all versions of IE (IE10 preview, IE9, IE8, IE7, IE 6 and IE5.5) in one program and even in parallel.

The whole thing is pretty practical, especially because there are other useful options such as “Reload with cache emptying” there.

Tip: If you have an IE8 or higher installed, you can switch to the IE7 engine with the developer tools (press F12) by selecting it under “Document mode”.

Personally, I think web fonts are great and also extremely important if you want to create a sensible and contemporary website.

Soon it will be hard to imagine life without them.

Therefore, please refer to the great site fontsquirrel.com, which now offers over 700 freely available fonts.

Most fonts can be downloaded as a @ font-face kit, which includes the font in various formats, the appropriate CSS file and a demo.

In this way, you can have the font you want on your website in just a few minutes.

The enclosed formats offer compatibility with the following browsers: Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+, Internet Explorer 4+, iPad and iPhone.

Tip: There is also a great Drupal module with which Font Squirrel and other web font providers can be integrated very easily into a Drupal website: @ font-your-face module.

“No, better a bit lighter. Or better like this color there…”

While the computer scientist converts the RGB values into the HSV color space in such situations, increases the brightness and calculates it back into RGB hexadecimal representation, the front-end developer thinks:

“Hey, don’t worry. Look at the browser extension. “I have been using the Firefox extension ColorZilla for a long time, which is now also available for Chrome.

The main function of the extension is a color picker with which you can find the color anywhere on a website.

Incidentally, this also works with images, so CSS properties are not simply evaluated. The value is then e.g. copied directly to the clipboard as a hex value (format can be specified).

Extremely practical! There is also a color picker like you know it from Photoshop and Co, a history of the selected colors and much more.

Tip: If you are looking for the matching complementary color or other harmonious color combinations for a color, be sure to have a look here: colorschemedesigner dot com

Last but not least, the tool I use most often by far: Chrome. F12. Developer tools.

I don’t want to go into more detail about the individual functions here. I think anyone who uses it will appreciate it.

If you don’t, you should definitely try it out. HTML inspection, CSS + HTML live edit, JavaScript debugging console, load time analysis, and and and.

Simply super practical and very well implemented.

Moreover, you can have a look on these WordPress plugins and Chrome extensions.