Pull to refresh
157.33

JavaScript *

High-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm

Show first
Rating limit
Level of difficulty

Functional components with React Hooks. Why it's better?

Reading time5 min
Views24K

When React.js 16.8 was released we got the opportunity to use React Hooks. Hooks make us able to write fully-functional components using functions. We can use all React.js features and do in in more convenient way.


A lot of people don't agree with Hooks conception. In this article I'd like to tell about some important advantages React Hooks give you and why we need to write with Hooks.


I will not talk about how to use hooks. It is not very important for the examples. If you want to read something on this topic, you can use official documentation. Also, if this topic will be interesting for you, I will write more about Hooks.

Read more →
Total votes 30: ↑28 and ↓2+26
Comments1

Generating multi-brand multi-platform icons with Sketch and a Node.js script — Part #1

Reading time10 min
Views2.2K


TL;DR


Using a custom build script in Node JS, it is possible to manipulate a series of Sketch files, and then, using an internal Sketch tool, automatically export their assets, to generate multiple icon libraries, for multiple platforms and different brands, that support dynamic colourisation of the assets via design tokens, and also AB testing of the assets via naming convention. Easy peasy :)


Well, actually it’s not that easy, but it can certainly be done. This post is a detailed explanation of how we did it, and what we discovered along the way.

The problem we were trying to solve


At Badoo we build a dating app. Actually, multiple dating apps. For multiple platforms (iOS, Android, Mobile Web, Desktop Web), across multiple teams.

We use hundreds of icons in our apps. Some of them are the same across different apps, some are very specific to the brands the apps reflect. The icons are continuously evolving, in sync with the evolution of the design. Sometimes completely new icons are added, while others get updated, and still others get dropped (although, they often remain in the codebase).
Read more →
Total votes 30: ↑29 and ↓1+28
Comments0

Vue mixins, the explicit way (by an example of BEM modifiers plugin)

Reading time3 min
Views7K


Vue mixins are the recommended way of sharing common functionality between components. They are perfectly fine until you use more than one for them. That's because they are implicit by design and pollute your component's context. Let's try to fix this by giving them as much explicitness as we can.

Read more →
Total votes 26: ↑26 and ↓0+26
Comments0

Translating Dust templates to JSX

Reading time5 min
Views1.8K


Hello Habr! I'm Miloš from Badoo, and this is my first Habr post, originally published in our tech blog. Hope you like it, and please share and comment if you have any questions

So… React, amirite???

It appeared in the middle of the decade (plagued by the endless JavaScript framework wars), embraced the DOM, shocked everyone by mixing HTML with JavaScript and transformed the web development landscape beyond recognition.

All those accomplishments, without even being a framework.

Love it or hate it, React does one job really well, and that is HTML templating. Together with a great community and a healthy ecosystem, it’s not hard to see why it became one of the most popular and influential JavaScript libraries, if not the most popular one of all.
Total votes 34: ↑33 and ↓1+32
Comments2

Authors' contribution