teleren/devto huggingface dataset:
Countdown to js13kGames 2021
Tags: competition, js13k, gamedev, javascript
Published: 2021-07-13 14:42:52

---
title: Countdown to js13kGames 2021
published: true
date: 2021-07-13 14:36:15 UTC
tags: competition,js13k,gamedev,javascript
canonical_url: https://medium.com/js13kgames/countdown-to-js13kgames-2021-e616ba372d9a
cover_image: https://cdn-images-1.medium.com/max/1024/1*scC6tnz9fse_ZY92N4zTeQ.png
---

As you can see the countdown started later than usual, only one month before the beginning on August 13th, but now we’re focusing all our time and energy into making the tenth (!) edition of the [js13kGames](https://js13kgames.com/) online competition even better than the previous ones.

The [countdown to 2019](https://medium.com/js13kgames/countdown-to-js13kgames-2019-1b3d989f727f) blog post was published April 30th, [countdown to 2020](https://medium.com/js13kgames/countdown-to-js13kgames-2020-1482bec61577) on June 26th, and now it’s July 13th already. The delay was caused by many things: from the pandemic in general, through our heavily delayed [Grant for the Web work](https://enclavegames.com/blog/final-grant-report/), to health issues, but now I hope everything will go smoother.

We’ll start announcing partners/experts/prizes today, so check our [Twitter](https://twitter.com/js13kGames) and [Facebook](https://www.facebook.com/js13kGames) for details. There is a new category in the works that will be revealed soon - make sure to not miss it. Also, there’s plenty of other, new things that we’re working on specifically for 2021, but for now it’s really hard to tell which ones we’ll be able to release, so stay tuned.

As usual, the theme will be announced on August 13th, the same day the competition will begin. You’ll have a whole month to create an HTML5 game in 13 kilobytes (or less) of a zipped package containing all the resources you need for it to run.

### Help promote the competition

Before js13kGames 2021 actually starts though, I’ll need your help - please **share the good news** with your dev friends and the communities you are part of! The more people participate the better, as we can learn from each other, and win some cool prizes in the process.

Thank you, and see you on August 13th!
Free icons for your next project
Tags: webdev, icons
Published: 2021-07-13 14:30:21

Here some of the free icons we can use in any library for our next projects and do wish to credit the creator.

#### 1. Hero Icons - [Visit](https://heroicons.com/?ref=lagandlog.com)
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Simple to use.

#### 2. Flaticon - [Visit](https://www.flaticon.com/icons/?ref=lagandlog.com)
The largest database of free icons available in PNG, SVG, EPS, PSD, and BASE 64 formats. More variants so more to choose from.

#### 3. The Noun Project - [Visit](https://thenounproject.com/?ref=lagandlog.com)
The World’s Most Diverse and Extensive Icon Collection. Over 3 million unique and simple icons.

#### 4. TablerIcons - [Visit](https://tablericons.com/?ref=lagandlog.com)
Open source, fully customizable 1000+ icons.

#### 5. Icons8 - [Visit](https://icons8.com/?ref=lagandlog.com)
The modern, unique set of icons in both SVG and png formats. Available in various styles.

[View all](https://lagandlog.com/logs/free-icons-for-your-next-project)

These are the various icon sets that I came across, feel free to add your favorite and go-to icons library in the comments below.

> **Note**: Go through the website to learn about free licensing on illustrations that you use.

### Happy coding!
Netflix Clone Using React and TMDb
Tags: react, webdev, javascript, api
Published: 2021-07-13 14:26:00

I created a Netflix Clone using React and [The Movie Database (TMDb)](https://www.themoviedb.org/). 

The Movie Database API was used to fetch the movie images and posters to populate the Netflix Clone. So the images of the movies will change from time to time when viewing the link based off of what is returned from fetching the api.  

**LINK**: [https://gilmore-netflix-clone.netlify.app/](https://gilmore-netflix-clone.netlify.app/)

#### Netflix Clone Version 2

I'm going to make a version 2 of the Netflix Clone to update on how I make the API calls and also add lazy loading. These look like they are the reasons on why it takes so long to load. The current version uses chained ajax calls. I'm planning on using axios in version 2 and hopefully that will help the page load faster. 

If you have any other suggestions that you think I should make to the Netflix Clone please let me know.  

Netflix Clone Version 2
{% link https://dev.to/thomasgilmore/netflix-clone-version-2-react-tmdb-3nko %}
File Conversion and Text Summarization Bot
Tags: ibelieveindoing, crioibdremoteworkingtool, iamabelieverofdoing, criodo
Published: 2021-07-13 14:24:13

We often visit websites to convert our files into different formats and it is so usual these days especially for students studying through virtual classes that I don't need to explain why it is so important.

I have created a telegram bot (ofcourse most of us uses telegram!) that can be used to convert files to different formats and also to generate summary of a document.

You might be thinking I have created a bot from scratch. Not exactly, because you don't need to. The task is to assemble different APIs and make proper use of free deployment tools and libraries and most of your work is done. That is where you are bound to read the documentations of various APIs and libraries.

This telegram bot can provide the following functionalities:

1. Converting documents to PDF files.

2. Converting images to PDF files.

3. Summarizing/Sending the key sentences from a .txt file.

All the above Functionalities are added to the bot by making use of the required APIs and using the functionalities of telegram bot API, details of which are provided here: https://core.telegram.org/bots/ 

#MAKING A SIMPLE TELEGRAM BOT
To begin with, I needed a pre-built bot which I can work on and add the necessary functionalities as per the requirements. The bot had to be such that it could run the functions defined upon sending a specific command from a set of commands. This is where BotFather comes into picture. In telegram, BotFather helps you create your own custom bot by writing a set of functions and integrating them in any language of your choice from the pool of languages, Telegram bots supports.

#MAKING API CALLS 
All the functionalities that the bot provides are indirectly provided by the APIs. We are using the result of the APIs and sending it in an appropriate format to the user without user knowing which API we have made call to. In this case, the convertapi is used, details of which are kept here: https://www.convertapi.com/doc/python-library

#USING PYTHON LIBRARY FOR TEXT SUMMARIZATION
The function that sends the key sentences/summary from a .txt file makes use of a python library called sumy and it sends the key statements to us from the file. More details on the use of this library is provided here: https://pypi.org/project/sumy/ 

#CONCLUSION
The bot is not limited to the functionalities which we discussed. We can add several other functionalities which can lead to enhancement of the features this bot provides like pdf to doc conversion, unzipping a zip file, merging 2 or more pdf and doc files and many others.

**Link to the Github Repository**: https://github.com/Crio-WFH/Telegram-bots/tree/main/PDF_Generation_and_Text_Summarization

**For using the bot in telegram search for jk2000_bot in telegram.**
How to improve imports in your code
Tags: react, javascript, webdev, nextjs
Published: 2021-07-13 14:15:13

Hello, there!

After a while without new posts, I decided to come back with a really useful tip to simplify your code and reduce repetition.

Have you ever saw a code like this ?
![many_imports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2di1gwpgz9ct89nfq54v.png)
Wouldn't It be great if we could simply shorten it to this ?
![simplified_imports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3dsayxdhwlol63xf7zg.png)
 
Well, It's possible!

In order to do it, we will simply create a file named 'index.(js/ts)' inside components' folder, and add the following code in it:

![exports_index_ts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc64qti3sn571grwt8kp.png)
 
And now you can import components easier from other files without needing to repeat their names.

---

If you think that it is still not worth it, because in index.(js/ts) the components are still being imported, there is another solution:

Instead of default exporting components
```js
export default Input
```
Simply export them without default keyword
```js
export const Input (...)
```
And in index.(js/ts) do this:

![second_way_to_simplify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xu81dxxum68zxrbddji9.png)
Improving Visibility Without Being Annoying w/ Anders Wallgren
Tags: github, management, devops, productivity
Published: 2021-07-13 14:10:15

It’s safe to say that everyone wants more visibility into their software delivery process.

When project management and git systems don’t talk to each other, we have only small islands of visibility and no way to connect them. Anders Wallgren, the VP of Technology Strategy at Cloudbees, joins the [Dev Interrupted podcast](https://devinterrupted.com/podcast/improving-visibility-without-being-annoying/) to help us connect these islands, and discuss the outcome-based metrics we should all be using to make the software development process more visible.

#**Listen to the full episode**
{% spotify spotify:episode:22fh3bcXA3qVIjoyulxC71 %}

#**Episode Highlights include:**
* How to increase development visibility without [micromanaging](https://linearb.io/blog/data-driven-dev-team/)
* Which team-based metrics are best for pipeline visibility
* Why it’s important to look at your software at the feature level
* What the future holds for software delivery pipeline visibility

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
I just made an eBook: Learn 50 concepts in JavaScript with notes and illustrations!
Tags: javascript, webdev, books
Published: 2021-07-13 14:06:59

**If you are learning JavaScript, I have something interesting for you.**

If you love learning with visuals and illustrations, if you want something short and concise, read on.

I have made a digital product explaining 50 important topics in JavaScript with short notes, analogies and illustrations.

Here are the 50 topics covered:


![Table of content](https://cdn.hashnode.com/res/hashnode/image/upload/v1626181628366/7eCTqooPW.png)


This book teaches you the core things you need to know about JavaScript without overwhelming you with the details.

Some concepts like the Event Loop, the Call Stack, how the API works and so on are all explained using simple, hand-drawn visuals.

For example, here's an interesting illustration of how an API works:


![API illustration](https://cdn.hashnode.com/res/hashnode/image/upload/v1626181741496/xxoqVwAtv.png)

What's even better? A link to an in-depth tutorial is provided at the end of every single chapter:


![read more](https://cdn.hashnode.com/res/hashnode/image/upload/v1626182705102/dlr4v161n.png)

That way, you can gain deeper insight/knowledge on the topics all from one place!

You most definitely don't want to miss this as someone learning how to code in JavaScript.

Join other learners in boosting your JavaScript skills by  [getting your copy now](https://gum.co/js-50) !
How to add a sparkline to your Vue.js app
Tags: vue, javascript, showdev, tutorial
Published: 2021-07-13 14:02:31

---
title: How to add a sparkline to your Vue.js app
published: true
description: A sparkline is a very small chart that you can easily include in a dashboard for your own Vue.js app.
tags: Vue, JavaScript, showdev, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd06seaubls0zbv1lf7o.png
---

Very recently, I was looking to add a neat sparkline to a Vue.js application of my own. 

As always, I googled just that, looking for [sparkline vue.js](https://www.google.com/search?q=sparkline+vue.js) or [sparkline npm](https://www.google.com/search?q=sparkline+npm). But I couldn't find something that was easy, with a small footprint and yet customizable.

After playing a bit with [Chart.js](https://www.chartjs.org/), I just stopped and considered how I could build a decent, yet very simple, sparkline component (i.e. without any dependency).

If you look at how npm's sparkline works as well as the ones from Stripe's dashboard, you will quickly realize that it's just a SVG element that you customize with JavaScript.

So bear with me, I'll show you how to do just that.

## Demo

{% codesandbox sparkline-ex2dn %}

## Behind the scene

The sparkline is just a Vue.js component where you provide the coordinates of the sparkline as an array. Here's how I've rendered the sparkline in the example above:

```html
<sparkline v-bind:data="[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31]"></sparkline>
```

The source code of the component is the following:

{% gist https://gist.github.com/Frenchcooc/e4748ad6275984a01868153e3c0d8a1e %}

As you might have noticed, the code renders an `<svg>` HTML element by computing the coordinates of the different `<path>`. 

There are two `<path>`. One for the blue line. And another one for the blue background. I've used the color `#1f8ceb` but of course this is totally customizable, just like the width/height of the sparkline.

That component is pretty basic and contrary to NPM or Stripe, it doesn't handle when a mouse hovers the `<svg>`. I didn't need that for my use case, but if ever you implement it, feel free to edit the [gist](https://gist.github.com/Frenchcooc/e4748ad6275984a01868153e3c0d8a1e) and share it with the community.
GPGPU-sim Day 1
Tags: gpus, computerarchitecture, cuda, research
Published: 2021-07-13 13:49:51

**GPGPU-SIM**
I came across great project where we can simulate GPGPU's and we can change the source code and get the results by using benchmarks, we will Explore more about GPGPU-sim as we go further
[Project Link](https://github.com/gpgpu-sim/)
This  Post we will cover the ground work what should be done
#####we are going to follow below steps in first few days
1. Read the [gpgpu-sim Manual](http://gpgpu-sim.org/manual/index.php/Main_Page) step by step


2.Understanding the code of SRC File in **GPGPU-SIM DISTRIBUTION** we will do it in parallel while reading the manual, where we come across GPU architecture and code snippets (functions for implementing)

3. I'll be sharing the Research papers(along with Link) where they Proposed different architectural Designs for GPU's

#####My setup for GPGPU-Sim
1. GPGPU-sim virtual box and i changed the source code of GPGPU-Sim master to GPGPU_Sim Dev which helps us to undersatnd the Latest GPUs
Here's the link for [setting up](http://www.danielwong.org/classes/ee260-w17/assignment1)

I am using virtual box because my system is not supporting for cuda driver even though i have proprietary nvidia drivers
i wasn't able to configure well x-server in linux it is always showing error

if your system have gpu there are many tutorials for setting up For Nvidia-cuda toolkit be careful in each step and read the readme file of GPGPU-Sim distribution carefully for dependecies and environmental variables
 
If yo ur setting up for nvidia-cuda toolkit is succesfull let me know in the comment

Here is the GPGPU-Sim Tutorial-1
{%youtube d2bzYap_fzc%}
10 Best Vue UI Component Libraries And Frameworks In 2021

Tags: vue
Published: 2021-07-13 13:45:33

Vue.js is a javascript framework that you can use to create dynamic dynamic applications on the frontend. It is easy to use, and components are at the core of the Vue framework. There are some UI component libraries that provide building blocks for productive user interface development. Instead of coding and styling buttons, cards and layouts,one can use these libraries to get access to necessary UI elements to create content rich apps. If you are thinking to adopt Vue.js for development, knowing the following libraries and frameworks will help you in rapid development. Let’s see top 10 vue UI component libraries and libraries.

#Top 10 Vue UI Component Libraries And Frameworks To Use In 2021-
**1. iView-**
This high-quality Vue UI component library offers useful and beautiful components. It is easy to create new projects in a visual way using iView Cli. Also, the iView admin template can help to create dashboards with ready-to use components and features, like login/logout page, breadcrumbs and tab navigation, form and table elements, lock screen, message center and so on. It’s UI component library with regular updates and great community support.

**2. Fish UI-**
FishUI is used for designing front-end web apps. It has compatibility with modern browser environments and serves ES2015 and Webpack 2.0. There is very less documentation available for Fish UI. However the community of this library is enough active to fix all issues. Fish UI offers many components including semantic CSS elements like Checkbox, Buttons, radio, Tag, BackTops, Dropdowns, Menu, Tables, Pagination, Card and so on.

**3. PrimeVUE-**
Know more at- [https://solaceinfotech.com/blog/10-best-vue-ui-component-libraries-and-frameworks-in-2021/]
My own cli boilerplate tool
Tags: showdev, javascript, opensource
Published: 2021-07-13 13:18:37

*A cli tool to generate node module project includes tools like avaJs for testing, eslint, prettier etc...*

- **Repo** - [https://github.com/luctst/luctst-cli](https://github.com/luctst/luctst-cli)
- **Package** - [https://www.npmjs.com/package/luctst-cli](https://www.npmjs.com/package/luctst-cli)

---

## Install 🚀:

Run

```bash
npm install -g luctst-cli
```

Or if you have NPX:

```bash
npx luctst-cli [commands] <options>
```

## Usage 🖍:

This package will create this folder structure by default:

```bash
├── .github/
│	├── ISSUE_TEMPLATE/
│	│	├── bug_report.md
│	│	├── feature_request.md
│	├── CODE_OF_CONDUCT.md
│	├── CONTRIBUTING.md
│	├── LICENSE
│	├── pull_request_template.md
├── lib/
│	├── main.js
├── test/
│	├── test.js
├── .editorconfig
├── .estlintrc.json
├── .gitattributes
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .travis.yml
├── package-lock.json
├── package.json
├── README.md
```

Run this command to start the process:

```bash
luctst-cli start
```
> **Note** - By default if path flag is not present folder will be created with `process.cwd()`

With the —path flag:

```bash
luctst-cli start -p=<folder-name>
```
> **Note** - Create the folder inside the <folder-name> folder.

**More informations here** - [https://www.npmjs.com/package/luctst-cli](https://www.npmjs.com/package/luctst-cli)

Happy coding  ✨🧑‍💻
5 Quick & Easy Tips to become a rock-solid Web Developer
Published: 2021-07-13 13:13:34

###1 Keep Reading:
It's important to keep reading about web development on a regular basis! Read blog posts, magazines and books in order to pace yourself with new trends and techniques.

Staying up-to-date is one of the best ways to learn. Web development is an ever-changing field that never stops growing. Just like any other career field, it takes time and dedication to become a professional.

###2 Track your progress:
Keep track of your design choices and the websites you've worked on. That way, you'll be able to see what works and what doesn't.

###3. Use the right tools: 
The tools that you choose to use can make or break your work, so make sure that you choose the right ones.

###4. Take risks.: 

Web development can be a lot of fun when you're taking risks. Try something new for every project you work on and you'll never get bored. 


###5. Don't be afraid to fail: 
If you're not failing sometimes, then you're not trying hard enough!


Inspiration is all around you. We get inspired by other people's work, by a new web design, a code, or even by a guide. 


### Must Do

To be a successful web developer you need to know how to work in the latest technology and languages. You also need to know how to code and think logically.

Wouldn’t it be great if you could improve your web development skills quickly and easily?

You can always suggest us topics regarding Web Development, which you want to learn quickly.

We are simplifying web development at Coder Champ: 

Subscribe to our newsletter for Quick and better updates (Only specific for Web Development)


[Coder Champ](https://www.coderchamp.com/blog/)

![Coder Champ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htjs8zesrgot4ptppcta.png)
What is a class in JavaScript?
Tags: javascript, webdev, beginners, computerscience
Published: 2021-07-13 13:09:29

##Stuck in tutorial hell
You may have come across this word "classes" which is often referred as a blueprint of different objects. we can create "instances" of it using the new keyword. but sometimes you don't really get what exactly is class even after reading several articles and getting trapped in tutorial hell.

Fret not. i'll try to explain it as easy as possible.



![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9klg38uyy0pt7uh7nb0.png)
 
Think of classes as a stamp, like above.

Imagine you have to sign some documents for verification.
Now imagine there are 400 pages of documents on which your signature is needed(400 similar objects are needed). It'll take a lot of time if you do them one by one(keep declaring new objects with similar properties).

So, what do you do to save time and effort? You use a stamp(class) which will already have your name(object properties/functions/values) on it. Now you can simply use the stamp to validate different documents(create objects with same properties) much faster.

in code we do:

```
class Sign(){ // creating a class / stamp
      constructor(signature){ // engraving your signature on the stamp
            this.sign = signature; // assigning the signature to a property this.sign which will hold the value

                            }
         get thesign(){
            return this.sign
         }

}


const mySign = new Sign("cj")
console.log(mySign.sign) // cj
console.log(mySign.thesign) // cj
```

##Conclusion
I've tried my best to explain classes in JavaScript. If you find anything that's incorrect, please let me know. Thank you for reading!