teleren/devto huggingface dataset:
Insect Catch : Sample Tutorial Game
Tags: codepen, javascript, showdev, gamedev
Published: 2021-05-28 14:52:25

<h1>Insect Catch : Sample Tutorial Game</h1>

<h2>Description</h2>

<p>This game doesn't actually have no any goals. Just get the bugs that are randomly generated on the screen every 10 seconds.</p>

<p>This is just a simple game I made to learn how to use Phaser Game Engine. This is actually my first time to use a game engine, and I think that this is so cool, and very convenient to code with.</p>

<p>I'm still going to practice using this game engine, until I became very comfortable.</p>

<p>I just learn using this by just following the basic tutorial provided at Phaser's official website. <a href="http://phaser.io/tutorials/making-your-first-phaser-3-game">See this</a></p>

<p>The map is just randomly generated, you may refresh the page anytime to reinitialize the location of the objects.</p>

<h2>Controls</h2>

<p>Just use arrow keys to move around.</p>

<h2>Resources</h2>

<p>Game engine used to develop: <a href="http://phaser.io">Phaser</a></p>

<p>Software used to create sprites: <a href="https://www.aseprite.org">Aseprite</a></p>

{% codepen https://codepen.io/takaneichinose/pen/gOmREPB %}
vuex-persistedstate is all you need for your Vue and Nuxt project
Tags: vue, npm, nuxt, vite
Published: 2021-05-28 14:40:42

If you have worked with Vue or Nuxt application, I am sure you have had a hard time managing the sessions, storing cookies, and working with localStorage.

Luckily we have a **[vuex-persistedstate](https://www.npmjs.com/package/vuex-persistedstate)** package to help us with all these.

You just need to install the package and configure it for your project. That's it. All your browser refreshes won't affect the application state.

# Install

```javascript
// npm
npm install vuex-persistedstate 
// OR
// yarn
yarn add vuex-persistedstate 
```

# Usage

**vuex-persistedstate 3.x (for Vuex 3 and Vue 2)**

```javascript
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});
```

**vuex-persistedstate 4.x (for Vuex 4 and Vue 3)**

```javascript
import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});
```

# Example with Nuxt.js

Create a file `persistedState.client.js` inside the plugins directory.

Note: Naming your plugin 'xxx.client.js' will make it execute only on the client-side. [Learn more](https://nuxtjs.org/guide/plugins/#name-conventional-plugin)

```javascript
// ~/plugins/persistedState.client.js
import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState()(store)
}
```

Then, update your plugins inside the `nuxt.config.js` file.

```javascript
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [{ src: '~/plugins/persistedState.client.js' }],
```

That's it, your Nuxt.js application is now state persistent and will be able to handle manual browser refreshes.

That's it for this post.

If you want to see how it works in a Vue.js application, please leave a comment below, I will include that too.

Live Demo using `vuex-persistedstate`: https://magic-nuxtjs.vercel.app/login

I have used `vuex-persistedstate` in my [How to add Magic Link to a Nuxt.js Application](https://magic.link/posts/magic-nuxt#persist-state) guide. Check out and share your feedback.
The Road to MVP: Planning first steps and brainstorming the product features in Miro
Tags: productmanagement, programming, mvp
Published: 2021-05-28 14:29:44

---
title: The Road to MVP: Planning first steps and brainstorming the product features in Miro
published: true
description: Making a Product: Transcripto, ep. 1
tags: productmanagement, programming, mvp
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
'Making a Product: Transcripto' is an mkdev.originals web series that will see a small team of two making a working product step by step, from conception to designing and coding to the release! Join Kirill and Leo on the journey of creation of TRANSCRIPTO, a small but useful service for transcribing audio into text. Here's a small introduction:

{% youtube jPM40mfDi_4 %}

And here's episode 1!

Taking the idea to work, Kirill and Leonid proceed to the first stage of product creation: planning. The task is to determine which features will be included in the MVP, who is the audience of the product and who is the competitor:

{% youtube fCllJ4-XfkA %}

***

* [Episodes 0 & 1](https://dev.to/mkdev/the-road-to-mvp-planning-first-steps-and-brainstorming-the-product-features-in-miro-kb9): Introduction & The Road To MVP.
* [Episode 2](https://dev.to/mkdev/how-to-design-a-logo-for-your-startup-with-the-help-of-an-artificial-intelligence-40l5): How to design a logo with the help of an AI.
* [Episode 3](https://dev.to/mkdev/how-to-build-a-transcription-service-prototype-in-90-minutes-with-ruby-on-rails-and-aws-3884): How to build a service prototype in 90 minutes.
* [Episode 4](https://dev.to/mkdev/making-website-design-for-a-transcription-service-in-2-days-3m4): Making website design in 2 days.
* [Episode 5](https://dev.to/mkdev/the-impostor-syndrome-episode-adding-features-with-ruby-on-rails-and-having-fun-with-figma-and-css-2f4m): The Impostor Syndrome.
* [Episode 6](https://dev.to/mkdev/how-to-calculate-aws-stripe-costs-define-the-price-for-your-product-and-make-a-profit-on-the-way-1f8d): How to calculate AWS & Stripe costs.
* [Episode 7](https://dev.to/mkdev/is-there-a-place-for-a-small-startup-launch-without-a-big-promotional-budget-202n): Startup Launch.
* [Episode 8](https://dev.to/mkdev/aws-copilot-and-another-6-ways-to-easily-deploy-apps-to-aws-1njb): AWS Copilot.
* [Episode 9](https://dev.to/mkdev/you-ve-launched-a-new-product-now-what-4dkm): Now what?
Quick Reference for Contributing to Open Source
Tags: devjournal, opensource
Published: 2021-05-28 14:29:43

*Adapted from this [Guide from DataSchool](https://www.dataschool.io/how-to-contribute-on-github/)*

##Finding a Project
https://goodfirstissues.com/ 
https://www.codetriage.com/ 
https://up-for-grabs.net/
https://firstcontributions.github.io/ 
http://www.pullrequestroulette.com/ 


##Setup Steps (Once Per Project)
1. In GitHub, fork project repo

2. From your personal repo, clone code
    ```git clone [URL]```

3. Verify your repo is the origin remote
    ```git remote -v```

4. Add project repo by cloning code
    ```git remote add upstream [URL]```


##Contribution Steps (Once Per Change)
5. Pull latest project changes
    ```git pull upstream main```

6. Comment on issue requesting to be assigned (or assign yourself if allowed)

7. Create new branch for your development
    ```git checkout -b [branch-name]```

8. Make changes, add, and commit; link PR to the issue by writing "Resolves #[issue-number]"
    * Be sure to follow any contributing guidelines or formatting specific to the project
    ```git add .
     git commit -m "Resolves #123; message here"```

9. Push to fork  
    ```git push origin [branch-name]```

10. In GitHub, click 'Compare & Pull Request'

11. Review details and click 'Create Pull Request'


###Wait for comments/corrections or for project owner to approve the change
12. After merge, delete branch from fork on GitHub and from local  
    ```git checkout main
     git branch -D [branch-name]```  

13. To sync fork with project, Pull latest changes from upstream to local  
    ```git pull upstream main```

14. Push local to origin fork  
    ```git push origin main```
Why not to use Carousels
Tags: webdev, a11y, beginners, discuss
Published: 2021-05-28 14:26:32

Carousels are those slide shows of content that can be seen across the web. You must have encountered some in the form of areas that can have informational content or promotional content or even ads. Even though they are vastly adopted, they aren't a very elegant thing on your website as they lead to accessibility issues and ultimately a bad user experience.
&nbsp;Take voiceover users for example; when the slide changes the content of the slide may be announced all of a sudden and the user surely will lose the track of elements they were interacting with (where the cursor is original).
&nbsp;And what if there's no proper implementation of auto-rotation of the slides.
&nbsp;&nbsp;&nbsp;&nbsp; Don't even forget about the navigation with tab and arrows. The user navigates the whole page with tab key, and then the slides are navigated with arrow keys all of a sudden?

These and many other cases surrounding the carousel, in turn, would lead to a chaotic user experience and a confused user.
<br>
![A good carousel is no carousel. meme.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oh1q8gacn4tt7b85spy.png)
>A good carousel is no carousel.


&nbsp; Though the carousel consolidates the content in a specific region, a thorough discussion with designers, UX-engineers, and developers an alternative to carousels can be found for the teams that originally intend on implementing the carousel.

And even after all my arguments and various discussions if you just can't resist the temptation then here are some example implementations to consider:
* https://w3c.github.io/aria-practices/examples/carousel/carousel-1-prev-next.html
* https://w3c.github.io/aria-practices/examples/carousel/carousel-2-tablist.html

Remember to refer to the WCAG guidelines when working on carousels. Here are some other enlightening links that you may find helpful:
1. https://www.mandr-group.com/internet-rethinking-carousel-trend/
2. https://www.w3.org/WAI/tutorials/carousels/
3. https://accessible360.github.io/accessible-slick/

<br>
***Even though kittens love attention, carousels are not the best way to do that.*** 🙋‍♂️ 🥂
#005 Basicão do JS:  Operadores Aritméticos
Tags: javascript, beginners, frontend, basics
Published: 2021-05-28 14:25:52

![O professor Jirafales](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li76o5i8hwolzk45mdfh.jpg)

Dizia eu que a aritmética... Os chamados  operadores aritméticos são utilizados para a realização de cálculos simples em JS, como soma, subtração, divisão e multiplicação, além de algumas operações menos conhecidas mas que você deve lembrar da escola o módulo (resto inteiro da divisão) e o incremento e decremento.

Para mais detalhes matematicos sobre módulo, veja o vídeo abaixo:

{% youtube m4CYmd_lGmo%}

Ou seja, se eu quiser dividir 12 laranjas para 5 pessoas, em javascript eu tenho:

```javascript
//Levando em conta que 12/5 = 2,4
//e eu preciso saber de forma exata o módulo, então:

12 % 5 = 2
```

Pois 2 é a parte inteira de 2,4.

Já  incrementar significa aumentar o valor de algo, e decrementar significa diminuir o valor de algo. 

Vamos por exemplo imaginar uma fila de gatinhos:

![Fila de gatos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75u8ndof8whnxqpqy23f.png)

Temos a nossa variável `gatos` que vai começar com um valor 1.

Para cada gato que eu ver nessa fila, eu vou querer automaticamente adicionar valor à minha variável `gatos`. Então para representar essa operação aritmética basta que eu declare que cada vez que um gato desta fila seja visto ele faça a operação `gato++` ou `++gato`.

Qual a diferença de mostrar antes ou depois?

```jsx
let gatos = 1
gatos++ // retorna valor 1 então seta gatos com o valor 2 
++gatos // seta gatos com valor 2 então retorna o valor 2
```

O Decremento faz a exata mesma operação mas subtraindo o valor.

```jsx
let gatos = 4
gatos-- // retorna valor 4 então seta gatos com o valor 3
--gatos // seta gatos com valor 3 então retorna o valor 3
```

Abaixo segue a lista dos operadores aritméticos. Para saber a ordem correta de utiliza-los e qual tem prioridade sobre o outro, volte no post anterior desta série e veja o vídeo de 1 minuto incorporado.

| Operador  | Significado  |
|---|---|
| + | Soma |
| - | Subtração |
| * | Multiplicação |
| / | Divisão |
| % | Módulo |
| ++ | Incremento |
| -- | Decremento |

*Semana que vem:* Operadores Lógicos
What's New in Codesphere Version 1.11.2
Tags: changelog, webdev, monitoring, python
Published: 2021-05-28 14:17:08

>The latest Codesphere updates!

##What's New?
###Features

* App Monitoring
* Code Search

Starting today, Codesphere has a new interface to **monitor your app**! The new feature will allow you to make sure that your app is running as expected, and let you know if you're under or over-estimating your computing needs.

We're also happy to announce that you can now find a **search bar** above your file tree, which gives you the ability to search through your codebase. 

In addition, we’ve improved **Python support** as we understand that more and more developers are building their web apps in python-based frameworks like Django and Flask.

To get a better idea of all our new feature releases, take a look at our new video on our [YouTube channel](https://link.codesphere.com/I)! 

At Codesphere, we’ve been hard at work bringing you the next generation cloud platform so that you can spend less time configuring and more time doing what you do best: Actually Coding.

If there is a feature we haven’t released yet that you’d like to see, comment down below! Otherwise, stay tuned for future releases!

As always, thanks for using Codesphere.

Happy coding!
What is Cookies All about HTTP(Part 2)
Tags: html, webdev, javascript, beginners
Published: 2021-05-28 14:14:19

### HTTP Cookies

HTTP cookies are known as a web cookie, Internet cookies, browser cookies. in the cookie, we can store a small piece of data that server send to your browser.

Cookies are useful for Auth cookie tokens, to store in small text files, user preferences, color themes, game scores for many things you can use HTTP cookies. Its very easy to create cookies and delete cookies with JavaScript, PHP, NodeJS & Python etc. 

In cookies, we have many options like Expires, Domain, Path, Secure, Name they are used when we create a cookie or read a cookie.

>1.Expire: we can use it to set the date the cookie will expire.
>2.Secure: a browser only use HTTP. 
>3.Domain: The domain name of your site.
>4.Path: The path to the directory or web page that set the cookie. 

#### How to set cookies with JS?

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

For NodeJS, you need to require HTTP in your code and directly use cookies.

If you find this useful in a post like and save this post also comments about your thoughts. For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).
What do developers want?
Tags: womenintech, workstations, developers
Published: 2021-05-28 13:59:15


1. A room to breathe (trust the developer)

Stop asking for updates every waking hour. Scrum call doesn't happen for dancing.
Stop with unrealistic deadlines. Writing code takes time. And you have no option other than to wait. They will let you know the minute code is deployed. Trust me, we are as desperate to get the feature/bug off our backs as you are.

2.Everything external that a laptop provides

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zag9jgxt9w4nj283jct.jpeg)

This is our dream desktop setup. We can't wait to buy all that shit so that we can work from the comforts of our beds.

3.Another developer friend who has a bigger issue to resolve than us

The Friend: With a due date, bitch!

4.A brain that can give proper ticket estimates

Why is it always a spillover? Why can't it be other way around!

5.Tea/ Coffee

We don't need to look at the clock to know when it's tea o'clock.

PS: I automatically stop working at 4 pm until I get my drug!

6.Magic

Braindead code at night, working code in the morning. Still a dream!

7.Work-life balance

Sorry, scratch that, Life-work balance. Life comes first.
Continuous Learning 1
Tags: learning
Published: 2021-05-28 13:54:44

---
title: Continuous Learning 1
published: true
description: In this series of posts i will share some great resources to learn web programing and web concepts we need. As version control is crucial Github bring us his lab with a lot of free courses at **https://lab.github.com/** . Enjoy!.
tags: Learning
//cover_image: https://direct_url_to_image.jpg
---
NodeJS vs DenoJS
Tags: node, deno, javascript, typescript
Published: 2021-05-28 13:54:38

What exactly is Deno?

Deno happens to be a runtime for TypeScript and JavaScript, based upon the Rust programming language and V8 JavaScript engine.

 Key comparisons with NodeJS

    The core of Deno has been created in Rust programming language in addition to Tokio. Nodejs was created in C++.

    Typescript is a JavaScript superset aimed at getting rid of the development issues before the execution of the code.

    Typescript is ideal for big applications.

    ES6 imports Statements as dependency management.

    An absence of npm, indicating that it doesn’t use any package manager such as npm and doesn’t come with package.json for handling modules.

    Deno will be breaking on unhandled exceptions that are not the case with NodeJS.

    Deno demands explicit permissions for network, file, and environment access.

 
Will Deno JS be able to replace NodeJS?

Given that Deno can be considered to be an improved alternative to node JS, it might replace node JS in the long run. Nevertheless, it will only be possible over a significant period mainly because a large community depends on node js. At least for the time being, Node js isn’t going anywhere; Deno is only considered a fancy alternate choice.

Learn more here: https://www.rlogical.com/blog/nodejs-vs-denojs-which-is-better-for-you/
Perl, should you develop your strengths or correct your weaknesses?
Tags: perl, discuss
Published: 2021-05-28 13:46:53

If you follow me and read some of my past posts, you know that I generally talk about correcting weaknesses. This is for 3 main reasons:
1. There is so much room for improvements
2. Perl has bad reputation and it is not deserved
3. You could have the best product in the world, but if nobody knows it...

I heard one time that in relationship we finally end up loving our partner for "defects", well I'm not sure it's true and if it applies for programming languages :grinning:

What is obvious is that Perl programmers love Perl for its strengths and that's all!

In current situation, Perl strengths are more what make people enjoy and stick with Perl when weaknesses are what make people stay *out* of Perl... (some sort of contrary analysis could probably be valid for some javascript frameworks or other programming languages, hype but then dreaded from users).

Finally, trying to work on weaknesses can also be seen unnatural because at some point that's not by hazard if they became weaknesses. It means they are not really in the DNA of the Perl folks (and it’s also a good thing, after all we love Perl for its DNA).

It could also happen that working on weaknesses could weaken strengths.

So according to you, should Perl focus on its strengths or try to work on its weaknesses?

Some strengths according to me: extreme compatibility, portability, smart interpreter, quality, toolchain, sysadmin...
Some weaknesses according to me: reputation, boilerplate, web presence...
Kubernetes Monitoring Series: Kubeview
Tags: kubernetes, devops, docker, monitoring
Published: 2021-05-28 13:42:58

# What is KubeView?
KubeView is a simple Web interface that provides the complete overview of the Kubernetes Objects across namespaces and how they are interconnected to each other with intuitive UI & icons.

## Displays the details about the following Objects.
1. Deployments
2. ReplicaSets / StatefulSets / DaemonSets
3. Pods
4. Services
5. Ingresses
6. LoadBalancer IPs
7. PersistentVolumeClaims
8. Secrets
9. ConfigMaps

### Installing: Kubeview
Before Installing KubeView, make sure to have helm installed on your machine.

`git clone https://github.com/benc-uk/kubeview
cd kubeview/charts/
helm install kubeview kubeview`

This will go ahead and install all the components needed such as ServiceAccount, ClusterRole, ClusterRoleBinding along with Deployment, and Service.

Let’s test it locally, by exposing the service, run the command

```
kubectl port-forward svc/kubeview -n default 80:80
```

Looks Beautiful ❤
if you found this article useful, feel free to 👏 clap many times or share it with your friends.
Quasar Brand Refresh and New Partnership
Published: 2021-05-28 13:35:39

Hi everyone,

As part of our journey to improve Quasar with each passing day, **we're proud to announce a new partnership with [Dreamonkey](https://dreamonkey.com/)** (who is also an important sponsor of our framework).

**The Dreamonkey Team will be helping us with the next steps in the evolution of Quasar** and in particular refreshing its brand and supporting content, which in turn will help everyone better understand what Quasar is, how it works, and how it can benefit you and the company you work for. 

Getting everyone to this understanding is not an easy task, as Quasar is not the everyday, run-of-the-mill Vue framework that you often come across. Nope. Quasar not only entails an extensive set of performance-oriented components and directives (the Quasar UI library). It also supplies a massive build architecture (with the Quasar CLI), which will get you and your ideas up and running and building apps in record time. The CLI starts with an awesome development experience and ends with deployment builds for practically any platform (i.e. SPA/SSR - PWA/SSR - Hybrid Mobile with Cordova or Capacitor - Desktop with Electron - and even BEX - Browser Extensions). 

**We've had this (successful) approach for a few years and we can ensure that all of the parts work together flawlessly and with incredible performance, yet final builds with all of the best practices in modern web development built-in and with the smallest possible package footprint**. All of our efforts with the CLI allows you to focus on the functionality of your products, instead of the often complex marriage and compatibility of the underlying technologies.

**Quasar has partnered with Dreamonkey in our endeavor to better express why Quasar is one of the best alternatives to frontend application development out there**, along with expressing what our core values and principles are. 

Aside from the great cooperation we have with Dreamonkey, we also have a progressive rollout schedule in place. So stay tuned for lots of exciting new things in the coming weeks. We'll start with an improved logo and brand guide and work our way up to significant improvements to the Quasar docs website, which will help developers learn to use ALL of Quasar's exceptional value.

You can read more about how Dreamonkey designed the new logo and more brand-related insights by reading their [press release article](https://dreamonkey.com/en/blog/the-new-official-quasar-logo).

**We have more exciting announcements to make for this quarter**. Along with the brand updates, we have some interesting times ahead for Quasar and we'd love to take you all with us on our incredible journey to make Quasar the best frontend application framework ever. ;)

-
Razvan Stoenescu, creator and team lead of Quasar Framework