Tools for Front-End DevelopmentSubhash Kashyap
Introduction: Front-End Development Tools
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.
Division of The Front-End
So, what are the tools that facilitate the life of a front-end developer in 2021? Let’s discuss this actual topic.
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).
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.
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.
Notable tools in this framework include Lit-HTML (and Lit-element), StencilJS, SvelteJS, and Bit.
From Content Libraries to Dynamic Collections
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.
State Management: Goodbye Redux?
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.
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.
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.
CSS Border Radius
Rounded buttons, boxes, circles and other shapes can be created with pure HTML + CSS. If it weren’t for this awfully long syntax:
… 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.
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.
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.
IETester / IE8 Developer Tools
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”.
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 188.8.131.52+, 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.
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
Chrome Developer Tools
Conclusion: Tools for Front-End Development
Simply super practical and very well implemented.