teleren/devto huggingface dataset:
A simple way to use Web Worker with React-Create-APP - No eject needed
Tags: react, worker, typescript, javascript
Published: 2021-04-24 05:24:54

The problem of using Web Worker with an app that start with create-react-app is that:

* create-react-app hide its webpack config from user to modify, if not ejected.
* You need to modify webpack config in order to emit worker file.
* If ejected, the webpack.config is overwhelming and hard to modify.
* worker-loader is not very typescript-friendly.

### A Solution

We can generator worker.js by running another webpack thread that only take care worker files. Here are what we need to do:

If you haven't install `webpack-cli`, you need to install it.

I'm using typescript, so let's install the `ts-loader`.

Then, add a webpack.config.js file at project root like this:
```javascript
const path = require('path');
const webpack = require('webpack');

const src = path.resolve(__dirname, './src');
const build = path.resolve(__dirname, './public'); // output worker.js to public folder


const tsLoader = {
  loader: 'ts-loader',
  options: { compilerOptions: { module: 'esnext', noEmit: false } }
}


module.exports = {
  mode: 'none',
  target: "webworker", //Importan! Use webworker target
  entry: './src/worker.ts',
  output: {
    filename: 'worker.js',
    path: build
  },
  resolve: {
    modules: ["node_modules", src],
    extensions: [".js", ".json", ".jsx", ".ts", ".tsx"],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') })
  ],
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: [tsLoader]
      },

    ]
  }
};

```

Note, we need to change the following config:
* Change `output` to `./public` folder so react-scripts can use it.
* The `target` needs to be `webworker`.
* Add ` compilerOptions: {..., noEmit: false, ...} ` to `ts-loader` options. This will overwrite the `noEmit:true` in the `tsconfig.json` that created by create-react-app.

then, add a npm script to package.json and run it:

```json
...
 "worker": "webpack --watch",
...
```


And, in you app:
```typescript
const worker = new Worker('worker.js');
```

Now, start your react app and enjoy your worker.


#### PS:
I know this solution is not the best one, if you have any other suggestion, please leave a comment and let me know. Thanks!
My last telescope post as a student (hopefully)
Tags: react, typescript, opensource, a11y
Published: 2021-04-24 04:46:32

This week, I still work with user accessibility. The footer has 2 corners that didn't meet the AA/AAA level of WCAG, [contributor card](https://github.com/Seneca-CDOT/telescope/issues/2049), [search result message](https://github.com/Seneca-CDOT/telescope/issues/2168), and [slack icon](https://github.com/Seneca-CDOT/telescope/issues/2050). I want to talk about the **slack icon** one.

The slack icon we had was a `svg` file included in the project. We implemented it as a `<img>` like this,
```javascript
<img src={slackLogo} alt="logo" height="20" width="20" />
```

What I needed to do is to change the color filling of this icon. This can be done by changing the `fill` value of `svg` element. The solution I wanted to try is to [make this svg file as a react component](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs) so that I can configure the `fill` value. However, I [wasn't able to import the svg file in typescript](https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript). I ended up using the easier way which is using `react-icon` and find the similar slack icon so that the filling color can be configured. I'd love to try more with the *making svg a react component* next time with [SVGR](https://react-svgr.com/).

---

It's been 4 months working with telescope team, and I'm very grateful with the chance of working with a group of amazing people. 

Thanks to Dave for the astonishing lectures and leading, I'm so lucky to have your courses and to learn from you in my last year of college. Working in web development is totally unexpected to me, but you're one of the people who make me enjoy this field more than yesterday.

Thanks to Anton who helped me with git and your blog posts are always informative! Thanks to Chris, Royce, Abdul, Ilya, Tony, Huy, and Mo. It's a bit of overwhelming to work with a team that all people are more experienced and smarter than me, but it is lucky that I get to learn from you.

Thanks to Pedro, you're the first person who talked to me in the team and have always been supportive and kind to me! 

I'm not good at saying good-bye, so I'm no gonna. But I want to tell everyone in the project that I truly appreciate everything you've done. It was amazing working with you all, wish you all the best :) ū-iân tsài siong-huē! (Meaning: We'll meet up again when the timing is right.) (This is Taiwanese, my mother language)

{% youtube I_izvAbhExY %}
Returning index of day names with Pandas
Tags: pandas, python, datascience
Published: 2021-04-24 04:08:30

In the code, I wanted to extract the month and day of the week to create a new column.

The old code was:
df['day_of_week'] = df['Start Time'].dt.weekday_name

The updated code:
df['day_of_week'] = df['Start Time'].dt.day_name()

The repo containing the code: https://github.com/GharamElhendy/Bike-Share-Data-Project
Documenting the NumPy and Pandas Installation
Tags: python, vscode, numpy, pandas
Published: 2021-04-24 03:55:13

There were three .csv files for three cities: Chicago, Washington, and New York City, downloaded from the Udacity data science course.

To analyze some of the data, like the most common starting hour, I needed to use Pandas. But every time I tried to import Pandas and Numpy, I'd get an error "ModuleNotFoundError: No module named 'pandas'."

I tried to pip install them, but I got the following error: "ModuleNotFoundError: No module named 'pip'."

I tried "sudo apt-get install python3-pip" in the terminal, but it didn't work.

Finally, I tried "easy_install pip" and it worked!
JavaScript Data Structures and Algorithms (Trees, part 1)
Tags: datastructures
Published: 2021-04-24 03:35:23

Hello! In this 5th post about JavaScript data structures and algorithms I will be discussing trees and how we run insert, append, prepend, traverse, and delete operations for then. ...

Trees are data structures that consist of a parent node, and two child nodes, referred to as the left child and right child, respectively: 

```javascript

class Node {
  constructor(value){
    this.left = null;
    this.right = null;
    this.value = value;
  }
}

class BinarySearchTree {
  constructor(){
    this.root = null;
  }
    ...
}

``` 

}
}
}


```
7 Simple Menu Icon Animation For Beginners
Tags: javascript, webdev, beginners, css
Published: 2021-04-24 02:37:06

Here is the list of 7 simple menu icon animation (hamburger) for beginners. All animation are done with CSS transform property, no framework, no complex JavaScript. A few lines of JavaScript is used, just to mimic the checkbox behavior. Play with them, if you find any errors let me know, Happy Coding.

You can uses this [website](https://cubic-bezier.com/#.17,.67,.83,.67) to get your own cubic-bezier value.
  
{% codepen https://codepen.io/kiran-r-raj/pen/QWdzgLN default-tab=result %}


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


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


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


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


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


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

{% link https://dev.to/kiranrajvjd/awesome-css-generators-3709 %}
{% link https://dev.to/kiranrajvjd/10-simple-navigation-bar-hover-animations-1980 %}

{% link https://dev.to/kiranrajvjd/40-awesome-illustrations-resources-for-your-web-projects-2fea %}

{% link https://dev.to/kiranrajvjd/10-best-javascript-based-github-repos-for-web-developers-49pc %}
F.A.Q
Tags: french, minecraft
Published: 2021-04-24 02:07:25

**Un reset a la V.1 ?**

C'est une question qu'on a reçu plusieurs foi, effectivement nous allons faire un reset cependant, toute personne ayant participer a une version de la beta gagnerons: 

* le grade EpicVip 
* Le kit "Aventurier a plein temps" 
* Remerciement sur le discord

**FreeToPlay ?**

Pour financer le serveur, nous proposons 3 grades:

* EpicVip
* Vip+
* Vip

Chacun des grades possède leurs kits, évidement les kits ne vont jamais plus loin qu'un full fer, Evidement il y a d'autres avantages par exemple:

* warp boxs
* events PVP
* acces au serveur plein (slots réservés)
* backpack avec plus de slots
* (EpicVip)Un deban gratuit (peut importe la raison)


**A quand la boutique WEB ?**

Ont sais pas, nous ne disposons pas de développeurs WEB donc ont ne sais pas. Pour soutenir le serveur faite de la promotion.



**Merci d'avoir lu, participer aux sondages dans le salon des annonces !**
Node.js - Getting started with Typescript
Tags: node, typescript, mongodb
Published: 2021-04-24 01:53:42

Hi folks! How are you?

This project is just a simple and conceptual REST API trying to get the best of Typescript on Node.js using MongoDB. In this case I've created just a proof of concept. In order to run the project, please go to the end of this post, where you can find out the GitHub repository link.

I will explain the main parts of the project and you can reply this post with any question you have.

Let's start with the project structure
```
.
├── README.md
├── docs
│   └── OBJECTS\ API.postman_collection.json
├── docker
│   └── docker-compose-dev.yml
├── nodemon.json
├── package-lock.json
├── package.json
├── src
│   ├── constants
│   │   └── index.ts
│   ├── controllers
│   │   ├── object.ts
│   │   └── public.ts
│   ├── index.ts
│   ├── interfaces
│   │   └── object.ts
│   ├── models
│   │   └── object.ts
│   ├── router.ts
│   └── services
│       ├── object.ts
│       └── public.ts
└── tsconfig.json
```

The root level files:
- `tsconfig.json`: Typescript configurations (Visit [https://aka.ms/tsconfig.json](https://aka.ms/tsconfig.json)).
- `nodemon.json`: nodemon configuration file.
- `package.json`: project's dependencies.
- `package-lock.json`: automatically generated that contains the dependencies' tree.

Folders:
- `/docker`: used only if you don't have a MongoDB server and you wanna run it with docker. To achieve that you have to have Docker and Docker Compose installed and run `docker-compose -f docker/docker-compose-dev.yml`
- `/docs`: there is a Postman json file that you can import to test the API.
- `/src`: contains the core of the project.

Then inside of /src:
- `index.ts`: define the API structure and routing and also set MongoDB connection.
- `/constants`: constants that we need.
- `/controllers`: manage and define the different routes, but they don't process any thing.
- `/interfaces`: define the interfaces with data types.
- `/models`: define the model we need to map to MongoDB.
- `/services`: process information and connect to the db.

Notice that I'm starting using Typescript and I've just read a few pages about documentation and best practices. My main idea is to improve this code during the next weeks and also to start a kind of discussion with suggestions and comments.

Thanks for reading and have fun!
👩‍💻🧑‍💻

___

IMPORTANT: I was working based on this [post](https://betterprogramming.pub/pokeapi-rest-in-nodejs-with-express-typescript-mongodb-and-docker-part-1-8428b0cd05d) mainly. Changes were inserted to improve some patterns according to my knowledge.

___

Get the full code on [GitHub](https://github.com/renacargnelutti/nodejs-ts-docker-mongodb)
Create a Journaling app with Flutter
Tags: flutter, provider
Published: 2021-04-24 01:35:54

[GitHub repo](https://github.com/valerianaGit/Pregnancy-Journal)

Check out the GitHub repo for the code, above is an image of the widget tree and each nodes' relationships

1 - UI 
Design screen 1 -> Scaffold 
Body: ListView with Card tile, 
Floating action button at bottom,  

2 - Use Provider

3 - Create a callBack for the inkWell widget `onPressed`

4 - Most proud of scrollable Text and Textfield widgets.
¿El equipo de QA puede revisar un PR?
Published: 2021-04-24 01:34:26

Me parece una interesante colaboración si es que en mi equipo, alguno de los chicos de QA, revisen un PR y realicen comentarios, incluso que identifique errores. 

Leí ese tema hace poco, en este post: https://www.thefreerangetester.com/2020/11/testers-revisando-codigo-los-devs.html 

Ahora, si ese integrante, empieza a realizar revisiones que son muy útiles, incluso en la lógica del código realizado, yo lo invitaría a que sea un desarrollador más del equipo, porque justo esa atención a los detalles se necesita para realizar un buen código. 

Muy pronto, quizás en un par de semanas, realizaré una actividad invitando a diversos QA de la empresa en la que estoy trabajando a revisar PR, algunos PR reales y otros PR propuestos de repositorios de prueba para esa actividad.
Scientific Programming School - Special Offer!
Tags: startup, beginners, tutorial, programming
Published: 2021-04-24 01:00:43

![Scientific Programming School $12 Course Bundle Offer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td8ckum6us1fwtgdsgxx.png)

A **course bundle purchase** will enable you enrol to all the currently 🔥 bundled-courses at just one price. Anything published after the bundle is purchased won't be included, but you may re-purchase the new courses/ bundle anytime. If you are not happy, we'll offer you 100% refund!

**https://scientificprogramming.io/bundle-offer**

The courses are designed for **Computer Science** or any **STEM discipline** students to help guide them with the aspects of scientific programming such as data structures, algorithms, methods/functions, exception handling, functional programming, object-oriented programming, regular expressions, variables and operators, conditional statements and loops, arrays, classes and objects, encapsulation, polymorphism, and inheritance, abstract classes and Interfaces, anonymous and Inner Classes, parallel programming, HPC, threads, CUDA and so on. 

![Run Scientific Code Interactively!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tda3p60gwntxc2r0ip4b.png)

We created a small **private virtual cluster** with Docker technology to support our courses. The platform is powered by Digital Ocean's multiple droplets (VPS) with a highly scalable design (read our devlogs to learn more).

![course-bundle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmhqlw480lmhso048814.png)

**Why Bundle?** Because we believe sharing knowledge is the most wonderful human capability. Sharing your skills and knowledge is a powerful and generous way to give back and change the world for the better!

## About the Platform

The Scientific Programming School (**[scientificprogramming.io](https://scientificprogramming.io)**) is the next generation platform for creating and delivering interactive courses on high performance computing topics. It is an interactive educational 
platform that helps you to learn Linux, Devops, HPC and Scientific programming languages.

> We choose dev.to platform to promote, because it's got the best of the best readers who will value our attempt to spread the knowledge of scientific programming!
Agile isn't a religion
Tags: agile, scrum, practices
Published: 2021-04-28 08:31:03

---
title: Agile isn't a religion
published: true
date: 2021-04-24 00:00:00 UTC
tags: agile,scrum,practices
canonical_url: https://jhall.io/archive/2021/04/24/agile-isnt-a-religion/
---

It shouldn’t require stating, but **Agile isn’t a religion.**

Yet many people tend to treat it as such. I’ve heard countless discussions shut down with a phrase like “But that’s not agile.” Or “That’s not the Scrum way.” Or “but we use Kanban here.”

If you’re practicing a religion, these sorts of finalizing phrases may be appropriate in some cases (or not—I leave that debate up to the practitioners of each religion). But it certainly has no place among agile practitioners, as far as I’m concerned.

The “Manifesto for Agile Software Development” was written by some smart guys, but not by any diety. The Scrum guide was written by some of the same smart guys. If we elevate either of these documents (or any other) to the status of unalterable scripture, we’re missing the point that’s even embedded in the name: Agility.

Take these documents as helpful, but fallible guides. And next time someone (maybe you) tries to shut down a conversation with “but that’s not agile”, take a step back, and consider how the conversation could be approached with _true_ agility.

* * *
If you enjoyed this message, [subscribe](https://jhall.io/daily) to _The Daily Commit_ to get future messages to your inbox.
How to set typescript types for a page or a functional component in Next.js?
Tags: nextjs
Published: 2021-04-24 00:00:00

---
  title: How to set typescript types for a page or a functional component in Next.js?
  published: true
  tags: Nextjs
  date: Sat Apr 24 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-typescript-types-for-nextjs-page-or-functional-components
  cover_image: https://melvingeorge.me/_next/static/images/main-de8e9f610c21c4c90848457eb88c2761.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-typescript-types-for-nextjs-page-or-functional-components)
  
When using Typescript with Next.js, you may have to set types for a single page or a functional component in Next.js. You can do that by importing the `NextPage` type from the `next` module and then setting it as the type for a page or functional components.

For example, let's say we want to set the type for the index page (or `index.tsx` file) in Next.js. First, we have to import the `NextPage` type from the Next.js module like this,

```jsx
// import NextPage type from nextjs
import { NextPage } from "next";
```

Now we can use the `NextPage` type on our `index.tsx` file like this,

```jsx
// import NextPage type from nextjs
import { NextPage } from "next";

// setting type for index page
const IndexPage: NextPage = () => {
  return <h1>Hello World!</h1>;
};

// exporting IndexPage as default export
export default IndexPage;
```

This same approach can be used for any functional components in Next.js.

See the above code live in [codesandbox](https://codesandbox.io/s/setting-typescript-types-for-nextjs-page-or-functional-component-sed9j?file=/pages/index.tsx)

That's all 😃!

### Feel free to share if you found this useful 😃.

---
HTML CHARACTER ENTITIES: USEFUL MORE THAN YOU THINK
Tags: codenewbie, 100daysofcode, css, html
Published: 2021-04-23 23:55:03

HTML character entities are texts, usually, a mixture of symbols used to display reserved characters, including emojis, in HTML. They begin with an ampersand (&) and end with a semicolon (;). The most widely used HTML entity on the web is the copyright symbol (©, coded &#169;, &copy;, and &COPY; )  found on a lot of websites footer, including my own  [portfolio](https://ksound22.github.io). 

Almost everybody seems not to notice these special characters are not for displaying the copyright symbol and random emojis alone. One other thing I find useful about them is making logos for websites. And sometimes, you might not need an icon library for your project at all as there is a code for almost every symbol, if not all actually.

Some HTML character entities include:

- `&#x00024`; – Dollar
- `&#x00040;` – asterisk 
- `&#x000A3;` – pound
- `&#x0003E;` – greater than
- `&#x0003C;` – lesser than 
- `&#x0002B` – plus
- `&#x0260E;` – telephone
- `&#x02665;` – Dark hearts
- `&#x02606;` – star
- `&#x02640;` – female
- `&#x02642;` – male
- `&#x0266A;` – sung
- `&#x02666;` – diamond
- `&#x02736;` – sext
- `&#x02660;` – spade

You can find a lot of other HTML entities in the official list of character entities  [here](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references) and  [here](https://dev.w3.org/html5/html-author/charref).

In the code snippets below, I tried to craft a logo for a mystery soccer club with HTML character entities and CSS positioning:

```HTML
    <div class="container">
        <span>
        <div class="lion">
            &#129409;
        </div>
        <div class="crown">
            &#128081;
        </div>
        <div class="ball1">
            &#9917;
        </div>
        <div class="ball2">
            &#9917;
        </div>
        <div class="text">
            <h4>KINGS FC</h4>
        </div>
        </span>
    </div>
``` 

```CSS
/* The CSS */
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div {
  display: inline;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

span {
  border: 20px outset orange;
  border-radius: 9px;
}

.lion,
.ball1,
.ball2,
.text {
  font-size: 30px;
}

.lion {
  position: relative;
  top: 40px;
  left: 78px;
}

.crown {
  position: relative;
  top: 10px;
  left: 26px;
  font-size: 35px;
}

.ball1 {
  position: relative;
  top: 68px;
  left: -2px;
}

.ball2 {
  position: relative;
  top: 69px;
  left: -100px;
}

.text {
  position: relative;
  top: 30px;
  left: 25px;
  color: orange;
}
``` 


The output in the browser: 

![logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619221341299/FZo-NuKeu.png)


Obviously, I could be more creative. You should be more creative too because HTML character entities are useful more than you think.

Thank you for reading.
Connect with me via my  [portfolio ](https://ksound22.github.io) or my Twitter account  [@koladechris](https://twitter.com/koladechris)
Data Lake Houses
Tags: aws
Published: 2021-04-23 23:54:13

I am writing about the emerging connections between cloud data warehouses and cloud data lakes.  This is called a 'data lake house' pattern (concept using AWS services shown below).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvamzj3235m0d67aff24.png)

Over the years I've built many AWS Redshift data warehouses and a couple of AWS S3 data lakes.  What about you?  What types of AWS solutions are you building for data analytics lately?  

I am particularly interested in communicating with those of you who are using the [AWS Lake Formation](https://aws.amazon.com/lake-formation/features/) services.  These 'sit on top of' AWS S3 adding federated security and other key services to an AWS Data Lake.  When I built data lakes, AWS Lake Formation wasn't yet available, so my teams had to build these control services manually.

I've also been looking at [AWS Glue Data Brew(https://aws.amazon.com/glue/features/databrew/).  The data profiling looks to be very useful (shown below).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3sblgfaxddopr8z2oqz.png)

I am very curious about Data Brew's scalability and cost in production vs. more traditional ETL and/or Hadoop/Spark batch transform methods.

I'll be posting on this topic over the next few month's.  If this is of interest to you, follow me on twitter as well.  Let's connect!