teleren/devto huggingface dataset:
Aromajoin | Made with Vue JS
Published: 2022-05-15 21:27:25

![Aromajoin | Made with Javacript | Vue JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652642992/large_aromajoin_made_with_vue_js_b346346b3d.png "Aromajoin | Made with Javacript | Vue JS")


### Develop the finest digital scent products based on the harmony of hardware, software and material technology.

> We develop the finest digital scent products
> based on the harmony of hardware,
> software and material technology.
> 
> ### Aroma Shooter
> A tennis ball-sized aroma device which contains
> 6 scents, working seamlessly with VR equipment,
> computers, smart phones, and even IoT devices.
> 
> ### Aroma Cartridge
> Fingertip-sized cartridges which contain
> scents in a solid state. We have more than 200
> fragrances available and virtually limitless
> scent combinations. Which will you choose?
> 
> ### Smell-Enhanced Virtual Reality (Aroma-VR)
> It has never been easier to integrate smell into
> your already great VR experiences.
> 
> ### Aroma Shooter Mini
> The wearable version of the Aroma Shooter.
> 
> ### Aroma Signage
> A modern and stylish promotional
> system for 21st-century stores.
> 

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project


Simply Fill out this Google Forms page.

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Aromajoin on Twitter](https://twitter.com/withjavascript/status/1525949280162299909?s=20&t=-GyorN_j_xrnIUYhwYQThw)
 |
| Medium | [Aromajoin on Medium](https://medium.com/@madewithjavascript/aromajoin-made-with-vue-js-f1d8ac255279)
 |
| Facebook | [Aromajoin on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0365GP1k8VGn682FBBAQU1TyAmhAo8sFJ1QEJQ99ftXp2Tsy254AM85BEH1jRrekrdl)
 |
| Tumblr | [Aromajoin on Tumblr](https://madewithjavascript.tumblr.com/post/684352831936937984/aromajoin-made-with-vue-js-develop-the-finest)
 |
| LinkedIn | [Aromajoin on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6931715139725361152)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
    
 - [Made with Vue JS](https://madewithjavascript.club/categories/vue-js)
 

`Make sure to give this post 50 hearts, click the unicorns and follow 
@madewithjavascript 
 for more such awesome showcases. Show you love for the people who have worked so hard!`

Tag us in your showcase, for a chance to get showcased!
Introduction to Flutter
Tags: flutter, dart, mobile
Published: 2022-05-15 21:22:12


![Photo by Kelly Sikkema on Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvpkhcckdbsm8fuvnimp.jpg)

## What is
Flutter is an open source framework created by Google, to build beautiful apps, natively compiled, multi-platform applications from a single codebase.

They bring an easy and productive way to create mobile and cross-platform applications.

---

## Programming Language
For Flutter development is used the programming language Dart, which is a client-optimized language for developing fast apps on any platform. Its goal is to offer the most productive programming language for multi-platform development.

---

## Versions history
Flutter **first version** was presented in **2015** on **Dart Developer Summit**, and it was known as **“Sky”**.

On **September 10, 2019** they released the **version 1.9, Flutter’s web support** has been merged (“unforked”) into the **main repo**. Web support hasn’t reached beta, and was not ready yet to be used in production.

On **October 1, 2020** they released the **version 1.22**, they bring supporting **iOS 14 and Android 11, new i18n and l10n support, Google Maps and WebView plugins** ready for production, a new App Size tool and others features.

On **March 3, 2021** in the **Flutter Engage Edition** the **version 2.0** was released, **Flutter web** and **Null Safety** move to stable, **Flutter desktop** moves to beta.

At **May 18, 2021** in Google I/O Edition, was released the **2.2 version**, the focuses was on polish and optimization, including **iOS performance improvements, Android deferred components, updated service** worker for Flutter web.

On **September 8, 2021** the **version 2.5** was released, it brings **performance improvements, development tools updates, new Material** and **App template**.

The **version 2.8** come out on **December 8, 2021**, it comes with **performance improvements, new Firebase features, desktop status, tooling updates**.

On **February 3, 2022**, Flutter Team released the **version 2.10.0** which brings **stable release** of **Windows support**.

---

## Platforms
Today with Flutter we can build for:
- **Mobile** -we can develop once and deploy to both iOS and Android.
- **Web** - we can create web apps with the same codebase from your mobile app.
- **Desktop** -we can build desktop apps for Windows, macOS and Linux without rewriting.
- **Embedded** -we can create solutions for smart devices, cars and others.

---

## Showcase
There are a lot of famous apps that use Flutter for its development, here are some examples:
- Google Pay
- BMW mobile app
- eBay
- Nubank
- Google Stadia
- Toyota embedded in-vehicle technology

---

## Useful Links
[https://flutter.dev/](https://flutter.dev/)
[https://dart.dev/](https://dart.dev/)
[https://github.com/Solido/awesome-flutter](https://github.com/Solido/awesome-flutter)
[https://docs.flutter.dev/whats-new](https://docs.flutter.dev/whats-new)
I built my first JS game! 🎉
Tags: javascript, vue, beginners, css
Published: 2022-05-15 21:22:09

**I built my first Maze JavaScript game**

**I used;** 
- Vue.Js framework,
- JavaScript,
- CSS

![Maze Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scdemnawi4c90ub939gr.jpg)
 
I've recently been learning DOM manipulation and so I decided to put my knowledge to practice and built a little maze game using the skills I learnt and also learnt new ones along the way. 

It's only small and silly BUT i'm super chuffed with it. There are definitely things I could improve on or do differently so if you do have a look at the code, I am always open to constructive feedback as it will only help me code better.

**A few things I used to make my Maze;**

- To make the maze itself I used CSS Grid;
![CSS Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klwoffrvs40v2bk0fgm9.jpg)
This is something i'm still new to using but I felt it was the best way to get an even 6x6 grid.


- I used mouseover effects to make the game more interactive, when you hit the 'wall' it shows this by turning red;
![Wall Hover Effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uug61zx9ydml3lnw5gqu.jpg)


- You only win by going passed start, if you try to go to the finish via another entry it tells you that's cheating! 
![No Cheating](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmp3orafl6ly68nbuvor.jpg)

- There may be a little surprise or two along the way 👀

I hope you enjoy this as much as I had fun building it, you can win it's not a trick 😉

**GitHub Code:** https://github.com/Louise-Ann93/mazegame
**Game:** https://mazegamepractice.netlify.app/

Enjoy 😊
[Desafio] - Calcular o SLA
Published: 2022-05-15 21:19:04

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1525947939285307397)

---

Ei dev,

Desafio: Você quer que o Serviço A atinja 99,99% de disponibilidade e se não houvesse dependência do Serviço B, isto já estaria garantido.

Sendo assim, qual SLA do Serviço A que você poderia divulgar com segurança para seus clientes?

Enquete abaixo ↓

cc @sseraphini

![img](https://pbs.twimg.com/media/FS08tYVWUAMaQ_L?format=jpg&name=small)

---

Qual seria o SLA mensal mais adequado para o Serviço A?

A - 99,94% (26m 16s indisp.)
B - 99,95% (21m 54s indisp.)
C - 99,96% (17m 32s indisp.)
D - 99,99% (4m 22s indisp.)

Justifique sua resposta.

(Use https://uptime.is/ para facilitar seus cálculos.)
nextjs: Listen to Layout events within pages
Published: 2022-05-15 21:15:39

Is having a global state [callable, setCallable] a good design to make pages listen to Layout events.
Example: 
We can have a button Print in the AppBar of the layout MyLayout.
Then, each page calls setCallable({ print: () => alert('print me') }).

```ts
/* _app.tsx */
import "../styles/globals.css";
import type { AppProps } from "next/app";
import MyLayout from "../components/MyLayout";
import { useState } from "react";

function MyApp({ Component, pageProps }: AppProps) {
  const [callable, setCallable] = useState();
  return (
      <MyLayout callable={callable}>
        <Component {...pageProps} setCallable={setCallable} />
      </MyLayout>
  );
}

export default MyApp;
```

```ts
/* MyLayout.tsx */
export default function MyLayout({ children, callable }) {
  return (
    <>
      <AppBar position="fixed" open={open}>
        <Toolbar>
          {callable?.print && (
            <IconButton onClick={callable.print}>
              <Print />
            </IconButton>
          )}
          {/*Other buttons to call other callbacks can be added here*/}
        </Toolbar>
      </AppBar>
      <main>{children}</main>
    </>
  );
}

```


```ts
/* MyPage.tsx */
export default function MyPage(props: any) {
  useEffect(() => {
    props.setCallable?.({
      print: () => alert("print the current page"),
      /* Other callbacks can be added here */
    });
  }, []);
}
```
Storyblok | Made with Vue JS
Published: 2022-05-15 21:11:48

## Storyblok

![Storyblok | Made with Javacript | Vue JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652497896/large_Made_with_vue_storyblok_2725ccfbbe.jpg "Storyblok | Made with Javacript | Vue JS")


### Component-based Headless CMS with Visual Editor

> Storyblok is a CMS that works with and not against you.
> 
> It's a headless CMS that is flexible enough for every use-case: corporate websites, e-commerce, helpdesks, mobile apps, and screen displays.
> 
> Storyblok builds a bridge between content creators and developers without forcing the developer into a specific technology. It comes with powerful REST and GraphQL APIs and a visual editor that previews website changes.
> 
> Storyblok is built around components and is fully extendable using Vue.js. Of course it can also be used to deliver content to your Vue and Nuxt apps.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Storyblok on Twitter](https://twitter.com/withjavascript/status/1525945273104703490?s=20&t=w7P8LdCWyo3f7qVYJ_hGVA)
 |
| Medium | [Storyblok on Medium](https://medium.com/@madewithjavascript/storyblok-made-with-vue-js-bc8ab703b822)
 |
| Facebook | [Storyblok on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0YTr7xaYDEcbufqC4TjAq5uhfsMa41n6q9CMP5bUZMbqZmyRswUz96zF4T1GWpsj4l)
 |
| Pinterest | [Storyblok on Pinterest](https://pin.it/3V7Sqd5)
 |
| Tumblr | [Storyblok on Tumblr](https://madewithjavascript.tumblr.com/post/684351293355163648/storyblok-made-with-vue-js-component-based)
 |
| LinkedIn | [Storyblok on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6931712548471771136)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
    
 - [Made with Vue JS](https://madewithjavascript.club/categories/vue-js)


`Make sure to give this post 50 hearts, click the unicorns and follow 
@madewithjavascript 
 for more such awesome showcases. Show you love for the people who have worked so hard!`

Tag us in your showcase, for a chance to get showcased!
Day 37: Configurations not that easy
Published: 2022-05-15 20:28:12

Hi!
The plan for today was to finish the article about setting up Jest and React Testing Library in a React project, Yesterday I wrote like 80% of it but today I tried to write some test using RTL functions but it didn't work. That's when I realized there are some configurations I didn't add so technically Jest doesn't even know that I have RTL installed and I'm still looking into that. I also had to setup redux but I have forgotten Everything even my own code I wrote last two weeks (funny) I had to go back to the book I used before for a recap 
Tomorrow will be a busy one for sure have some presentations to work on but those two chores have to be done by the end of the day at least so that I can get started with coding the landing page of my personal project. I will also research more about Material UI and styled components if I can be done by the landing page by today It would be great
off to sleep

signing off...
How to manage keyboard shortcuts in Angular application (The easy way)
Tags: angular, javascript, keyboard, shortcuts
Published: 2022-05-15 20:00:55

---
title: How to manage keyboard shortcuts in Angular application (The easy way)
published: true
description: A component based library used to easily create and manage keyboard shortcut in your angular application using a similar interface to Visual Studio Code, while keeping a component based API.
tags: Angular, javascript, Keyboard, shortcuts
---

I have always liked the way Visual Studio Code enabled you to modify/add key binding in a JSON object, which is a pretty nice interface in my opinion. 
Taken as an inspiration, I wanted to create a similar and scalable solution for Angular application. 
To achieve a pretty scale-able solution keeping mind memory leakage and garbage collection of registered shortcut in a large app. Thus a component based architecture was chosen.

The library supports both Windows and Mac, has a nice built in help screen to show all registered shortcuts and service to create a customize help screen in need.


You can find the library [here](https://github.com/omridevk/ng-keyboard-shortcuts):
And play with a working example [here](https://codesandbox.io/s/yvyovny43v)

### How it works

1. To optimize for performance, only one event listener is registered to the document body.
2. Each shortcut is then checked when keydown is pressed (this part can still be optimized and will be in the future, but the filtering is pretty quick at the moment so even with 100 registered shortcuts no slowdown are noticeable)
3. You can use a directive to target a shortcut to work only when a specific element is in focus
4. Or use a component that will add a global shortcut to your application, and will be cleaned out automatically when the component is destroyed.

### Feedback

This is the first library I publish to NPM, any feedback, code related, documentation or anything at all will be greatly appreciated.
As a dev, how much time do you spend learning Docker?
Tags: question, docker, lando, devops
Published: 2022-05-15 19:58:38

---
title: As a dev, how much time do you spend learning Docker?
published: true
description: This question is narrow, but the idea can stretch to other supporting tools
tags: question, docker, Lando, devops
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32peh8ztng0wljmhy92q.jpg
 
---

As devs, do you learn the ins and outs of using Docker with your normal toolset or rely only on working examples and boilerplate you find online?

I know this probably seems weird to ask about such a universally-known tool as Docker. But being someone who has little time to myself, it's a pretty big question.

I'm also currently using Lando as much as I can; it's a nice abstraction. But I still occasionally run into use cases that make me wish I knew Docker.
Como brochês de pronomes podem ajudar seu evento
Tags: braziliandevs, womenintech, trans
Published: 2022-05-15 19:50:59

## Importância do uso correto dos pronomes

Os pronomes fazem parte da nossa identidade. Fazem parte da demonstração e afirmação do nosso gênero enquanto pessoas. **É parte da gente**.

Exatamente por isso que é importante não errarmos os pronomes das pessoas, principalmente de pessoas trans que tem que lidar com esse problema diariamente.

## Como evitar errar o pronome das pessoas

Para evitar errar pronomes **a opção mais simples é perguntar**. Pergunte para a pessoa como você pode se referir á ela ao invés de pressupor o gênero da pessoa pela sua aparência.

> Mas e em eventos, onde há dezenas, centenas ou até milhares de pessoas? Como garantir que estou chamando todes pelos pronomes corretos? Como garantir que as pessoas vão me chamar corretamente?

Ótima pergunta! Esses problemas podem ser evitados utilizando um **brochê de pronomes**

## Brochê de pronomes

Um brochê de pronomes é um brochê que informa qual pronome as pessoas devem utilizar para referirem à você.

![Exemplo de brochês de pronomes, com 9 no total, sendo "He/Him", "He/They", "She/Her", "They/She", "She/They", "They/He", "They/Them", "Ask my pronouns", "Any pronouns"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/889q5wazv4ecyfau58ls.jpg)

Esses brochês servem exatamente para evitar erros de pronomes, pois a forma correta de chamar alguém vai estar escrita na ROUPA da pessoa. Então se você continuar errando os pronomes das pessoas do mesmo jeito, é uma IMENSA falta de atenção ou preconceito.

## Como usá-los em eventos?

O objetivo seria que a maior parte das pessoas do evento utilizassem um brochê de pronomes, e sempre antes de chamar alguém que você desconhece no evento, ler o brochê, e chamar a pessoa pelo pronome escrito.

## Como criar esses brochês?

Esses brochês podem ser criados em sites que oferecem brochês personalizados para eventos. Um exemplo que eu achei aqui é [esse](http://www.brindes.com/personalizados/botton-americano-tbb2/39012).

## Como oferecer esses brochês?

Esses brochês podem ser oferecidos na entrada do evento por uma pessoa que tem conhecimentos sobre assuntos de gênero, heteronormatividade, importância dos pronomes,etc. para explicar a importância de utilizar esses brochês para as pessoas participantes do evento.

## Finalização

Nesse pequeno artigo te mostrei a importância dos pronomes, e porquê utilizar brochês de pronomes em eventos.

Muito obrigada por ler ❤️🏳️‍⚧️ e me segue nas redes, é tudo [@lissatransborda](https://twitter.com/lissatransborda) 👀
Looking for a place to store your scripts? (looking for feedback on a project)
Tags: programming, showdev, serverless
Published: 2022-05-15 19:35:53

Hi Dev.to community👋
I'm currently working on a new project, and want to ask for early feedback. Do you have a few minutes to share your thoughts? 

So, working as a dev for a few years now, I've often faced the need to quickly write and deploy scripts to perform a bunch of tasks: data extraction, manipulation, API translation, computation, ... But it's not easy to find a place to host them 🏠

For sure, spinning up a new server is not a big deal (or, sometimes, it can be), but spinning up a server for a single script is sometimes overkill. I know AWS lambda, Azure functions exist, but they are sometimes hard to manage, and tools like Heroku can be expensive 💸💸

That's why I want to build a tool, which I named jotcode (https://jotcode.io), that helps people to quickly write down some scripts and run them immediately, without having to care about the hosting platform 🚀

Of course, it's still under progress but I would like to know: 
- Is this something you could use?
- If yes, what do you think about our beta? 

If you are interested in following the progress of jotcode, just follow my profile. I'll keep you posted 😉
Difference between Reflect.ownKeys() and Object.keys()?
Tags: javascript, webdev, productivity, beginners
Published: 2022-05-15 19:35:38

In this post we will be comparing `Reflect.ownKeys()` and `Object.keys()` method. In first glance we might feel that they produce same result but actually they behave differently in some situation.

Let's take some examples to understand the difference between them.

## Reflect.ownKeys()

This method **returns an array of target objects own property** which mainly is the **array of all properties (enumerable or not) and symbol properties** found directly upon the given object.

To understand this better let us consider this example.

![reflect keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz5wbvkyabcdto7cpbid.png)

In this example we saw that the properties and the symbols properties were printed in the result.

## Object.keys()
This method only returns enumerable properties of an object.

Let's take the above example to understand this better.

![object keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl2v3wsul5gu0brbfm42.png)
 
As compared to the previous result we just got the objects property in the result.

The major difference is that `Reflect.ownKeys()` method returns symbol properties and objects properties even if it is not enumerable which is not the case with `Object.keys()`.

Feel free to add up to this post.😊

Happy Learning! 👩🏻‍💻
100 CSS Box Shadow Presets
Tags: ux, css, html, design
Published: 2022-05-15 19:26:01

CSS box-shadow is a fabulous CSS property. It adds shadow effects around an HTML element. Adding multiple effects separated by commas is my favorite feature of this [box-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).

Innumerable shadows are possible by combining the available values of the box-shadow property. Color, blur, spread radius, and other properties give the interface a magical look.

## 100 CSS Box Shadow Presets

![100 CSS Box Shadow Presets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwv9pb8uh0565sm5486d.png)

Here are [100 CSS box-shadow presets](https://htmlcssfreebies.com/css-box-shadow-examples/) for the quick start of designer imagination. These presets range from basics to modern and conventional to popular design systems.

## Box Shadow Generator

![Box Shadow Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npt42wobbad7j31a2bl6.png)

Each CSS box-shadow example is editable via an easy-to-use CSS [box-shadow generator](https://htmlcssfreebies.com/box-shadow-generator/). Following is a quick guide for creating your masterpiece box-shadow quickly.

## Quick Guide

1. Choose an example from **100 CSS box-shadow presets**.
2. If you like the preset, copy it, and you are good to go.
3. Click on the Edit button to launch the box-shadow generator.
4. You can add or remove as many shadows as you like.
5. Adjust the box-shadow properties to match your taste.
6. Copy the box-shadow snippet to use in your project.

## Support The Project

I hope you will like this. Please share it with your buddies to support the project.