teleren/devto huggingface dataset:
Js13kGames swag is finally out
Tags: challenge, js13kgames, gamedev, javascript
Published: 2021-03-11 17:09:31

---
title: Js13kGames swag is finally out
published: true
date: 2021-03-11 00:00:00 UTC
tags: challenge, js13kgames, gamedev, javascript 
canonical_url: https://medium.com/js13kgames/js13kgames-swag-is-finally-out-2e3814c181f7
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wgtgdmqz8x4qte20rd8.png
---

If you follow the competition for long enough this is absolutely no surprise - printing of the swag from [js13kGames](https://js13kgames.com/) 2020 was delayed a few times, similarly to the previous years. It’s finally done though, and all the packages were already shipped!

We have a new t-shirt design every year thanks to [Ewa](https://mypoint.pl/), and offer different gadget as well - this year’s one is a pen. The package comes with a bunch of stickers: both our own ([js13kGames](https://js13kgames.com/), [Enclave Games](https://enclavegames.com/), [Gamedev.js](https://gamedevjs.com/)) and from our [Partners](https://2020.js13kgames.com/#partners).

![Enclave Games - js13kGames 2020 swag 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd0l3bx1osuu6oel68tn.png)

We had to quickly print the compo ones as I thought we still have a lot of them, but apparently they ran out last time - I ordered a bunch and put three in every package instead of one or two.

![Enclave Games - js13kGames 2020 swag 03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aczvas64ows65xdkyjpt.png)

The packages, each containing a t-shirt, a pen, and a whole bunch of stickers (including a whole collection depicting notable entries from previous years thanks to [Sascha](https://twitter.com/sdepold) from **eBay** ) were sent out - if your entry ended up in top 100 [overall results](https://2020.js13kgames.com/#winners), top 15 [WebXR category](https://2020.js13kgames.com/webxr), or you were an [Expert](https://2020.js13kgames.com/#experts), expect the package coming your way.

![Enclave Games - js13kGames 2020 swag 04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6an34abtj7p8u12mrxih.png)

The tracking details were emailed to everybody interested, so make sure to keep an eye on them as some local post offices or customs services might take loger to process it than others.

![Enclave Games - js13kGames 2020 swag 05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8v4ftmsz4iyw9asihij.png)

If you do get the package already, please post a selfie! When sharing on Twitter, make sure to use the [#js13k hashtag](https://twitter.com/hashtag/js13k). We have a long tradition of having a photo album of cool people wearing js13kGames t-shirts all over the world from every single year, and would like to keep that going this time as well, thanks!
Design is more important than code
Tags: design, ux, ui, rudderstack
Published: 2021-03-10 23:59:21

---
title: Design is more important than code
published: true
description: No matter how powerful and full-featured a tool is, its real-world value is capped if users can’t easily move through the application to accomplish their tasks - not to mention discover new ways to use the app.
tags: design, ux, ui, rudderstack
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/redwcpokk6ktvm3pgbu9.jpg
---
*Banner image: [Antoinette de Boer, Design]( https://collection.cooperhewitt.org/objects/18632009/ |title=Textile)*

Kubernetes is hot new technology that's going through major improvements all the time. But improvements to its functionality don't matter if no one can understand how their cluster is configured.

Many companies worry constantly about logging and other observability tools. But adding more instrumentation to your stack is worthless if you don't have an easy way to read and summarize that data later.

I would submit that in *most* cases, improving the design of your tool is more critical than improving its performance or functionality.

Have I seen beautiful and clear user experiences hamstrung by  poorly implemented software? Oh yes. But for every time I've seen that, I can think of 10 other examples where the code worked great but *actual users* could not find what they needed due to unclear and confusing design.

No matter how powerful and full-featured a tool is, its real-world value is capped if users can’t easily move through the application to accomplish their tasks - not to mention discover new ways to use the app. [With the release of the redesigned RudderStack](https://rudderstack.com/blog/good-products-deserve-good-design-introducing-the-redesigned-rudderstack), you will benefit from a number of navigation improvements.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8adckv2up2j9jlvt3qn.png)
*the new RudderStack UI is denser with a clearer information hierarchy*

## Design can point out feature needs

As we work to clarify our design and UX goals, this can point out the need for features. What started as a project to get RudderStack "Enterprise ready" with the ability for a single user to manage multiple organizations -- grew into an effort to make the whole experience easier to understand *and* easier to audit later.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc8nuj3aoofnpq11n78x.png)
*users can now track every change made in RudderStack*

So go out and look at your interfaces. Ask for a new user's feedback! The hours you spend on improving a UI may save you weeks of development.
What is CORS ? How to configure CORS in Strapi ?
Tags: strapi, cors
Published: 2021-03-10 23:48:02

CORS stands for Cross-Origin Resource Sharing. According to developer.mozilla.org, Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. Simply, it is a web application security feature in a browser.

Image below shows how CORS is implemented :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlqcjbb4ncbl4wdjo87v.png)

We can see that domain-a.com contains an image from domain-b.com. However, of course the image from domain-b.com is not stored in the web server of domain-a.com which means the image is fetched from domain-b.com.

So, domain-a.com sends a GET request of image.png to the web server of domain-b.com. This request is called a cross-origin request and it is controlled by CORS in the web server of domain-b.com. In other words, The web server of domain-b.com must allow cross-origin requests from domain-a.com. So that domain-a.com can retrieve the image or whatever it requests.

In Strapi, CORS is controlled in this path : 
`./config/middleware.js`
Then you would like to specify allowed CORS origin which can be only one, or two, even more than three URLs. 

Here is an example, if you have multiple URLs as allowed CORS origin :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2qyal10ztjujowynql4.png)

The theory is that you must set enabled to true then put URLs of allowed CORS origin in your environment variable, in .env file. What .env file contains :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay4p3ciphyis55n754mt.png)

(Please note that of course you are also able to put a single URL as allowed CORS origin)

However, if you do not specify certain URLs in your environment variable, Strapi will recognize a string beside ‘CORS_ORIGIN’ as allowed CORS origin. Split function that comes after is to split the URLs if you have more than a single URL as allowed CORS origin. Otherwise, you do not have to split it. Usually the reason why it has more at least than one URL is :
- Your app’s client side
- Your Strapi admin panel (still considered as an external source)

Thank you for reading this article! See you in another Strapi post and have a nice day ~

**Connect with me** :
[LinkedIn - kevinadhiguna](http://linkedin.com/in/kevinadhiguna)
[Github - kevinadhiguna](http://github.com/kevinadhiguna)

**Read in Blog** : https://about.lovia.life/how-to-configure-cors-in-strapi/

**Reference** :
- Mozilla. ‘Cross-Origin Resource Sharing (CORS)’. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
- Strapi Middleware Configuration. https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/configurations.html#middlewares
React Series For Begineers - Part 1
Tags: javascript, react, beginners, tutorial
Published: 2021-03-10 23:45:42

## What is React?

<p><b>React</b> is javascript library offering a new approch to bulid user interface(UI). React creates a <b>Virtual DOM</b> to track the update and change the part of UI which have been updated within the appication.</p>

## Why to choose react?

First of all, React is library which is develop and maintain by <b>Facebook</b>. React has already been used by <b>Facebook</b> in production in their products. It's a open source library and has a great community support.

## React Features
* JSX (Javascipt XML)
* Components
* One Way Data Binding
* Virtual DOM
* Simplicity
* Performance 

Don't worry if you are not aware of this technical jargon, we will cover each and every concept of react in details.
Doom emacs: First impressions
Tags: emacs, config, framework, elisp
Published: 2021-03-10 23:18:53

Emacs is great for configurability. People even say [emacs is an operating system](https://wiki.c2.com/?EmacsAsOperatingSystem). With that OS analogy, you can use emacs as [Arch Linux](https://archlinux.org/) or Vanilla Emacs as an empty slate or you can start with something like [Spaceemacs](https://www.spacemacs.org/).

I have always stayed away from large emacs frameworks and relied on having Vanilla emacs and a good package manager, [el-get](https://github.com/dimitri/el-get/).
Recently, [sluggishness in the package manager](https://github.com/dimitri/el-get/pull/2813#issuecomment-794904718) and my inability to find good emacs packages for my requirements made me look at frameworks.

I am pleasantly surprised with doom emacs. It just works out of the box!
I am looking forward to the experience with configurability addition of packages.
[Discussion] Challenges in Frontend for SaaS Apps. 
Tags: discuss, frontend, javascript, saas
Published: 2021-03-10 22:59:19

---
title: [Discussion] Challenges in Frontend for SaaS Apps. 
published: true
description: Dealing with SaaS apps requires some specific considerations on the frontend. Some might be related to the tools, architecture, or libraries on the whole FE stack. 
tags: #discussion, #Frontend, #JavaScript, #SaaS
cover_image: https://thumbs.dreamstime.com/b/white-paper-background-text-technical-discussion-192375177.jpg
---
Dealing with SaaS apps requires some specific considerations on the frontend. Some might be related to the tools, architecture, or libraries on the whole FE stack. 

 1. What challenges did you face?
 2. How you fixed those challenges?
 3. Which area do you think is underdeveloped?

I would love to share and expand my experience in this field as a series "**Frontend for SaaS Apps Series**"   and your points will help me define the right scope and starting point.
What is AWS Lambda? How it works?
Tags: aws, lambdafunction, cloudskills, techtalks
Published: 2021-03-10 22:15:01

AWS Lambda is one of the most popular services on AWS Cloud Platform. And it is vastly used by all most every organization to deploy their serverless applications. To know more about what is Lambda and how it works, check the video below:

What is Lambda Function? What is Serverless Architecture?
{% youtube j21S3v7OS6U %}
Day 326 : Grocery List
Tags: hiphop, code, coding, lifelongdev
Published: 2021-03-10 22:07:35

_liner notes_:
- Professional : Had a couple of meetings today. Other than that, I did some more research and working on a demo application. I just thought I would try something thinking it probably wouldn't work and guess what, IT DID! Web Components are pretty awesome! I've kind have the proof of concept working, know I need to create some assets to get it working the actual way I want. Still can't believed it worked.

- Personal : Last night, I was able to get the admin dashboard to save things to my backend. I even added some permissions on the database so that only authenticated users can make calls and save data. After that, I went through some tracks for this week's radio show.

![Snow-capped mountains and green valleys with some lakes in Turin, Italy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gjsridhq4usr3sweenm.jpg)

After work, I got to sit in a meeting to discuss the curriculum for an online school dealing with digital media. This is my second meeting. I was asked to give my opinions and thoughts on the course syllabus by a longtime friend. It's only like twice a year and I want to try and help out folks getting into the field. I'm headed out early so I can go get some $5 sushi and a couple of other things on my grocery list. I want to go through some more tracks for this week's radio show. I also want to start displaying the data I'm saving to the database in some of the other pages I've been building.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube zN9VDeqrVCA %}
Prosta rozgrzewka dla każdego
Tags: fitness, diet
Published: 2021-03-10 21:45:59

![rozgrzewka, ćwiczenia na płaski brzuch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1tzsqhemxmueethdvmf.jpg)
Przed szeregiem różnych ćwiczeń najważniejsza jest dobra i dokładna rozgrzewka . Nasze ciało jest narażone na wszelakie kontuzje ,aby tego uniknąć należy wykonać przed ćwiczeniami właściwymi rozgrzewkę . Należy rozgrzać wszystkie partie naszego ciała .Rozgrzewka powinna trwać około 15 minut . W zależności od treningu jaki będziemy wykonywać należy się inaczej rozgrzewać .Przed treningiem siłowym mięśni należy rozgrzać bardziej mięśnie niż przed treningiem aerobowym .Przed treningiem biegowym należy jednak rozgrzać dokładnie okolice stawów ,aby nie narazić się na wszelakie skręcenia stawu skokowego lub naciągnięcia.

Musimy pamiętać o tym ,że wysiłek podczas rozgrzewki być średnio intensywny ,ponieważ chodzi o to aby przygotować nasz organizm stopniowo do intensywnego wysiłku .Prawidłowo przeprowadzona rozgrzewka podnosi temperaturę  naszego ciała i mięśni i pozwala na osiągniecie wyższej sprawności fizycznej .Podnosi wydajność i rozciągniecie naszych mięśni .Na początku zawsze wykonujemy rozgrzewkę ogólną o niskiej intensywności ruchów ciała . Następnie przechodzimy do rozgrzewki poszczególnych części naszego ciała .Na koniec wykonujemy ćwiczenia przygotowujące nas do treningu ,który będziemy później wykonywać .

Zobacz: <a href="https://10kg.pl/plaski-brzuch-w-7-dni-wystarczy-tylko/">Ćwiczenia na płaski brzuch</a>

Musimy pamiętać ,że rozgrzewka jest najważniejszą części treningu .Podczas rozgrzewania zaangażowane są różne partie naszych mięśni .Dzięki dobrej rozgrzewce obniża się ryzyko kontuzji i pozwala na bardziej wydajną prace podczas treningu właściwego . Teraz przedstawię wam przykładowy plan rozgrzewki wykonywanej na świeżym powietrzu .

Plan rozgrzewki na około 12 minut :

1.Trucht przez 3 minuty do przodu i do tyłu .

2. Wymachy ramion w truchcie ( LR –lewa ręka PR- prawa ręka )
-na przemian stronne wymachy ramion w przód
-na przemian stronne wymachy ramion w tył
-na przemian stronne wymachy LR w przód PR w tył
-na przemian stronne wymachy LR w tył PR w przód

3. Krok dostawno-dostawny
-w prawo
-w lewo

4. Krok skrzyżny  ( tzw. Przeplatanka)
-w prawo
-w lewo

5.Co 3 krok przysiad i wyskok w górę

6.Odskoki z nogi na nogę z na przemian stronnymi wymachami ramion

7.Skoki obunóż (z wymachami rąk przód-tył)

8.Marsz z wyskokiem do góry co 3 kroki z przysiadu

9. Krążenie bioder w prawą i lewą  stronę .

10. 15  brzuszków

11. 10  skłony do przodu

11. 10 przysiadów

12 .Krążenia nadgarstków ( splatamy ręce ze sobą i kręcimy na 
przemian w jedną i drugą stronę )

13. Szybki trucht około 2 minut .
I created a collection of UI Components for React built with Tailwind CSS
Tags: tailwindcss, react, css, nextjs
Published: 2021-03-10 21:41:56

I created a collection of UI Components for React built with Tailwind CSS containing over 20 components with over 50 variants.

You can just copy and paste the component you want to use.

![Kimia-UI](https://res.cloudinary.com/beloved/image/upload/v1618040187/Assets/kimia_lpqdlr.png)

The biggest disadvantage of using Tailwind is the risk of having too long classes that will make the code not readable enough.

As React is component-based, we can extract component logic with its classes and reuse them elsewhere which will result in more readable code with more components and less classes.

That's why I created this collection named [Kimia-UI](https://kimia-ui.vercel.app) and it's fully customizable. If you are a Typescript lover, the full source code and all examples are written in Typescript so you won't worry about types.

The project is open to contributions and you can contribute by adding a component, improving accessibility or opening a new issue for a new component or idea.


![Kimia-UI](https://res.cloudinary.com/beloved/image/upload/v1618041639/Assets/kimia_des_ydc8mt.png)

[Source Code](https://github.com/enochndika/kimia-UI)


[Components](https://kimia-ui.vercel.app)
Cypress Testing
Published: 2021-03-10 21:29:03

I have been playing around a little bit with testing lately just so I can have a semi intelligent conversation about it during an interview, just in case. I had used Jest before since I was typically working in React, but recently was re-exploring vanilla JS and decided to use Cypress. 

I'm going to explain a few of the Cypress functions provided that will help you start writing some test. One of the the key functions would be cy.visit. This tells the test what page you are actually wanting to run the follow test on. They give an example url to follow in the docs. So you would write this to start off with:

```
describe('Is title rendering?', () => {
  it('checks for the app title', () => {
    cy.visit('https://example.cypress.io')
  })
})
```

The next function would be .contains. If you already know exactly what your title name is then you can find it with .contains. We would just add this line under cy.visit.

```
cy.contains('the name of your title')
```

Lets say you don't know what your titles' text contents will be but we do know what its id is. You can use the .get function like so:

```
cy.get('#app-title')
```

This will ensure that there is an element on your page that has the id of #app-title. I think this can be useful in determining whether or not something is present on the page. 

These are just some of the really basic functions for Cypress and a good way to get started. There is so much more to them though if you take a little time to dig into the documentation and do a little experimenting!
[fake-api] how to mock a fake reponse when developing
Tags: node, javascript, faker
Published: 2021-03-10 21:12:56

When working on developing an api i have faced an issue : how to deal with an api that is not already developed ?

Then i had the idea to mock the response using faker.js library.

https://www.npmjs.com/package/faker

And you how do you do to mock your api's ?
My own website, where to start?
Tags: help
Published: 2021-03-10 21:09:21

---
title: My own website, where to start?
published: true
tags: help
---

Hi everyone, I've been a member of this community for a while and love all the helpful posts, tutorials and articles. The truth is, I'm not a web developer but rather old school in desktop programming [gulp] and in a way new(er) school becoming an Android developer.

I have a website where I primarily want to showcase my Android apps, and maybe add some other content later. However for the past almost 2 years it's just parked and has not had any content added. The site host has wordpress and some other sitebuilder as tools that can generate a website, but I would love to learn how to create my own website. 

Question 1: can I simply remove all the files in cpanel hosted on the site under public_html and replace it with my own - right now I don't even know which are remaining from wordpress and which are remaining from the sitebuilder?

Question 2: how do I build my own website - I want to learn. I managed something 20y ago as a volunteer for some organization and while it was passable then, I doubt flashing text and comic sans would cut it today ;)

Thanks
Can you hack this? #1
Tags: javascript, fun, challenge
Published: 2021-03-10 20:55:40

Say that we have a function called `nameEqualsToItself` how accept a `person` object as input that checks if the name property of the input object equal the same name property of the input object implemented like this:

```javascript
const nameEqualsToItself = (person) => person.name === person.name
```

Can you find the input that makes `nameEqualsToItself` return `false`?

```javascript
const personX = ???
console.log(nameEqualsToItself(personX)) // print `false`
```
Celebrating 1k downloads of ExtendedConsole
Tags: csharp, dotnet
Published: 2021-03-10 20:46:23

[ExtendedConsole](https://github.com/Peled-Zohar/ExtendedConsole) was the second open source project I've uploaded to GitHub and it's [my first public Nuget package.](https://www.nuget.org/packages/ExtendedConsole)

It was also the subject of [my first ever blog post.](https://zoharpeled.wordpress.com/2019/09/07/easy-way-to-customize-your-console-apps/)

I initially uploaded it to nuget in May 2019, since than I've fixed a few bugs and added a few features. Current version is 1.0.5 and was uploaded in December 2019.

This is also the first project I've published a [complete documentation](https://peled-zohar.github.io/ExtendedConsole/) to, using DocFx recommended by [Shaun Lawrence](@bijington) here on dev.

I know 1k downloads is a much less than what successful packages have in an hour, but I never expected this package to have a lot of downloads to begin with so I'm happy with this number.