teleren/devto huggingface dataset:
You can write working code. What comes next?
Tags: career, beginners, discuss, webdev
Published: 2019-07-09 13:49:28

Design decisions. Or at least, they’re one of the things that comes next. 

Code either works or it doesn't. With design decisions, things aren't as black and white. Alice decides to use redux to store all the state in her react app. John decides that he's going to use ECC instead of RSA for encryption. Sarah creates one users table to store 3 different types of users. 

Are these good decisions? 

We can’t know. 

Code is always a means to an end. It’s never an end in itself. When we make (design) decisions about how to structure it, they need to be evaluated in view of the code’s purpose. We can’t know whether Alice, John, and Sarah made good choices because we don’t know what they were building and why.

---

For example, let’s say Alice uses redux for the first time for a side project. It increases the complexity her app and makes it harder to understand and work with than it would have been had she left redux out. 

Was using redux a good choice? We can say (in this case) that using redux increased the project’s completion time and maintenance cost. We can also say it helped Alice learn redux. 

Let’s say Alice’s goal was to learn redux. Maintenance isn’t an issue because she doesn’t plan to maintain the project and  completion time isn’t an issue because she has a lot of unstructured free time. In this case, it’s fair to say using redux was a good choice in view of this goal with minimal downside. 

In another scenario, let’s say Alice’s goal was to deliver an easily maintainable, working application to a client as quickly as possible. Here, it can be said that using redux was a poor choice in view of this goal because it increased completion time and maintenance cost. 

At companies, things get more complicated. There are multiple, competing goals. The CEO wants to launch as quickly as possible. The CTO wants maintainable code and minimal tech debt. The product team wants a large feature set. Design wants pixel perfection and cross-browser compatibility. 

Time and resources are limited, so priorities have to get made by the business. These priorities then become the basis for the design decisions that get made in the code. (NB: In an ideal world these decisions are settled by the time work gets assigned to an engineer, but in practice they are often not)

---

To be an effective software developer, you need to make sure the design decisions you’re making align with priorities that exist beyond the context of the code. 

If you’re new to development and this seems daunting, don’t sweat it — this is a skill all developers are honing all the time. Simply being aware of this as an area for growth will you enable you to cultivate this skill as you gain more and more experience as a developer.
30 components / month
Tags: react
Published: 2019-07-09 13:48:03

---
title: 30 components / month
published: true
description: 
tags: #react
---

I'm going to challenge my self to write one component a day for 30 days consistently.

Rules:
- It doesn't need to work.
- It doesn't need to look great.
- I must learn something.


Wish me luck guys... :)



Salamat.
What Does Our Test Case Management System Look Like?
Tags: tms, test, qa, testing
Published: 2019-07-09 13:44:40

---
title: What Does Our Test Case Management System Look Like?
published: true
description: Why we built our own TMS? And why does it have tentacles?
tags: tms, test, qa, testing
---

In this article, I wrote how we manage our test cases with our handcrafted test case management system. It can be helpful for teams who are looking for features of their new test case management system.
https://medium.com/avitotech/what-does-our-test-case-management-system-looks-like-8ab44acf7d52
Welcome to the Big Thread Club, Matthias. You are the latest winner of the Big Thread Badge. 🎉
Tags: meta, bigthreadbadge
Published: 2019-07-09 13:40:46

Matthias joins @espoir, @helenanders26, @philnash, @florinpop17 and @lauragift21 in the club as the fourth winner of this badge.

{% user fullstack_to %}

The Big Thread Badge is awarded to the person who creates a discussion thread on the site that sparks the most collective comment love (e.g. score as determined by total ❤️ reactions and adjacent ranking factors).

This was Matthias's thread:

{% link https://dev.to/fullstack_to/what-vscode-theme-are-you-using-4189 %}

Entry is simple: Start a thread that is bound to spark a lot of comments. Ask the community to tell a certain kind of story and get lots of comments! Even if these threads aren't always answering _the deep questions_, they are often great for seeing what the broader community thinks of a topic and are usually a lot of fun!

_DEV employees are not eligible for the Big Thread Badge. 🙂_

## **The International Streak Continues**

This marks 6/6 winners that have gone to folks from a different country with no winners yet from North America. It highlights the global diversity of our community of folks helping one another out. How long will the streak continue? Oceania, Europe and Africa each have two winners.

## **Happy Coding!**
Too Easy to Break a Streak
Tags: codenewbie, beginners, discuss
Published: 2019-07-09 12:34:38

I got a whole week in. I was posting updates and making sure to get my tasks complete...and then the holidays hit and my schedule is all different and I miss one...two... and now it's been 5 days that I haven't done any of my tasks. I'm the only one holding me accountable. 

I find it easy when I'm sitting at work during a lull, to pop over to my FCC or open VS Code and just start working, but when at home, I have plenty of time, it just doesn't fit in to the "things I do at home" category yet. 

My current problem, and one I frequently face when doing front-end challenges, is that I'm not really a creative designer type. So now I'm on the FCC HTML/CSS challenge to build a tribute page and I just don't care enough to make it look good. I can follow the points to meet the requirements fine enough.... 

So 2 obstacles present themselves, lack of scheduled time, lack of commitment to the actual building of pages from a creative standpoint.

What do you do to insure that you stay on top of your goals, in my case 100 days of code, through different schedules? 

Do you have any tips for how to push through the tasks when you don't care about them?
Are there any consequences for exposing your users to vulnerabilities?
Tags: discuss, news
Published: 2019-07-09 13:32:36

You might have heard about this Zoom vulnerability which can turn your webcam into Chat Roulette.

# **[👉 Zoom Zero Day: 4+ Million Webcams & maybe an RCE? Just get them to visit your website!](https://medium.com/@jonathan.leitschuh/zoom-zero-day-4-million-webcams-maybe-an-rce-just-get-them-to-visit-your-website-ac75c83f4ef5)**

My question is: Do companies typically face true consequences for these mistakes? Every software development team makes mistakes, but some organizations are faster and looser with customer safety than others.

It seems like this kind of thing typically results in a blip in the stock price, but then things pretty much chug along like usual. Missed earnings seem to be the only true harm a company can endure.
Going Serverless with Vue.js
Tags: vue, serverless, aws, webdev
Published: 2019-07-09 13:31:40

With the rise of serverless architectures, developers have the power to do more with less. Rather than spending time and energy deploying and managing a server, they can now focus on the business logic driving their applications. Serverless functions moreover allow for compartmentalizing your application so your logic is sequestered in a function and can scale automagically without any worry or fuss. What’re more, you pay only for what you use!

In this video, we’ll examine strategies for building applications in VueJS with a serverless mindset. Specifically, we’ll walk through real life use cases of how we can bank on serverless functions to do the work of making API calls and communicating with third party services.

{% youtube gYYTuuTzU_g %}

**Thanks for reading** ❤
If you liked this post, share it with all of your programming buddies!
Follow us on **[Facebook]( https://www.facebook.com/moriohdotcom)** | **[Twitter]( https://twitter.com/moriohdotcom)**

### Further reading

☞ [Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)](http://learnstartup.net/p/BJBa7-l-g "Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)")
☞ [React vs Angular vs Vue.js by Example](https://morioh.com/p/556b2b68dc38 "")
☞ [Running TensorFlow on AWS Lambda using Serverless](https://morioh.com/p/587e47ae1e01 "")
☞ [Easily Deploy a Serverless Node App with ZEIT Now](https://morioh.com/p/d53748d88f5d "")
Youtube Video: How to debug a Vue.js Application with Visual Studio Code
Tags: vue, webdev, javascript, vscode
Published: 2019-07-09 13:22:34

---
title:  Youtube Video: How to debug a Vue.js Application with Visual Studio Code
published: true
description: Youtube Video: How to debug a Vue.js application with VSCode
tags: Vue, WebDev, JavaScript, VSCode
---

Vue.js is a modern, progressive javascript framework for building user interfaces, in this case for building a web application.Vue.js is gaining more and more popularity and it's great for creating Single Page Applications. There are a couple of tools available for debugging the web application but with Visual Studio Code have great debugging features with "Debugger for Chome" Extension. 

In this Youtube Video, I have explained how you can debug Vue.js with Visual Studio Code and what is the configuration you need for the same!. Hope you like this video.

{% youtube EOcBhTG4XEQ%}

If you like this video and wanted to see a similar kind of video then, please subscribe to my youtube channel at - http://bit.ly/codewithjv
Frontend vs Backend, which do you prefer and why?
Tags: discuss, career
Published: 2019-07-09 13:17:03

---
title: Frontend vs Backend, which do you prefer and why?
published: true
description: Frontend vs Backend, which do you prefer and why?
tags: discuss, career
---

I am a backend girl because I love optimizing code performance and dealing with data. How about you? What draws you to a particular section of the stack?
Am I weird?
Tags: discuss
Published: 2019-07-09 13:16:55

---
title: Am I weird?
published: true
tags: discuss
---

I'm the only one completely unable to code or even write a single sentence with music in my hears? I cannot seem to focus when there is background music, let alone if it's rock or something. I feel weird sometimes! I can write or code stuff only if there's almost total silence.

How about you? Curious to see if there is some "colleague" out there!
Wow! Next.js Continues to Impress
Tags: javascript, node, webdev, react
Published: 2019-07-09 11:43:05

I am stoked when it comes the latest release of Next.js, version 9. It brings a slew of features that makes server-side React a breeze. I know when I first started to mess around with Next.js I quickly became enamored, but a few things were clunky and difficult to configure.

Well, I'm happy to say that they raised the bar with this update. I am going to rave about it, but you definitely need to check out their blog post that goes over the latest features.

[Zeit's Version 9 Blog Post](https://nextjs.org/blog/next-9)

For a quick overview--there's a support natively for Typescript now, if you're into using that. Also automatic static optimization, which allows leverage server-side rendering and static prerendering to make your site blazing fast. Don't forget about the production improvements as well as focus on the developer experience.

![head spinning](https://media.giphy.com/media/xUPGcvE4VNePqiexOM/giphy.gif)

Speaking of the developer experience, I want to mention my hands down two favorite new additions.

The first is API routes. All you need to do is create a `/api` folder within your pages directory. Each endpoint is a javascript file inside of that directory. With this functionality can start building the api you need with ease--connecting to your database, handling post requests, and whatever else necessary to make your app work.. 

No longer do you need to build and fire up a separate Express server. The exciting part is the only thing that needs to be in the endpoint file is a simple handler function. This mirrors the functional component style of the rest of React, allowing for what feels to me to be a seamless experience.

It looks like this:

```javascript
const handler = (req, res) => {
  res.json("message:" "Keep hitting those endpoints baby.")
}

export default handler
```

Next.js the complete package now, from start to finish--giving everything you need to be as productive as possible and get your app going. There's another feature that makes creating dynamic pages just as quick and painless as the client-side React Router approach.

Inside of your pages directory name your file like such `blog/[postId].js`. Inside of your component file, you use Next's `getInitialProps` to fetch whatever data is necessary to render the component.

```javascript
const Post = ({ data }) => {
  return <p>Post: {data.title}</p>
}

Post.getInitialProps = async ({ query }) => {
  const { id } = query
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  )
  const data = await response.json()
  return { data }
}

export default Post
```

Man, I hope these updates make you as excited I am. You know, so that I wanted to share it it with all of you. Already I have found myself dreaming up my next Next project (pun intended.) 

Get out there and build something cool.

> Note: I have no affiliation with Zeit or the Next.js team. I'm just a huge fan of their work!
Image effects with python
Tags: python, image
Published: 2019-07-09 11:36:57

---
title: Image effects with python
published: true
description: python
tags: python, image
cover_image: https://cdn.pixabay.com/photo/2018/06/27/17/48/fantasy-3502188__340.jpg
---
The module PIL can be used to change images. You can load an image, resize it to any size. You can apply effects (like image blur) and more.

So how does that work?

First you need an image to change. Lets say this image

![](https://thepracticaldev.s3.amazonaws.com/i/jecsegig8anp0jttjf5a.png)

Save it as image.png

### Resize image

Resize an image is very easy. Load the image, get the width and height. Then apply the thumbnail method. Finally you can change the image format (jpg)

    #!/usr/bin/python3
    import PIL.Image
    im = PIL.Image.open('image.png')
    w, h = im.size
    im.thumbnail((w//2, h//2))
    im.save('image_resize.png', 'jpeg')

Run it, you'll see the image changed

![](https://thepracticaldev.s3.amazonaws.com/i/l96hg1ydabvc5ygwj4q8.png)


### Blur image

To blur an image use the code below. This type of effect works by applying a filter (matrix) to the image. In the case it's applied using the method im.filter():

    #!/usr/bin/python3
    import PIL.Image, PIL.ImageFilter
    im = PIL.Image.open('image.png')
    im2 = im.filter(PIL.ImageFilter.BLUR)
    im2.save('image-blur.png', 'jpeg')

Run to see blur effect applied

![](https://thepracticaldev.s3.amazonaws.com/i/s7gpsl5wfjlf3qs4w0tv.png)

Resources:
* <a href="https://pillow.readthedocs.io/en/stable/reference/ImageFilter.html">Image effects with PIL (Python Image Library)</a>
* <a href="https://pythonbasics.org">Python tutorial for beginners</a>
* <a href="https://pythonbasics.org/tkinter-image/">Learn tkinter</a>
Fresh IDE v2.7.0 has been released
Tags: asm, programming, productivity, tools
Published: 2019-07-09 11:29:37

[Fresh IDE v2.7.0](https://fresh.flatassembler.net/index.cgi?page=content/2_download.txt) has been released.

Fresh IDE is an advanced IDE for assembly language programming (FASM). 

It is fully written in assembly language, self hosting and is especially designed for comfortable programming of very big assembly language projects.


The current release highlights:

* The main change in this release is the final transition of the FreshLib to the new GUI architecture. Not finished, but on the right path now.

* FlatAssembler compiler has been updated to the version 1.73.12.

* The syntax highlighting of the editor is improved to support user defined keywords for coloring.

* Two builtin fonts, especially suitable for assembly programming has been added to the editor themes.

* More extended tests has been provided on Windows 10. As a result, the editor rendering and the overall stability has been improved.

* The included examples has been revised and fixed to compile with the latest FreshLib libraries.

* Of course the usual bug fixing and new bug introduction has been made as well.
Menu drop-down doesn't close after click
Tags: angular, bootstrap
Published: 2019-07-09 11:29:30

Hi All,

I just start learning Angular and create a menubar of bootstrap. But whenever I click on the menubar which has dropdown, it doesn't close after I hover out to next elements, it only close when I clicked somewhere else.
But I want to close it on hover out,
I find a code 
 .dropdown > .dropdown-toggle:active { 
    /*Without this, clicking will make it sticky*/

     pointer-events: none;
} 

But using this code the click even of main Div doesn't work.
I give a deep search but got nothing so I post it here to get help on this.


thanks
Classic snake game in Linux terminal
Tags: linux, teminal
Published: 2019-07-09 11:21:15

---
title: Classic snake game in Linux terminal
published: true
tags: linux, teminal
---

![](https://cdn-images-1.medium.com/max/1024/1*x535NzzoXrs95BZLUVSfvg.png)

You must have played the classic snake game on feature phones like [Nokia 1100.](https://www.amazon.in/s/ref=as_li_ss_tl?_encoding=UTF8&camp=3626&creative=24822&fst=as%3Aoff&keywords=nokia%20mobile&linkCode=ur2&qid=1453365639&rh=n%3A976419031%2Cn%3A1805559031%2Ck%3Anokia%20mobile&rnid=976420031&tag=newbie42-21)  
Now you can again play the same game in Linux terminal.  
For this, you need to install nsnake package by running below command in terminal.

```
sudo apt-get install nsnake
```

After the package is installed, run the game by running nsnake command.

![](https://cdn-images-1.medium.com/max/584/1*8DGidl_R1sLrr3aNa09N7g.png)

Use the up and down arrow keys to change to game mode to Borders On and Borders Off.  
Use left and right arrow keys to change the speed.  
Press enter or space to start the game once you are done with settings.

You can exit the game by pressing _q_ key.

![](https://cdn-images-1.medium.com/max/587/1*LwcK6XtA-kSnCBSe0JQQUQ.png)

Rules are the same as they were in the classic game.

If you collide with yourself (snake), you die. Game over.

![](https://cdn-images-1.medium.com/max/592/1*qfV3vAPw0DqFZyfr9WDSJw.png)

[Download the latest version of this game from Github](https://github.com/alexdantas/nsnake).


![](https://cdn-images-1.medium.com/max/1/0*ZAXJ6c3TUq7rRTif)



**More from Author:**

- [**How To Host Django App On Pythonanywhere For Free**](https://www.pythoncircle.com/post/18/how-to-host-django-app-on-pythonanywhere-for-free/)
- [**Scraping data of 2019 Indian General Election using Python Request and BeautifulSoup and analyzing it**](https://www.pythoncircle.com/post/683/scraping-data-of-2019-indian-general-election-using-python-request-and-beautifulsoup-and-analyzing-it/)
- [**Text-based snake and ladder game in python**](https://www.pythoncircle.com/post/676/text-based-snake-and-ladder-game-in-python/)
- [**How to start with Python Programming — A beginner’s guide**](https://www.pythoncircle.com/post/671/how-to-start-with-python-programming-a-beginners-guide/)
- [**Automating Facebook page posts using the python script**](https://www.pythoncircle.com/post/666/automating-facebook-page-posts-using-python-script/)
Parse AWS Parameter Store as JSON the quick and easy way
Tags: productivity, tips, beginners, aws
Published: 2019-07-09 11:14:45

---
title: Parse AWS Parameter Store as JSON the quick and easy way
cover_image: https://thepracticaldev.s3.amazonaws.com/i/h91vsx2ln3jli2i883e5.png
published: true
description: parse json strings configurations from aws parameter store using jq
tags: #productivity, #tips, #beginners,#aws
---

A few days ago we were wondering were to keep the credentials of our [Google Developers](https://console.developers.google.com) project allowing us to connect our React App with Cognito and Google API.
As I explained [here](https://dev.to/dvddpl/where-do-you-keep-credentials-for-your-lambda-functions-5dno) we ended up putting a JSON configuration in [AWS Parameter Store](https://docs.aws.amazon.com/systems-manager/latest/userguide/systems-manager-parameter-store.html).

In our current project we needed to access this configuration within a hook after deploy (basically, just a shell script executed at the end of `sls deploy`).
By simply running```aws ssm get-parameters --name auth-google-config``` we where getting the entire thing:

```
{
    "Parameters": [
        {
            "Name": "auth-google-config",
            "Type": "String",
            "Value": "\"{\"client_id\":\"123_your_client_id_666.apps.googleusercontent.com\",\"client_secret\":\"aBc_your_secret_666_XYZ\",\"authorize_scopes\":\"profile email openid\"}\"",
            "Version": 3,
            "LastModifiedDate": 1562138784.993,
            "ARN": "arn:aws:ssm:your_region:your_account_id:parameter/auth-google-config"
        }
    ],
    "InvalidParameters": []
}
```

as you can see the values are contain **escaped quotes**

If reading the parameter store with node, we would simply parse that into an object:

```
const value = JSON.parse(Value)
```
but how to achieve the same within a shell script?

[JQ](https://dev.to/dvddpl/tools-i-wish-i-knew-from-the-start-48kl) to the rescue! 

```
aws ssm get-parameters --name auth-google-config --query "Parameters[0].Value" 
| jq '.|fromjson'
```
Basically, we feed the result of the aws query directly into JQ and let it parse the string into an object (see the manual [here](https://stedolan.github.io/jq/manual/))

![piece of cake](https://media.giphy.com/media/l2JejeLTKnkSBoIZW/giphy.gif)

If you want you can play around with the fromjson ( and all the other functions and operators from JQ in their [playground](https://jqplay.org/s/duCj0FrEAt))

----
Photo by [Stefan Steinbauer](https://unsplash.com/@usinglight?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on Unsplash