teleren/devto huggingface dataset:
Svelte for web components, are we there yet?
Tags: svelte, webdev
Published: 2020-11-25 19:02:43

Okay here's my view on Svelte. Having picked it up and attempted to use it for Web components.

I am writing a component library for a very specific admin UI.

### What is Svelte:
It is **not** a Framework or Library it and so is not something you could compare to React, Vue, Angular etc. That might surprise you? Well Svelte is a programming language ontoitselft compiling CSS HTML and JavaScript.

In this regard it's all happening at build time which means that things can be optimized and stuff can be lighter than have no runtime overhead.

So that bit is great.

Why I don't like Svelte for web-components, I'm afraid it's not plain JavaScripty enough, the templating syntax is something like handlebars and I just want a template literal syntax. Svelte gets in the way not providing all the good things like closed encapsulated shadow Dom (that's the big one for me) I need encapsulation for embedding web components inside customer applications, so svelte web components are currently useless.

## Alternatives
- Hybrids.js
- Riot.js
- Lit Element (it's a bit heavy)
Glaxnimate: Create 2D Vector Animations for the Web
Tags: webdev, news, showdev, python
Published: 2020-11-25 19:00:53

Glaxnimate is an Open Source animation editor focused on creating vector graphics animations for the web.

![Main Window](https://dev-to-uploads.s3.amazonaws.com/i/ng58xxg9apb5og5j60if.png)

# Supported Formats

While Glaxnimate also supports more traditional formats (among others GIF, WebP, and MP4), its focus is exporting to Lottie and animated SVG, both of which allow embedding the animation in web pages without losing resolution.

Lottie has been gaining traction as a web format for animations but it lacks good open source editors. Glaxnimate has the goal to fill this gap and to allow you to create and edit Lottie animations without the need of expensive software like Adobe After Effects.

Glaxnimate also allows you to preview how Lottie and SVG animations look in your browser with a click of a button.

# Vectorization

![Trace Bitmap Dialog](https://dev-to-uploads.s3.amazonaws.com/i/99q1enojc13kxrok3o5i.jpeg)

If you have existing raster images that you want to animate as vector graphics, Glaxnimate has you covered with its advanced bitmap tracing functionality.

# Tweening

Since Glaxnimate is focused on vector animation, it employs the technique known as "tweening". This means that you need to only modify certain keyframes and the animation runs smoothly between the given shapes. 
It also gives you a few built-in easing options to easily make extremely smooth animations and it also allows you to fine-tune the transition between keyframes if you need more advanced controls.

# Scripting

Glaxnimate has extensive scripting functionality with Python.
It provides a plugin system which you can use to add support for new file formats or simply automate certain tasks.
It also has a script console where you can run small snippets and see the changes live. 
It even comes as python package if you want to create, modify, or export your animations programmatically.

# Cross Platform

Glaxnimate runs on GNU/Linux, Mac, and Windows. It provides several binary packages on its [download page](https://glaxnimate.mattbas.org/download/).

# Customization

![Settings Dialog](https://dev-to-uploads.s3.amazonaws.com/i/u5z7xm6s065egckfkuen.png)

Glaxnimate's UI is fully customizable: you can change colors, icons, layout, and more. 

# Learn More

If you think Glaxnimate is interesing, here are some resources:

* [Gitlab Repository](https://gitlab.com/mattbas/glaxnimate/) - You can show your appreciation by giving a star
* [Download Page](https://glaxnimate.mattbas.org/download/)
* [User Manual](https://glaxnimate.mattbas.org/manual/)
* [Python API](https://glaxnimate.mattbas.org/contributing/scripting/)
* [Python Package on PyPI](https://pypi.org/project/glaxnimate/)
Boost your productivity with one of these To-Do apps.
Tags: productivity
Published: 2020-11-25 18:45:52

Finding the right to-do list app can be exhausting and time-consuming especially when looking for a free version(trust me, I know). In this blog, I'll be sharing some of the top free to-do list apps along with some of their advantages and disadvantages.

Note: There's no particular hierarchy for the numbering as they're numbered randomly.

1. Microsoft To-Do: If you're looking for something simple and minimal then this should be your go-to choice. It is easy to set up and start using and it is easily customizable. It also syncs with the mobile app on your phone so you can create tasks on the go. Microsoft To-Do is free forever.

2. Tick Tick: Boasted as MKBHD's productivity app of choice, (at least that's what they describe it as) this app has quite the features. For starters, it has apps on all the major operating systems and browsers so you can create tasks from anywhere. You can pretty much do anything you need with its free version without needing to upgrade. But if you do, it's just $2.99/month.

3. Tweek: This is a web-based app in a calendar form. It is very easy to use and minimal and you can schedule tasks for the whole week with its drag and drop feature. It is 100% free to use(for now at least), just register an account and you're good to go.

4. Todoist: Currently the no.1 to-do app when it comes to power and simplicity. It also has support for all the platforms. It has a free version with an upgrade of $3/month.

5. Asana: Asana is also a web app with iOS and Android applications. Its free version alone is enough to sustain you for your personal use. It is also great for teams as it offers easy collaboration features and app integrations.

Other apps that I didn't mention but worth checking out.

Things 3
Omnifocus 3
Any.do
Remember the milk
Workflowy
Toodledo
Don't bother me with your awesome framework, I simply want to retrieve data from a public API :-)
Tags: javascript
Published: 2020-11-25 18:23:18

One credo, do simple things the simplest way possible...

You can test it here [VanillaJS](https://codesandbox.io/s/taggedtemplate-1-re8wv)

Beware, don't copy and paste code on production, without asking yourself if it is safe or not.

For example, you have noticed, that my code does not allow  any input from user.
If it was the case I would adopt another strategy...

Thanks Heiker :-)

```js
let cible = document.getElementById("app");

let ligneUser = (info) => `
  <tr>
    <td><img src=${info.picture.thumbnail}></img></td>
    <td>${info.name.first}</td>
  </tr>`;

let footer = `
  <div>Vanilla JS only...</div>
`;

let tableau = (lignes) => `
  <table border="1">
    <tr>
      <th>Photo</th>
      <th>Name</th>
    </tr>
    ${lignes} 
    <tr class="footer">
      <td colspan="2">${footer}</td>
    </tr>
  </table>`;

function displayUsers(data) {
  const users = data.map(ligneUser).join("");
  cible.innerHTML = `
    ${tableau(users)}
  `;
}

async function getListUsers(numusers) {
  cible.innerHTML = "searching...";
  let resp = await fetch(`https://randomuser.me/api/?results=${numusers}`);
  let users = await resp.json();
  displayUsers(users.results);
}

getListUsers(6);
```
To Vim, or not to Vim? with Allan MacGregor & Alex Smith
Tags: discuss, podcast
Published: 2020-11-25 17:58:36

---
title: To Vim, or not to Vim? with Allan MacGregor & Alex Smith
published: true
description: A preview of this week's episode of DevDicsuss, plus some easy listening links
tags: discuss, podcast
series: DevDiscuss Season 3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/725enytzucu64kppedl6.png
---

> **Listen to S3E3 here on DEV:**

{% podcast https://dev.to/devdiscuss/s3-e3-is-vim-worth-your-time %}

This week on the show, @Jess and I focused on Vim: the Unix text-editor that's included in Linux, BSD, and macOS. It's highly customizable, efficient, and considered a "programmer's editor". However, Vim also has a steep learning curve which deters a lot of folks right off the bat. In other words, Vim always generates a lot of conversation.

We were joined by two guests with extensive Vim knowledge (and opinions!) for a discussion that covered many facets of the editor, from configuration tips, to our favorite features, to counter-arguments _against_ Vim: 

- Allan MacGregor, Software Engineer, functional programming advocate, and author:
{% user allanmacgregor %}


- Alex Smith, Software Engineer here at Forem:
{% user atsmith813 %}

Check out [this DEV article](https://dev.to/allanmacgregor/vim-is-the-perfect-ide-e80) by Allan (originally published on Hackernoon) to get a sense of the passion Vim often stirs in programmers. 

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/podcast/id1513053883)
- [Spotify](https://open.spotify.com/episode/1SmZwfQhiGi6MxaWIy8O7T)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzIw?sa=X&ved=0CAQQkfYCahcKEwiwnKD-jZ7tAhUAAAAAHQAAAAAQAw)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s3e3-is-vim-worth-your-time-SPLAWIU8tgj/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=159005233)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [Transcript](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/67)
- [Pocket Casts](https://pca.st/z903xg55)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season three sponsors, [Triplebyte](https://triplebyte.com/a/YU8fSn0/d) and [Rudderstack](https://rudderstack.com/)!

# 🗣️🗣️🗣️
Webpack
Published: 2020-11-25 17:57:31

**What is webpack**

Webpack is a bundler (**A bundler is basically a tool that puts all your codes and dependencies together in one JavaScript file.** ), but actually is more than that.
A bundler alone will just concatenates all the files, webpack not only concatenates the files, but also optimises your files and allows you to hook in various plugins to transform your files.
For example, it transpiles the next generation javascript to current generation javascript

But in its core, the idea behind webpack is to have mutliple `javascript`, `html`, `css` and whatever files you have and bundles them together.
It then tries to analyse the connection between these files, like the import and export and bundles them together and allows you to optimise it.

**How Webpack works**


Lets take a look how webpack actually works behind the scenes.
Behind the scenes, webpack has 4 important features

> An entry point

It always needs at least one entry point (you can have multiple though).
If we consider a `react-app` , this could be our `app.js` file, which basically is our root file that mounts our react app to the DOM.

The reason why it needs this file is, because it then analyses the dependencies of this file so that it can understand the different files that make up our application and then bundles them together into an `output` we specify, like bundle.js in dist folder `dist/bundle.js` (the name of file and the location where this needs to be placed is specified by us).

This is the core functionality, but there is more to it.
In between providing the entry point and outputting the file, there are two more important feature which we can utilise.

* <i>Loaders</i>

Loaders are basically per file level, so for example, we can say that all the `javascript` files should get handled by `Loader X` , all `css` files should get handled by `Loader Y`
`babel-loader` & `css-loader` are the popular examples which gets used in most of the projects. So, Loaders are file dependent or apply file dependent transformations.

* <i>Plugins</i>

Where loaders are applied on a per file basis, plugins instead take the concatenated files, so the bundle but before it's written to the output.
Here we can apply some general transformations or optimization, for example [uglify plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin)


So this is how webpack works and what it does behind the scenes, and this is all set up in a webpack configuration file which I will be walking you through in my next articles.

Stay Tuned !
React Project Setup
Tags: react, tutorial, webdev
Published: 2020-11-25 17:54:44

React is a frontend javascript library used to create modern web apps and websites. It uses jsx element which allow us to write html in js file. Mostly people struggle with how to get started with React and some just jump right into it without understanding the workflow of react. So , here is a video explaining some things.

{% youtube Sob853aQ4lU %}
Welcome Thread - v101
Tags: welcome
Published: 2020-11-25 17:52:27

---
title: Welcome Thread - v101
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Nerdy Heart Waving Hello](https://media.giphy.com/media/ehTzFBjQEyh8lQAn8b/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Awesome List of Black Friday Sale for Geeks.
Tags: opensource, github, webdev
Published: 2020-11-25 17:34:21

Black Friday Sale is on :tada:

It's the best time to purchase Domains, Educational Resources , Productivity Resources etc. etc. :smile:

My Friend and colleague [@Avikki](https://github.com/AviKKi/) has created an [Awesome List](https://github.com/AviKKi/awesome-blackfriday-sale-2020) of Black Friday and Cyber Monday sale for geeks :sunglasses:
 
More Deals are on the way. :truck:

Don't forget to :star: the Repo.

Repository Link : [AwesomeList](https://github.com/AviKKi/awesome-blackfriday-sale-2020)


Hope you like it. Thanks :smile:
Making Regular Expressions Readable in JavaScript
Tags: webdev, javascript, regex, opensource
Published: 2020-11-25 17:26:48

---
title: Making Regular Expressions Readable in JavaScript
published: true
description: Regular Expressions are complicated to write. It's even more difficult to reason about them; especially if you have to read someone else's code.
canonical_url: https://rfornal.hashnode.dev/making-regular-expressions-readable-in-javascript-ckhunxegi00gtgms10w8t0b0o
series: Open-Source
tags: WebDev, JavaScript, Regex, OpenSource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/208doojpl2qx64inwxp9.png
---

# Reggie-Docs

> "My first foray into Open Source development."

Now, this is not the first time I've contributed to open-source software. It is the first time I have submitted my own project to [npmjs](https://www.npmjs.com/~bfornal).

## The Project: Reggie Docs

Regular Expressions are complicated to write.

It's even more difficult to reason about them; especially if you have to read someone else's code.

About a year ago, I wrote an article about an experiment I was working with (see it [HERE](https://dev.to/rfornal/regular-expressions-and-template-literals-45f9)). I've actually used this pattern several times since writing the article and working through the code.

Then, someone said, "this should be an open-source library."

And ... something in my brain clicked.

And ... I started reworking the codebase I had into something more functional.

## The Open-Source Project

The project is here: [reggie-docs](https://www.npmjs.com/package/reggie-docs).

This project will allow a developer to use a Template Literal to build a regex, with comments to make it more readable.

```javascript
const code0001 = `
  /* Matches text avoiding additional spaces
  */
  ^       // Beginning of line
  [\\s]*  // Zero or more whitespace
  (.*?)   // Any characters, zero to unlimited,
          //   lazy (as few times as possible, expanding as needed)
  [\\s]*  // Zero or more whitespace
  $       // End of line
`;
```

... rather than ...

```javascript
const code0001regex = /^[\s]*(.*?)[\s]*$/;
```

Here's a pattern for use of the `code0001` above ...

```javascript
const Reggie = require('reggie-docs');
const reggie = new Reggie();
 
let results = {};
 
const patternCheck0001 = '  Test Spaces Before and After   ';
 
results.code0001 = reggie.create(code0001);
const code0001Exp = reggie.generate(code0001);
results.code0001Test = code0001Exp.exec(patternCheck0001)[1];
```

## Conclusion

The whole concept of this project is to make Regular Expressions easier to understand and reason about. In doing this, the process should be simple and easy to work with.
Cómo activar el modo oscuro en la web según la preferencia del sistema operativo
Tags: css, webdev, tutorial
Published: 2020-11-25 17:23:07

Hoy en día está muy de moda el "modo oscuro" en todas las plataformas, ya sea una app móvil, escritorio, sistema operativo o la misma web. 

Hay muchas formas de aplicar este, ya sea desde un botón que te dé la opción de elegir si quieres el tema claro o oscuro o también que se active según que preferencia elijas en el sistema operativo.
Hoy vamos hablar de cómo activarlo según la preferencia del sistema. 

La verdad que es muy sencillo aplicarlo con `CSS` nativo sin utilizar librerías de terceros. Está idea fue desarrollada por Apple que agrego una `@media` query al lenguaje `CSS` la `@media (prefers-color-scheme: value)`, 
`value` puede ser:

* `no-preference`: para indicar que el usuario no tiene una preferencia conocida en el sistema, actualmente no tiene soporte en el resto de los navegadores solo en safari.

* `light`: para indicar colores claros.

* `dark`: para indicar colores oscuros.

Y solo funcionaba en el navegador safari pero ahora es compatible en todos los navegadores modernos. 
Puedes echar un vistazo en [caniuse](https://caniuse.com/?search=prefers-color-scheme) para ver el soporte en los navegadores. 

Ejemplo: 
```css
:root {
  --background-dark: #1A1A1A;
  --background-light: #FFFFFF;
  --color-dark: #191919;
  --color-light: #EEEEEE;
}

@media (prefers-color-scheme: light) {
  body {
    background: var(--background-light);
    color: var(--color-dark);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--background-dark);
    color: var(--color-light);
  }
}
```
Aquí dejo un ejemplo en codepen, el código anterior para que veas que si funciona. 
{% codepen https://codepen.io/franqsanz/pen/BaLBMzb %}
Cambia la preferencia del sistema y mira como funciona.

## Conclusión

Cómo puedes ver es realmente muy sencillo aplicar esta configuración y con muy pocas líneas de código y funciona muy bien.

#### Dejo algunos links

* [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
* [Un artículo de midu.dev](https://midu.dev/prefers-color-scheme-la-nueva-media-feature-de-css-para-detectar-el-aspecto-del-sistema-operativo-del-usuario/) que por cierto está mucho más detallado aunque tiene ya 1 año este post pero sigue siendo interesante, también encontrarás un ejemplo en codepen para que veas cómo funciona.
* [web.dev](https://web.dev/prefers-color-scheme/) este artículo está muy detallado.

___

Espero que esté breve artículo te sea de utilidad y si ves algún error no dudes en mencionarlo en los comentarios. :)

Gracias por leer!!
Java String Pool
Tags: java, string, jvm, 100daysofcode
Published: 2020-11-25 17:02:57

We know in Java Strings are stored in the <b> heap </b> memory area. Inside this heap memory, there is a specific memory area called **String Pool**. When we create string primitives, that will be stored in the string pool memory area thanks to the java string's immutability.

Refer to the following code.

```java
public class StringPoolDemo{
    public static void main(String[] args){
        String a = "hello";
        String b = "hello";
    }
}
```

Both **a**, and **b** string primitives are the same. So without creating two string objects in a heap, JVM can create only one string and connect both reference variables to the same string object. When this happens, string objects will be created inside the special memory area called the heap's string pool.

This string pool is a big **hash map**. All the strings will be stored as elements of the hash map.

But the story is slightly different when it comes to creating strings using the constructor. Because at that time, the string will behave as an object rather than a primitive. So string object will be created inside the heap. Not in the string pool.

Also, we can add strings into the string pool memory area manually using the **String.intern()** function.

```java
public class StringPoolDemo{
  public static void main(String[] args){
    String s = "hello world";
    s.intern();
  }
}
```

When running this code **s** will be stored inside the string pool memory.

Let's write some code to test this out.

```java
public class StringPoolDemo{
  public static void main(String[] args){
    String a = "hello";
    String b = "hello";

    System.out.println(a.equals(b));  // true
    System.out.println(a == b);       // true
  }
}
```

In both outputs, we get **true** as the output. So we can say that both **a** and **b** reference to the same string object.

You can use **-XX:+PrintStringTableStatistics** JVM flag to see how many buckets are available in your JVM string pool and how many of them are used. 

If your application has a huge number of string primitives, you can gain considerable efficiency by increasing the string pool size using **-XX: StringTableSize=<value>**. 

Make sure to use a prime number as the value for best performance.
Back to start again - Week 3
Tags: learning, webdev
Published: 2020-11-25 16:43:19

*Hey guys!!* Again I am back with my learnings of **Week 3**. You can see my *previous week blogs* (*[Week 1](https://dev.to/riyaagrawal17/back-to-start-again-2gja) , [Week 2](https://dev.to/riyaagrawal17/back-to-start-again-2gja)*) to see the improvement in my journey of starting again from basics.


This week we have got our new mentor *[Sagar Choudhary](https://twitter.com/sa_choudhary)* along with *[Deepak Kumar](https://dev.to/dipakkr)*. They both have helped me and my other peers to start with the basics of **React**. 


*Yes, finally we started with React ,the moment I was waiting for.* I have tried to learn React before with online courses but was unable to understand and apply them.


But now, with the help of our mentors I am finally getting the basics of react and I can't explain how happy I am!!


Though I am facing difficulties now also but I am not worried as before as I know I will not be stucked for long as there are many resources and people to help me. 


The **best part** of our camp is that we are *learning in a community* and thus are trying to help each other to improve ourselves in this field.


This week *I learnt about the react basics such as props, components, state, routers* etc from **[FreeCodeCamp](http://freecodecamp.org/)** and from **[sessions](https://www.youtube.com/channel/UCDgDpLyyUII3tko2ECrekzw)** organised by our mentors.


Now I am able to apply the concepts of react on the projects. This week I have converted my **[week1 portfolio](https://riyaagrawal17.github.io/Portfolio/)** made using basic HTML,CSS to **[react app](https://c6bu6.csb.app/).**I know this is very basic step in learning this technology but I am **happy** with this for now.


And from now onwards I will be making some *mini and macro projects using features of React*. So, **stay tuned with me for further updates!!**


*You can follow me* on **[Twitter](https://twitter.com/RiyaAgr02106010)** or *connect with me* on **[LinkedIn](https://www.linkedin.com/in/riya438/)**.