teleren/devto huggingface dataset:
Of Bundles and Barrels
Published: 2021-11-19 19:53:32

---
title: Of Bundles and Barrels
published: true
date: 2021-01-17 00:00:00 UTC
tags: 
canonical_url: https://blog.koenvangilst.nl/Of-bundles-and-barrels/
---

Until recently I’ve been an unequivocal fan of so called barrel files. They work like this:

```
// src/components/index.js
export * from './Foo'
export * from './Bar'
export * from './FooBar'
```

Which allows you to use components like this:

```
import { Foo, Bar, FooBar } from 'src/components'
```

Short and sweet! For this reason I’m also a happy user of the VSCode plugin [Auto-barrel](https://marketplace.visualstudio.com/items?itemName=mikehanson.auto-barrel) which helps with creating/updating these barrel files.

I did recently discover, however, that this pattern can have unwanted side effects. Re-exporting all your imports in an index file can result in large bundle sizes.

I gave it a try on one of the projects I’m working on (using Next.js) and lo and behold: Removing the barrel in the `/components/ui` folder reduced the initial bundle size by more than 35kb. The culprit: In the `ui` folder was a `RichTextEditor` component of 35 kB. Since it was re-exported this was included on every page using a component from the ui folder.

So be careful what you put in your barrels, if you care about bundle size!
QuizApp JavaScript 😍
Tags: 100daysofcode, javascript, html, css
Published: 2021-01-16 23:55:52

Quiz App Using HTML5, CSS3 & JAVASCRIPT 😍🎉

Demo : https://quiz-appjs.netlify.app/

Repo : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day20
💬 - What's the COOLEST Vim plugin?
Tags: codenewbie, discuss, vim, help
Published: 2021-01-16 23:53:05

Hello!

A while back I wrote a post [asking for who knows Vim on Indiehackers](https://www.indiehackers.com/post/any-vim-experts-out-there-c9df014ea1)

I got a lot of responses and useful advice.

Today I started to configure my `.vimrc` and wanted to open this question up to the community:

### ***What are your favorite plugins for configuring Vim?***

Thanks for your help. The ocean 🌊 of Vim plugins out there can be quite a lot to take in. I have found some essential plugins such as `NerdTree` and the `palenight` theme, but I was wondering what other great plugins were out there.

Feel free to share in the comments below ⬇
Which Rust crate to use as GUI framework right now (Jan 2021)?
Tags: discuss, rust
Published: 2021-01-16 23:48:55

[<span>Photo by <a href="https://unsplash.com/@aquatium?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Harpal Singh</a> on <a href="https://unsplash.com/s/photos/ui-design?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>, modified]

I am writing a post on the subject of Rust GUI, and sadly I am realizing that no much progress has been done in this area lately.

The site [AreWeGUIYet](https://www.areweguiyet.com/) seems almost abandoned to its own fate...

Thus I am polling you guys to know which Rust crate would you recommend to use in 2021 in order to give a Rust program a nice GUI?
Meet Strapi my beautiful backend developer (who works for free ;)
Tags: webdev, javascript, node, strapi
Published: 2021-01-16 23:47:17

so as a fullstack developer i used to start my project with building the API ( usually takes 80% of the project working time ) and then work on the frontend stuff ( it's bretty easy and straight forward ) then of course deployment, but with strapi ( a headless cms link: strapi.io ) make my backend up and running in about 10 mins then i configure it ( takes 15 minutes ) and then i work on the ui for my website and that makes development time less than the usual by 70% of the time and i think that it is an amazing thing and encourage me to build more projects ( faster of course ).

don't forget to check strapi out at strapi.io
Moving from Scrum to Shape up methodology
Tags: agile, startup, productivity
Published: 2021-01-16 23:24:39

Hi guys,

I am sure you all know and majority of you worked with Scrum, here I am sharing about relatively new methodology Shape up and why our startup team decided to switch from Scrum to Shape up. 

https://link.medium.com/SaLdZp4A6cb

Would love to know if any of your teams use Shape up as well? 

btw, I share weekly insights on project management and startups on my medium profile, if you somehow would get interested and would want to get notified via email, can arrange that 🙄
I built a Download Fleets of Twitter Flutter App
Tags: flutter, fleets, twitter
Published: 2021-01-16 23:12:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5jn9ybxqe0s522ku5lr9.png)

So Twitter has now entered in the bandwagon of stories with their "Fleets" that's how they call it. 

So i tried to do some coding to see if i would be able to fetch and download the fleets of a user. It was pretty good but i wanted to test Flutter to see how fast i would make an app with a couple screens and not much code at all.

The app basically has 3 screens(Home, About and Privacy Politics), 

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


there's another screen that pops up to show all the fleets o fthe users.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/84uaz4yrag93xckrx8gy.png)

### What i use?

Flutter 1.22 latest.

**Dependencies:**
* firebase_admob
* firebase_core
* firebase_crashlytics
* dio
* getx
* logger
* http
* flutter_markdown
* url_launcher

You can download the app via Google Play **[Link](https://play.google.com/store/apps/details?id=com.fleets.fleetsdownloader)**

It will be available for iOS in the next couple days.
Metamask in a window
Published: 2021-01-16 23:02:17

Metamask drives me up the wall. It is a huge UX in a tiny dropdown that closes any time you click away.

To open it in a browser tab / window is easy in two steps:

A: Window -> Extensions, grab the ID value.

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

B: Open a new tab / window and paste in a URL that looks like this.

chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/home.html

(Replacing the ID from the Extensions box with the URL above)
WebAssembly + Rust + TypeScript project setup
Tags: webassembly, rust, typescript, webpack
Published: 2021-01-16 22:59:04

>I created a repository with example project which you can find here: **[web-assembly-rust-typescript-template](https://github.com/kaczor6418/web-assembly-rust-typescript-template)**

## What you will need:

 - **[`npm and node.js`](https://www.npmjs.com/get-npm)**
 - **[`rust and cargo`](https://www.rust-lang.org/tools/install)**
 - **[`wasm-pack`](https://rustwasm.github.io/wasm-pack/installer/)**
 - **[`webpack 5`](https://webpack.js.org/)**

## How to set up project

### Set-up

#### Web - TypeScript part

 1. Initialize npm project
	   ```
	   npm init -y
	   ```
 2. Install the following dependencies
	   ```
	   npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader typescript
	   ```
 3. Create *`index.js`* file and export your App (this will be an entry point of your application)
	   ```typescript
	   export { App } from './App';
	   ```
 4. Create *`bootstrap.ts`* file in which you will import your *`index.js`* asynchronously. We have to load the app asynchronously because `.wasm` files have to be loaded asynchronously
	   ```typescript
	   import('./index').catch(e => console.error('Error importing **index.ts**:', e));
	   ```
 5. Create `webpack.config.js`. Here we have to use `experimetns: syncWebAssembly` to load our `.wasm` files
	   ```javascript
	   experiments: {
             syncWebAssembly: true
           }
	   ```
 6. Add `serve` and `build` script to your *`package.json`*
	   ```json
	   "scripts": {
             "serve": "webpack serve",
             "build": "webpack"
           }
	   ``` 

#### WebAssembly - Rust part
 
 1. In root of your project create wasm project using `wasm-pack`
	   ```
	   wasm-pack new name-of-package
	   ```
 2. Go to package directory
    ```
    cd ./name-of-package
    ```
 3. Run `wasm-pack build` to build your wasm package 

### Link wasm-package with TypeScript code

 1. Install your wasm package (if you publish your wasm package then you can install it via `npm`)  
	   ```
	   npm install wasm-package-name/pkg
	   ```
 2. Make sure that you can find this dependecy in your *`package.json`*
	   ```json
	   "dependencies": {
	     "wasm-package-name": "file:./wasm-package-name/pkg"
	   }
	   ```
 3. Make sure you have `"moduleResolution": "node"` in your *`tsconfig.json`*

## Summary

If you followed all those steps you should have all typing hints from your wasm-package in your typescript project
What's the main problem with evaluating your skills?
Tags: programming, confidence, career
Published: 2021-01-16 22:53:54

I often doubt my programming skills and experience when it comes to project something unusual or choosing between data transport for a particular case (pub/sub or maybe a queue?).

Last time I caught myself on something trivial (It was 2 years since I had to write it myself) - quicksort. I didn't quite remember how to do it well, so I google formula and write a solution, but again - I started to doubt my skills because of that. 

Why I forget about something that simple? Maybe I should write the code and eventually find out the right formula by myself? It would take some time, yeah, but... it would calm my mind, but then I probably would be less productive that day.

I started to blame myself for that later, but after some time I realized that I saw lately something similar - someone on Facebook group bullied junior because he didn't remember the formula for calculating the average from numbers. 

I started to imagine - *what if the junior and the guy who bullied him was one and the same person?*

And then it struck me - **Why I should blame myself or feel less confident about my skills when I forget something that I didn't use in a long time?**

It will be okay if I don't remember the minor differences between queue or pubsub, because **I don't need to remember it!** I only need to remember **that some minor differences exist** - that's all, because if I need to know these differences - then I will just do my research!

I hope it will help someone with similar thoughts
MLH LHD Build 2021 My experience and projects
Tags: mlh, majorleaguehacking, localhackday
Published: 2021-01-16 22:45:28

# Days throughout the workshop
So it was actually my friend who got me into MLH local hack days. While I was worrying about how I was going to study for my finals, he brought up the idea of taking part here. Now I was really hesitant to join because we had finals coming up in a week but the exams getting delayed to the next month was just the right amount of boost I needed to motivate myself into joining the Local Hack Day.
On the first day we were greeted by the most humble people that we've ever seen. Mary and Ryan who helped us with the introduction to the local hack day and a week later they are as energetic as ever. Helping anyone who would approach them. Then came the workshops and we were able to meet and interact with some of the best mentors out there. Their livestreams were absolutely phenomenal. Blahaj is still by far the most funniest thing to happen during the streams.
 
# My projects
Now that it had been a couple of days for the workshops. I found myself knee deep in challenges. Working with programs that I had never seen before. Tackling challenges along the way. Everything seemed like a mess at first, but with proper guidance, we were able to achieve almost 80% of our projects. 
The project that I was most proud of was the Python and OpenCV Face Detector that I made. It was my first time going into computer vision and I had an absolute blast working with it. I messed around with libraries and functions and was able to learn so much more. You can check out my project here [link](https://github.com/AWESOMEPIEMAN/FaceDetectionOpenCVPy). I would love for you to interact with it aswell.

# Working with people
Most of the time I was working with my friend and some people from our guild. Here's a picture of me (Right) and my friend (left) posing for the take a picture with your teammate challenge. Aren't we adorable :3 ? 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/87xndu075tlogauvmfck.PNG)
Numeric Separators in JavaScript
Tags: javascript, beginners, tutorial, webdev
Published: 2021-01-16 22:08:20

<p><span class='first-letter'>N</span>umeric Separators give us the ability to separate thousands with an underscore (_) in numeric literals.</p>

### How it’s useful❓

It makes our code more informative and readable.

```js
let series = 10000;
```

Numeric Separators in javascript, enables underscore as a separator in numeric literals to improve readability.

**Example:**

```js
let series = 1_00_00;
```

You can also use this for binary, octal, and hex numbers.

<mark> Binary Number</mark> 👻

```js
let series1 = 0b1010_0101_1001;
console.log(series1); // 2649
```

<mark>Octal Number:</mark> 👻

```js
let series2 = 0o2_3_5_7;
console.log(series2); // 1263
```

<mark>Hex Number:</mark> 👻

```js
let series3 = 0xA_B_C_D_E;
console.log(series3); // 703710
```


### Few Limitation 🤦‍♀️

<p>Below limitation snippet will throw <i>SyntaxError</i></p>

1. More than one underscore in a row is not allowed

    ```js
    let series1 = 100__000;
    ```

2. Can not be used after leading 0

    ```js
    let series2 = 0_1;
    ```

3. Not allowed at the end of numeric literals

    ```js
    let series3= 100_;
    ```

### Browser Support 🎗

This feature has pretty good support in recent versions of browsers. 

Check this out 👇

<img src='https://i.imgur.com/QcXWq8v.png' alt='browser support for numeric separators' />


### Reference 🧐

- <a href='https://v8.dev/features/numeric-separators'>Numeric Separators V8</a>
- <a href='https://caniuse.com/#feat=mdn-javascript_grammar_numeric_separators'>Browser Support</a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
The Best Front End Editor for 2021
Tags: texteditor, besttexteditor, ide, bestide
Published: 2021-01-16 22:05:42

---
title: The Best Front End Editor for 2021
published: true
description: Let's figure out the best text editor for year 2021
tags: texteditor, besttexteditor, ide, bestide
---

### The Best Front End Text Editor
There are many text editors that can help engineers code the latest and greatest/powerful websites or applications. Many stood out to me but there is one that I would recommend which is VSCode. 

What text editor do you use or recommend? 

{% youtube lnvtldTRdL0 %}
MLH-LHD
Tags: mlh, majorleaguehacking, localhackday
Published: 2021-01-16 22:04:32

Hello Devs ! , I wanna share with all of you that I have participated in Major League Hacking Build series commonly knowns as MLH-LHD. Every day I am exploring new hacks and challenges. Challenges are so good, and I am doing it between my exams as it is too addictive. My days are going like Eat, sleep, doing Coding tasks, and Repeat. The best way of conducting a hackathon is when you get rewarded for each thing you do. This is my first time taking part in such an event, looking forward to attending another and win :)
First post! 
Tags: firstpost, newbeginnings
Published: 2021-01-16 22:00:57

Hello, I hope it reaches more people out there. Since, I am new to this platform and having a passion to write. I will be begin my journey as a content creator soon.

The soul of programming is to keep practicing and know when to take a break. That's what my experience says about it. 

I must be sleeping by now since it's almost 3 am. See you another time. 

Stay blessed
An opportunist with ethics
Day 7, 8 - 100daysofcode
Tags: react, javascript, 100daysofcode, webdev
Published: 2021-01-16 21:58:56

In the past two days, I`ve been practicing with react state
with some exercises as part of the course. 
and also sorry to the one reading it the day was not as productive as it should be but will try to make the next day(s) count 😁
also will upload the small games I have been working on and share the demo with you all.
that's all for the day, next up will be working on React forms and will try to read the react docs.
#100daysofcode 🚀🚀🚀
How to set up Matomo analytics in your Hashnode blog
Tags: tutorial, beginners, hashnode, matomo
Published: 2021-01-16 21:51:18

<!--
Title: How to set up Matomo analytics in your Hashnode blog
Tags: tutorial, beginners, hashnode, blog, matomo
-->

# Introduction

Today I bring incredible news; Hashnode has finally added [support for Matomo analytics](https://hashnode.com/post/support-for-matomo-formerly-piwik-ckevg1tnn00tcn1s18ima1ihs)!

> Matomo are powerful open source web analytics which gives you 100% data ownership.

I just noticed it in the _integrations_ tab of Hashnode's dashboard, so...

**Let's learn how to integrate Matomo in Hashnode!**

---

## Before we start

### Requirements

- A Hashnode blog
- A Matomo server

---

## New Matomo website

To start, you will need to go to your Matomo server and create a new website.

Create it in: `All websites` > `Add a new website`.

Now, fill the form with your current Hashnode details, grab the site ID, and you are ready to go!

![Matomo form](https://dev-to-uploads.s3.amazonaws.com/i/qob56vcg9hgq74mx9x64.png)

---

## Add Matomo integration

Now that you have the Matomo site set up, go to your Hashnode dashboard and choose the `integrations` tab.

There you will see a form for Matomo. Just fill it with your Matomo server details.

![Hashnode form](https://dev-to-uploads.s3.amazonaws.com/i/cxixcmxqqla761cmrnka.png)

---

## End

And that was it, **100% open source analytics on your Hashnode blog in less than 5 minutes**. Easy right?

### What's next?

Take a look at your Matomo analytics, you should start to see people coming in to your blog to enjoy your incredible articles. 😉

<!-- INCLUDE -->

### Self-promotion

If you have found this useful then you should follow me, I will be posting more interesting content! 🥰

- [GitHub](https://redirect.akbal.dev/github)
- [Twitter](https://redirect.akbal.dev/twitter)
- [Dev.to](https://redirect.akbal.dev/dev.to)
- [Medium](https://redirect.akbal.dev/medium)
- [LinkedIn](https://redirect.akbal.dev/linkedin)

Or support me financially. 💸

- [GitHub Sponsors](https://redirect.akbal.dev/github/sponsor)
- [LiberaPay](https://redirect.akbal.dev/liberapay)
- [PayPal](https://redirect.akbal.dev/paypal)

<!-- /INCLUDE -->

### Conclusion

Congratulations, today you have set up Matomo analytics for your Hashnode blog in a breeze.

**Let me know if the tutorial was useful to you in the comments!**
JavaScript Array Reduce [Beginner Tutorial]
Tags: javascript, jsreduce, javascriptreduce
Published: 2021-01-16 21:36:40

---
title: JavaScript Array Reduce [Beginner Tutorial]
published: true
description: Array reduce, the complete breakdown
tags: js, javascript, jsreduce, javascriptreduce 
---

### Array Reduce
Array reduce is one of the most useful and powerful array methods used in modern websites and applications. It was a bit hard for me to understand the value and use case of this method in my early career in programming. I made a video to hopefully help someone new in the industry, link below.

{% youtube SGjIG1ZiH2w %}
Cómo aplicar el "html lang" en next.js
Tags: nextjs, javascript, webdev, codenewbie
Published: 2021-01-16 21:22:00

En este post súper breve te voy a enseñar cómo agregar el `<html lang="">` en nuestro proyecto en next.js.
Nosé si existe otra manera ya que no tengo mucha experiencia en next, si conoces otra manera déjalo en los comentarios. 😊

En next.js hay una carpeta llamada "pages" que por ejemplo puede contener los siguientes archivos:

* `_app.js`
* `index.js`

Aquí nosotros agregaremos un nuevo archivo llamado `_document.js`. 

> **Es importante que tenga el `_` al principio.**

---

En este archivo importamos lo siguiente: 

```js
import Document, { Head, Html, Main, NextScript } from 'next/document';
```
Ahora agregamos el siguiente código:

```js
import Document, { Head, Html, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      // Agregamos el idioma que deseemos, aquí por ejemplo español.
      <Html lang="es"> 
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
```
Luego de agregar esto debes reiniciar el servidor local para que se agreguen los cambios. 
Y listo eso es todo, todas las etiquetas que se encuentran en la función son necesarias para que funcione correctamente.

Más información sobre `next/document` en la documentación oficial: [Custom Document](https://nextjs.org/docs/advanced-features/custom-document).

---

Espero que este súper súper súper breve post te sea de ayuda! 😄

Me puedes encontrar en [Twitter](https://twitter.com/franqsanz).

Saludos!
How to wisely invest your time and money in your startup. Here is what options I see
Tags: startup, career, entrepreneur, business
Published: 2021-01-16 21:19:29

How much do you value your time when working on your startup? Let's say you can be earning $10k/month as a full-time software developer. But instead, you quit your day job and spend all your time working on your startup. And you do all kinds of stuff: from marketing to finances to programming, etc.

Does it mean you put these $10k/month in your startup? Meaning you could be earning your salary on a job, but you quit, so it means you invest this cost of opportunity in your startup.

Let's look at this from another perspective.

Let's say you don't quit your job and keep working full-time and spend these $10k(or whatever your salary is) on hiring a bunch of cheap overseas employees(but still high quality) and let them work on your startup. And you spend 1-2 hours a day coordinating the team.

Will the project move faster? Will the ROI of money/time spent be higher in this case?

Honestly, I've tried both ways and still don't have a strong stance on this.

I would say: "it depends." It depends on the project itself, whether the team can drive it on autopilot, and how much of your involvement is needed to move with a reasonable speed. And how much of the project work requires your unique expertise.

What would you choose for your startup?

1. Keep working on your day job and invest your salary into hiring a team and spend 1-2 hours a day coordinating the project?
2. Or quit your day job and work on the startup by yourself?
Other option?

What do you think? Tell me in the comments or **[let's discuss on Twitter thread](https://twitter.com/AlexBezhan/status/1350552106235801603)**