teleren/devto huggingface dataset:
Handling error with React-Navigation
Tags: reactnative
Published: 2023-04-23 12:48:56

When using react-navigation in your React Native app, you may encounter HTTP status codes like 404 when navigating to a specific screen or route. Fortunately, react-navigation provides an easy way to handle these errors.

You can use the onError prop provided by react-navigation to handle HTTP status codes and other errors. This prop allows you to specify a function to be called when an error occurs during navigation.

Here's an example of how to handle a 404 error:

```
import { NavigationContainer } from '@react-navigation/native';

function App() {
  const handleNavigationError = (error) => {
    if (error.statusCode === 404) {
      // handle 404 error here
      console.log('404 error occurred');
    }
  };

  return (
    <NavigationContainer onError={handleNavigationError}>
      {/* Your navigation stack goes here */}
    </NavigationContainer>
  );
}

```
How to make folders show up again in Vscode left bar.
Published: 2023-04-23 12:12:44

Hi. For some reason, folders no longer show up on the left bar in VsCode. I've already uninstalled VSCode once but no success. How could I overcome this malfunction? Thanks in advance!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8chnl7jtf0da0qtd3be.png)
Function to Create New Directory and Jump Into it Immediately
Tags: linux
Published: 2023-04-23 11:58:25

I want to create command to create new directory and jump into it immediately and I found this solution. Just add `md () { mkdir "$1" && cd "$1" ; }` function to `.bashrc`. Oke this is my intruction.

Go to home directory

```
cd ~
```
Open and edit `.bashrc` file with vim or nano

```
nano .bashrc
```
Add function to end of command. Exit with ctrl+x y and enter

```
md () { mkdir "$1" && cd "$1" ; }
```

Reopen your terminal or restart it

```
exec bash -l
```
Now you can create new directory and jump into it immediately with

```
md directory_name
```

---
### reference
- [stackoverflow.com](https://stackoverflow.com/questions/14136635/one-command-to-create-and-change-directory)
- [unix.stackexchange.com](https://unix.stackexchange.com/questions/9123/is-there-a-one-liner-that-allows-me-to-create-a-directory-and-move-into-it-at-th)
- [askubuntu.com](https://askubuntu.com/questions/927463/how-can-i-have-mkdir-cd-into-the-newly-created-directory)
Hey! Introducing Myself
Published: 2023-04-23 11:39:30

Hello, my name is Josh, and I am a frontend web developer currently learning TypeScript & E-commerce in PHP. 

I have over 7 years experience working in the web development space both within teams and as sole developer, a computer science degree amassing a wealth of IT experience during this time. My passion for developing and delivering core ‘customer experience’ solutions that add ‘real value’ to the clients. I am a driven, diligent, highly motivated, hardworking & talented young IT professional.

Throughout my 7-year as a frontend web developer, I have had the opportunity to contribute to noteworthy projects for esteemed clients such as Dixons, RNLI, Ramsay Healthcare and Samsung.

I am highly motivated to seek out opportunities for collaboration where I can leverage my skills and expertise to drive impactful results.

As I continue on my journey to becoming a better developer, I hope to connect with fellow developers. I believe that collaboration and networking are essential to success, and I am excited to be a part of this vibrant community. There is still a lot for me to learn, but I am excited about the possibilities and look forward to what the future holds.

Josh
New tip for beginner react devs!
Tags: javascript, react, beginners, frontend
Published: 2023-04-23 11:27:19

If you are a frontend developer using react-app (CRA) cease and desist!
I recommend using vite 'npm create vite@latest myapp' and proceed. Additionally, you can use Next.js. Rest assured that works best. Here's why.

Both of them support server side-rendering, which is essential for SEO especially in highly competitive spaces which is not supported by CRA. CRA mainly focuses on the client's side being rendered which doesn't really help when it comes to SEO. Kindly note that to index your site, search engine web crawlers need to read from the server. Another advantage of this is the speed that comes with it. Try create similar react apps using CRA and another using Vite and see for yourself. 

Have a fantastic day!
Top 3 Figma AI Plugins You Should Try
Tags: figma, design, ai, designpatterns
Published: 2023-04-23 11:24:05

Surely every developer, designer (take and substitute any profession) wishes that there was something that did his job for him, and he would only get money. Unfortunately modern technology can not yet fully take over our work, but even what we have at the moment, not weakly so surprising.

In this article I will talk about 3 in my opinion the most interesting AI figma plugins that can save time and effort designers.

##Magician

![Magician](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1gv07xuagzaczk5d6pr.png)

###Includes:

- Magic Icon – Text to AI-generated vector icon
- Magic Copy – Generate AI-suggested copy
- Magic Image – Text to AI-generated image

##FigGPT
![FigGPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yc8kymy5mt39kyzfd18.png)

FigGPT is an AI plugin that enables users to improve their workflow in Figma, a design software application. The plugin is designed to connect ChatGPT technology to Figma, allowing users to compose and edit copy quickly and easily.

FigGPT offers several features such as summarizing, changing styles, generating tons of ideas, composing text from design contents, and populating components with sample data.

All of these features can be accessed by users with just one click. The plugin is available for free and can be installed in both Figma and Figjam, making it an excellent tool for designers of all skill levels.

##CraftAI 

![CraftAI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe0t779di0dldejn7utk.png)


CraftAI - Resume/Portfolio Writer.

####Features:

- Generate bullet points related to your role and experience
- Improve your portfolio by writing better UX case studies


##Thank you for reading!

If you're interested in staying up-to-date with the latest AI tools and trends in the design industry, be sure to follow me on social media. Don't miss out on the opportunity to enhance your design skills with the latest AI technology.
Rails 基礎 Part 00 -- asdf と ruby を動かす
Tags: rails, ruby, asdf
Published: 2023-04-23 11:23:16


# Ruby 3.2.2 をインストール

MacOS Intel Core で作業する。

---

## Ruby の安定版を公式サイトで確認

https://www.ruby-lang.org/en/downloads/

Ruby 公式で安定版を探す。
すると 2023-04 時点では 3.2.2 が安定版だと確認できた。

---

## **gitで** 言語管理ツールの asdf をインストール

https://asdf-vm.com/#/core-manage-asdf

こちらの asdf 公式サイトと

https://dev.to/kaede_io/kotlin-ji-chu-part-10-mac-de-openjdk-to-javahome-wodong-kasu-17k2

java をインストールしたときの自分の記事を参考にする。

```bash
git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.11.3
```

git で ~/.asdf を指定してダウンロードして

```bash
. "$HOME/.asdf/asdf.sh"
```

シェル起動時に ./asdf/ の起動スクリプトを読み込むようにする。

```bash
asdf list 
No plugins installed
```

シェルを再起動して、こうなれば成功。

---

### ❌ brew install asdf してはいけない理由

https://github.com/thoughtbot/dotfiles/issues/577#issuecomment-511902812

自分の環境で brew で入れた時、.asdf の設定ファイルがうまく生成できず、起動できなかった。

brew だとよく起こる issue のようだ。

インストール先の
/usr/local/Cellar/asdf/0.11.3 
ここに作ってしまっていると予想する。

よって git で入れるべき。

---

## asdf で ruby をインストールする

```php
asdf plugin add ruby

Receiving objects: 100% (5082/5082), 1.13 MiB | 10.35 MiB/s, done.
```

ruby を使えるようにする

```php
asdf install ruby 3.2.2
Downloading ruby-build...
Installed ruby-3.2.2 to /Users/kaede0902/.asdf/installs/ruby/3.2.2
```

ruby の 3.2.2 をインストール

```php
asdf local ruby 3.2.2

cat .tool-versions 
ruby 3.2.2
```

ruby の 3.2.2 がプロジェクトで動くように固定

```php
ruby --version
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.x86_64-darwin22]
re
ruby --version
ruby 3.2.2 
(2023-03-30 revision e51014f9c0) 
[x86_64-darwin22]
```

シェルを再起動して最新の ruby が動くようにする。
3.2.2 が読まれているのを確認できた

---

## ruby を対話シェルで試す

```ruby
kaede0902@V source % irb                                                 
irb(main):001:0> print "hello ruby.\n"
hello ruby.
=> nil                                                                                 
irb(main)
```

irb で Interactive RuBy が開く。
print が使える。
戻り値に nil が帰ってくる。null の代わり。特徴的だ。
Sharing Modules Across Different Applications: Dynamic Module Federation with Nx Workspace
Tags: webdev, angular, javascript
Published: 2023-04-23 11:20:10

_Module federation_ allows developers to share modules between different applications, enabling them to build more modular and scalable systems allowing different applications to share modules dynamically at runtime. 

_Dynamic module federation_ takes module sharing to the next level by enabling applications to load and unload modules dynamically.

The benefits of this approach include reduced code duplication and faster development cycles, making it an attractive option for developers to consider in their projects.

### Practical example using the Nx workspace

[Nx.dev delivers a practical example](https://nx.dev/recipes/module-federation/dynamic-module-federation-with-angular) of how to implement dynamic module federation in an Angular application using the Nx workspace. 

The tutorial on provides a step-by-step guide which the key steps are:

1. Create an Nx workspace and an Angular application within it using the Nx CLI.
2. Modify the `webpack.config.js` file to enable module federation and define the shared modules.
3. Define a `remoteEntry.js` file in the remote application to expose the shared modules.
4. Use the `loadRemoteModule` function in the host application to dynamically load the remote module.
5. Set up routing in the host application to load the remote module on demand.
6. Test the implementation by running the applications and verifying that the module is loaded correctly.

The first step involves creating an Nx workspace and an Angular application within it using the Nx CLI and installing the necessary dependencies.

In the second step, you need to modify the `webpack.config.js` and define the shared modules. Then, you configure _module federation_ in the `webpack.config.js` file by adding the `ModuleFederationPlugin` to the plugins array and define the shared modules by adding them to the shared object.

In the third step, you work on a file to expose the shared modules. This involves creating a `remoteEntry.js` file in the remote application's `src` directory and exporting the shared modules using the `__webpack_share_scopes__` object.

In step four, developers use the `loadRemoteModule` function in the host application to dynamically load the remote module. They import the `loadRemoteModule` function from `@angular-architects/module-federation` in the host application and use the `loadRemoteModule` function to dynamically load the remote module when needed.

In step five, you set up routing to load the remote module on demand. It's done by defining a route for the remote module in the host application's `app-routing.module.ts` file and use the `loadRemoteModule` function to load the remote module in the route's component.

Finally, in step six, you can test the implementation by running the applications and verifying that the module is loaded correctly. 

By following these steps, you can implement dynamic module federation in your Angular applications, allowing for the dynamic loading and unloading of modules at runtime.

Image by https://www.vecteezy.com
Worry not! AI or Chatgpt will not replace you.
Tags: chatgpt, ai, developers
Published: 2023-04-23 11:15:55

This trendy tool has shaken people all over the world, me included, at first.

All of my friends who don’t work in tech are actively using ChatGPT or other AI-powered tools for their jobs. I have never seen the adoption of new technology so quickly in my entire life.

ChatGPT knows me better than I know myself. Some jobs that require a group of techies to sit and compile data will be on the decline because AI does all this and more for you. Lucky for us, AI is not self-aware, so our logic, creativity, emotions, and experience can’t be replaced. The havoc that it has caused and succeeded in fueling fear in people’s minds too because of their advanced technology makes them think that the mass layoffs of people in the giant tech companies have occurred in the first few months since the said AI technology was released. But worry not, there’s a couple of reasons you might keep your job :)

Stay tuned for my next post!
How to sync mail to ms-sql!
Tags: csharp, python, mail, mailsync
Published: 2023-04-23 10:57:02

To sync email data to Microsoft SQL Server, you can use a third-party tool or develop a custom solution using programming languages such as [C#](https://learn.microsoft.com/en-us/dotnet/csharp/) or [Python](https://www.python.org/). Here are a few steps you can follow to develop a custom solution:

1. Determine the email protocol: Depending on the email server you are using, you may need to determine the email protocol to use for syncing the email data. For example, if you are using Microsoft Exchange, you can use the Exchange Web Services (EWS) API to access email data.

2. Connect to the email server: Once you have determined the email protocol, you need to establish a connection to the email server. You can use libraries or APIs provided by the email server to establish a connection.

3. Extract email data: After establishing a connection to the email server, you can extract the email data you want to sync to Microsoft SQL Server. This can be done using the email server's API or library.

4. Transform data: Before syncing the data to Microsoft SQL Server, you may need to transform the data to fit the table schema. You can use a programming language such as [C#](https://learn.microsoft.com/en-us/dotnet/csharp/) or [Python](https://www.python.org/) to transform the data.

5. Sync data to Microsoft SQL Server: Once the data is transformed, you can insert it into the appropriate table in Microsoft SQL Server using the appropriate SQL statements.

6. Schedule synchronization: To ensure that the email data is synced to Microsoft SQL Server regularly, you can schedule the synchronization using a task scheduler or a custom scheduling solution.

It's worth noting that syncing email data to Microsoft SQL Server can be a complex process that requires a good understanding of the email server's API, Microsoft SQL Server, and programming languages such as [C#](https://learn.microsoft.com/en-us/dotnet/csharp/) or [Python](https://www.python.org/). Therefore, it's recommended that you consult with an experienced developer or use a third-party tool if you're not familiar with these technologies.
CSS Battle 22
Tags: css
Published: 2023-04-23 10:55:33

---
title: CSS Battle 22
published: true
date: 2023-04-23 10:53:34 UTC
tags: css
canonical_url: https://blog.nicm42.co.uk/css-battle-22
---

I am (very slowly) working through [CSS Battle](https://cssbattle.dev). It gives you a picture that you have to recreate in CSS. To score highly you have to have as few characters as possible. But I ignore that and simply aim to get 100%. I thought I'd talk through one I did recently, [Target 22 (Cloud)](https://cssbattle.dev/play/22)

![Cloud target](https://cssbattle.dev/targets/22@2x.png)

When I initially looked at this I thought I wanted a circle for the top of the cloud, a circle for the left and a short wide rectangle for the right and bottom. I ended up not doing that - I found four elements was slightly easier.

For the HTML I had four divs - the bottom one at the top because I wanted everything else on top of it.

```html
<div class="bottom"></div>
<div class="left"></div>
<div class="top"></div>
<div class="right"></div>

```

Then I added the background colour (which they give you)

```css
  body{
    background: #F5D6B4;
  }

```

I find that positioning the elements absolutely makes things easier. I also for a while tried using grid and that seemed to get me very close to 100% without actually getting 100%, even though it was identical.

```css
  div {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #D86F45;
  }

```

The width and height work for both the top and left circles, so all I had to do was to position them.

```css
  .left {
    top: 115px;
    left: 100px;
  }
  .top {
    top: 85px;
    left: 180px;
  }

```

I had to resize the right one, and then position it

```css
  .right {
    width: 50px;
    height: 50px;
    top: 165px;
    left: 250px;
  }

```

At this point I had a gap at the bottom. Although I could have played with the right one, I already said that all of my divs are circles. So I decided it would be slightly less code to just add in a rectangle to fill the space

```css
  .bottom {
    border-radius: 0;
    width: 120px;
    height: 50px;
    top: 165px;
    left: 150px;    
  }

```

And that's it, done! That seemed the simplest way to do it to me, but if you did it another way I'd love to see it.
Exploring Lucrative Opportunities in Digital Writing: Freelancing, Blogging, and Social Media Content Creation
Published: 2023-04-23 10:20:49

**Digital writing** refers to the act of creating written content for various online platforms such as websites, blogs, social media, and other digital channels. With the rise of the internet and the increasing demand for digital content, digital writing has become an increasingly popular and lucrative gig for many writers.

**Freelance Writing**

One of the most common ways to earn money as a digital writer is through **_freelance writing_**. Freelance writers work independently and are paid on a per-project basis to create content for clients such as businesses, websites, or publishers. They may write articles, blog posts, product descriptions, or other types of content, depending on the needs of their clients.

**Blogging**

_**Blogging**_ is another way to earn money as a digital writer. **_Bloggers_** create content on a specific niche or topic and attract readers through search engines, social media, or other online channels. They can monetize their blog through advertising, sponsored content, affiliate marketing, or by selling their own products or services.

**Content Creating**

_**Creating content for social media**_ is also a popular way to earn money as a digital writer. _Social media content creators write captions_, posts, or scripts for videos and images to be used on various social media platforms. They may work for businesses or influencers and are paid on a per-project basis.

Overall, digital writing offers endless opportunities for writers to earn money online. With the right skills, experience, and dedication, it's possible to turn writing into a lucrative and rewarding career.

_#MlimaVirtual_
Here’s my definitive guide on blockchain… for the dummies.
Published: 2023-04-23 10:00:16

Don’t worry, I was right where you were a year ago! So consider me an Ex-dummy, I guess.
(Okay, seriously let’s get into it!)
Introduction.
**Blockchain** was merely a computer science word for the way that data is organized and shared. A blockchain is a type of data structure that enables the creation of digital ledgers of data and the sharing of such ledgers among a network of unrelated parties.
Well, today it has become another different narrative only that it uses the same tech and know-how around our usual day to day transactions.
Simple definition and explanation
I’m going to try and explain it in the simplest way possible for the newbies. Shall we?
So, imagine a scenario where Person X and Y are friends. X gets into a financial crisis and needs a hefty loan. Y seems to have it all together and X decides to approach him and ask for the money. Y decides to give him a good amount; say $100,000 USD. He says he needed it in cash so he goes and withdraws it all from the bank and gives it to him. They agree on a payment date and life went on as usual. 
On the due date, Y asks for his money. X decides he won’t pay the loan and since he didn’t have any traces or record (database) of giving him the money, legal action cannot be taken against him. No paper trail or record of him receiving the money. The bank here being a centralized solution for its clients. This was already a single point of failure. No proof of any transaction to X but was withdrawn by Y. 
Yikes!
However, if a decentralized solution such as blockchain would’ve been used, this would be a very easy fix. Let me take you through.
Suppose X and Y were on the same blockchain network and Y wanted his money sent to X, honoring his request. On this network, there is a group of trusted people who can foresee and verify the transaction that it did truly, get to X in case of any problem. They can then approve the request and not manipulate data or details of Y in any way. So that if something could go wrong, Y indeed has information of the person on the other side.
There are two positive outcomes or rather benefits of this:
1.	Your data is completely safe and cannot be changed by anyone, not even the approvers or hackers unlike other distributed databases managed by a centralized institution (e.g Bank).
2.	You can easily trace your transactions and history.

Hope you enjoyed my teenie weenie lesson, more coming.. let me know your thoughts.
self-taught experience
Tags: webdev
Published: 2023-04-23 09:52:06

I am self-taught developer. And through my learning as a person who does not know anything in tech or nobody in tech but very curious it was different and difficult path to take, I have experience strong moments and weak moments in the journey. I got to my laptop and searched how to code. And different article and website appeared but the best article was on freecodecamp.org the road map to be a developer and there were many categories to choose the type I want to be, the best of me was to be a frontend developer as I can get courage creating live pages and interacting with, which will boost my confident , i went for it started learning HTML and CSS created poor design to which it was best designs I was happy then ventured to JavaScript and explore . My experience with JavaScript is that it's a lightweight language and same complicated, always approached it using basic knowledge. I got GitHub repos to guide me. And started interacting with DOM using JavaScript at basic creating to do list creating clock, currency converters. At basic the next step was to join groups to see what other people are doing on twitter space and discord, YouTube, watching a lot of tutorials which most of them were meaningless and i came to learn that everybody has different way to approach the problem from beginner to senior, and I learned by doing I have solved different questions from theory to interview questions. Therefore, i learned to participate open-source projects building user- interface, the projects have taught me a lot and I got people to guide me the rest of the journey which it's amazing because I had a dream.
Zabbix seems great
Published: 2023-04-23 09:33:37

quick docker tryout:
https://www.youtube.com/watch?v=csZwhQcJmxQ

(approximate!) commands:

network create --subnet 172.20.0.0/16 --ip-range 172.20.240.0/20 zabbix-net
docker volume create mysql-zabbix-db

docker run --name mysql-db --hostname="mysql-db" --network=zabbix-net --restart unless-stopped -e MYSQL_RANDOM_ROOT_PASSWORD="y" -v mysql-zabbix-db:/var/lib/mysql  -d mysql

docker logs mysql-db

docker run --name zabbix-server-mysql --network=zabbix-net --restart unless-stopped -t -e DB_SERVER_HOST="mysql-db" -e MYSQL_USER="zabbix" -e MYSQL_ROOT_PASSWORD="**password from mysql logs**" -e MYSQL_PASSWORD="**password for zabbix user, can be anything**" -p 10051:10051 -d zabbix/zabbix-server-mysql

docker run --name zabbix-web-apache-mysql --network=zabbix-net --restart unless-stopped -t -e DB_SERVER_HOST="mysql-db" -e MYSQL_USER="zabbix" -e MYSQL_PASSWORD="**2nd password from previous command**" -e ZBX_SERVER_HOST="zabbix-server" -e PHP_TZ="Europe/Brussels" -p **port to access**:8080 -d zabbix/zabbix-web-apache-mysql


default user/password:

Admin
zabbix