Sign in

Building web applications. Creating Bookmarkly — best bookmarks manager 🚀
Photo by ThisisEngineering RAEng on Unsplash

Artificial intelligence is most of the significant technology nowadays. It opens new ways on how we look at the data.

It can:

  • writing an article for us
  • creating a whole application from mock-ups

Deepcode meets those needs

Deepcode is “The first real-time semantic code analysis — powered by AI” as it’s stated on their website. It’s created by Snyk. They take care of scanning your code in search of vulnerabilities. …


Photo by Luca Bravo on Unsplash

Adding code samples to your website is an excellent idea. It shows how the code should look like. It's hard to image npm package docs without code samples.

Existing solutions are good when we want to show JavaScript code samples. But what, when we want to show TypeScript code, types alongside with code?

Shiki Twoslash is the library you are looking for.

What is Shiki?

Shiki is a syntax highlighter. Is based on text mate grammar. The same technology that powers VS Code syntax highlighting.


React introduces hooks in 16.8 and everything changed. Hooks provided an opportunity to make functional components with state and lifecycles. The new approach required redefined mental models of how to write code in React. Not fully switching to a new approach lead to issues.

The work of a technical leader is full of decisions. You need to make them at the start and they can have an impact on the project even on the finish line. This series of article is for people who want to learn from my mistakes:

Situation

Let’s imagine we have a root component…


Every browser has its own way to manage bookmarks. The lack of a multiplatform bookmarks solution leads us to find a way to get rid of not-used bookmarks.

This guide helps you remove unwanted bookmarks from most popular browsers.

This is the first article from series of tips on how to manage bookmarks in a browser. The original post about How to delete bookmarks in chrome and safari was posted on Bookmarkly that helps with managing bookmarks. It using machine learning models to organize your bookmarks. Try best bookmark manager for free.

Contests:


Sharing logic between more than one application is crucial for creating scalable architecture. We can move some logic, UI components into a separate package. Next, this package can be shared between different applications. When we don’t want to open source your code we can use Github packages.

Don’t get me wrong. There is nothing wrong with open-sourcing your work. Probably anyone notices that you open-sourced your UI components. But if in your project it’s prohibited in this article I will cover how to make a private package.


Photo by Scott Graham on Unsplash

One word: Hasura. It’s an incredible tool for bootstrapping the backend and serving data for your app. It‘s built on top of GraphQL and PostgreSQL — battle-tested tools by developers around the world.

What is Hasura?

Hasura is a service that manages how to serve your data. Thanks to using GraphQL language you can easily compose queries to retrieve data more efficiently. You don’t need to worry about making a backend, endpoints, writing resolvers, setting up a database — everything is managed by Hasura!

Getting started

You can check here how to start using it in the official documentation. It takes less than 5 minutes…


Most of the features we are creating in our applications can be described in finite state machines. When we think about web applications we are thinking about the state in which our application is. Then we have ways we can go and modify the state of the application.

The login page is a great example. When you enter valid credentials, you were transitioned from the “not logged in” state into the “logged in”. Let’s see how knowledge about that can help us create more predictable and less error-prone applications.

What exactly are finite state machines?


Preact is a framework that aims to be fast with a smaller size alternative React with the same API. Comparing to such a giant as React isn’t easy. Let’s see if Preact should be ashamed of that comparison!

Features

Most of Preact features are the same as in React. Hooks, Portals, Suspense all of this are available in Preact. There are some small differences in Preact. You can read about it here https://preactjs.com/guide/v10/differences-to-react.

So why you should consider picking Preact instead of React?

Smaller size

Preact has a smaller footprint. According to bundlephobia Preact (with @preact/compat) is almost 4.5kB minified and gzipped. Comparing…


I wasn’t hyped that much for a long time. But in my opinion, something big is coming. Folks behind Snowpack and Skypack presented a little sneak peek of what they are currently working on. You can see the full video here:

What is Astro?

Yet, another framework for building sites. But this one is different. The first thing, Astro using opt-in hydration. So when you want to use javascript on your site you need to explicitly set that you are using it. It’s not like Vite, SvelteKit, or Next.js. It’s more like Eleventy with first-class support for using your client-side code.

How does this work?

Astro compiles…


Photo by Ferenc Almasi on Unsplash

React Query is a library for fetching data from API. Is performant, manages fetched data, and what is the most important is backend agnostic — you can use it with REST or GraphQL APIs. But what about where you didn’t have API at all. Did you ever wonder “Can We use react-query when I don’t have API?”.

Marcin Skrzyński

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