DEV Community: Oski Dev

Data ethics in AI 🤖

Oski Dev — Mon, 06 Nov 2023 18:44:31 +0000

I'm currently reading about data ethics in AI and I'm coming to the conclusion that black men and black women are at a disadvantage. Data bias is significant and has been prevalent for various reasons, likely to persist for a long time.
What are your thoughts on this? Should we use biased systems that essentially dictate our lives, knowing about this issue? Do you think we can control or mitigate this?
I'm curious to hear your opinion. 🤔

Linksooon - Save. Share. Browse. All the amazing links.

Oski Dev — Tue, 17 Oct 2023 14:01:11 +0000

Hi, I would like to present the beta version of the application I created last time. I hope you will find it useful and I would appreciate any feedback and tips on what I should improve. 😋

Linksooon is designed to help you organize, share, and explore links in a way that keeps you updated and informed.

The main goal of the Linksooon application is to empower users to share interesting and useful links that they discover and want to save. At the core of this experience is the concept of Linksooon Points, which plays a pivotal role in making link sharing more rewarding and engaging.

Starting with 20 Linksooons (points): When you join Linksooon, you kick off your journey with a gift of 20 Linksooons.

Cost of Saving a Link: Saving a link to your collection costs you 1 Linksooon.

Earning Points by Sharing: Each time you share a link with the Linksooon community by changing its status to "published," you earn 2 Linksooons. This means the more you contribute and share valuable content, the more points you accumulate!

These points not only reflect your engagement within the platform but are also part of a bigger plan. I'm collecting data on the total points earned by users to explore opportunities for enhancing the application with exciting new features in future updates.

Note that Linksooon is currently in beta. This means that the platform is evolving and user feedback is invaluable. Feel free to write suggestions in the comments.

And most importantly, here is the link: https://linksooon.vercel.app/ 🚀

Next.js 13 special files, data fetching and head tag — page, layout and template

Oski Dev — Wed, 01 Mar 2023 16:34:45 +0000

Before we start, note that by default components in Next.js 13 are Server Components. This roughly means that you can't use client side effects and actions like useEffect, useState, onClick, etc. You can make component client side by adding "use client"; directive on top of the component over the imports.
Server Components also improve performance by reducing the amount of JavaScript sent to a client, make it easier to fetch data, are better for SEO because search engine bots can easily access the HTML content of the page, and don't need to wait for client-side code execution.

If you want to know the basics of the routing and app directory, you can visit the previous article.

Pages

The most important file in the new app directory is the page. This is because the page file makes the route publicly accessible.

You create page by exporting the function as default from the page.tsx file like in the example below. You can call the function whatever you want.

Layouts

In layout.tsx, you create a UI that is shared between multiple child pages. So you can create a UI for /company/about and this layout will be applied to all pages under route /company/about/*, but not for siblings routes like /company/career.
You can create a layout at any level of the route.

On navigation, layouts preserve state, remain interactive, and do not re-render.

You can create a layout by exporting the function as default from the layout.tsx file.
Note that the top-most layout function is called RootLayout, any other layout you can call as you want. In the example below you can see RootLayout which is required.

In root layout you should include html and body tags.

Any other layout can look like this (layout for /about page)

You can wrap the children in whatever you want.
Each layout accepts the children prop that will be populated with child layouts and pages.

Templates

Templates are similar to layouts, they also wrap each child layout and page but templates create a new instance for each of their children as they navigate, as opposed to layouts that persist on routes and preserve state.
This means that if you navigate between routes that share a template, DOM elements are recreated and new instance of the component are mounted.
You can create a template just like a common layout.

Note that if you don't have a specific reason to use template, you should use layout. Templates may be useful for cases like:

Enter/exit animations using CSS or animation libraries.
Features that rely on useEffect (e.g logging page views) and useState (e.g a per-page feedback form).
To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.

Data fetching

Pages and layouts like other components can fetch data. Because of the new Server Components, fetching data in Next.js 13 became really handy and have a lot of advantages.

You can also fetch data in Client Components. Libraries such as SWR or React Query are recommended in Client Components. (In the future it'll be also possible using use() hook).

You can access the new data fetching system using native fetch() Web API, and use async/await in Server Components.

You can fetch data in multiple components, Next.js 13 will automatically cache requests (GET) that have the same input in temporary cache. This way you avoid situations in which the same data can be fetched more than once. It is useful for fetching data in layouts because it's not possible to pass data between parent layout and its children. Just fetch data directly inside the layout that needs it, and Next.js 13 will take care of caching and deduping requests.

Two data fetching patterns

parallel data fetching - if you don't have one query dependent on the previous one, you can use parallel data fetching. This reduces client-server waterfalls and the total time it takes to load data, because requests in a route are eagerly initiated and starts fetching at the same time.
sequential data fetching - if you have one query dependent on the previous one you can use sequential data fetching. This can lead to longer loading time but it is useful in cases where one fetch depends on the result of the previous one.

If you want to know more about data fetching patterns visit Next.js 13 documentation.
If you want to expand your knowledge in general about data fetching in Next.js 13 here is the link.

Modifying head tag

One more thing you should know is a new way of modifying head tag.

If you use static values in head tag:

If you use dynamic data in head tag:

That's all in this article. If you want to expand your knowledge, check out the documentation.
I hope you enjoyed! 🚀

Next.js 13 - app directory & routing

Oski Dev — Wed, 22 Feb 2023 19:22:17 +0000

In this article I will introduce you to new app directory and new routing system in Next.js 13.

New routing system works in new app directory. At the same time you can work in the new app and old pages directory but important to know that routes across directories should not resolve to the same URL path. This may lead to errors.

You can also collocate your own various files inside folders (components, tests, stylesheets and more)

Component hierarchy within folder

Image from next.js 13 docs. https://beta.nextjs.org/docs/routing/fundamentals#component-hierarchy

Defining routes

To define the route (single path of nested folders) you use folders. Files in folders are used to create UI that is shown for the route segment. As I mentioned in a previous article, the page.js file makes the path publicly available.

Good to know that you can also use .jsx and .tsx extensions for special files. Next.js 13 supports typescript out of the box!

In the following examples, I will use typescript.

To create home page, create page.tsx file in the app directory and export the function. You can call the function whatever you want.

Now you can visit http://localhost:3000/

To create nested routes you create new folder called about inside app directory. In about folder create page.tsx file to make the path publicly accessible.

Now you can visit http://localhost:3000/about

Remember that you can create other files in folders but only page.tsx makes path accessible.
I will introduce you to other special files in future articles.

Route groups

With route groups, you can create folders in the app directory without affecting the URL.
You can create route groups by wrapping a folder's name in parenthesis: (folderName).

Route groups can be used to:

organize routes without affecting the URL structure
opting-in specific route segments into a layout
create multiple root layouts by splitting your application

Simple example from next.js 13 documentation:

Image from next.js 13 docs https://beta.nextjs.org/docs/routing/defining-routes#example-organize-routes-without-affecting-the-url-path

Note: you can create different layout for each route group.
Note: any route segment can optionally define its own layout. Layouts are shared across all pages in that segment. You can create layout only for shop routes group by adding layout on top of the shop group.

Image from next.js 13 docs. https://beta.nextjs.org/docs/routing/defining-routes#example-opting-specific-segments-into-a-layout

Routes inside route group shouldn't resolve to the same URL, so you can't have about folder inside (marketing) route group and inside (shop) route group.

Dynamic segments

If you want to create routes from dynamic data, and you don't know the names of the routes, you can use dynamic segments.
Dynamic segments are filled during request or pre-rendered at build time.

To create dynamic segment, wrap folder's name in square bracket: [folderName]. Dynamic segments are passed as the params prop to layout, page, route and generateMetadata functions.

In the following example, I created dynamic segments for blog posts that I don't know the name of.

Now, you can visit http://localhost:3000/blog/nextjs13 and you should see:
Blog with id: nextjs13

That's all in this introduction to routing in Next.js 13. I hope that you can better understand basics of new routing and the app directory.

If you want to know more about, for example Catch-all Segments or if you want to expand your knowledge, I recommend Next.js 13 documentation.

One more important thing: By default, components inside the app directory are Server Components. I will write more about Server Components later.

Thanks for reading!

Next.js 13 — introduction

Oski Dev — Thu, 16 Feb 2023 16:55:50 +0000

Hi! In my second article I want to introduce you to Nextjs 13. This article aims to present the most important things introduced in Next.js 13. In the following articles I will expand every topic.

So what’s new in Next.js 13?

app directory —instead of a pages directory, we can now use the app directory with new routing system
page.js — creates UI of a route and makes a path publicly accessible
layout.js — UI that is shared between multiple pages
template.js — templates are similar to layouts in that they wrap each child layout or page but I will expand on this topic later
loading.js — creates loading UI
error.js — define an error UI boundary for a route segment
not-found.js — creates UI to show when UI for the path is not found
route.js — creates server-side API endpoints for a route (available in next@canary).
Server components — components by default are server components
Next/font — self-hosted fonts with zero layout shift
New next/image — faster with native browser lazy loading.
Improved next/link — simplified API without “a” tag inside

These were the most important things introduced in the new version of Next.js. In the next article I will explain the basics of app directory and routing system.

What means true positives?

Oski Dev — Mon, 13 Feb 2023 20:28:23 +0000

Hello! This is my first post ever and I am not an English speaker so I apologize in advance for any mistakes.

Let me start from a little introduce of myself. I’m Junior Frontend Developer at startup. In my spare time, I read about machine learning/data science and this is the topic of this post.

I was looking for answer to what are true positives, true negatives, false positives and false negatives. I found something with a little help of Google and chatGPT. I decided to write about it because I can better understand it and help you at the same time.

So I found that:
True positive - this means that the model has classified a given unit as positive and indeed it is positive
True negative - this means that the model has classified a given unit as negative, and indeed it is negative.
False positive - this means that the model has classified a given unit as positive, and indeed it is negative.
False negative - this means that the model has classified a given unit as negative, and indeed it is positive.

These concepts are used to evaluate the effectiveness of classification models and are important when interpreting the results. Many measures of model quality, such as accuracy, sensitivity and specificity, are based on these concepts.

But now you can ask: What does it mean that a given unit is positive or negative?

An entity can be described as negative or positive depending on whether it meets a given criterion

Good example is a model that classifies emails as spam or non-spam.
In this case, the unit (email) can be marked as positive if it is spam, or negative if it is not spam.

And this is it! I hope I helped you understand it better.
I would appreciate any feedback 🥳