teleren/devto huggingface dataset:
I created a Javascript Interview quiz interface, need your help!
Tags: javascript, career, discuss
Published: 2020-04-25 11:27:52

###The Motive
I was planning for a long long time to create a portal with Javascript questions. Not the tricky, puzzle kind, wherein the question is related to a quirky implementation detail of the language and you either know the answer to it or you don't. 

###The need for another quiz?
I wanted to bring together all the questions which would elevate your **level of understanding** of how the language works if you went about solving them. I was also not just interested in checking whether one got the right answer or not, but also wanted to make sure that the route one took in order to reach that answer/conclusion was a legit one and not just luck. That is why, on this portal, upon making a choice of answer, whether the answer turned out to be correct or wrong, you would get an **explanation** with a short summary and a long explanation and you can double-check your train of thought against that.

###The result
This weekend, I got up and running a pretty basic skeleton framework for the quiz interface. You can check it out here:
https://kokanek.github.io/javascript-interview-quiz/

Or play around with this fiddle:
{% jsfiddle https://jsfiddle.net/kkokane/8y5mvoq0/3/ %}

###What's next:
There are a few tasks that I have planned next, like:
- An animation of the options buttons of clicking answers
- CSS confetti falling from top on clicking the right answer
- Support for multiple questions and the ability to move between them

###How can you help?
As you can see, there is just one question on the site right now. Can any of you help me with a reference link of **legit Javascript questions**? They need to invoke the thought process of the interviewee about any of the advanced javascript concepts. Please send links in the comments section. 

Thanks for your time.
Cheers!
I have created a game with React-Native
Tags: reactnative, react, javascript, hooks
Published: 2020-04-25 11:06:27

---
title: I have created a game with React-Native
published: true
description: 
tags: react-native, react, javascript, hooks
---
It's been a challenge, but I've finally finished my game. "Bulls and Cows" is a fun game, used a lot in math and science for teaching algorithms. The rules are simple:

- The AI thinks of a number, while the player tries to guess it.
- The number to be guessed must be a 4 digit number, using digits from 0 to 9, each digit at most once. e.g. 1234 is valid, but 1233 is not valid.
- For every guess that the player makes, he gets 2 values - the number of bulls and the number of cows. 1 bull means the guess contains and the target number have 1 digit in common, and in the correct position. 1 cow means the guess and the target have 1 digit in common, but not in correct position. e.g. Let the target be 1234. Guessing 4321 will give 0 bulls and 4 cows. 3241 will give 1 bull and 3 cows. 4 bulls means you have won the game!

I've spiced it up with bright colors and animations.

iOS:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jv768co5ds4oy1j5nizu.gif)

Android:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g5cx59bjbtd93cb5oax6.gif)

Repo: [https://github.com/pavermakov/bulls-and-cows](https://github.com/pavermakov/bulls-and-cows)
Dev.to/Twilio Hackathon: NHS Voice Covid-19 Symptom Checker
Tags: twiliohackathon, node, twilio
Published: 2020-04-25 11:03:16

This is my first hackathon with Dev.to and just starting on my Hackathon Project.

One thing I noticed here in the UK was that the NHS 111 phone service deflects all those with suspected Covid-19 to the online symptom checker but there is no service for the blind and its no good if you have no internet service!

Stack:
Twilio Studio
Twilio Voice
Express Web Server
NHS API
NodeJS

Happy Saturday Hacking Folks!
Top 10 interesting projects for python beginners
Tags: python, projects, pythonbeginner, programming
Published: 2020-04-25 10:45:54

<p><span style="font-weight: 400;">Python is one of the most successful programming languages currently. It looks like this trend is about to proceed in 2020 and ahead. So, if you are a Python beginner, the most essential thing you can do is operate on some real-time Python project ideas or topics.</span></p>
<p><span style="font-weight: 400;">So, here are some Python Project approaches which beginners can operate on:</span></p>
<ol>
<li style="font-weight: 400;"><a href="https://techvidvan.com/tutorials/python-game-project-tic-tac-toe/"><span style="font-weight: 400;">Tic Tac Toe</span></a></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Number Guessing</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Dice Rolling Simulator</span></li>
<li style="font-weight: 400;"><a href="https://techvidvan.com/tutorials/project-in-python-typing-speed-test/"><span style="font-weight: 400;">Typing speed test</span></a></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Email Slicer</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Binary search algorithm</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Desktop Notifier App&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Python Story Generator</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">YouTube video downloader</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Python Website Blocker&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Calculator</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Countdown Clock and Timer&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Random Password Generator&nbsp;</span></li>
</ol>
<p><em><span style="font-weight: 400;">Explore&nbsp; more interesting </span></em><a href="https://data-flair.training/blogs/python-project-ideas/"><em><span style="font-weight: 400;">&nbsp;python project ideas</span></em></a></p>
<p><em><span style="font-weight: 400;">You are very close to your goals.</span></em></p>
<p><em><span style="font-weight: 400;">All the best!</span></em></p>
When you want to create a new blob in your code Azure Functions
Tags: azure, serverless, dotnet
Published: 2020-04-25 10:41:36


You can create a new blob file by writing like below. 
Plus {rand-guid} generate guid. It is useful !!

Storage Account Setting is set by <b>Storage Account</b> Attribute.

```csharp
[FunctionName("MyTestFuncion")]
[StorageAccount("StorageConnectionAppSetting")]

public static async Task Run([EventHubTrigger("myeh", Connection = "EHConnection")] EventData[] events,
        Binder binder,
        ILogger log)
    ...
    
    using (var writer = await binder.BindAsync<TextWriter>(
                        new BlobAttribute("<container>/{rand-guid}.json")))
                    {
                        writer.Write(<what you want to write>);
                    }
```
IP-based localization, why oh why?
Tags: discuss
Published: 2020-04-25 10:22:04

---
title: IP-based localization, why oh why?
published: true
description: Asking why this happens
tags: discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/j9vexd1moltazlvrlnka.jpg
---

HTTP is a smart protocol and many headers help the browser to negotiate the content with the server. In particular, there is `Accept-Language` that allows to list the user's languages by order of priority and it's a perfect way to determine in which language you are going to display your website to the user.

Yet, as I travel(ed) a lot, I notice that a lot of websites actually will serve you content based on your IP address and the language that they guess is associated to it. That is not very noticeable when I go to countries that speak languages I speak but when I go to Czech Republic the Internet becomes suddenly much less usable to me.

And this seems utterly stupid to me:

- If the browser is telling you via `Accept-Language` why would you trust it less than a guesstimate based on the user's IP address' supposed location?
- You can more or less pin an IP address to a country but you can rarely pin a country to a language. France, Spain, India, Canada, the US, and so forth have several languages spoken on their territory and often officially. Sometimes there's not even common languages between all the people of the country. It's not the exception, it's the rule. Hence when doing IP-based localization you're naturally offending a lot of people.

Now, I understand that some websites like e-commerces have a complicated localization process since a lot more things will depend on the country rather than the language (available products, shipping costs, etc).

But if your website exists in several languages, **why oh why would you enforce one language on the user based on their IP's country?**
ReactHooks/Redux prod ready eShopp
Tags: react, redux, javascript, scss
Published: 2020-04-25 10:15:45

Hi everyone. I decided to publish project i working on, E-commerce demo for dev.to community.

 http://detoner777.github.io/imba-eshop 
 https://github.com/detoner777/imba-eshop

I hope this helps anyone who decides to create such an application! And by the way, it will be glad to hear the some feedback.

Technologies used:
- React with Hooks, Redux, Redux Thunk
- React Bootstrap 4, SCSS
- Lodash
- .ENV, Google Map Reat, React Container Dimensions, React infinite scroller
- Axios, Axios Mock Adapter, Faker

Features:
- Home, Products, Product Details, Shopping Cart, Error pages + some inform pages
- State management with Redux
- Responsive design with Bootstrap 4 and custom styling using SCSS
- Cart with increment, decrement and remove product abilities
- Toast messages for adding/removing a product
GKE: Ingress Controllers
Tags: adapter, androidlist, mergeadapter, recyclerview
Published: 2020-04-25 10:09:57

Link: https://blog.joshsoftware.com/2020/02/20/gke-ingress-controllers/

The story begins with the project I was working on. Now a days deployment on cloud is beneficial as it saves lots of time and money to setup new infrastructure on your On-Premises, as cloud is also evolving from Bare HVM machines to containers as light weight VM’s.

This blog is not for the comparison of two Ingress Controller class but the challenges we faced while integrating client’s new requirement to the existing setup, which was hosted on GKE workloads with GCE (default) Ingress class as load balancer.

With time we realised the limitations of GCE Ingress class as it was still evolving and our project was already live on production. We brain stormed on how we can change the GCE Ingress class to Nginx Ingress class. Another hurdle was that the static ip which was registered for Load Balancer was Global not Regional. So we cannot change the Controller class to Nginx Ingress.
Understanding Kubernetes: part 12 – Useful tools
Tags: kubernetes, devops, docker, beginners
Published: 2020-04-25 10:09:23

---
title: Understanding Kubernetes: part 12 – Useful tools
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/145kunu6hh0ctp0i66vv.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with some useful tools to know.
In this first part we will see: kubectx, kubens, stern and krew.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r30phyy09sd8b75effrr.jpg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Compile Podcast Ep 14: First year of code
Tags: beginners, podcast, reflection
Published: 2020-04-25 10:08:36

This week Brennan joins me again to talk about our first year of coding professionally, our experiences and thoughts!

{% youtube agxqDCoU61Q %}

### Reach out to us!

Subscribe and stay tuned! Also send in any comment or request for new topics and we will try our best to make them happen!

My Twitter: https://twitter.com/WujunaoNick

This Podcast is also on:
 - [Google Play Music](https://play.google.com/music/listen#/ps/Ifd5mlxhgc5cmlsytadsglqfd4y)
 - [iTunes](https://podcasts.apple.com/gb/podcast/the-compile-podcast/id1436437367)
 - [Spotify](https://open.spotify.com/show/2UH9hK7VlS7ytjYdM8Vd78)
Ignoring a block of code while linting your typescript code — TSLINT
Tags: typescript, tslint, react, angular
Published: 2020-04-25 09:38:52

![](https://cdn-images-1.medium.com/max/2000/1*8hFsx-bfKL-BEnhmoKew7w.png)

If you have been working with typescript oriented frameworks like Angular, you must be linting your code before submitting it. And if by any chance you are working in Angular and not linting your code, I just have 1 thing to say to you:

![How dare you?](https://cdn-images-1.medium.com/max/2000/1*yEgwbNMjlltVDOaLu_WUvw.jpeg)

For the ones for whom “linting” comes as an alien term, let me explain it in a very simple way — linting helps you avoid make [noob ](https://www.google.com/search?client=firefox-b-d&q=noob+meaning)mistakes while adhering to industry standards of coding. From removing dead code to helping you declare your variables as ***const*** rather than ***let*** because the variable isn’t getting assigned any new value — its helps you do it all!

Hence, if you aren’t linting, please do.

***

## Coming back to the topic…

So, recently I came across a use case wherein I wanted my [tslint](https://palantir.github.io/tslint/) to ignore a particular block of code (a function to be precise) in a typescript file but lint the rest of the code. This was because I was working with:
***

![**It’s harder to read code than to write it.**](https://cdn-images-1.medium.com/max/2000/1*wRj-ttYqrNXfCArdBppCtA.jpeg)

After digging around and a few hit and trials, I got to the [official docs of tslint](https://palantir.github.io/tslint/usage/rule-flags/) and I wasn’t surprised it was such an easy thing. All you had to do is disable the tslint before the function starts and enable the tslint again just after the function ends.

 <iframe src="https://medium.com/media/f25fc8cef2720f28246ef5b6e7b18122" frameborder=0></iframe>

{% gist https://gist.github.com/adityatyagi/5991615df413bc2aac9903545c27ec1f.js %}

And that’s it. If you are in Angular and run ***ng lint*** then the tslint will run through the entire codebase, ignoring this particular function.

If you use this anywhere, do share it with your colleagues and friends in your dev circle. Have questions, queries or feedback, please let me know in the comments below!

***

Originally published at [adityatyagi.com](https://adityatyagi.com/)
Day 2 of #100DaysOfCode: Create a ReactJS global states manager with React hooks
Tags: react, javascript, 100daysofcode, softwaredeveloping
Published: 2020-04-25 09:31:47

## Introduction
The simple solution to solve props drilling in ReactJS is to use Context APIs. It's a convenient way to use global states instead of Redux. 

## Introduction to Context APIs
### There are three roles from React library.
1.React.createContext
```javascript
const ShoppingCartContext = createContext();
```
2.React.useReducer:
* Inputs: it accepts a reducer function and a initial state.
```javascript
// Reducer function: changes the state with action
(state, action) => newState

//initial state
const initState = {
    products: [],
}
```
* Outputs: it generates dispatch functions and new states. They will be values of context provider.

3.React.useContext: 
* The React component will call the dispatch functions with actions to change the states in the context provider. The React component can also retrieve the states with using *useContext*
```javascript
const shoppingCartContext = React.useContext(ShoppingCartContext);
```

### These is a simple digram for React components and Context APIs.

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

## Implementations

{% codepen https://codepen.io/JenHsuan/pen/PoPbPQV %}  

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
Vite⚡ - Vue no-bundler dev setup
Tags: news, vue, webdev
Published: 2020-04-25 09:16:40

Apparently Evan You (creator of Vue.js) wasn't interested in sleeping one night and created [Vite](https://github.com/vuejs/vite).

{% twitter 1252173663199277058 %}

Vite allows you to develop your Vue application with Single-File Components without any bundle step. Imports are requested by the browser as native ES module imports. The dev server intercepts requests to `.vue` files and compiles them on the fly. And it's instantly fast.

Note that Vite is Experimental ⚠️ I don't know what the future for Vite is or how long this article is valid. But consider this a future snack and something fun.

## Let's try it out
Create the following files

**Comp.vue**
```vue
<template>
  <button @click="count++">⚡ {{ count }}</button> 
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button{
  font-size: 2rem;
}
</style>
```

**index.html**
```html
<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>
```

Then run:
```
npx vite
```
Go to `http://localhost:3000`, edit the `.vue` file to see changes hot-reloaded.

## Bundle for Production
Now let's build our production-ready app.

Create **package.json**
```json
{
  "scripts": {
    "build": "vite build"
  }
}
```

Run
```
npm i -D vite
npm run build
```

Check out the dist folder for your code.

Issues I stumbled upon.
* Error: Cannot find module 'tslib'
    * Fix: `npm i -D tslib`
* Error: ENOENT: no such file or director
    * Fix: create an empty dist folder manually

## Thoughts
It was really easy to get started and the development process is really fast as I can see my changes instantly. It's like a compile on the fly setup. So this looks really promising, maybe in some time, this will be the way we develop all Vue projects. 

Evan You, keep doing your magic 🧙

Fun fact: As vue = view in french, vite = fast in french.

Edit: Looks like Vite is concluded for now and will/might be picked up after Vue 3 has launched. But if you want to try Vue 3 beta today, this is the easiest way.

Edit2: I said it was concluded based on a [tweet](https://twitter.com/youyuxi/status/1253832934152376326) from Evan You. Looking at the [commits](https://github.com/vuejs/vite/commits/master) to the repo I guess it's still being worked on 😃.
What is the best way for beginners to learn HTML/CSS?
Tags: html, css, tutorial
Published: 2020-04-25 09:12:55

**I’m writing CSS since 2014** almost, 6 Years has passed.

Let me tell you on start well as a beginner i also faced too many challenges & confusions like:

* What should i do to write a complete template?
* Should i write through pixels or percentage?
* Which units are best for responsive designs?
* How to markup HTML5 structure properly?
* What is the best way to layout a template?
* What are the best ways to start your CSS?

Well, there were too many… So, i started to explore and practiced a lot.

The first things you should always learn at high priority:

1. Make sure don’t get distracted with frameworks like bootstrap on start.
2. Learn fundamentals like HTML5 markup, CSS basics
3. Try, practice and explore the best ways to write markup and how you can write CSS better. There are a lot of tutorials out there.. You can follow CSS tricks website.. or tons of YouTube channels..
4. Make sure to select the common major best practices. Also, don’t get stuck on that if you can create better (release your version of code)
5. Learn CSS media queries (the best way possible) and make them better in your web projects.
6. Learn CSS animations/transitions as well as SVG.
7. Make tons of example or demo projects too. You can explore UICollects, Dribble, lapa ninja, landbook etc. There are tons of websites out there to get inspirations from different designs.



There are tons of tips i can give you, but i think it’s better to train you with those tips.

**Well, i’m now sharing my knowledge with community:**

**You can subscribe my YouTube Channel** & also make sure to click on bell icon so you will never miss any update: [ShanShahOfficial](https://www.youtube.com/channel/UCMuGiELIVlWYROUw6s4g8rA)

Recently, i started with the new FREE series: [Learn to build confidence in writing CSS](https://www.youtube.com/watch?v=JdajB5Wpi5k&list=PLcHee_83k35Zj_9-bTpc-7DOdHSSgmcnn). You will definitely love it.

Thanks & Best of Luck

Regards:
Shan Shah
List Artifactory pro admin users - one liner
Tags: artifactory, permissions, restapi
Published: 2020-04-25 09:11:51

When you have many users in [Artifactory](https://jfrog.com/artifactory/), you can get all admins with a quick one liner using the [REST API](https://www.jfrog.com/confluence/display/JFROG/Artifactory+REST+API) from Linux command line.
```
for name in \
  $(curl -s -uadmin:password https://host/artifactory/api/security/users | jq ".[].name" | tr -d '"'); do \
  echo \
  "$name: $(curl -s -uadmin:password https://host/artifactory/api/security/users/$name | jq '.admin')"; \
done
```

Easy!
Advanced TypeScript Exercises - Question 9
Tags: typescript, javascript
Published: 2020-04-25 08:44:38

--- series: Advanced TypeScript Exercises ---
Short but very interesting question ahead of you. Write a type which will represent not empty array NonEmptyArray<T>. Type should behave in the same way as original Array<T> is behaving, with this difference that empty array is a value which is not a valid member of NonEmptyArray<T>
```ts
type NonEmptyArray<T> = /* your type level code here 💪 */
const a: NonEmptyArray<string> = [] // should be compilation error 🛑
const b: NonEmptyArray<string> = ['Hi TS'] // should be ok! 👌
```
Watch out, there is not one possible solution. How many solutions can you make? Post your answers in comments (preferred links to the playground). Have fun! Answer will be published soon!

**This series will continue**. If you want to know about new exciting questions from advanced TypeScript please follow me on [dev.to](https://dev.to/macsikora) and [twitter](https://twitter.com/macsikora).
Inviting Open Source Contribution for hobby project
Tags: java, thymeleaf, Spring, opensource
Published: 2020-04-25 08:15:10

Hi,

Hope you guys are doing great.

I have earlier written a post (https://dev.to/vcheruk2/looking-to-contribute-to-open-source-projects-1516) asking folks if I could actively contribute to their projects.

Following up with that post, I am now requesting any Front-End developers who are familiar with Thymeleaf templating engine to help me take my open-source hobby project to the next level.

The source code can be found here.
https://github.com/vcheruk2/recipe-app-spring5

The aim of the application is simple. I tried to develop a web app which display Recipes. Users can update/delete add images/ingredients etc.
I am actively working on the back-end. It would be really great if someone can help me with the Front-end.

Thanks.