teleren/devto huggingface dataset:
No need of memorizing, searching on google or save git commend in your notepad for beginners.
Published: 2023-07-30 16:07:47

If you are a beginner in web development git and github is one of the challenges you will face in personal projects,group projects and production project for a real clients.

## Confusion Stage

1. . 1 How do i wrap my head around git and github?
First answer that will come in your mind after learning git and github from paid courses,bootcamp and youtube is i will make a folder,file and save all the git commends i will be needing as a developer on a daily bases.

1. 2 How can i master git commends like others?
Another answer that will come to your mind is to spend time trying to memorize git commends.

1. 3 How can i be fast to commit my task in the code base after i have finished it already but is still in my pc and is working well?

1. 4 Oh! no how can i meet up with the deadline people are complaining they have not see my task yet?.

1. 5 I want to try open source project but my worry is that they are senior developers who knows git commends because their is alot of heavy lifting via git and github it will slow down my pc.

1. 6 How can i work with different frameworks within some minutes or hours intervels without my system breaking down?.

If that is your case rejoice!!! 
We got you in your time the process is simplified  "GITHUB DESKTOP" is the answer.
click here:  https://desktop.github.com/

How do i use github desktop  ?
please watch this video for step by step guide: https://www.youtube.com/watch?v=RPagOAUx2SQ&t=20s

Also watch this video for quick recap: https://www.youtube.com/watch?v=8Dd7KRpKeaE

Have fun,join any project with confidence and enjoy the power of what you can do on time like others.
Where to put constants in a .vue file
Tags: vue, javascript, webdev
Published: 2023-07-30 16:01:53

I often end up wishing there was a `constants` section in Vue, like `data` or `methods`. But something that useful will never be added into the framework, so instead I [made a plugin](https://github.com/TheJaredWilcurt/vue-options-api-constants-plugin) to add it myself.

But lets explore the problem the plugin solves first:

```js
import {
  A_CONSTANT_VALUE,
  ANOTHER_VALUE
} from '@/helpers/constants.js';

export default {
  data: function () {
    return {
      A_CONSTANT_VALUE,
      ANOTHER_VALUE
    };
  }
};
```
This isn't great, because `data` is for reactive values that can be changed, and constants shouldn't be changed. The same problem happens if you return the constants from a `setup` function. So instead I could put them in `computed`, like so:
```js
import {
  A_CONSTANT_VALUE,
  ANOTHER_VALUE
} from '@/helpers/constants.js';

export default {
  computed: {
    A_CONSTANT_VALUE: function () {
      return A_CONSTANT_VALUE;
    },
    ANOTHER_VALUE: function () {
      return ANOTHER_VALUE;
    }
  }
};
```
However, that ends up with a lot of boilerplate. So to get the best of both worlds, I created a Vue plugin to automate away all of that boilerplate.

## Here's what the plugin lets you do

```js
import {
  A_CONSTANT_VALUE,
  ANOTHER_VALUE
} from '@/helpers/constants.js';

export default {
  constants: {
    A_CONSTANT_VALUE,
    ANOTHER_VALUE
  }
};
```
The plugin then runs the following code in every component during the `beforeCreate` lifecycle hook.
```js
// Checks if the component is using the Options API and
// has a constants section
const constants = this.$options.constants;
if (constants) {
  // Create a computed property for each constant
  const computeds = {};
  Object.keys(constants).forEach(function (constantKey) {
    computeds[constantKey] = function () {
      // Freeze all non-primitives
      return Object.freeze(constants[constantKey]);
    };
  });
  // Add the computed constants to the computed
  // properties in the current component
  this.$options.computed = {
    ...this.$options.computed,
    ...computeds
  };
}
```

There is one downside to this approach, some IDEs/Editors will let you `ctrl+click` to go from the constant in the template to its definition in the script. This breaks that functionality. Though it should be possible to allow for it, I'm just not familiar with how. So if you know how, then create a PR to improve the plugin.

Here is the plugin, so you too can use this solution:

https://github.com/TheJaredWilcurt/vue-options-api-constants-plugin

Tell your friends. Let's get this to be a normal part of Vue.
Inside PostgreSQL #1
Tags: postgres, database
Published: 2023-07-30 15:44:04

This article will be the first of a series of posts where we'll be learning about the PostgreSQL database and its internals. I admit that this is quite a vast topic, but I'm on a journey to learn it, and this series is a concise version of what I've learnt (Be my guest).

Before we begin this long adventure, it is beneficial to answer the question, "Why study the internals of PostgreSQL?"

## 10,000 Reasons
Having no thought, we all know the topic of database internals is not negotiable for those who are/aim to be database developers. An understanding of how databases work is paramount in the development of a database. Creating improvements to existing databases will also require understanding how it works presently.

What about those who aren't database developers? Maybe you're a developer who has to deal with databases (and most do), or perhaps a database administrator. In the dynamic world of databases, you will stand an advantage by knowing the trends. It will increase your understanding of the peculiarities of the different databases and aid the decision process of which one better suits your business needs. 

Also, understanding the underlying infrastructure of databases will enable you to track down performance issues and optimise queries. 

## Conclusion
Although studying databases can be intimidating at first, learning it benefits the hobbyist, student, software developer, or database developer.
AgensSQL - Bitnine Global Inc
Tags: bitnine, apacheage, agenssql, agensgraph
Published: 2023-07-30 15:43:17

## Introduction

AgensSQL: an integration of Bitnine’s DB technology and PG expertise, is an all-new relational DBMS based on PostgreSQL, with years of expertise and knowledge accumulated through database research and development.

## Agens Enterprise Package:
### Usability
#### AEM (Agens Enterprise Manager)
- DB Operation/Management (Monitoring Dashboard)
- SQL Edit/Execute/Inquiry (HA & Extension Management)

### Scalability
#### AgensSQL Extension Server
- AHM (Agens HA Manager)
- Load Balancer (Backup/Restore)
- Data Sharding

### Stability
#### AgensSQL DB Engine
- PostgreSQL 12 (Data Security)


![Image Showing Architecture of Agens Enterprise Package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emf5jp2r1qpn865soseu.png)

## Key Features
﻿Manage your data with Agens Enterprise Package Essential enterprise features such as high availability and sharding are provided

### Data Security
Various security features are added to ensure security and stability of data.

### High Availability
In the event of main system failure, the standby server minimizes downtime by restoring the system.

### Monitoring
Monitoring dashboard views overall status of the DB such as query analysis, operating environment status, database audit, etc.

### Data Sharding
Distribute a single dataset across multiple databases, increasing the total storage capacity of the system.


![Image showing key features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgl9yd9gxovbxx9035te.png)

## Downloads
- [Download Section of Bitnine Global](https://bitnine.net/agensgraph-downloads/)

## Also Visit Apache AGE
- [Official Site](https://age.apache.org)
- [Apache AGE Github Repo](https://github.com/apache/age)
Daily Blog #1
Tags: dailyblog
Published: 2023-07-30 15:34:29

Today onwards I'm planning to start write blog on daily basis. I don't know how much this daily blog lasts but I will try to keep it updated. The main motive for writing this is to improve my skills like writing, English etc. I'm an developer who develop some projects based on the area which I studied. Now I'm building an protfolio website to showcase my projects and works, currently I'm on it's building stage. I will be deploy soon ... That's all for today, I think this will be an great start for my daily blog.
Migrate React project from create-react-app to Vite.js
Tags: react, vite
Published: 2023-07-30 15:30:31

Recently I had to replace create-react-app with Vite.js in one project at work. This is a thread of what I did to make that work:

## Remove CRA & install Vite.js

This is pretty straight-forward, I uninstalled CRA and installed Vite.js packages. I followed an example for react-ts available at Vite documentation[^1].

## Add support for tests (Jest, React Testing Library)

That one was tricky, but thanks to 2 articles[^2] [^3] on Medium (I will link to privacy-friendly versions) I managed to run tests.

## Vite config

95% of config was easy to set up, the only thing I had to search online was how to force Vite into using HTTPS with some sort of certificate. It was possible with vite-plugin-basic-ssl[^4].

## All set up!

It took me about an hour to set up Vite.js into desired configuration to allow that specific React+TypeScript project into running. I hope it will also help you to kickstart your migration CRA => Vite.

[^1]: https://vitejs.dev/guide/#trying-vite-online
[^2]: https://scribe.rip/quick-jest-setup-with-vitejs-react-typescript-82f325e4323f
[^3]: https://scribe.rip/how-to-setup-jest-and-react-testing-library-in-vite-project-2600f2d04bdd
[^4]: https://github.com/vitejs/vite-plugin-basic-ssl
Solving the "session store not found" error while testing handlers in Echo
Published: 2023-07-30 14:57:27

Just a quick tip to make the solution for this easier to find. If you're having this problem, you most likely have code similar to this in your test:

```go
e := echo.New()
e.Use(session.Middleware(sessions.NewCookieStore([]byte(sessionKey))))
c := e.NewContext(req, resp)
sess, err := session.Get("user-session", c)
```
And your call to `session.Get()` returns the "session store not found" error. Here's what the source code for `Get()` looks like:

```go
const (
	key = "_session_store"
)

// Get returns a named session.
func Get(name string, c echo.Context) (*sessions.Session, error) {
	s := c.Get(key)
	if s == nil {
		return nil, fmt.Errorf("%q session store not found", key)
	}
	store := s.(sessions.Store)
	return store.Get(c.Request(), name)
}
```
Your call to `Get()` throws an error because `Get()` checks the context you pass to it for the `session_store` key, but the context returned by `e.NewContext()` is completely blank, unlike the context echo passes to your handlers when serving HTTP requests. 

To solve the error, before you make any calls to `Get()` you need to set a cookie store on the context returned by `e.NewContext()` with the key `_session_store`. 

You can do that like this:
```go
e := echo.New()
c := e.NewContext(req, resp)
c.Set("_session_store", sessions.NewCookieStore([]byte(sessionKey)))
sess, err := session.Get("user-session", c)
```

And that will take care of the error.
Is Stack Overflow toxic?
Tags: webdev, beginners, programming, discuss
Published: 2023-07-30 14:56:20

Stack Overflow, the largest Q&A platform for programmers, has become an indispensable resource for developers worldwide. However, over time, the platform has also gained a reputation for being "toxic."
Many users have concerns about the platform's harsh criticism, aggressive downvotes, and sometimes unwelcoming atmosphere. Not only that, there is this competition for reputation points that can lead to a sense of superiority, discouraging newcomers or less-experienced users from fully engaging with the community.

> Do you believe Stack Overflow is toxic?
D7 #100DaysOfOSS
Tags: 100daysofcode, 100daysofoss, programming, opensource
Published: 2023-07-30 14:41:01

D7 #100DaysOfOSS with #saucedopen

Created an HTTP server for a TODO application, defined GET & POST endpoints, and tested them using Postman API. Explored Middleware and bodyParser, understanding their significance.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25ix14t65unkkwubzpns.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vnhi6d66aneksj6rfhu.png)

#100DaysOfCode #opensauced #OpenSource
Control rc car using raspberry pi (Part 1 : Introduction)
Tags: beginners, raspberrypi, python, unity3d
Published: 2023-07-30 14:39:21

This is my first post on Dev.to. I want to write about my last fun project for my kids.

This project was started as learning opportunity and to reuse some old staff, and both goals have been achieved.

The old staff reused in this project are:
- A raspberry pi 4 that I was using as a [kodi](https://kodi.tv/) server.
- A sheep non-working rc car.

What to learn from this project:
- Build a minimal webserver using [bottle.py](https://bottlepy.org/docs/dev/), to receive commands from a smartphone.
- Setup the python script as service that run at startup, using systemctl.
- Build a minimal controller app for a smartphone, using [Unity](https://unity.com/products/unity-engine). (the app uses the smartphone accelerometer or gyroscope to control the car direction).
- Wire up raspberry pi gpio to a motor driver to control the two motors of the car.

And let's go, this is the final result:

![The final result of the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkb8br8ilj32r22tzabo.gif)
**More details in the next parts.**
Native Splash Screen in Flutter
Published: 2023-07-30 14:16:56

One of the thing that I experienced while building flutter application is a white blank screen that appears when an application starts. To me is very annoying and I do known that it does not bring good user experience. This can be frustrating for users and can make your app feel unprofessional.  

But the good news is that you can remove the blank white screen and display an image or logo just like other apps that we use in our daily activities.

In this article we will be using a package known [flutter_native_splash](https://pub.dev/packages/flutter_native_splash) to display a custom splash screen when our apps starts.

**What is a Splash Screen?**

A splash screen in mobile applications is a graphical element that appears when you launch the app. It is usually displayed for a short period, typically a few seconds, while the app is loading its core components and initialising necessary resources in the background. Splash screens serve as an initial branding or introductory screen for the app, providing a smooth and visually appealing transition from the app launch to the main user interface.

**Add flutter_native_splash package in our project**

Add flutter_native_splash as dependency to your Flutter project.

You can do this by adding the following line in `pubspec.yaml`

```
dependencies:
  flutter_native_splash: ^2.3.1
```

And then run `flutter pub get`

**Setting up Splash Screen**

First thing is to add an image that we want it to appear in our splash screen, this can be a logo or any image.

Also do not forget to add the following line is your `pubspec.yaml` file.

```
flutter:
    assets:
        - assets/
```

This will tell Flutter where it can find our images

Now let's start the coolest part

You need to configure flutter_native_splash to use the image for the splash screen.

Inside you're `pubspec.yaml` add flutter_native_splash with following configuration

```
flutter_native_splash:
  # Background color of splash screen
  color: "#ffffff"
  # Image that you want to show
  image: assets/splash.png
  # Sizing of image
  fill: true
  # Splash Image to show in dark mode (Optional)
  image_dark: assets/splash_dark.png
  # Background color of dark mode (Optional)
  color_dark: "#000000"
```

Also make sure you do not add this configs under flutter section.

But wait!!! one more step.

Run the following command so that flutter_native_splash package can do it's magic 🪄

`flutter pub run flutter_native_splash:create`


And that's it, now your user will have an amazing experience when they click your app 🥳.
The Easiest way to install Docker Engine on a Linux Server
Tags: docker, ubuntu, linux
Published: 2023-07-30 14:03:54

If you're working on a local machine, you can easily download and [install Docker Desktop](https://www.docker.com/products/docker-desktop/) for your operating system - Windows, Mac or even Linux Desktops these days.

However, if you're someone like me who does most of the work on the Cloud, or to be specific, remote environments, this may not be the right choice for you.

![A man screaming "IT IS IN THE CLOUD". It's a meme, fellas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kgqvovf70cybuasw3q9.png)

Something that I discovered pretty late is that Docker, for quite some time, has had a super fast solution to install Docker Engine in Linux environments.

![Screenshot of the website get.docker.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb6wcj3df4h87dak3zcv.png)

If you check the website https://get.docker.com, you will find out that Docker maintains a script to install Docker Engine on Linux.

> As they mentioned, this method is not intended for production environments, which I assume anyway will be working with a specific Docker version.

The best part about this script is that you need absolutely no package managers to work with.

## Installing Docker using the Script

```bash
# Download the script
curl -fsSL https://get.docker.com -o install-docker.sh

# Run the script as it tries to figure out the type of Linux
# distribution it's dealing with and installs the latest CLI and Engine versions
sudo sh install-docker.sh
```

Simply running these two commands will install the latest version of the Docker Engine, its CLI and a few other tools/plugins like Compose, Buildx, etc.

## Run Docker without Root access


![Screenshot of the Permission Denied Error when you run docker commands without root access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7wk6wl3amncjku08cmu.png)

Now, if you run any docker command after installing, you'll probably come across a similar error. The quick solution to this is to run the same commands with *sudo*, but it has been fairly annoying to me. But there's also a quick 1-command fix to this.

```bash
sudo usermod -aG docker <USERNAME>
sudo reboot
```

![Screenshot of a working docker container ls command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0ureqqaigui45ojsz3r.png)


The flags `a` and `G` in the command are to add the user to a group, and just by running the command and rebooting your system, you can run *docker* commands without root access. Even though this requires one-time super-user access, I feel that it's definitely time-saving.

---

Thanks for reading, I hope you have a good day ahead :)
Kotlin Code Smell 24 - Tackling Too Many Attributes
Tags: kotlin, codesmells, cleancode, programming
Published: 2023-08-03 06:43:51

---
title: Kotlin Code Smell 24 - Tackling Too Many Attributes
published: true
date: 2023-07-30 14:00:12 UTC
tags: kotlin,codesmells,cleancode,programming
canonical_url: https://yonatankarp.com/kotlin-code-smell-24-tackling-too-many-attributes
---

## Problem

- Low Cohesion

- Coupling

- Maintainability

- Readability

## Solution

1. Identify methods related to specific groups of attributes.

2. Cluster these methods together.

3. Break down the original class into smaller, more focused objects based on these clusters.

4. Replace existing references with new objects.

## Examples

- DTOs

- Denormalized table rows

## Sample Code

### Wrong

```kotlin
class ExcelSheet (
    val filename: String,
    val fileEncoding: String,
    val documentOwner: String,
    val documentReadPassword: String,
    val documentWritePassword: String,
    val creationTime: LocalDateTime,
    val updateTime: LocalDateTime,
    val revisionVersion: String,
    val revisionOwner: String,
    val previousVersions: List<String>,
    val documentLanguage: String,
    val cells: List<Cell>,
    val cellNames: List<String>,
    val geometricShapes: List<Shape>,
)

```

### Right

```kotlin
class ExcelSheet (
    val fileProperties: FileProperties,
    val securityProperties: SecurityProperties,
    val datingProperties: DocumentDatingProperties,
    val revisionProperties: RevisionProperties,
    val languageProperties: LanguageProperties,
    val content: DocumentContent,

)

// The object now has fewer attributes, resulting in improved
// testability.
// The new objects are more cohesive, more testable, and lead to fewer
// conflicts, making them more reusable. Both FileProperties and
// SecurityProperties can be reused for other documents. Additionally,
// rules and preconditions previously found in fileProperties will be
// relocated to this object, resulting in a cleaner ExcelSheet
// constructor.

```

## Conclusion

Bloated objects know too much and are very difficult to change due to cohesion.

Developers change these objects a lot, so they bring merge conflicts and are a common problem source.

* * *

I hope you enjoyed this journey and learned something new. If you want to stay updated with my latest thoughts and ideas, feel free to register for my [**newsletter**](https://yonatankarp.com/newsletter). You can also find me on [**LinkedIn**](https://www.linkedin.com/in/yonatankarp/) or [**Twitter**](https://twitter.com/yonatan_karp). Let's stay connected and keep the conversation going!

* * *

## Credits

- [Code Smell 34 - Too Many Attributes](https://maximilianocontieri.com/code-smell-34-too-many-attributes) by [Maxi Contieri](https://hashnode.com/@mcsee)
YouTube homepage - REDESIGN
Tags: codepen, webdev, ui, css
Published: 2023-07-30 13:35:32

<p>YouTube Homepage redesign with the help of Grid layout. (For desktop & Tablet).</p>

<p>UI design  inspired by </p>
[Behance](https://www.behance.net/gallery/112293293/Redesign-For-Youtube-UI?tracking_source=search_projects_recommended|youtube+redesign)
<p></p>

{% codepen https://codepen.io/Smit29/pen/mdQQgwZ %}