to make sure nothing gets stolen through the front door

Photo by Dima Pechurin on Unsplash

Web security is a topic that is often overlooked by frontend developers. When we assess the quality of the website, we often look at metrics like performance, SEO-friendliness, and accessibility, while the website’s capacity to withstand malicious attacks often falls under the radar. And even though the sensitive user data is stored server-side and significant measures must be taken by backend developers to protect the servers, in the end, the responsibility for securing that data is shared between both backend and frontend. …


It’s no secret, that on the web we have to deal with different units — from rems and pixels to percentages and viewport-based values. In this tutorial, we’ll explore the problem of animating between different units, and see how we can overcome it.

The problem

Let’s start by creating this simple animation where a div with pixel-based size expands to fill the entire viewport width and height when we click on it:


From basics to complex orchestrated animations

Framer-motion is a library that powers animations in Framer, and it’s now available as an independent package that we can use in React applications. It has a very simple declarative API that makes it easy to create and orchestrate complex animations with a minimal amount of code. In this article, we’ll start with very basic animations and gradually move to the more advanced ones.

Note: animation examples in the article may not look smooth because of a low frame rate of GIF images. Rest assured, real animation are butter-smooth. You can play with them in the sandbox here.

Setup

We can…


If you’ve been using Rematch for managing state in your application, the latest release of react-redux that adds support for hooks should get you really excited.

Rematch has always tried to keep compatibility with existing react-redux API, and that stays true for the newly released version that supports hooks!

In addition to having more readable and reusable code, hooks allow us to do less work when adding type safety with TypeScript.

Let’s look at an example of doing things “the old way”. …


Note: This post covers typing Next.JS applications that use versions prior to v9. Starting with version 9, Next.JS comes with its own types by default, and their names may differ from those used in DefinitelyTyped package. If you use Next.JS version 9 and older, please refer to the official documentation. For earlier versions, continue reading :)

In this article, we’ll talk about typing Next.JS components. We’ll be using this Next.JS application that connects to Reddit API and displays a list of top posts in a given subreddit. Right now, the main component Posts.tsx


Photo by Artem Sapegin on Unsplash

Type aliases and interfaces are TypeScript language features that often confuse people who try TypeScript for the first time. What’s the difference between them? When should we use one over the other?

Type aliases and interfaces used to be quite different in their capabilities. However, it’s no longer true in the latest versions of TypeScript. Over time they have grown together to the point when they are almost identical. They still have some subtle differences — interfaces are more “extendable” due to the support of declaration merging, and types are more “composable” due to support of union types. …


I have recently implemented Stripe webhook integration for my application that uses Stripe Connect with managed accounts. As it turned out, the process for working with webhook events in Connect applications is slightly different, and there is no official documentation or public blog posts that cover these nuances. This short write-up is meant to bridge this gap.

So if you’ve never worked with Stripe webhooks, here’s what a typical webhook handler looks like (this Ruby snippet comes from Stripe documentation):

post "/my/webhook/url" do
# Retrieve the request's body and parse it as JSON
event_json = JSON.parse(request.body.read)

#…


Tips and resources to get off to a good start

As a developer, for a long time I resisted the idea that solving algorithmic challenges was something worth doing. I have started and stopped learning about sorting and searching and trees and graphs a countless number of times, every time with the same outcome — I was back to the projects where none of these algorithms were applicable, and the knowledge quickly faded away due to a lack of use.

But recently I decided to give it another try, and this time was a success. I used a new approach that helped me to stay on track long enough to…


Sometimes we need to build an application that has domain models that we don’t know all the attributes of. A good example of such application is a system for tracking business contacts. In the center of it is a Contact model that has attributes like name, email, phone number, etc. But can we know beforehand all the attributes that our Contact model will need to have? If we want to create the application for a wide audience, it can be difficult to predict. Solution? Allow users to add more attributes to Contact model in the runtime! …

Konstantin Lebedev

Full-time learner, part-time educator. Find more programming tutorials at https://konstantinlebedev.com

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