DEV Community: Bogdan Aksenov

Notion UI React

Bogdan Aksenov — Sun, 26 Feb 2023 17:34:59 +0000

I really like using Notion to store my information in a structured way, including my resume.

Recently, I wanted to create a portfolio site for myself that included information about me, additional links, and some blocks that would only be available to me. For a long time, I couldn't decide on the ideal design for my site. I looked at my Notion page and tried to envision it on my website. Eventually, I realized that I wanted it to look exactly the same and began coding my site by looking at the CV page in Notion.

During the creation process, I divided repetitive UI components such as headings and text, among others. I decided to use them as a third-party resource.
I thought it would be cool to create a UI library out of them and publish it. Perhaps others also love the Notion design system as much as I do 😀

This is how the idea came about, and now I want to briefly introduce it to you:

Notion UI React - npm | git

Storybook
Those who know what Storybook is can immediately jump to the link provided. For those who don't know, they might find it interesting too 😊

Now, I would like to give you a demonstration of one of the pages from my portfolio site:

Website

Everything is built using the components of the Notion UI React library. I really love its clean and minimalistic interface and will continue to update the library and include more components.

If anyone is interested, I would be happy to accept pull requests to add new functionality.
Thank you!

Boost your programming with ChatGPT3

Bogdan Aksenov — Mon, 09 Jan 2023 22:56:40 +0000

The buzz about ChatGPT3 may have quieted down, but that hasn't stopped me from incorporating it into my work. In fact, since its release, I've found myself turning to ChatGPT3 more and more to boost my skills and increase my productivity. And I'm not the only one - many other developers have discovered the benefits of using ChatGPT3 in their work. In this article, I'll share my experiences with ChatGPT3 and how it has helped me take my programming to the next level.

In this article, I'll share my experience with ChatGPT3 and how it has helped me take my programming to the next level.

While ChatGPT has certainly made waves in the programming world with its ability to write code for everything from websites to games, it's not quite at the point where it can completely replace human developers - yet. However, that doesn't mean it can't be a valuable tool for enhancing the skills and productivity of novice and experienced developers alike. In this article, we'll explore the current capabilities of ChatGPT and how it can be used to augment the work of human developers.

ChatGPT3 has a ton of features, but let's focus on the ones that are already being actively used by developers today:

Increased efficiency: ChatGPT3 can help automate tasks that would otherwise be time-consuming for a developer to do manually. For example, it can generate code snippets or complete small projects on its own. This can help developers save time and increase their productivity.
Improved accuracy: ChatGPT3 can help reduce the number of errors in a program by suggesting corrections and improvements. This can help ensure that the code is of higher quality and more reliable.
Enhanced creativity: ChatGPT3 can stimulate the creative process by generating new ideas and approaches for solving problems. This can help developers come up with innovative solutions to challenges and push the boundaries of what is possible with code.
Greater flexibility: ChatGPT3 can be used to work on a wide range of programming languages and projects, making it a versatile tool for any developer.
Increased scalability: ChatGPT3 can help developers handle larger and more complex projects more easily by offloading some of the workload to the AI. This can help them take on more projects and grow their business or organization.
Cost savings: ChatGPT3 can help reduce the cost of certain programming tasks by automating them, potentially leading to cost savings for a company or organization.
Personal tutor: ChatGPT3 can be a great help for novice developers to explain complex concepts and explain how someone else's code works.

As a mid-level developer, I often turn to ChatGPT3 for guidance on how to make my code more efficient, readable, and aesthetically pleasing. Whether I'm struggling with a particularly tricky function or trying to squash a pesky bug, ChatGPT3 is a valuable resource that provides a fresh perspective and helps me find solutions faster. In fact, I've even had ChatGPT3 point out bugs that I had overlooked, which has saved me a lot of time and frustration. It's truly amazing how this artificial intelligence tool can enhance my work as a developer.

I took my love for ChatGPT3 to the next level by creating an extension for my go-to IDE, Visual Studio Code. Now, I can easily access ChatGPT3's capabilities right from within my editor and streamline my workflow even further.

Whether I'm writing code, generating documentation, or troubleshooting problems, this extension makes it a breeze to take advantage of ChatGPT3's powerful artificial intelligence. And the best part?

I'm not the only one who can benefit - anyone can install this extension and start using ChatGPT3 to enhance their programming skills.
If you are interested, you can find it at this VS Code Marketplace

I will briefly tell you how you can use it:

Generate your OpenAI API Key and insert it into the extension settings via cmd+shift+p → DevGPT: Set API KEY
Select any code, open the context menu with the right mouse button, and choose the desired option from the list
See the result of ChatGPT3's answer in a new window in markdown format (bonus tip: install an additional extension for a convenient preview of md files)
Give the extension a 5-star rating and let ChatGPT3 revolutionize your programming!

Commands:

Result:

In fact, to publish this extension, I decided to go even further and generate an icon for it using Midjourney, and this is the result:

When creating the logo, I already knew that I wanted to write this article and decided at the same time to generate an image for the cover, slightly correcting it, what you saw in the title of the article turned out 😃

You know what's really cool? This entire article was written with ChatGPT3's help. That's right - from start to finish, ChatGPT3 was by my side, assisting me with everything from crafting catchy headlines to organizing my thoughts and ideas. And the best part? The result is a well-written, engaging piece that I'm proud to share with you.

So here's to ChatGPT3 - the ultimate tool for making my writing (and my work as a developer) better than ever. Cheers!

Telegram Web Apps (Reopening last page)

Bogdan Aksenov — Sat, 02 Jul 2022 00:16:56 +0000

On April 15, the telegram team gave us the opportunity to develop web bots.

Now, interaction with bots has become very interactive, as we have the ability to integrate full-fledged web applications into bots.

In the process of developing a web app bot, I ran into a problem that after closing the web app interface and reopening it, we lose the last link on which the user was, and the web application opens from the main page.

At first, this may not seem like a problem, but it's actually very easy to accidentally close the web window, since it doesn't open to full screen, and to close it, just drag it down, and we lose all the previous state of the application.

In my application I use React, mobX and React Router Dom v6. The first thing that comes to mind is to subscribe to navigation changes and store the last value in localStorage or cookies, I chose cookies, with a lifetime of 10 minutes.

Let's look at the code.

Create location-provider.tsx

import React from "react"
import { useLocation, useNavigate } from "react-router-dom"
import Cookies from "js-cookie"

interface LocationProviderProps {
  children: React.ReactNode
}

const LocationProvider: React.FC<LocationProviderProps> = ({ children }) => {
  const location = useLocation()
  const navigate = useNavigate()

  React.useEffect(() => {
    const currentLocation = Cookies.get("location_app")
    if (!currentLocation) return
    navigate(currentLocation)
  }, [])

  React.useEffect(() => {
    const tenMinutes = new Date(new Date().getTime() + 10 * 60 * 1000)
    Cookies.set("location_app", location.pathname, {
      expires: tenMinutes,
    })
  }, [location])

  return <>{children}</>
}

export default LocationProvider

Import it into App.tsx and wrap our routes

import React from "react"
import { BrowserRouter, Route, Routes } from "react-router-dom"
import LocationProvider from "providers/location-provider"

import { AppsPage } from "./pages/apps"
import { DevelopersPage } from "./pages/developers"
import { FavoritesPage } from "./pages/favorites"
import { SearchPage } from "./pages/search"

function App() {
  return (
    <BrowserRouter>
      <LocationProvider>
        <Routes>
          <Route index element={<AppsPage />} />
          <Route path="/apps" element={<AppsPage />} />
          <Route path="/apps/:appId" element={<AppDetailPage />} />
          <Route path="/favorites" element={<FavoritesPage />} />
          <Route path="/search" element={<SearchPage />} />
          <Route path="/developers" element={<DevelopersPage />} />
        </Routes>
      </LocationProvider>
    </BrowserRouter>
  )
}

export default App

Great, now after closing and opening the web application, the last page will open, but!

There is a problem here, this is that if, when the application is open, go to another page through the URL input line, we will be redirected back.
But web bots do not have an address bar, so you can stop there?

Yes, if this is enough for you, then it will work in web bots. But you will have concerns opening your web application outside of web bots, for example you have an online store, you would like to interact with it in telegram web app and just as a web application available at the address, what then?

We think further, in the DOM API, the window object has an event onbeforeunload, it seems that this is what we need, we will save the last URL before closing the web application, we try.

Update our location-provider.tsx

import React from "react"
import { useLocation, useNavigate } from "react-router-dom"
import Cookies from "js-cookie"

interface LocationProviderProps {
  children: React.ReactNode
}

const LocationProvider: React.FC<LocationProviderProps> = ({ children }) => {
  const location = useLocation()
  const navigate = useNavigate()

  React.useEffect(() => {
    const currentLocation = Cookies.get("location_app")
    if (!currentLocation) return
    navigate(currentLocation)
  }, [])

  React.useEffect(() => {
    window.onbeforeunload = (e: BeforeUnloadEvent) => {
      e.preventDefault()
      const tenMinutes = new Date(new Date().getTime() + 10 * 60 * 1000)
      Cookies.set("location_app", location.pathname, {
        expires: tenMinutes,
      })
    }
  }, [location])

  return <>{children}</>
}

export default LocationProvider

We try to walk around the application through the address bar, there is no redirect back, excellent, the link is also saved when closing the tab with the application, which is what we wanted!
We try in telegrams, bam, and here it doesn’t work at all, why?

The fact is that telegram opens a browser window in the so-called WebView, I'm not strong in developing mobile applications, but I know that this thing allows you to open a browser inside mobile applications, but they have their limitations and this is just one of them.

What then? An splendid solution would be to return to the first option, but enable caching only for telegram web app.
Let's take a look at what we got.

import React from "react"
import { useLocation, useNavigate } from "react-router-dom"
import Cookies from "js-cookie"

interface LocationProviderProps {
  children: React.ReactNode
}

const LocationProvider: React.FC<LocationProviderProps> = ({ children }) => {
  if (!window.Telegram.WebApp.initData.length) {
    return <>{children}</>
  } else {
    return <LocationProviderInner>{children}</LocationProviderInner>
  }
}

const LocationProviderInner: React.FC<LocationProviderProps> = ({
  children,
}) => {
  const location = useLocation()
  const navigate = useNavigate()

  const redirectToLastPage = () => {
    const currentLocation = Cookies.get("location_app")
    if (!currentLocation) return
    navigate(currentLocation)
  }

  React.useEffect(() => {
    if (location.key === "default") redirectToLastPage()

    Cookies.set("location_app", location.pathname, {
      expires: new Date(new Date().getTime() + 10 * 60 * 1000), // 10 min
    })
  }, [location.key])

  return <>{children}</>
}

export default LocationProvider

Now, caching will work for us only if the application is launched from the web bot's telegram.

Thanks for reading!