Image for post
Image for post

I was recently asked by a designer to create a text input style like the search input on TripAdvisor. I liked it a lot. I’m going to share my solution as a step-by-step guide so you can build it yourself.


I’ve recently set up TypeScript in an existing codebase that uses Webpack, Mocha and several Babel plugins, including babel-plugin-rewire. I’m inspired by Randy Coulman’s super detailed post on mocha-webpack, so I decided to share the results of my journey.

Part 1 — Overview of libraries

⚠️ If you just want a working setup, feel free to skip to Part 2.

NB: All typescript tools below use tsconfig.json file for configuration.

awesome-typescript-loader

A TypeScript loader for webpack. There is a good chance that all you need is a TypeScript loader.

You can control the output with module and target options, and configure baseUrl and paths for dynamic path resolution. Compiler configuration has many useful options, both for transpilation and type checking. If you are not using Babel for anything other than basic JS transpilation, you can probably stop here and just replace Babel loader with it. …


Image for post
Image for post

IP addresses operate behind the scenes, but they’re an integral part of everything you do online.

An IP address is an identification code for any device connected to a network using Internet Protocol. These aren’t much different from a physical address where you mail letters.

Let’s explore how these work, and what you need to know about them to stay safe out on the open internet.

How does your computer get an IP address?

Your local internet provider (e.g. …


Image for post
Image for post

Optimizely is a tool that lets you perform AB testing. Like all or most other client-side AB testing tools, it uses the following mechanism:

  • A script tag is included on your page which alters it on load for a variation group of your users
  • The variation is compared to the unchanged control group to get insights on how well it performed

The main sell of this model for our team is simple: no code changes are needed to run the tests. This lets product and marketing teams launch tests in production faster and without involvement of engineers.

There is one problem however: Optimizely usage is inherently problematic with React apps. React re-renders components every time state or store are changed. So, Optimizely changes don’t stick — they are removed by React diffing mechanism on re-render. …


Image for post
Image for post

I’m a big Slack fan. My engineering team relies on Slack for just about everything, but before we had our present Slack integrations, we often missed notifications across different platforms and had to re-notify each other or check email constantly.

Having brought the notifications all under one roof, we’ve streamlined our processes, and saved enough time for an extra sandwich a day (or two). 😀 If it takes on average 15 minutes per person to eat 1–2 sandwiches, that’s 2.5 hours per day saved for a team of 10 (hungry) engineers. …


Image for post
Image for post
Artwork by Phillip Blackowl. Spanish translation. Portuguese translation.

Before I learned software development, API sounded like a kind of beer.

Today I use the term so often that I have in fact recently tried to order an API at a bar.

The bartender’s response was to throw a 404: resource not found.

I meet lots of people, both working in tech and elsewhere, who have a rather vague or incorrect idea about what this fairly common term means.

Technically, API stands for Application Programming Interface. At some point or another, most large companies have built APIs for their customers, or for internal use.

But how do you explain API in plain English? And is there a broader meaning than the one used in development and business? First, let’s pull back and look at how the web itself works. …


Image for post
Image for post

Not long ago I was writing a feature relying on Twilio — an API service for text messaging. I was testing it locally and then accidentally committed and pushed the Auth Token and the CID to github — the secret identifiers used for account authentication.

While the misstep wasn’t critical — our repo is private and we were able to swap the credentials without downtime immediately after, it still left me wondering if there are some ways I can prevent that from happening in the future, given it wasn’t the first time I’ve pushed a secret key by accident.

Why the Buzz?

When building a product, there are many secrets — account passwords, API keys, private tokens and SSH keys — that we safeguard. The problem with secrets, is that once they’re revealed, they can never be un-shared. …


Image for post
Image for post

Hello everyone. This is my first-ever dev post, so give me some love! :-) Ty. Next, here we go:

JavaScript is a large part of web development, so it’s important that we apply best practices to developing front-end code. I think most people agree with the benefits of Unobtrusive JavaScript for both end users and developers. One of its core principles which we’ll talk about here is separation of behavior from markup.

Why is it important?

Separation of structure and behavior helps keep the codebase manageable and developers happy. Part of it is simply code organization. …

About

Petr Gazarov

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store