teleren/devto huggingface dataset:
How to Get Started Building Cool Projects When You Are Super Busy
Tags: indiehacker, sidehustle
Published: 2021-08-23 20:23:23

In this post, I want to share some things I found really useful to keep me on track for my side projects. I have been fortunate to be able to work on my open-source projects even though deadlines from work keep taking over my life. I am helping people all around the world with my project [https://2anki.net](https://2anki.net/) and hopefully more to come soon.

## Stop comparing yourself to other people

You won't have as much time as they have and you really don't know their situations. So stay focused on actionable items. What can you do today? It does not matter how big or small. What matters is doing something, anything!

## Be patient

Since you will be moving at your own pace and doing new things. You need to be patient because you are going to take more time the first time around. Get used to waiting, you can exercise that like a muscle.

I do this on weekdays by delaying my coffee breaks with glasses of water and then indulging in coffee when I get sick of waiting.

### Google everything

It's okay to not know 🙂 That's why you gotta search for the information. Instead of guessing, look up what somebody else has done and try to gain from their knowledge.

## Lastly

Remember the three T's.

**T**hings

**T**ake

**T**ime

## About Me

My name is Alexander. I am a web developer by day. During my off-time, I am an open-source developer on a mission to build helpful tools to help people in their learning journeys.

Join me live on Twitch where I do live coding

[AlexanderAlemayhu - Twitch](https://www.twitch.tv/alexanderalemayhu)

Thank you for reading and as always happy learning 💙

--
Photo by <a href="https://unsplash.com/@tatianacolhoun?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tatiana Colhoun</a> on <a href="https://unsplash.com/s/photos/alice-in-wonderland?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
1 - A new boilerplate for React Application - CRA-ken is finally out!
Tags: boilerplate, react, frontend, javascript
Published: 2021-08-23 20:09:41

Hi Developers,
I'm <a href="https://www.linkedin.com/in/daniele-carta-lugano/">Daniele Carta</a> and I'm a Frontend Developer. For 3 years I'm worked with React and with Create React App.

To fastify my work, I decise to create a new boilerplate for fastify the initialize a new application.

The name of this boilerplate is CRA-ken. You can find the project in this link: https://github.com/crtdaniele/cra-ken

<h2>Why have I to use CRA-ken?</h2>

Because in this boilerplate you can find a lot of helpers and configuration like these:

|                        | CRA(ken)   | CRA        |
| ---------------------- | ---------- | ---------- |
| React Testing Library  | ✅ **yes** | ✅ **yes** |
| Routing                | ✅ **yes** | ❌ no      |
| Redux Store            | ✅ **yes** | ❌ no      |
| Redux Saga Middleware  | ✅ **yes** | ❌ no      |
| ESLint Configuration   | ✅ **yes** | ❌ no      |
| Prettier Configuration | ✅ **yes** | ❌ no      |
| Versioning App         | ✅ **yes** | ❌ no      |

<h2>So, to install the boilerplate?</h2>

It's very easy:

```sh
npx cra-ken-app my-app
cd my-app
npm start
```

In the next articles I want to show you what I introduce in the next release and how to work the boilerplate CRA-ken.

Stay tuned and follow me on LinkedIn and Github.

LinkedIn: https://www.linkedin.com/in/daniele-carta-lugano/
Github: https://github.com/crtdaniele/
Getting started with Java ..
Tags: java, codenewbie, programming, beginners
Published: 2021-08-23 20:06:12

Hello !!
This is my very first blog and in this blog I'm gonna write about my learnings of day 1 and 2 . How I started learning this and still doing that.


 So, I started it from the very basics like how it basically works.
So, the very first step is that Source code is compiled to byte code and then Java Virtual Machine compiles the byte code into machine code.

Introduction to Java :-

1. It is most popular language as we can use this in app development, web development, client- server applications e.t.c.

2. It is an object oriented programming language developed by Sun Microsystems of the USA in 1991.

3. Originally it was known as Oak by James Goslin who was also one of the Inventors of Java.

 Then I saw the basic structure of Java Program.

Naming conventions (Pascal and camel case), Variables and data types, Literals, Keywords ,then How we can take input from the user and did some basic questions.
NodeJS + ESLint + Prettier - Simplest setup ever
Tags: node, eslint, javascript
Published: 2021-08-23 20:01:43

Don't expect any fancy images in this post, let's get down to business. I'm just gonna hope you're using yarn because you should be.

- `yarn add eslint --dev` (from [here](https://eslint.org/docs/user-guide/getting-started))


- `yarn run eslint --init` (also from above link)


- Follow whatever options your heart desires in the `eslint` setup prompts.


- Get rid of the `package-lock.json` cause likely the `eslint` cli used npm to install something. tsk. Remove that file, and just run `yarn` to make things right again.


- `yarn add prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser -D` (from [here](https://sourcelevel.io/blog/how-to-setup-eslint-and-prettier-on-node#user-content-how-to-configure-prettier-with-eslint))


- Your repo should have an `.eslintrc.js` file by now that looks like this:

```javascript
module.exports = {
  env: {
    browser: true,
    es2021: true,
    'jest/globals': true,
    node: true,
  },
  extends: ['airbnb-base', 'eslint:recommended', 'prettier'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'jest', 'prettier'],
  rules: {
    semi: ['error', 'always'],
    quotes: ['error', 'single'],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'import/no-dynamic-require': 0,
    'global-require': 0,
    'import/prefer-default-export': 0,
    'no-underscore-dangle': 0,
    'no-await-in-loop': 0,
    'no-restricted-syntax': 0,
    'no-return-await': 0,
    'no-console': 0,
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        singleQuote: true,
        printWidth: 80,
        tabWidth: 2,
        endOfLine: 'lf',
        arrowParens: 'always',
      },
    ],
  },
};
```


- And an `.eslintignore` that looks like this: (if not create one)
```
/node_modules
/reports
``` 


- Add a command in your `package.json` to run lint fixes
```json
{
...
  "scripts": {
    ...
    "lintfix": "eslint src --fix --cache",
    ...
  },
}
```

- If you want to use [husky](https://www.npmjs.com/package/husky) for pre-commit hooks, be my guest. You can check the site for instructions but here they are anyway:
  a. `yarn add husky --save-dev`
  b. `npx husky install`
  c. `npx husky add .husky/pre-commit "yarn eslint && git add -A"`
  d. git add -A
  e. git commit -m "finally configured eslint and prettier and husky without any 🐄 💩
Delete all untracked files in git
Tags: git, oneliner, shell, ruby
Published: 2021-08-23 19:50:24

Suppose that you've just done a `git checkout -f` to cleanup your local modifications.

New files added will slip out of the previous command, because they're treated by git as "untracked".

Here's a one-liner to get rid of these little fellas (requires a Ruby interpreter, because I <3 Ruby):

```shell
git status \
  --untracked-files=all \
  --no-column \
  --short | \
  rm $(ruby -e "puts STDIN.read.lines.map(&:split).map(&:last).join(' ')")
```

![Done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8uxe8ktxwa6ybt6a7hf.jpeg)

[Image source](https://unsplash.com/photos/32aK4c8Iekc)

Update: as @kwstannard rightfully pointed out in the comments, there's also the prettier `git-clean`.
I forgot to have fun, are you?
Tags: webdev, programming, discuss, career
Published: 2021-08-23 19:44:35

I'll be honest, coding isn't as fun for me as it used to be.

Since moving into it as my full time role I have found that I don't get the same satisfaction I once felt. The joy of solving a tricky problem or simply seeing my idea running on a phone had sort of gone.

Don't get me wrong, it wasn't like coding as a hobby was all sunshine and rainbows. I wanted to punt my laptop out a window many times when making [StockControllerApp](https://stockcontrollerapp.com/) or [OneQstn](https://oneqstn.com/), but since "going Pro" and thinking about testing, DevOps, Infrastructure-as-code and keeping up with the never ending cycle of JS frameworks, the shine has worn off.

That is until the last couple of weekends.

I started playing around with [PhaserJS](https://phaser.io/) thanks to seeing [@pau.codes](https://www.instagram.com/pau.codes/) talking about it and I have made a silly little game, well two actually as I have completed two tutorials so far and thoroughly enjoyed them. I was still using TypeScript and had to spend some time fighting with [Parcel](https://parceljs.org/) for packaging the code up (as my [Instagram followers](https://www.instagram.com/allthecode/) saw on my stories 🤣) but overall it has been a delightful experience.

Doing this reminded me that programming is fun. Making things is fun and the things I list above that I find less fun aren't a core part of creation. I believe that they are required in a professional setting  as part of a team, but I have let the best practices of professional web development bleed into the time I spend programming as a hobby.

I have put off making some ideas because I need to create a CI/CD pipeline, or it needs to be auto scaling on Kubernetes or have more than 80% test coverage. I let those things stop me from just building fun things, from having fun.

I let the social media accounts I follow for best practices take the fun out of my passion, that's on me and I am taking steps to course correct.

If I want to make a penguin slide around dodging angry snowmen or make a stocks analyser that lives in one JS file without a unit test in sight, for me, for fun, then that is what I plan to do.

If you're new to development, or like me have been doing it for well over a decade, and you've lost the spark you had, maybe take a look at how you are approaching the code you are writing. Are you making it harder than it needs to be? Are you sucking out the fun for no reason?

I was 🙁
tsParticles 1.34.0 Changelog - Gradients, lot of fixes, new 4 path plugins and a new preset
Tags: javascript, showdev, webdev, html
Published: 2021-08-23 19:29:00

# tsParticles 1.34.0 Changelog

## Bug Fixes
- Fixed click handler, it wasn't working fine
- Fixed wobble updater
- Fixed roll updater
- Fixed tilt updater
- Fixed issues with moveSpeed 0
- Fixed overlap check
- Fixed issue with size and opacity range

## Changes
- Set max z layers to 100 instead of 10000 (improvement for noise 4d)
- Improved size/opacity updaters 
- Improved z index rates formulas
- Improved confetti preset
- Improved out modes on particle creation
- Improved fireworks preset

## New Features
- Added gradients support
- Added gradient updater library, only colors and angle for now
- Added 4 external path generators (curves, polygons, perlin 3d and simplex 4d noise)
- Added shapes and fill options to emitters
- Added emitter shapes plugin system, so they can be customized by users
- Added new wait life emitter option
- Added start count to emitters
- Added triangles preset
- Added zLayers option

{% github matteobruni/tsparticles %}
| #1 | Exercism.io | Learn JavaScript Through Test Driven Programming Challenges
Published: 2021-08-23 19:17:41

{% youtube jFye-gPGQ1I %}


Get started with the Exercism.io programming challenge site https://exercism.io. Learn about Test Driven Development, JavaScript, Node/NPM, Jest, objects, and for loops.

Checkout this video on our player: https://play.codecast.io/vaPL6wA35MNe...

Watch more of Brooklin Myers videos here :https://www.codecast.io/users/brooklin
#100daysofcode [Day - 02]
Tags: html, javascript
Published: 2021-08-23 19:23:11

Hey there are you want a free imac ? Just kidding ! Today is the second day of my 100 days coding challengem,and today i tried to make a web page like imac shopping cart .

Here is the site Link : https://imac-bootstrap.netlify.app/

And here is the code link :https://github.com/thekawsarhossain/100-days-of-code/tree/main/day%2002
Two Fer | #2 | Exercism.io | Learn JavaScript Through Test Driven Programming Challenges
Published: 2021-08-23 19:21:35

{% youtube mPL2n5PHrO4 %}


Get started with the Exercism.io Programming challenge site https://exercism.io/my/tracks. Learn about Test Driven Development, JavaScript, Node/NPM, String Interpolation, OR (||) operator, booleans, truthy and falsy values, and conditionals using If.

Checkout this video on our player: https://play.codecast.io/6A0pbVkgp3rE...

Watch more of Brooklin Myers videos here :https://www.codecast.io/users/brooklin
Expo error solve: Error connection timeout [ip]
Tags: reactnative
Published: 2021-08-23 18:57:58

I will not write too much .. The problem is just my local dns (on my local wifi) does not allow me to connect to expo server ..

But if you remove expo and install that again you will solve the problem . how?

That's because the expo does not logged in yet ..

So .. Just log out .. 
>>expo logout

And run server again:
>>npm start(or expo start)
Create Path Aliases in React
Tags: react, alias, path, frontend
Published: 2021-08-23 18:56:35

---
title: Create Path Aliases in React
published: true
description: Everything I tried failed, so I went with this option that worked remarkably well.
tags: React, Alias, Path, FrontEnd
Series: React
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwmb904huszh52s94w16.jpg
---

I was working on a side-project over the last few days and was working with a `jsconfig.js` file I found reference to that was supposed to allow for aliasing a folder in a `create-react-app` project.

Everything I tried failed, so I went with this option that worked remarkably well.

## The Goal

The goal is to provide path aliases for a react project. This makes code look cleaner and easier to understand.

Original Code ...

```typescript
import Header from './features/header/header.component';
import Footer from './features/footer/footer.component';
```

The Goal I wanted to achieve ...

```typescript
import Header from '@features/header/header.component';
import Footer from '@features/footer/footer.component';
```

With a larger project, this is something that becomes almost critical.

## Requirements

For this project, I went with [react-app-rewired](https://www.npmjs.com/package/react-app-rewired) and [react-app-rewire-alias](https://www.npmjs.com/package/react-app-rewire-alias)

Installation can be done via Yarn ...

```script
yarn add --dev react-app-rewired react-app-rewire-alias
```

... or NPM ...

```script
npm install --save-dev react-app-rewired react-app-rewire-alias
```

## Setup

Then, in the root directory, a file called `config-overrides.js` needs to be created with the following code ... the aliases may change for your specific project, but this gives the idea.

```javascript
const { alias } = require('react-app-rewire-alias');

module.exports = function override(config) {
  alias({
    '@core': 'src/core',
    '@features': 'src/features',
    '@pages': 'src/pages',
    '@shared': 'src/shared'
  })(config);

  return config;
};
```

The `alias` imported allows for a simple object with key/value pairs to provide alias/path options for a project.

The next step is to adjust the `scripts` inside the `package.json` file. In most locations where the code reads `react-scripts`, it should be replaced with `react-app-rewired`.

```json
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
```

... becomes ...

```json
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},
```

### Conclusion

At this point, the project code can now use the new aliases as we saw in the goal above.

```typescript
import Header from '@features/header/header.component';
import Footer from '@features/footer/footer.component';
```

A simple `npm start` will verify the functionality at this point.
Next.js Real Time Team Collaboration is here
Tags: nextjs, vercel, liveshare
Published: 2021-08-23 18:47:15

Instantly share, chat, draw, and edit from anywhere in the world. Next.js Live enables real-time collaboration for your entire team to code in the browser.

##What is Live Share?
Live Share enables your team to immediately collaborate on the same codebase from the browser without the need to synchronize code or to configure the same development tools, settings, or environment.
When you generate a live URL. You can send that to anyone with a browser, no software or dependencies needed. Chat, draw, and edit code straight in the browser, with no need to redeploy.

NextJs live share provides the following features:
* In-browser Editing
* Invite Your Whole Team
* Frictionless
* Secure by Default Faster than Local Dev

Are you a react developer ? Read [7 Best React UI Component Frameworks/ Libraries](https://abstack.pk/post/7-best-react-ui-component-frameworks-libraries)

##Gain Access to live Share
[Sign up](https://nextjs.org/live) for early access today to be one of the first to try Next.js Live. You will receive an email with further information after registering for the Preview Release.

Happy Coding!
Cómo superar una prueba técnica PHP - tercera parte
Tags: programming, php, testing
Published: 2021-08-23 18:35:00

Una vez creada nuestra pequeña arquitectura, tan solo tenemos que implementar las clases que modificaran la prioridad de visualización de la película.

En este ejemplo, se implementa la clase estreno, que determina si la película es de tipo estreno, entonces variará la propiedad **prioridad**.
```php
amespace App\ArrayMap\Estreno;

use App\Interfaces\RuleInterface;
use App\Rule;

class Estreno extends Rule implements RuleInterface
{
    const prioridadMin  = 0;
 
    public function map(array $arrayElements) : array
    {
        return array_map(function ($e) {
            if ($e->bloqueante()) {
                // según esten definidos los requisitos
                $e->prioridad = $e->prioridad - 2;
                if ($e->prioridad < self::prioridadMin) {
                    $e->prioridad = self::prioridadMin;
                }
            }
            return $e;
        }, $arrayElements);
    }
}
```

```php
namespace App\ArrayMap\Descripcion;

use App\Interfaces\RuleInterface;
use App\Rule;

class Descripcion extends Rule implements RuleInterface
{
    const prioridadMin  = 0;
 
    public function map(array $arrayElements) : array
    {
        return array_map(function ($e) {
            // según esten definidos los requisitos
            if (strlen($e->descripcion()) > 100 && strlen($e->descripcion()) < 500) {
                $e->prioridad = $e->prioridad - 0.5 ;
            } elseif (strlen($e->descripcion()) > 500) {
                $e->prioridad = $e->prioridad - 0.7 ;
            } elseif (strpos($e->descripcion(), '</a>') !== false) {
                $e->prioridad = $e->prioridad - 0.5 ;
            }

            if ($e->prioridad < self::prioridadMin) {
                $e->prioridad = self::prioridadMin;
            }
            return $e;
        }, $arrayElements);
    }
}
```

Dejo que termines la clase asociada al título.
Como ves, superar una prueba técnica PHP es de lo más entrenido. Las variantes como ya comenté, suelen tener además tests unitarios cuyas aserciones, deben ser cumplidas todas. En esto último, el nivel de precisión debe ser casi excelente.

Espero que hayais disfrutado con este post, al igual que yo escribíendolo. Podeís clonar el repositorio
de reglas en [Rules-Filter](https://github.com/inforob/php-rules-rules-filter)

[Parte 2](https://dev.to/robertomanchado/como-superar-una-prueba-tecnica-php-segunda-parte-308e)

Os dejo un librito recomendado. Que aproveche !

[![Arquitectura Limpia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfznmfkxzj805cymfpf7.jpg)](https://www.amazon.es/gp/product/8441539901/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=inforob-21&creative=24630&linkCode=as2&creativeASIN=8441539901&linkId=9288d3a09c7d2e36b702895bd16c4726)

fdo: **roberto manchado**
Bingo - Its Homebrew for "go install"
Tags: showdev, go
Published: 2021-08-23 18:20:15

Do you love the simplicity of being able to download & compile golang applications with `'go install'`, but wish it were easier to manage the compiled binaries?

Introducing Bingo:

 * GitHub : https://github.com/TekWizely/bingo

Bingo makes installing and managing `go install`-based packages a lot easier.

### Features

* Keeps a link between the installed binary and the source package
* Can update / uninstall binaries using the name of the binary (i.e `bingo update goimports`)
* Can install binaries to a location of your choice
* Can control the name of the installed binary
* Can install multiple versions of the same package (using different names for the binaries)
Don’t forget to enter our GIVEAWAY!
Published: 2021-08-23 18:07:19



We’re offering you the opportunity to meet one on one with one of CodeCast’s developers to deep dive into how to make your casts stand out and attract an audience while getting to know our tools and features! Get to know what makes content stand out from the crowd and how to utilize the resources we offer! 

How to Enter
Step 1. Sign up to Codecast & become a member! Click Here: https://lnkd.in/ePmhVnjX

Step 2: Download our studio Click Here: https://lnkd.in/ePUmcdXy

Step 3: Start making casts! 

You will be automatically entered into the contest once you have uploaded your casts! 

Giveaway Details: 
-You have one week to create your casts!
-Casts must contain video-based content (video media // the screen sharing option in the studio!) 
For further information or questions, please contact us at community@codecast.io
.
.
.
Contest ends Friday, August 27th
React Todo Tutorial using hooks, Axios, Bootstrap and a free reset API called JsonPlaceHolder to display a list of todos
Tags: react, tutorial
Published: 2021-08-23 18:02:42

{% youtube bMMd7sawawQ  %}

In this tutorial we create a simple Todo list using react hooks. We achieve this by using Axios to access a rest API hosted on JsonPlaceHolder. The UI is formatted with bootstrap.

We learn about 2 hooks useState to manage state and useEffect for the initial load of data when the component loads. 

If you enjoy my tutorials follow me on dev.to and subscribe to my YouTube Channel CodingWithAdam.