teleren/devto huggingface dataset:
Play Games in VSCODE
Tags: watercooler, vscode
Published: 2021-07-03 05:43:04

---
title: Play Games in VSCODE
tags: 
published: true
cover_image: http://res.cloudinary.com/muhimen/image/upload/v1625290537/yzk3qyk5z980c1fx86xo.png
---

Are you bored of long coding sessions and want to take a small break? Or you want to play a game but you can't because your colleague is looking over you? What if I tell you that you can play games inside VSCode itself? Yes, you heard me right! Don't get your hopes too high though since the number of playable games in vscode can be counted with your hand. But hey! Something is better than nothing. 

### 1. [Visual Snake Code](https://marketplace.visualstudio.com/items?itemName=ZhouSir.visual-snake-code)

Roam around inside your editor, collect ~~fruits~~ blocks and grow the snake! Simply use <kbd>A</kbd>, <kbd>s</kbd>, <kbd>d</kbd>, <kbd>w</kbd> to move around and that is it! Enjoy the classic retro. 😉

![GIF snake game](http://res.cloudinary.com/muhimen/image/upload/v1625290486/i9zbqwyxiqed1v8frdkr.gif)

### 2. [Chrome Dino Game](https://marketplace.visualstudio.com/items?itemName=yiwwan.vscode-games)

Whether you have an internet connection or not, you can play the famous [dino game](https://trex-runner.com/night/) from vscode. And a neat thing about this extension is that you can put your own games as well(check the docs for further details).

![GIF dino game](http://res.cloudinary.com/muhimen/image/upload/v1625290504/jogz0mdl24h19t5p5hdn.gif)

### 3. [CyberCode](https://cybercodeonline.com/)

Are you tired of the boring retro games? Welcome to the world of ~~CyberPunk~~ CyberCode! Text-based MMORPG game. Although this doesn't have a dedicated vscode extension, the browser-based game has an AWESOME vscode like UI! 

![png cyber code](http://res.cloudinary.com/muhimen/image/upload/v1625290462/gygl1hhie7s2coqtirvq.png)

At first glance, you will think, "Well, it's just a normal vsc screenshot." But don't get deceived by its appearance. Because under the hood, there is a full-blown RPG. Take a closer look at it and then think again, you will be amazed. 😉

### BONUS!!

Here are a few color themes to get along with the games. I hope you will enjoy it. 

1. [Pac-man Theme](https://vscodethemes.com/e/vampyrsoda.pac-man-theme)
2. [Fortnite Theme](https://marketplace.visualstudio.com/items?itemName=sdras.fortnite-vscode-theme)

So, that was my shortlist of vscode playable games. Although there were some other games available, those kinda appeared to be shady to me. So I decided not to put them here. If you want, you can give them a try too(at your own risk)! 

Do you have any other sneaky tricks to take a quick break during work hours as well? Let us know in the comment. [whispers]*Your boss won't know about it*[whispers]
Handling Browser Storage with React Hooks
Tags: react, webstorage, reacthooks, useeffect
Published: 2021-07-03 05:27:04

This is a very common issue when you need to store data in the browser by using any methods `sessionStorage` or `localStorage` with React Hooks.

let's get rid out of it. 😎


## Scenario
I have a language that I change on the selection of dropdown and store on the browser.

```javascript
const [language, setLanguage] = useState(null);
const changeLang = () => {
    // update language
     setLanguage("en-IN");
    // store language in browser as well
    localStorage.setItem('language', language);
}
```

Does the above snippet look fine and store data???🙄 Noooo!!!! It can’t store on the first hit, Because of the `async behavior` of `setLanguage` in useState() hooks.


## Solution ☺️
```javascript
useEffect(() => {
   localStorage.setItem('language', language);
}, [language])
```

This is nothing but a dependent state which gets fire when the language gets changed.

That's It!!!

Enjoy browser storage peacefully 😍

> {HappyCode}
Dakwah Adalah Senjata Memperbaiki Generasi
Tags: teori, dakwah, pemula
Published: 2021-07-03 05:26:20

Dakwah Adalah Jalan Yang Paling Ampuh Dan Relavan Untuk Di Tempuh Untuk Memperbaiki Kualis Umat Manusia Lebih-Lebih Dibidang Etika Manusia Yg Akhir2 Ini Sangat Amburadur.

Maka Karna Demikian Penting Bagi Para Dai-Dai Di Seluruh Penjuru Dunia Lebih Giat Meningkatkan Kualitas Dakwahnya Agar Mudah Diterima Oleh Audien-Audien Nya Masing-Masing.

Lebih-Lebih Lagi Para Pemula Yang Selaku Penerus perjuangan Para Legendaris Dakwah Yang Telah Bekerja Keras Demi Memperbaiki Menstabilkan Ilmu Pengetahuan Ummat Manusia.

Sumber:https://ilme.site
Why Software Engineering?
Tags: programming, startup, beginners
Published: 2021-07-03 04:55:02

I'm a systems engineer with a background in electrical engineering. You may be aware of that systems engineers are typically work as part of multidisciplinary teams; the great majority of Systems Engineers collaborate closely with a Software Engineer. So, how can we communicate if we don't speak the same language (programming)? 

Speaking of languages, I can speak three, English and two others.  I've been asked how I acquired various languages, and my answer is always the same: you don't learn languages in school or via instruction; you learn from the community through engagement. 

Now, as a member of engineering community, I've decided to learn software engineering so that I can communicate in their language. We can bridge the skill gap between the two engineering desciplines by speaking the same language.
How to Deploy React JS Applications for Free on Firebase 2021
Tags: react, firebase, javascript, webdev
Published: 2021-07-03 04:50:34

In this article , I’ll show you how to deploy react js applications for free on Firebase, First let’s understand what is Firebase

###What is Firebase

Firebase is a Backend as a Service that started as a YC11 startup and grew up into a next-generation app-development platform on Google Cloud Platform. Firebase frees developers to focus crafting fantastic user experiences. You don’t need to manage servers. You don’t need to write APIs. Firebase is your server, your API and your datastore, all written so generically that you can modify it to suit most needs. Yeah, you’ll occasionally need to use other bits of the Google Cloud for your advanced applications. Firebase can’t be everything to everybody. But it gets pretty close.

###Getting Started
Before deploying your app on Firebase, you need to have Firebase project and a React project (create-react-app)

###Build Your App for Production
Open your project folder cd your-project and build your app for production using command below 
```
npm run build / yarn build
```
The JavaScript and CSS files will be inside the build/static directory.

###Install Firebase Tools
Once you built your app then you can install Firebase tools that will allow you to deploy your React app. You can install the tools by running

```bash
npm install firebase-tools -g or yarn global add firebase-tools
```

###Login to Firebase
Make sure you’re in the root directory of your React app and run the following command to login to firebase in your terminal 
```
firebase login
```

*If you’re not logged in, you’ll be asked to enter the credentials for your google account.

###Initialise Firebase
Now that you’re logged in, you will need to initialise Firebase in your React app. You can do it by running the following command 
```
firebase init
```
You will then be prompted with a series of questions and configuration options.

Choose Hosting: Configure and deploy Firebase Hosting sites
Choose Use an existing project
Select the firebase project that you created
What do you want to use as your public directory? (public) build
Configure as a single-page app (rewrite all urls to /index.html)? No

Now it is time to deploy our app

###Deploying Our React JS App on Firebase
Run the following command to deploy your app: 

```
firebase deploy
```

*Firebase will then give you a unique URL where your deployed app is located (e.g. react-app.web.app).That’s all there is to it!
Install Tailwind CSS in Solid and Vite
Tags: solidjs, tailwindcss, javascript, webdev
Published: 2021-07-03 04:48:57

Here's a quick guide on setting up Tailwind in your Solid project.

First, generate a Solid + Vite app if you don’t have one set up already.

```
npx degit solidjs/templates/js my-app
```

Navigate to the project directory and install the dependencies using `npm` or `yarn` or `pnpm`.

```
cd my-app
npm install # or yarn or pnpm
```

Next, we'd need to install tailwind and its dependencies (PostCSS & autoprefixer).

```
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

Next, generate your `tailwind.config.js` and `postcss.config.js` files:

```
npx tailwindcss init -p
```

This will create two files in your root directory: `tailwind.config.js` and `postcss.config.js`.

Open the `tailwind.config.js` file and update the `purge` property to include the path to our `src` folder and `index.html` file.

```javascript
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

Next, we’ll import Tailwind’s styles using the `@tailwind` directive within our entry CSS file:

```css
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Finally, ensure your CSS file is being imported in your `./src/index.js` file:

```jsx
import { render } from "solid-js/web";

import "./index.css";
import App from "./App";

render(() => <App />, document.getElementById("root"));
```

You're finished! Now when you run `npm run dev`, Tailwind CSS will be ready to use in your Solid and Vite project.

Here's a Vite + Solid + Tailwind starter with Routing configured for you:

{% github wobsoriano/vite-solid-tailwind-starter %}
Web Developer position
Published: 2021-07-03 04:44:13

Hello ,

Looking for advice.
I have a computer science degree, work experiences (around 3 years) in front end - back end - DB: HTML,CSS,javascript,SQL etc. 
How can I understand if I am good enough for a "web developer" position?

For sure I still have to improve, but any suggestion about projects that I should be able to develop for understanding if I am ready? Or even knowlodges good to have ...etc.
It helps me to sell myself better during an interview

Thank you
IvyFinal CTF (Crypto 1) - Warmup 50 points
Tags: security, cybersecurity
Published: 2021-07-03 04:25:38

You can get the file [here](https://github.com/wireless90/Writeups/tree/main/Reversing/CTF/Ivy%20Finals/Crypto/Warmup).
# Warmup - 50 points

It's important to warmup before physical activity.

Free hint, don't get used to it: XOR cipher was used for this flag's encryption with a single byte key.


# Let's Begin

So we practically need to find the key that was xored. Since its just 1 byte, its easy to bruteforce.

And the flag is always in the format if  `ivyctf{...}`.


So lets find the key that simply xors to match the first letter `i`.

```py
In [19]: def get_key(contents):
    ...:     for i in range(256):
    ...:         if ord(contents[0]) ^ i == ord('i'):
    ...:             return i
    ...:
    ...:
    ...:
    ...:
    ...:
```

Above is just a function that gets the content of the file and goes through the value of a byte, 0 to 255.
For each of the value, we xor it with the first letter and see if it hits the letter `i`.

Once we get the key, we simply xor it with the rest of the file.

```py
In [21]: def crack_flag(contents, key):
    ...:     flag = []
    ...:     for ch in contents:
    ...:         flag.append(chr(ord(ch) ^ key))
    ...:     print(''.join(flag))
```


Once we get our functions right, lets run them.

```py
In [23]: contents = open('flag.enc', 'r').read()

In [24]: crack_flag(contents, get_key(contents))
ivyctf{all_warmed_up_and_ready_to_go}
```
Project 87 of 100 - Slider Component in React
Tags: javascript, react, 100daysofcode
Published: 2021-07-03 03:35:48

*Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-87-react-slider.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-87-react-slider)

This is part 7 of 15 in a series on building React projects by John Smilga, covered in [this 10 hour video](https://www.youtube.com/watch?v=a_7Z7C_JCyo) on Youtube.

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**
Prismic Slices
Tags: prismic, javascript, cms, vue
Published: 2021-07-03 03:07:08

#Prismic

Prismic is a headless CMS for developing sophisticated web and E-commerce apps. It is a custom type based API with cloud hosting feature, plus a easy to use content editor. 

What is a slice in Prismic ?

## Slices

Slices can think of *code block* in a block editor , for example paragraph in WordPress  *block editor*. In Prismic while creating custom types we can switch on the slices, can add the optional reusable slices come with the CMS or we can create our own. These are optional fields in prismic types

> Slices are optional fields in Prismic, they can be placed from slices gallery. 

## Types

Slices have two section repeatable and none repeatable section. Repeatable section can have multiple elements of same type, for instance the images.
## where the slices stored ?

Slices will be stored in data.body key as n array.
## How to render

We can render the slices as regular component but Vue offers a prismic slize-zone for dynamic handling of slices. Alternatively we can use Vue's dynamic component approach.

[](https://devmnj.wordpress.com/)
TinyMCE "Google docs"
Tags: tinymce, richtext, react, wysiwyg
Published: 2021-07-03 02:46:48

hola Dev's! [Demo CodeSandbox](https://codesandbox.io/s/tinymce-nextjs-tfefz)

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

I'm looking to do a "google docs clone" but can't find a way to split the pages like them with TinyMCE.

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

I would like to generate A4 pages.  
Does anyone come up with an idea?

In this example jvillanueva show how to insert marks with an svg but it would not be elegant. [codepen](https://codepen.io/jvillanueva/pen/oZmxZE)
  
Feel free to open issues and pull requests. 
{% github https://github.com/lcanavesio/richtext %}
My Thoughts on Github Copilot
Tags: codenewbie, webdev, beginners, programming
Published: 2021-07-02 19:07:19

Link to original article: https://gabriellazcano.com/blog/my-thoughts-on-github-copilot/

There has been a lot of controversy and I should say fear since the announcement of Github Copilot. The common concerns are that it’s going to take jobs from programmers or that it’s going to make a generation of coders that don’t know how to code and solve problems.

Regarding the first point, I don’t actually think it’s going to take jobs from established programmers but that it will make junior programmers' life harder. As the most basic things are being automatized they will have learn much more than before to make a living of programming. We are seeing this trend with tools like webflow for creating landing pages and other simple applications instead of requiring a junior programmer for that matter.

Returning to my first idea, automatization helps more senior developers with more mundane and repetitive tasks. This will make coding be faster, more effective and productive. And while Copilot seems to have really advanced capabilities, it seems to be lacking on using the context of your application as a whole, you will still be the one solving challenges. Solving challenges is why you are required and how you do it is secondary.

I believe Copilot is a more advanced alternative of what we have now, Stackoverflow. We are so accostumed to it that we don’t see that when we copy and paste code from Stackoverflow we are doing basically the same thing Copilot aspires to do but more effective, as I mentioned before. However, we don’t have to rely on either Stackoverflow or Copilot to do all the work for us. If you are a person that just copies code from other places and call it a day you must definetely be worried about Copilot taking your job but that is not certainly the case for most of us.

We have to stop fearing innovation and start embracing it, we humans have the same fears as thousands of years ago. Innovation could kill some jobs but create others, the first “computers” were people who were skilled with mathematics who were used to undertake long and often tedious calculations.

Did you find this post interesting? You can share your thoughts with me on Twitter or point me out something. Thanks :))
Publish blog posts from GIT to dev.to
Tags: devto, publication, continuousdeployment
Published: 2021-07-03 01:09:58

<div align="center">

[![Actions Status](https://github.com/anilkulkarni87/dev.to/workflows/CI/badge.svg)](https://github.com/anilkulkarni87/dev.to/actions)

</div>

# Publish blog posts from GITHUB to dev.to

This is a template repo which where I am testing and building solution for automated publishing of my articles/blog posts to dev. It's just a lot of work to post the same article across places and hence I decided to automate publishing my posts to dev and eventually any other personal blogs.

Dev exposes API through which you could do a lot of things. I am currently only creating articles which will be in your drafts. 

![image](https://user-images.githubusercontent.com/10644132/124338461-f7744b00-db5c-11eb-8047-eb073cc632f3.png)
Generated via code(Python)

## Approach
- Clone this repo, cleanup the files and arrange your blog posts.
- Create a markdown file for your blog post. You can check the folder structure in the repo.
- Setup your DEV TOKEN in your repo with the name as `GIT_TO_DEV`
- Commit the changes made to your .md files.
- Voila after the workflow is complete, you can see the blog posts created in draft. 
- Also, I am persisting the json payload of the article with the id populated.

### Next steps
- Identify new files and modified markdown files
- For new files, create new articles
- For modified, update the articles


### Thanks
- [Ana María Martínez Gómez](https://github.com/Ana06/get-changed-files) - Tracking changed files
- [Stefan Zweifel](https://github.com/stefanzweifel/git-auto-commit-action) - Committing the changes file from a workflow
- [Maxime](https://dev.to/maxime1992/manage-your-dev-to-blog-posts-from-a-git-repo-and-use-continuous-deployment-to-auto-publish-update-them-143j) - For the triggering a thought
- [Chris Amico](https://github.com/eyeseast/python-frontmatter) - For parsing front matter from Markdown file

### Bugs/Changes
Please modify any typos or corrections and create a pull request to make this better.
My Book Review Sinatra App
Tags: beginners, sinatra, ruby
Published: 2021-07-03 00:28:21

My Sinatra project is an online book review application in which a user can create, view, edit and delete their book review posts after safely signing up or logging in to their accounts. The user can also view others' posts, but he/she may not be allowed to edit or delete other users' posts. Here is my live site: https://sinatra-book-app.herokuapp.com/
 
Through this project,  I have gained a better understanding of the MVC pattern, which I believe is the core concept of building up a Sinatra project. 

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. The model contains the logic of the application. The view implements the interface of the application. The controller is a linker between the model and the view.

The best practice is that the model and the view should NEVER communicate. All of the views should get their information from controllers.

Furthermore, I have solidified my knowledge of user authentication. Below are the basic steps to create a user authentication in the Sinatra project: 

(1) Add `bcrypt` to the gemfile, which would provide a hashing algorithm to the user’s password.

(2) Add `has_secure_password` to the User model.

(3) The user table must have a `password_digest` column in the database where the salted and hashed password will be stored.

(4) When a user has successfully authenticated themselves, store their `user.id` in the session as below:
`session[:user_id] = user.id`

(5) Ensure that the attribute we find users by login is unique.

In short, building up a Sinatra project from scratch on one's own is challenging;  but once you've gone through the whole process, researched and corrected every single error, and finally push your site online, you would find how rewarding your hard work is!
Writing a Leetcode Android App - Day 2
Tags: android, kotlin, leetcode
Published: 2021-07-03 00:25:03

This post is a continuation of the daily software development journal I've recently started. See my previous entries on [day 0](https://dev.to/stephanbranczyk/writing-a-leetcode-kotlin-android-app-day-0-3eg5) and [day 1](https://dev.to/stephanbranczyk/writing-a-leetcode-kotlin-android-app-day-1-3bb8).

In summary, I'm creating a [Leetcode](https://leetcode.com/problemset/all/)-related Android application and I have a rough idea of what my architecture should be like, but I need to flesh out its design a little bit more before I start coding it. 

I also think it's important to show my initial thoughts to others, to see if my design decisions make sense and are both usable and useful, or if my design decisions need to be revised.  

#### A couple of questions for myself:

Will an Android webview be good enough to render each problem statement and related test cases? Will a webview be sufficient for the code as well? How will it handle wrapping or pinch-zooming?

I'll need to perform a few experiments with WebViews on Android before I can go on. 

<!-- Here are what some of the screens will look like:

Mock up

Usability testing -->