small_avatar_AdrianR3.png

thumbnail_avatar_AdrianR3.png

avatar_AdrianR3.png

Adrian

GET IN TOUCH

As a frontend developer, you are sometimes challenged with optimisation projects. 

Nowadays people perceive the web pages and Internet mostly visually. Apart from the design and pleasing visual appearance, websites need to stand out in areas like short loading time, smooth animations, and small payload.

You, the developer, might also know (or at least intuitively adopt) the [Pareto principle](https://en.wikipedia.org/wiki/Pareto_principle)
, which more or less states that 20% of the effort generates 80% of the results. 

Sounds great, right? Do some coding, make things work, hand out results to the client, and make some cash. All is fine until the client requests the remaining 20% of the results - to make things pixel-perfect, super smooth, and generally outstanding. 

But sometimes there’s a catch.

**The code of other people**

On occasions, you might be asked to polish someone else's work.

This is precisely a situation that we sometimes encounter at Bitnoise. We improve good things so they become even better. We do the remaining 80% of the hard work so the client ultimately gets the last 20% of awesomeness. 

So what striving for perfection looks like? Well, as Pareto pointed out, it’s not easy. It requires discovering unknown unknowns and it takes a lot of resources (in the coding world - mostly time and money). But it’s worth the effort when excellence is at stake and the client accepts that.

**Where did 16 milliseconds go?**

Recently we got to work on the optimisation of a very nice looking website from Loaded, a gaming industry company. In the world of gaming everything has to be 60fps and smooth like butter. This definitely wasn’t the case with the webpage. The 3D content and layout animations were promising but when you visited the page on a not-the-most-expensive computer, the experience was far from optimal.

Animations were choppy, loading of the page took ages and the laptop fan was spinning so fast that your computer would almost fly away. 

However, when we looked into the code it seemed to be very well organised and structured. You could see at the first glance that it was made by someone who knows how to build a good frontend. We checked out who the original author was and indeed he was quite a respected and known developer on another continent. This was a bit intimidating. If he couldn’t make this site look perfect, how can we do it? But then we thought, “Well maybe he just did the 20% of the work and achieved 80% of the result”?

So we took the challenge and tracked down the pain points of the website. Fixing the performance wasn’t that easy though since it’s not really obvious if changes in existing code won’t break something in an unexpected way or place. Also, discovering what makes the animation degrade from optimal and sustainable 60fps is not trivial. In the process, you usually face code scattered with breakpoints, “console.logs” and “temporary solutions” in order to find out why it takes more than 16 milliseconds for the browser to render some of the animation frames. 

**Make the fan silent again**

In the case of our client's website, the bottleneck appeared to be the overuse of external JS library calculations. The internal workings of that library put too much unnecessary stress on CPU and GPU. The exact same effect could have been achieved with some handcrafted CSS styles and much simpler JS calculations. Modern browsers have quite outstanding optimisations of their CSS rendering algorithms that we as developers should leverage as much as possible. And in this case, we did. 

In the end, the performance boost was huge and the difference was like night and day. No more lost frames, no more low and inconsistent frame rates. And the fan got finally silent. 

There were also a couple of additional optimisations done in the webpage which helped to shorten the initial loading of the page and improve the user experience but the most impactful change was relatively small in terms of lines of code but huge in terms of client satisfaction. 

The lesson learned is that while Pareto is often a great friend, the law can also cause underwhelming results when we strive for a pixel-perfect frontend. At Bitnoise we believe in near ideal interfaces, that's why a 100/100 rule is often our guiding principle. 100% effort means 100% results.  



small_Blog_artykul_Marek_cover_high.png

thumbnail_Blog_artykul_Marek_cover_high.png

Blog_artykul_Marek_cover_high.png

Dev Snapshot: Why is Pareto not Universal in Software Development

Prettier is like your very experienced colleague who constantly whispers advice about your code consistency and readability. Who wouldn’t want one? 


Unfortunately, very experienced developers are often busy, and that’s why [Prettier](https://prettier.io/)
 was created. In essence, it’s a tool that helps developers implement best coding practices automatically. 

Here is a concise **Prettier guide** including key benefits, **React** and **Typescript** code examples, and comments from our developers. 

#### **Key benefits**
- **Opinionated Formatting:** Prettier has a set of default formatting rules based on community best practices, making it easy to format your code without spending time on style debates. 

- **Multiple Language Support:** Prettier supports various programming languages such as JavaScript, TypeScript, CSS, HTML, and more. 

- **Customizable Rules:** Prettier allows you to customize the formatting rules to fit your project's specific needs, giving you more control over your code formatting. 

- **Easy Integration:** Prettier can be integrated into your development workflow with ease, enabling you to automate your code formatting and improve your productivity. 

- **Improved Readability:** By formatting your code consistently and following best practices, Prettier can make your code more readable and easier to understand. 

- **Reduced Maintenance Time:** Prettier can save you time on code maintenance, as it can automatically format your code as you write it, reducing the need for manual formatting.

- **Reduced Human Error:** By automating the code formatting process, Prettier can reduce the chance of human error and ensure that your code is always formatted correctly.


![ ](\uploads\blog-prettier_Lukasz_post_cytat_01-1_3tfodtSBNooCMUZATR9yqN.jpg)
#### **How does Prettier work?**
Prettier parses your code into an abstract syntax tree (AST) using a parser specific to the programming language you are using. 

1. Applies a set of formatting rules to the AST, modifying it to conform to the formatting rules. These rules are based on community best practices and are designed to ensure consistency and readability in your code. 

2. Generates formatted code based on the modified AST, producing a new code file that conforms to the formatting rules. 


Prettier also provides options to customize the formatting rules, allowing you to tailor the formatting to your project's specific needs. Once configured, you can integrate Prettier into your development workflow using various tools such as code editors or build scripts. This way, **you can automate your code** formatting and maintain a consistent code style across your team.

#### **How to install Prettier?**
To configure Prettier, you can create a configuration file in your project's root directory. Here is the step-by-step guide:

1. **Install Prettier:** You can install Prettier either globally or locally to your project using a package manager like npm or yarn. For example, to install Prettier globally, you can run the following command in your terminal:


``npm install -g prettier``

2. Create a configuration file: Create a ``.prettierrc`` or ``prettier.config.js`` file in your project's root directory.

3. Specify formatting rules: In your configuration file, you can specify the formatting rules you want Prettier to apply. You can find a list of available options in the Prettier documentation. Here's an example ``.prettierrc`` file that sets the maximum line length to 80 characters and uses single quotes for string literals:

![ ](\uploads\blog-prettier_Lukasz_post_cytat_01_C7f9YCZX42n8FbuHij8i2.jpg)
#### **How does Prettier work with JavaScript and Typescript?**
Here are some examples of how Prettier works with JavaScript and TypeScript:

1. Formatting JSX  

Before:




3. Formatting TypeScript in a Functional Component

Before:



#### **What are alternative and complementary tools?**
1. [ESLint](https://eslint.org/)
: ESLint is a popular static analysis tool for identifying problematic patterns found in JavaScript code. It has built-in rules and plugins for code formatting and styling.


2. [JSHint](https://jshint.com/)
: JSHint is a community-driven tool that helps detect errors and potential problems in JavaScript code. It has built-in options for enforcing code style and formatting.


3. [StandardJS](https://standardjs.com/)
: StandardJS is a style guide and linter for JavaScript code. It has a built-in code formatter and can be integrated into various editors and IDEs.


4. [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)
: Beautify is a code formatter that can be used with various programming languages, including JavaScript. It has plugins for popular editors and IDEs like VS Code, Atom, and Sublime Text.


5. [CodeMirror](https://codemirror.net/)
: CodeMirror is a versatile text editor for the web that can be used for formatting and styling code. It has built-in features for code highlighting, indentation, and autocomplete.


6. [JS Beautifier](https://beautifier.io/)
: JS Beautifier is a simple tool that can be used for formatting and beautifying JavaScript code. It has options for configuring the code style and formatting rules.


7. [Black:](https://github.com/psf/black)
 Black is a Python-based code formatter that can be used for formatting code in various programming languages, including JavaScript. It has options for configuring the code style and formatting rules.


#### **Summary**
Prettier is a code formatting tool that automatically implements best coding practices, and improves code consistency, and readability. 

It has default formatting rules based on community best practices, supports multiple programming languages, is customizable, and can be easily integrated into a development workflow. Prettier works by parsing code into an AST, applying formatting rules, and generating new formatted code. Developers can install Prettier by creating a configuration file with specified formatting rules. Prettier works - among others - JavaScript and TypeScript. 

I encourage you to try out Prettier and other similar tools. 

If you have any questions or are interested in our services, do not hesitate to reach out to us.

Dev Snapshot: Why is Pareto not Universal in Software Development

Marek

How to make your code better with Prettier?

Łukasz

GET IN TOUCH