teleren/devto huggingface dataset:
New Developers and Wireframing
Tags: codenewbie, firstyearincode, discuss
Published: 2019-08-06 18:58:53

As a new developer, the biggest help to me thus far in my coding journey has been   understanding what wireframes are and how they work. 

I have worked with the basics of HTML and CSS and have been working everyday to further my knowledge, including building static web pages. The problem I've been  faced with is being unsure of what I wanted to build. After some research I've realized I need to understand WHAT I want the design of the page to be, which lead me to wireframing.

Using wireframes, even on just paper, has helped me to better understand what I want the page to look like and visualize how I want the content displayed. I've been able to use the HTML and CSS skills I've acquired and have been introduced to other languages like JavaScript and PHP.

I am aware jumping from language to language is not advised. My primary focus is still HTML and CSS and to continue understanding the display aspect of web development. However, I think it's good practice for new developers to understand how different languages work with each other and different elements behave. 

For Example: 

While writing out a wireframe, I realized I wanted a button click to display something on the page itself. So I started learning about event listeners. I realized the button click wasn't doing EXACTLY what I wanted and, after doing some research and watching some YouTube videos, I learned I needed to use the PHP echo function (construct? I'm not sure, I've seen different wordings) to ultimately have the webpage do what I wanted. Wireframing introduced me to a new JavaScript functionality and how PHP works with webpages, taking them from static to dynamic.

The basic takeaway from this is 

  1. new developers should spend some time looking at wireframing to help with 
     designing any webpage or app projects you want to build 

And

  2. don't be afraid to look at other languages besides the one you are mainly 
     focused on. Keep a main one in mind, but if you want to know how some sort 
     of function works or something on the back end functions, don't be afraid 
     to dive in and see! It will help with understanding development as a whole 
     and open new chapters of learning.

Also, as a last side note, looking at other languages helps you also understand they really aren't SO different from each other, especially when you have a basic understanding of how the language works.


My question here is do any veteran developers recommend learning about wireframing in this stage or do you think there are other topics that should be covered before that? I'd love to hear some feedback!
Compiler Series Part 1: Introduction
Tags: compilers, computerscience
Published: 2019-08-06 18:39:38

---
title: Compiler Series Part 1: Introduction
published: true
description: The start of a series of posts about my experience writing a small compiler
tags: compilers,computerscience
canonical_url: https://miiizen.github.io/2019/08/06/compiler-series-part-one-intro/
series: Compilers
---

Programming was my first foray into computer science, and recently I wanted to dig into this topic in more detail.  The posts which follow will be a collection of my notes, made while writing my own compiler in C++.

Compilers are an essential part of computing, allowing higher level languages to be translated to machine code that the computer can understand.  This provides an important level of abstraction to the programmer, meaning they don’t have to worry about the complexity and quirks of assembly languages.  
I will break down the compiler into a collection of separate, easier to understand modules.  Compilers lend themselves to this modular approach quite nicely.  From front to back:
1. The lexer - This performs lexical analysis, breaking the input up into tokens
2. The parser - This puts the tokens we get from the lexer into the context of our language via an intermediate representation
3. Transformation - Once we have the intermediate representation, this can be tidied and optimised
4. Code generation - The intermediate representation is used to generate the required assembly for each language construct

In the next section, we'll get a bird's eye view of [gcc](https://gcc.gnu.org/) the GNU Compiler Collection.
Looking for clarity on web component dependencies
Tags: webcomponents, javascript
Published: 2019-08-06 18:36:49

I’m aware that the era of web components is [upon us](https://caniuse.com/#search=web%20components) and that plenty of people are [excited about them](http://webcomponents.news/).

So I figure I better get my act together and start getting to grips with them.

The thing is, I’ve long been an advocate of the kind of approach to web dev articulated by Jeremy Keith in his ‘Building’ talk, which he gave in January at [New Adventures 2019](https://newadventuresconf.com/2019/). I wasn’t there but I was particularly taken by 6 of his slides that he shared on **notist**: slides [34](https://speaking.adactio.com/87IIn1#sn3gBTn) to [39](https://speaking.adactio.com/87IIn1#sseICro) to be precise. I [tweeted about them](https://twitter.com/schofeld/status/1089138343131205642?s=20).

The important point about Jeremy’s slide 39 is that JavaScript is still an _enhancement_, not a dependency. I know it’s old fashioned to say this, but I still think [@sil](https://twitter.com/sil)’s [Everyone has JavaScript, right?](https://kryogenix.org/code/browser/everyonehasjs.html) **matters**.

And it’s with this in mind that I’m looking for clarity on the landscape of web components.

I’ve speed read (but not yet knuckled down with) a few tutorials and introductions to web components. All the ones I’ve seen just hand wave over how the code gets deployed to the user, or assume you just know all that stuff. 

The [intro on MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components) describes web components as:

> “A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.”

My reading of that is that if JS doesn’t run in the client, the web components don’t either. Is that right?

In other words, are old fogeys like me gonna have to accept that the world of total JS dependency is nigh, and we just better suck it up?

Or is it the case that one can have an **authoring** environment that then deploys the components as regular HTML and CSS, with JS still an enhancement?

Is there somewhere that is making this environmental stuff clear that I’ve missed? Perhaps one which describes what the dev toolkit can be _other than Node_ – for laggards like me who are still heavily invested in PHP/MySQL frameworks?

Hoping someone can help.
List Items Vertically Spaced Evenly Within a Flexbox Container

Published: 2019-08-06 18:31:32

Alright guys, I'm learning CSS right now, and I'm kind of stumped as to why I can't get it to do what I want it to do. It's probably something extremely simple that I'm overlooking.

I'm wanting to have an unordered list containing sub-lists vertically spaced evenly within a flexbox sidebar container and the sub-list items doing the same between each list item. Everything I've tried so far hasn't had any effect on how the list items are displayed.

Any help is appreciated.
Welcome to the Big Thread Club, Andrew Brown. You are the latest winner of the Big Thread Badge. 🎉
Tags: meta, bigthreadbadge
Published: 2019-08-06 17:59:16

Andrew joins @mjraadi, @room_js, @iam_timsmith, @fullstack_to, @espoir, @helenanders26, @philnash, @florinpop17 and @lauragift21 in the club as the fourth winner of this badge.

{% user andrewbrown %}

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 Andrew's thread:

{% link https://dev.to/andrewbrown/you-re-not-worth-hiring-unless-47oh %}

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!

Use the #discuss tag to signal that the post is a discussion thread.

{% tag discuss %}

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

## **The Big Thread Oplympics**

Andrew is our first winner from Canada. 🇨🇦

This marks 10/10 winners that have gone to folks from a different country. It highlights the global diversity of our community of folks helping one another out. How long will the streak continue? Europe now leads with three winners, followed by Oceania, Europe and Africa and North America with two each and one winner from Asia.

## **Happy Coding!**
Finding Areas Using the Monte Carlo Method
Tags: montecarlomethod, simulation, trigonometry
Published: 2019-08-06 17:56:57

---
title: Finding Areas Using the Monte Carlo Method
published: true
description: Using the Monte Carlo Method to find the area of an drawn image.
tags: montecarlomethod, simulation, trigonometry
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dyy2y8v6efkdh5lvjwu1.png
---

# Finding Areas Using the Monte Carlo Method

Using the [Monte Carlo Method](http://mathonweb.com/entrtain/monte/t_monte.htm) to find the area of an drawn image.

![Monte Carlo Method](https://thepracticaldev.s3.amazonaws.com/i/dyy2y8v6efkdh5lvjwu1.png)

Live version [here](https://victorribeiro.com/monteCarlo)

## About

Draw an image, run the monte carlo method to calculate it's area. Increase or decrese the number of samples used in the simulation. I have written a similar code that runs the simulation several times and get the mean of them all. I like this one better. The canvas is 500x500 pixels. So, if you color it all and click solve, you should get a result of 250000 pixels.

## How to use it

Canvas - Draw the image you want to calculate the area from.

Input - Enter the number of samples to be used in the simulation, in the input box.

Solve - Click to solve the aproximate area of the drawn image. You can click solve multiple times to get different results.

Clear - Clear the canvas.

Take a look at the code [here](https://github.com/victorqribeiro/monteCarlo)
Awesome TensorFlow.js - Rock Paper Scissors
Tags: ai, machinelearning, tensorflow
Published: 2019-08-06 17:43:16

---
title: Awesome TensorFlow.js - Rock Paper Scissors
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kpd0hveyb03lngi9d93i.png
description: TensorFlow.js - Fun and Easy
tags: AI, MachineLearning, TensorFlow, TensorFlowjs
---

Machine Learning can be pretty complicated.  Fortunately, we can always bring some entertaining aspects to counteract the mountain of linear algebra.   I'm a fan of Machine Learning, which is why I'm all about  [@FunMachineLearn on Twitter](https://twitter.com/FunMachineLearn).   It's also why I'm  [starting a newsletter for awesome stuff in AI](https://infinite.red/machinelearning).

Recently I decided to tackle the complexities of Machine Learning making it as simple as pressing buttons in a browser.  The results were awesome!

If you're interested in training your own AI in your browser to do Rock Paper or Scissors recognition, then you're going to enjoy my latest published article.

 [https://heartbeat.fritz.ai/using-tensorflow-js-to-train-a-rock-paper-scissors-model-b5f393b548eb](https://heartbeat.fritz.ai/using-tensorflow-js-to-train-a-rock-paper-scissors-model-b5f393b548eb) 

If you're interested in other crazy things you can do in Machine Learning in the browser, I highly recommend you check out my NSFWJS library.

https://nsfwjs.com/

Gant Laborde is Chief Innovation Officer at Infinite Red, a published author, adjunct professor, worldwide public speaker, and mad scientist in training. Clap/follow/tweet or visit him at a conference.
Construction Executive, Aaron Wesley Smith, Implements Successful Workplace Pet Perks
Tags: aaronwesleysmith, aaronwesleysmithmichigan
Published: 2019-08-06 17:39:03

Making the decision to adopt a pet is a big responsibility, but one businessman in California is making it easier than ever for his employees to save a furry life. Former President of AMI Hospitality, Aaron Wesley Smith, has long implemented policies at his finish and hardware company allowing employees to bring their dogs into the office. By providing employees with pet perks, Aaron Smith is advocating for the adoption of more shelter animals in need of a reliable family. 

For more than a decade, Aaron Wesley Smith of Michigan has supported the SPCA, a non-profit organization that has shelters around the world for pets in need of homes. His passion for helping animals has also made a big impact in his community and in the lives of those who count on shelter services. According to www.aspca.org, around 1.5 million pets are euthanized every single year in the United States alone. Without the support of donors like Aaron Wesley Smith, shelters would not be able to cover operating costs that are required in the pet rehoming process. 

Animals are often abandoned when families welcome new children into the household, make a big move, or face financial challenges. Aaron Wesley Smith and his wife, Tania, strongly believe in advocating for these homeless pets and giving them a voice. Animals deserve love, attention, and proper care for a lifetime, not just for a season. That’s why together, Aaron Wesley Smith and Tania made the commitment to save as many furry friends as possible by rescuing dogs themselves and providing proper medical care to some of the worst cases. 

Without Aaron Wesley Smith of Michigan, dogs like Wylie would not have been given a second chance. Wylie was severely abused for many years and used in illegal gambling rings. Until recently when Wylie passed, he still trembles at the sound of a whistle. Abuse made him unsociable and scared, but with proper rehabilitation, Wylie was Aaron Wesley Smith’s loving pet for more than 6 years. Animals with special cases such as this one often need specific care, and many cannot be left at home alone for extended periods of time. Aaron Wesley Smith is providing opportunity and hope for more animals like this to be adopted through his pet friendly work policies. 

Located in Orange County California, Aaron Wesley Smith and his wife, Tania, continue to advocate for non-profit animal shelters. After seeing the unconditional love given by rescue dogs, Aaron Wesley Smith encourages others to open their hearts and their homes not only in the Southern California area, but around the world.
Holiday time
Tags: discuss, dev
Published: 2019-08-06 17:32:07

---
title: Holiday time
published: true
description: Taking a break - it’s important
tags: discuss, dev
---

As developers we’re spending a lot of time in front of our laptops/desktops/etc and it’s highly recommended for us to go in a holiday once in a while, right? 😁

When and where was the last holiday you had? 
Or maybe you are planning one right now for the near future... tell us where you’re going! ☺️

I’m planning to visit our capital so... Happy Holiday! 😃
pybind11-cmake: Straightforward boilerplate generation for pybind11 + cmake
Tags: pybind11, python, cmake
Published: 2019-08-06 16:52:49

---
title: pybind11-cmake: Straightforward boilerplate generation for pybind11 + cmake
published: true
description: Straightforward boilerplate generation for pybind11 + cmake
tags: pybind11, python, cmake, c++
---

pybind11 is great for making python wrappers of C++ code and I use it all the time. In most cases I need to work with a cmake file so I start the project off using their cmake example. This usually involves copying the CMakeExtension / Builder class to my setup.py file and adding pybind11 to my project as a git submodule. I could do without cmake in simpler projects as shown in the python_example but I find it difficult to use for more complicated projects.

So I made a boilerplate generator (https://github.com/safijari/pybind11-cmake) that also encapsulates the extension module and provides a script to generate all the files you would need to get started with a project. This allows you to work on a pybind11 project purely in a virtualenv using cmake (no need to make a git submodule). 

I've already simplified my existing projects with this and hope it is useful to others as well.
Negotiating security requirements with clients
Tags: security, secops
Published: 2019-08-06 16:37:53

---
title: Negotiating security requirements with clients
published: true
description: When you're having your product security-reviewed, its not a one-way street you should be having a conversation
tags: security, secops
---

Sometimes it feels that clients with an enterprise-level security checklist want their cake and too eat it too. The requirements can feel like an impossible mountain to climb.

There is often room for negotiation though. If answering no to a question then explain why. When making assessments, different factors may be weighted differently according to the service you are offering. Only the most difficult clients expect everything you offer to be exactly what they want initially.

If a security feature is not currently present but you are planning to implement it in the future, don't be afraid to share your plan. It can be reassuring to know that you even have a plan to change things rather than being unaware of the potential issue.

In some ways it is more important for you and your team to have a strong vision of what security story you want to tell and be delivering that rather than being reactive to different client requirements with no coherence to the changes you are making to your product.

I think it is also okay to make clear that the implementation of some security features is dependent on commercial agreements. If one client is very adamant that they need something then perhaps they need to pay to ensure that element is prioritised over other things that might matter to other clients.

Finally the truth is that security very rarely have the final word. If your product meets a unique need then often you can have an exception to given security requirements if you have an enthusiastic internal sponsor.

This can be particularly important if the parent corporate rules are set for a different kind of business to the one you are working in. For example a few organisations we've discussed with have wanted to apply the rules they use for their Active Directory users to freelancers or independent third-parties. Discussing the origin of the rule and giving some practical examples of the impact it would have on the work being down led to a more nuanced version of the policy.

Generally the best security comes from collaboration that is based on trust and openness. It should be a normal part of the process to discuss and review requirements.
Unrolled: Introducing the Pika REPL
Published: 2019-08-06 16:24:51

Today we launched the new rewrite of [pika.dev](https://www.pika.dev), which included a new [Package REPL](https://pika.dev/packages/async/repl) for the package view page. This was just announced on Twitter, but I figured I'd unroll and repost the entire thread here quickly for anyone interested.

You can read our entire release thread including all of todays releases here: https://twitter.com/pikapkg/status/1158765492191911936

What's a Package REPL? Keep reading to find out...

{% twitter 1158771146268872705 %}
{% twitter 1158771153244049409 %}
{% twitter 1158771156897259520 %}
{% github PolymerLabs/ristretto %}
{% twitter 1158771161993400320 %}
{% twitter 1158773482504638466 %}

**BONUS:** Curious about how a package works after using it in the REPL?

{% twitter 1158778858155331584 %}
Marble testing with RxJS testing utils
Tags: frontenddev, javascript, testing, angular
Published: 2019-08-06 18:04:32

---
title: Marble testing with RxJS testing utils
published: true
tags: front-end-developmen,javascript,testing,angular
canonical_url: https://medium.com/@kevinkreuzer/marble-testing-with-rxjs-testing-utils-3ae36ac3346a
---

#### You don’t need a third-party library for marble testing

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

Once you start your path to master Observables, the chances are high that you already encountered a marble diagram on your way.

The marble syntax is a very intuitive syntax to represent streams, and it is often used to visualize observable transformations. It is not only a form of documentation, but it can also be used to test our Observables.

From consulting various developers, I have seen that teams often take advantage of a third-party library to apply marble testing. Using a third-party library is a valid approach, and there’s nothing wrong with it. But!

[**You can actually “marble test” without using a third-party library! **](https://medium.com/@kevinkreuzer/marble-testing-with-rxjs-testing-utils-3ae36ac3346a) 🤩
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-08-06 16:21:33

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

Replying to **[When Stack Overflow Goes Offline...](https://dev.to/ben/when-stack-overflow-goes-offline-5395)**, @nektro offers her response.  For more context, check [this post](https://dev.to/turnerj/the-10-points-that-make-up-real-10x-engineers-4mj4) regarding the recent "10x" Twitter thread:
{% devcomment dhhl %}

The **[You're not worth hiring unless...](https://dev.to/andrewbrown/you-re-not-worth-hiring-unless-47oh)** thread produced a ton of great comments. @walkhard13 talks about a fairly arbitrary task they were given in an interview:
{% devcomment dma4 %}

@codemenatalie offers a number of thoughts in reply to **[Why is streaming while you're developing not so popular?](https://dev.to/lampewebdev/why-is-streaming-while-you-re-developing-not-so-popular-2hka)**:
{% devcomment dlgd %}

@codemouse92 wrote an incredible reply in their own AMA, titled **[I've Trained Programming Interns For 6+ Years, Ask Me Anything! ](https://dev.to/codemouse92/i-ve-trained-programming-interns-for-6-years-ask-me-anything-3bf8)**:
{% devcomment dljd %}

Replying to **[Why I Became A Front-End Web Developer At Age 35](https://dev.to/nicolepdev/why-i-became-a-front-end-web-developer-at-age-35-4apa)** @nicolaerario shares that they're in a similar position to the author.  The entire associated comment chain is really wonderful:
{% devcomment diod %}

See you next week for more great comments ✌
Javascript ES6: Destructuring with default values
Tags: javascript, webdev
Published: 2019-08-06 15:52:36

---
title: Javascript ES6: Destructuring with default values
published: true
description: A short snippet on destructuring variables with default values.
tags: javascript, webdev
canonical_url: https://blog.prototyp.digital/javascript-es6-destructuring-with-default-values/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/h56ijd4d089va7831jiy.png
---

This is a short, but very useful code snippet for destructuring variables with default values (if the value is undefined). Very useful snippet for avoiding errors caused by `undefined` variables.

In the following example, the `options` object is being destructured.


```js
const {
    valFirst = 1,
    valSecond = "hello",
    valThird = false
  } = options;
```

If a destructured value doesn't exist within the object, it will be assigned a default value. If it does exist within the object, it will be assigned the value from the object.

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.