teleren/devto huggingface dataset:
Generate SVG icons for React.Js Typescript
Published: 2021-07-30 15:09:58


## Generate SVG icons for React.Js Typescript

![banner](https://cdn-images-1.medium.com/max/3840/1*OWJzMqWPCoOmFhnCtbjfxQ.png)

I was keep looking for a library that can generate typescript icons but i didn’t get success so i decided to make a library myself.

Generate React Icon Component from SVG icons to show, resize and recolor them. The default template is a typescript template.

    npm install --save-dev react-svg-icon-generator-v2

## Setup a node file

### Default mode

    const generator = require('react-svg-icon-generator-v2');
    const config = {
        svgDir: './src/ui/icons/',
        destination: './src/components/ui/Icon.tsx'
    };
    generator(config);

### Split mode

    const generator = require('react-svg-icon-generator-v2');
    const config = {
        svgDir: './src/ui/icons/',
        mode: 'split',
        destination: './src/components/ui/Icon.tsx',
        iconDestination: './src/components/ui/icons/'
    };
    generator(config);

* **svgDir** (required) - path to your directory with svg files. Can be relative path but it is better to use path.join(__dirname, 'icons') absolute path so it will work in any directory of project

* **destination** (required) - path.join(__dirname, 'components', 'Icon.js')

* **mode** (optional) (single or split) - choose mode for generating icons. default mode is generate icons to one file. split is mode for generating each icon to react component

* **comment** (optional) - it will be added to generated component, so other developer will know what to do

* **template** (optional) - provide path to your custom template, you can look at example at [Icon.template](https://github.com/akash-gupt/react-svg-icon-generator-2/blob/HEAD/template/icon.nunjucks)

* **iconTemplate** (optional) - provide path to your custom template for each icon, you can look at example at [Icon.template](https://github.com/akash-gupt/react-svg-icon-generator-2/blob/HEAD/template/split-icon.nunjucks)

![](https://cdn-images-1.medium.com/max/2000/1*P9kj43zMXdxMGoOF3bFOdw.png)

## Use generate Icon component

    import React, {Component} from 'react';
    import AppIcon from './AppIcon';
    
    export default class App extends Component {
      render() {
        return (
          <div>
            Simple possible usage
            <AppIcon name='clock' />
    
            Setup color and bounding width and height
            <AppIcon name='close' color='#748' width={500} height={100} />
    
            Setup color and bounding width and height to size (square)
            <AppIcon name='close' color='red' size={600} />
    
            Setup onClick behavior
            <AppIcon name='close' onClick={() => alert('clicked on icon')} />
    
            Show all icons at once with description (for finding right icon)
            <AppIcon preview />
          </div>
        );
      }
    }

You can find example here [Github](https://github.com/akash-gupt/react-svg-icon-generator-2)
Código Limpo by Uncle Bob
Tags: architecture, cleancode, dica, java
Published: 2021-07-30 15:09:41

> "Foi visitar um amigo? Antes de sair da casa dele, deixe a casa mais limpa do que ela estava quando chegou."

Essa é a lição que tiro sobre o primeiro capítulo introdutório do livro Código Limpo (Clean Code) do Robert C. Martin, ou _Uncle Bob_.

Antes de finalizar aquela tarefa sob algum código que o amiguinho fez (ou você mesmo desenvolveu há algum tempo), veja o que pode ser melhorado. O nome de uma variável, de um método, quebrar um método gigante em métodos menores, etc, são pequenas coisas que podem ser feitas para manter o código limpo e atualizado.

O mais legal é que eu costumava fazer isso e me sentir culpada por achar que estava fazendo algo que não devia (porque não estava no escopo). Ponto pra mim!
Java Quickie. Threads vs Processes
Tags: java, beginners, tristan
Published: 2021-07-30 15:05:28

#Introduction
- This series is going to be dedicated to the basic understanding of Java. When ever I find myself asking, "How does this work ?". I will create a blog post and put it here. This series will not be in order so feel free to read what ever post you find most relevant. All the resources for this post can be found [HERE](https://docs.oracle.com/javase/tutorial/essential/concurrency/index.html)

###Concurrent programming
- So what is concurrent programming and better yet what does concurrent even mean? Well the great oracle of google tells us that concurrent means, `existing, happening, or done at the same time`. Ok, but what is concurrent programming? Well, as you navigate your way through the digital world you are able to do multiple things at once, open multiple tabs, listen to Spotify, learn programming and even write sub par blog posts on `Dev.to` like me. This is all possible because of software that through one way or another has been programmed using concurrent programming techniques. However, to fully understand concurrent programming can be quite tricky but the the first step is understanding what a process and thread are.

- In concurrent programming there are two basic units of execution

**1) Processes :** is a self container execution environment. A process generally has a complete, private set of basic run-time resources; in particular, each process has its own memory space. So technical jargon aside, a process is an execution environment. 

**1) Threads :** Threads are sometimes called `lightweight process`. Both processes and threads provide an execution environment. Creating a new thread requires fewer resources than creating a process. Threads actually exist within a process and every process has at least one thread. Threads share the process's resources including memory and open files. Initially most applications have just one thread and that thread is universally called the `main thread`. So if we really had to sum up what a thread is, it is, ` a execution environment inside of a process that can be used to share the resources of the process`

###Thread Objects
- Each thread in Java is associated with an instance of the class `Thread`. There are two basic strategies for using thread objects to create a concurrent application

**1) :** Directly control thread creation and management, simply insatiate `Thread` each time the application needs to initiate an asynchronous task.

**2) :** To abstract thread management from the rest of your application, pass the application's tasks to an executor. In most cases you will be using this strategy.


#Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
React Native: How i followed "create once use many times"
Tags: reactnative, refactoring, react, reusable
Published: 2021-07-30 15:05:10


My client hired me for saving his life from messy code so i started refactoring the code by converting them into reusable and smaller components that can be follow create once use many times.

Refactoring someone else code can be tough but i tried and successfully refactored whole code of more than 100 screens.
I tried so many libraries to achieve a theming system according to client requirement but every other library have own problem and less support for resolving issues so i started setup my own thing.

My First component was a Container which can be used everywhere and for every need. Believe me it saved me from boilerplate.

For ex: we have 4 Text component and i wanted to make space between them is 5. how we normally do like this

[![unpotimized-code](https://miro.medium.com/max/1400/1*9bUpVzPAacyE749d42Ch9w.png)](link)


Make it in a Row

[![unpotimized-code](https://miro.medium.com/max/1400/1*QyBSrtU5HdjkgD-0D-Bjrw.png)](link)

Don't you think it is getting start messy.
Check My Version, it is clean right 😁


Let's start baking it

{% gist https://gist.github.com/akash-gupt/39417cc07ce88eecb3814a1fca9ef031.js %}

We have not finished yet, now it's time to create Container

```
p - padding
m - margin
x - horizontal
y - vertical
l - left
r - right
pr - padding right
pl - padding left
px - padding horizontal
py - padding vertical
pxy - padding all
mr - margin right
ml - margin left
mx - margin horizontal
my - margin vertical
mxy - margin all
```


{% gist https://gist.github.com/akash-gupt/28104ebde351ab2af0a7ebfd4c618fcd.js %}

```
spaceBetween - space between components
hidden - hide component based on condition
```

😁😁😁😁😁 We just saved so much boilerplate.
Happy Coding




{% medium https://medium.com/@supereme_dev/react-native-how-i-followed-create-once-use-many-times-f9bb36d2788f %}
Austin Murphy
Published: 2021-07-30 15:54:10

---
title: Austin Murphy
published: true
date: 2021-07-30 14:53:29 UTC
tags: 
canonical_url: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wozgn4j8ohzwsjpg6s1f.png
---

Hey there! My name is Austin and I'm a Principal/Lead/Senior Software/Full Stack Developer/Engineer from Columbus, Ohio, USA. ^^^ Okay okay, maybe I went a bit overboard with the titles. But the reality is, there are many different titles now for what I do, and I have to put them here for SEO. 😁

This is my first blog post on [Hashnode](https://hashnode.dev). I will do my best to document my journey going forward, as I continually manage, learn, and write code.

Cheers 🍻
Getting started with ReactJS
Tags: react, beginners
Published: 2021-07-30 14:50:40

>"The secret to getting ahead is getting started."
― Mark Twain

### Introduction
Hello and welcome to my 3rd post, hope everyone is doing well. The content for this post is what do you need to know in order to code with ReactJS

- react is a JavaScript library for building interfaces.
- The basic of react is understanding state and props


### pre-requisite
- javascript
- html


### State
- state is a built-in React object that is used to contain data or information about the component. A component state can change over time

```jsx
class Greetings extends React.Component {
 state = {
  greetings:"Hello"
}

updateName(){
  this.setState({greetings: Welcome to ReactJS})
}

render() {
  return(
    <div>
      {this.state.greetings}
    </div>
  )
 }
}
```
- this.setState() is used to change the value of the state object

### Props
- props is being used for passing data from one component to another

```jsx
import React, { Component } from 'react';
import FirstChild from './firstChild';  // we need to import the child component first

class ParentComponent extends Component {
  state={
    name:"Ali"
  }
  render() {
    return (
      <h1>I'm the parent component.</h1>;
      <FirstChild
        name={this.state.name}
      />
    )
  }
}
export default ParentComponent;

```
- FirstChild component

```jsx
import React from 'react';

const FirstChild = () => {
  return <p>{this.props.name}</p>  
}

export default FirstChild
```
- to refer props in the child component, use this.props.[name]. In this example refer to this.props.name as i am passing name as a prop to FirstChild component

### Conclusion
By understanding how state and props works, you are able to code with ReactJS easily. From my  point of view, the things that i share is the basic of getting started with ReactJS. There is a lot more to cover and i'll continue to share another post for the follow up on what's next. Stay tuned and thank you for your time

> "Practice the philosophy of continuous improvement. Get a little bit better every single day."
― Brian Tracy
Serverless Python: Managing Python Dependencies in AWS  Lambda Layer
Tags: aws, python, lambda, layer
Published: 2021-07-30 14:47:47

Usage:
 ```shell
 build_layer.sh <layer_name> <path/to/requirements/file> <python-version>
```
for example, 
```shell
 scripts/build_layer.sh tensorflow requirements/tensorflow.txt 3.8
```
where `requirements/tensorflow.txt` contains:

```text
tensorflow==2.4.0
```

`build_layer.sh`
```bash
#!/bin/bash
set -eo pipefail

function usage {
    file_name=$0
    echo "usage: ${file_name} <layer_name> <path/to/requirements.txt/file> <python_version>"
    exit 1
}

layer_name=${1}
requirements_file=${2}
python_version=${3}

if [[ -z "${requirements_file}" ]]; then
  requirements_file="requirements.txt"
fi

if [[ -z "${layer_name}" || ! -f "${requirements_file}" ]]; then
  usage
fi

layer_path=".layers/${layer_name}/python/lib/python${python_version}/site-packages"
rm -rf "$layer_path"

echo "Installing packages from ${requirements_file}"
docker run --rm \
           --user $UID \
           --volume "$PWD:/var/task" \
           --workdir /var/task \
           --env CV_PYPI_USERNAME \
           --env CV_PYPI_PASSWORD \
           "lambci/lambda:build-python${python_version}" \
            pip install -Ur "${requirements_file}" --target "${layer_path}"

echo "Removing unnecessary packages from ${layer_path}"
rm -rf "$layer_path"/{botocore,boto3}*

echo "Removing unnecessary files/folders from ${layer_path}"
find "$layer_path" -type f -name "*.pyc" -exec rm -rf {} +
find "$layer_path" -type d -name "__pycache__" -exec rm -rf {} +
find "$layer_path" -type d \( -name "tests" -o -name "test" \)  -exec rm -rf {} +

echo "Layer creation finished at ${layer_path}"
```
Elixir Wizards Talk: "Dealing With a Monster Ecto Query"
Tags: elixir, conferencetalk, ecto
Published: 2021-07-30 14:19:36

Last month, I spoke at the first-ever [Elixir Wizards Conference](https://smartlogic.io/about/community/elixir-wizards-conference/). It was a lightning talk walking through a refactor I did before the 2020 US Presidential Election, titled "Dealing With a Monster Ecto Query."

I work for a news company, so the presidential election is a huge deal; we can't have downtime. I knew which query was our bottleneck, so I optimized it right before the election. This took advantage of a few Elixir features, like atoms, the pin operator, and concurrency primitives.

You can watch the talk below:

{% youtube -82nj9rWSwc %}

[Source code for slides](https://github.com/maco/slides/tree/main/monster_ecto_query)
Hover Effects Using CSS For Beginners
Tags: css, beginners, webdev, codenewbie
Published: 2021-07-30 14:13:01

Here is a list of few card hover effects created using CSS. They are created only using CSS, the logic behind it is too simple, hope it will be useful to beginners in web development. 

{% codepen https://codepen.io/kiran-r-raj/pen/eYWreOb default-tab=result,css %}

{% codepen https://codepen.io/kiran-r-raj/pen/VwbxMov default-tab=result %}

{% codepen https://codepen.io/kiran-r-raj/pen/GRmdMLj default-tab=result %}

{% codepen https://codepen.io/kiran-r-raj/pen/eYWrGxP default-tab=result %}

{% codepen https://codepen.io/kiran-r-raj/pen/bGWMoOR default-tab=result %}

{% codepen https://codepen.io/kiran-r-raj/pen/ExmLwRG default-tab=result %}

{% codepen https://codepen.io/kiran-r-raj/pen/poPVdjO default-tab=result %}

{% codepen https://codepen.io/kiran-r-raj/pen/LYymORp default-tab=result %}

{% codepen https://codepen.io/kiran-r-raj/pen/GRmdONE default-tab=result %}

You can find some text effect using CSS [here](https://dev.to/kiranrajvjd/simple-text-effects-using-css-3dgp)

Hope it will be useful.

{% link https://dev.to/kiranrajvjd/35-simple-css-based-pre-loaders-gfl %}
{% link https://dev.to/kiranrajvjd/30-awesome-css-animation-resources-h9c %}
{% link https://dev.to/kiranrajvjd/awesome-resource-for-your-web-projects-75-background-resources-2cm8 %}
Create a Card component with React and styled-components
Tags: react, styledcomponents, typescript
Published: 2021-07-30 14:11:37

https://codesandbox.io/s/nameless-worker-z31nt


{% codesandbox nameless-worker-z31nt %}


Added the tilt effect to cards by react-parallax-tilt

{% github mkosir/react-parallax-tilt %}


{% twitter 1423635120070791172%}


https://codesandbox.io/embed/nameless-worker-z31nt?fontsize=14&hidenavigation=1&theme=dark
Install ext-sodium on AWS Lightsail Bitnami LAMP Instance
Tags: aws, devops
Published: 2021-07-30 14:07:46

One of my agency projects on Laravel has a composer dependency that needs "sodium PHP extension", but Bitnami LAMP instance doesn't come with it installed. 

So after trying for almost one hour i successfully install it following this steps:

1. First you need to install libsodium-dev through apt

```
sudo apt install libsodium-dev
```

2. Then, using PECL (PHP Extension Manager) you have to install the extension per se

```
sudo pecl install -f libsodium
```

3. Finally, edit php.ini file to activate the extension and restart the services

```
sudo nano /opt/bitnami/php/etc/php.ini
# find "extension=sodium" and uncomment it

sudo /opt/bitnami/ctlscript.sh restart
```

With these steps you have installed PHP sodium extension in your instance
Named Imports/Exports for React Components
Tags: react, javascript, namedimports, namedexports
Published: 2021-07-30 13:47:01

---
title: Named Imports/Exports for React Components
published: true
description: Why you should start using named imports/exports
tags: react, javascript, namedimports, namedexports
//cover_image: https://direct_url_to_image.jpg
---

## Why named imports/exports?
- Easier to find references to components
- Autocomplete
- Prevents typos

### What does a named import look like?
```javascript
import { Counter } from './Counter';
```

### What does a default import look like?
```javascript
import Counter from './Counter';
```

### How to export a connected component?
```javascript
export const _Counter () => {
   ...
}

export const Counter = compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps)
)(_Counter);
```
mautic のテーブル構成を tbls で俯瞰する
Published: 2021-06-23 22:34:54

`ddev describe` すると以下のように DB は phpMyAdmin から参照するだけでなくローカルからもアクセスできるようにしてくれている。

```
MySQL/MariaDB Credentials
-------------------------
Username: "db", Password: "db", Default database: "db"

or use root credentials when needed: Username: "root", Password: "root"

Database hostname and port INSIDE container: db:3306
To connect to db server inside container or in project settings files:
mysql --host=db --user=db --password=db --database=db
Database hostname and port from HOST: 127.0.0.1:55213
To connect to mysql from your host machine,
mysql --host=127.0.0.1 --port=55213 --user=db --password=db --database=db

Other Services
--------------
MailHog (https):        https://mautic.ddev.site:8026
MailHog:                http://mautic.ddev.site:8025
phpMyAdmin (https):     https://mautic.ddev.site:8037
phpMyAdmin:             http://mautic.ddev.site:8036
```

もちろん、DataGrip で見たりもするが、テーブル間の繋がりを見るには図としていつでも見れるようになっていると便利。

## できたもの

https://github.com/dany1468/mautic-tbls

以下の SVG をブラウザで開くといい感じに俯瞰できる。
https://raw.githubusercontent.com/dany1468/mautic-tbls/main/schema/schema.svg

コメントはほぼ入っていないが、外部キーが貼られているので関連をつかみやすい。

## プラグイン周りは？

![2021-06-24_07h23_52](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69oca0ibst10kxz5yuza.png)

ER図からは、プラグイン周りはこれぐらいしか関連がない。
`app/bundles/PluginBundle/Entity` を見ると `integration_entity` も関与していそうである。
![2021-06-24_07h27_45](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ahh71ziwho3jis3o1vm.png)

## 余談

`app/bundles/PluginBundle/Entity/Plugin.php` を眺めていると、Description は `---` 区切りで primary と secondary の説明に分けられると気づいた。
Using VIM as your Flutter IDE
Tags: vim, flutter, ide
Published: 2021-07-30 13:27:13

Today we are going to setup vim as your Flutter IDE

If you have not installed Vim, consider installing NeoVim in your machine.

Once you have installed Vim in your machine you need to have plugin manager for vim

I Use Vim plug:

- [https://github.com/junegunn/vim-plug](https://github.com/junegunn/vim-plug)

Once you have Vim plug installed you have to created .vimrc file (If you are on neo vim you have to create init.vim)

After that you have to install plugin inside VIM via Vim plug

In your .vimrc add these 2 lines

```kotlin
Plug 'dart-lang/dart-vim-plugin'
Plug 'thosakwe/vim-flutter'
```

Once you added these 2 lines run:

```kotlin
:source %
:PlugInstall
```

Done: you have installed Flutter in Your Vim setup now you can run flutter app via:

```kotlin
:FlutterRun <args>
```

For more you can find more commands here: [https://github.com/thosakwe/vim-flutter](https://github.com/thosakwe/vim-flutter)
How programming is better with TypeScript ?
Tags: typescript, javascript, programming, computerscience
Published: 2021-07-30 13:17:33

TypeScript is a typed superset of JavaScript by definition. As a result, all current JavaScript is TypeScript compliant. Also, you may transform an existing JavaScript project to include type definitions and other language qualities that make long-term project upkeep and scaling much effective and simpler.

TypeScript includes a compiler that converts a .ts file (which cannot be viewed in a browser) to a .js file (which is vanilla JavaScript), as if we had written the entire project in JavaScript. It is quite useful to include this layer of 'convenience' above JavaScript code.

There has been a lot of comparison between <a href= "https://codersera.com/blog/typescript-vs-javascript/" >TypeScript & JavaScript</a> & also a lot of confusion as to which one to learn. However, in this article we will talk about TypeSCript & why it is loved by the programmers.

<h2>Key Concepts in TypeScript</h2>

There are three things that make Typescript so useful:

<ol>
<li> Types </li>
<li>Interfaces</li>
<li> Classes and OOP</li>
</ol>

As a JavaScript developer, TypeScript will help you to:

<ul>
<li>boosting your confidence</li>
<li>catching errors before they reach production</li>
<li>making it possible to refactor code</li>
<li>saving you time from writing tests</li>
<li>giving you a good coding experience</li>
</ul>

When working with new codebases and in larger teams, TypeScript will give you more confidence. You will be less concerned if you are familiar with TypeScript and join a new team or project that uses it. You can count on TypeScript to help you out. Because you can look at something and quickly infer how it works, the language improves code readability and predictability. The type system is to blame for this.

Because TypeScript will detect errors for you, refactoring code becomes easy. When you rename a function, it will warn you if you fail to use the new name someplace else. TypeScript will correct you if you change the form of an interface or type and eliminate a property that you thought wasn't being utilised.

In essence, TypeScript is a JS linter. Alternatively, JS with compiler-friendly documentation.

As a result, unlike other languages like CoffeeScript (which adds syntactic sugar) or PureScript (which looks nothing like JavaScript), you don't need to know much to get started creating TypeScript code.

Types are unnecessary in TypeScript, and any JS file is a valid TypeScript file. While the compiler will warn if your starting files contain type problems, it will return a JavaScript file that works as it did before. TypeScript will meet you wherever you are, and it's simple to improve your skills over time.

Nevertheless, even if you don't use TypeScript to its full potential, it's a useful tool to have in your toolbox. It's simple to start small and gradually expand your capabilities, learning and adding new features as you go. There's no need to be terrified of TypeScript because it's practical and accommodating to beginners.
How to Format on Save in VSCode
Tags: vscode, prettier, format
Published: 2021-07-30 13:15:22

1. Install **Prettier** in VSCode (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
2. Open Settings pane (Command + ,)
3. Make sure the *Editor: Format on Save* property is **enabled** (You can search and find the property in the search bar)
4. Set the *Editor: Default Formatter* to **Prettier - Code formatter**

If format on save was previously not working for you, these steps should fix it. This is what fixed it for me :)