teleren/devto huggingface dataset:
Generate images from HTML in Node.js
Tags: javascript, node, showdev
Published: 2019-12-18 08:45:35

As developers, we don't have great skills with image manipulation softwares, but we still need it. In my case I had to generate Twitter cards for social media and flyers for the meetup I co-organize. An important point for use is automation. So I wanted a solution that let me make a template and generates a lot of images without extra work.

That is why I created [node-html-to-image](https://github.com/frinyvonnick/node-html-to-image). A Node.js module that generates images from HTML.

Here is the simplest example, you provide an output path and a HTML string. That's all!

```js
const nodeHtmlToImage = require('node-html-to-image')

nodeHtmlToImage({
  output: './image.png',
  html: '<html><body>Hello world!</body></html>'
})
  .then(() => console.log('The image was created successfully!'))
```

I talked about automation earlier. It comes with a templating engine, [Handlebars](https://handlebarsjs.com/). It enables creating multiple images using the same template.

In the following example, we changed `world` by a placeholder and inject its value with the `content` option.

```js
const nodeHtmlToImage = require('node-html-to-image')

nodeHtmlToImage({
  output: './image.png',
  html: '<html><body>Hello {{name}}!</body></html>',
  content: { name: 'you' }
})
  .then(() => console.log('The image was created successfully!'))
```

You want to generate images from HTML without writing a line of code? No problem, I also made a cli that use `node-html-to-image` underneath called [node-html-to-image-cli](https://github.com/frinyvonnick/node-html-to-image-cli).

```sh
npx node-html-to-image-cli index.html image.png
```

Generated image:

![Demonstration of node-html-to-image-cli](https://raw.githubusercontent.com/frinyvonnick/node-html-to-image-cli/master/misc/demo.gif)

Feel free check out the GitHub repositories if you are interested:

- [node-html-to-image](https://github.com/frinyvonnick/node-html-to-image)
- [node-html-to-image-cli](https://github.com/frinyvonnick/node-html-to-image-cli)

Want to support ? Don't forget to leave a ⭐️

<hr/>

Feedback or ideas are appreciated 🙏 Please tweet me if you have questions [@YvonnickFrin](https://twitter.com/YvonnickFrin)!
C++ as Assembly2.0
Tags: nim, cpp, c, javascript
Published: 2019-12-18 08:22:54

---
title: C++ as Assembly2.0
published: true
description: C++ as Assembly2.0
tags: nim, cpp, c, javascript
---

{% youtube fCg9MXnucAs %}

[Nim](https://nim-lang.org) is strong statically typed systems and applications programming language which offers some of the most powerful meta-programming capabilities.

[Nim](https://nim-lang.org) is the next iteration of imperative language design and aims to dethrone C/C++ for high performance coding. 

[Nim](https://nim-lang.org) is also perfectly suited for software typically written in C#, Java, JavaScript, etc. - basically all types of software. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x4gtpi0lsh908qqli965.png)

[Nim](https://nim-lang.org) can bridge the gap between business logic and high performance, sprinkling improved developer productivity on top. 

[Nim](https://nim-lang.org) is compiled to C/C++ (and JavaScript among others),
and thus interoperability is straightforward and without any performance penalties,
lots of existing C/C++ software can be reused and built upon.

Remember to follow the dedicated Dev tag!: https://dev.to/t/nim

👑
Sankey Diagram   🥳
Tags: codepen, fusioncharts, charts, sankey
Published: 2019-12-18 08:19:43

---
title: Sankey Diagram   🥳
published: true
tags: codepen, fusioncharts, charts, sankey
---

<p>Sankey diagram is a very useful way to represent flow in a system. The flow happens between relatable entities and are represented by coloured links. The flow could be of any measurable quantity - material, cost, energy, etc, from one node (or entity) to another. It can be drawn in different layouts and gives a quick understanding of the flow balance in the system. Can use it to show energy flow in a system, or resource flow among members, or import/export among countries, etc. A sankey diagram very intuitively captures attention on the most important flow.</p>

<p>Learn more about Sankey diagram <a href="https://www.fusioncharts.com/charts/sankey-diagram" target="_blank">here</a>.</p>

{% codepen https://codepen.io/fusioncharts/pen/dyPOgYN %}
Announcing CloudControl - the cloud engineer's toolbox ☁️ 🧰
Tags: cloud, azure, productivity
Published: 2019-12-18 08:17:54

We happen to be in a multitude of different projects at the same time. Switching from project to project is sometimes hard as the tooling and the configuration changes from project to project.

Now in the days of cloud deployments, this can be narrowed down to just a bunch of tools like [Terraform](https://terraform.io), [Kubernetes](https://kubernetes.io) or [Helm](https://helm.sh), but we still felt that some standardization would make our lives much easier.

That's why we made [CloudControl - the cloud engineer's toolbox](https://github.com/dodevops/cloudcontrol) (our first repository with emojis btw!).

CloudControl comes (or will eventually come) in various flavours fitting the specific cloud provider you're using. We started with [Azure](https://azure.microsoft.com) as we're currently mostly using that, but are of course open for other flavours.

Also for each flavour, we install a variety of features to support you in your daily work. Currently we support the following features:

* 🐟 [Fish Shell](https://fishshell.com/) with [Spacefish theme](https://spacefish.matchai.me/)
* 🚢 [Helm](https://helm.sh)
* [kc Quick Kubernetes Context switch](https://github.com/dodevops/cloudcontrol/blob/master/feature/kc/kc.sh)
* 🐳 [kubernetes](https://kubernetes.io/docs/reference/kubectl/overview/)
* 🌏 [Terraform](https://terraform.io)
* 🐗 [Terragrunt](https://github.com/gruntwork-io/terragrunt)

To use CloudControl, you can check out our [sample azure compose file](https://github.com/dodevops/cloudcontrol/tree/master/flavour/azure/sample) as a starting point.

We have build CloudControl in a modular way, allowing for extending the supported features and flavours at any time. So if you're missing something, please get in touch and/or provide a PR.

Header image: [Florian Richter - Toolbox](https://flic.kr/p/c4QJzC)
Introducing Emoji Island 🏝
Tags: gamedev, typescript, react, showdev
Published: 2019-12-18 08:12:15

---
title: Introducing Emoji Island 🏝
published: true
description: An Emoji World Simulator you control with code!
tags: gamedev, typescript, react, showdev
series: Emoji Island
---

Welcome to Emoji Island! This is an emoji world simulator you control through code. You can use it to learn Typescript or React, let off some steam by setting a 🌲 on 🔥, or just watch your emojis move through the simulated world. Watch the video to learn how to edit. Many thanks to Tani for joining me to learn this time around! Skip to 26:50 if you think we're spending too much time debugging CodeSandbox 🐛, 43:30 to see exploding farmers 👨‍🌾. For the game look below 👇

{%codesandbox ffjnh %}

If you'd like to join me in another video to learn how to edit your own emoji island, leave a comment with what emoji(s) you'd like to add and what they do!
Minimal Makefile to Run Java Projects
Tags: makefile, java
Published: 2020-07-08 10:43:45

---
title: Minimal Makefile to Run Java Projects
published: true
date: 2019-12-18 08:12:00 UTC
tags: Makefile, Java
canonical_url: https://akhy.chickenzord.com/posts/minimal-makefile-to-run-java-projects/
---

Recently, a conversation with my SO reminded me about a piece of code I write long time ago. [It was a college assignment on Data Structure course](https://github.com/akhy/hanoi).

I immediately dug my email and found the project compressed in a RAR archive. The project was written using Java with [NetBeans IDE](https://netbeans.org) default folder structure. There was no build configurtions like Maven, Ant, Makefile, or whatsoever. Only NetBeans project config and I don’t want to install it just for the sake of running the code.

After Googled a bit, I came with a quick and simple Makefile to run the code. Luckily there was no external dependencies to deal with.

```makefile
SRC ?= src
DST ?= build/classes
MAIN ?= Main

.PHONY: clean compile run

clean:
	rm -f $$(find $(DST) -name *.class)

compile:
	mkdir -p $(DST)
	javac -d $(DST) $$(find $(SRC) -name *.java)

run:
	java -cp $(DST) $(MAIN)

```
Day 18 of the Visual Studio Tips Advent Calendar is now live
Tags: visualstudio
Published: 2019-12-18 08:06:47

Day 18 of the Visual Studio Tips Advent Calendar is now live. Enjoy! 

You may want to add this one to your 'to do' list. Wink wink.

https://visualstudiotips.co.uk/calendar/

#VisualStudio #DevDecember #VsTipsAdvent #Advent
MEAN Stack Development Influences The Future Of Web Apps
Tags: webdev
Published: 2019-12-18 07:42:57

The implementation and usage of Web app development are increasing and currently in a fast-moving realm. A highly competent architecture and navigation are in demand in today’s web applications. They need to be dynamic, user-friendly, robust, and flexible. With the developments and evolutions in technology leaves web developers with many choices for their app. One essential factor while choosing a suitable framework for the solution, it is essential to determine a software technology that combines the best features to work.

MEAN stack is a growing contemporary trend for JavaScript development. This stack is the one technology that meets all the requirements for fully efficient development in the best possible way. An open-source JavaScript bundle for web apps, MEAN is an acronym that stands for:

<B>M stands for MongoDB,
E stands for Express,
A for AngularJS and
N for NodeJS.</B>

<img src="https://codersera.com/blog/wp-content/uploads/2019/12/mean-stack-development.png">

Web developers find MEAN stack application development as an attractive choice and are switching to it as it is on the latest technology-go-to basis, the full-stack JavaScript. The flawless combination of these 4 robust technologies makes it the most sought out bundle for web app development services.

<B>What makes this stack an ideal choice for developing a website is as follows:</B>

<ul>
<li>Flexible in developing for any size and type of organization.</li>
<li>Best viable technology solutions for all Business segments from startups, SMEs, or large enterprises.</li>
<li>Straightforward for frontend and backend developers to apply this framework.</li>
<li>Suitable framework for any multi-layer application.</li>
<li>Immense benefit in terms of productivity and performance.</li>
</ul>
Knowledge of JavaScript language mechanisms from the presentation layer to the database is all you need to proceed with the MEAN stack software.


<a hred="https://codersera.com/blog/mean-stack-development-future-of-web-apps/">A brief look into the 4 Components of MEAN</a>
Javascript:  destructuring sorted


Tags: javascript, react, node, angular
Published: 2019-12-18 07:39:33

Javascript: Assign values to already declared variables using destructuring

A lot of time we get this requirement to assign a variable to a new value which we get from an Array or Object.


Here is the common way to do it:

```javascript
let platform = "twitter";
let followersCount = 122;
let updated_social_data = {
  social_platform: "instagram",
  followers_count: 452
};
platform = updated_social_data.social_platform;
followersCount = updated_social_data.followers_count;
```

But with the ES6 destructuring you can do it in below manner.

```javascript
updated_social_data = { social_platform: "twitter", followers_count: 3456 };
({ social_platform: platform, followers_count: followersCount } = updated_social_data);
```


You can also apply this for Array Destructuring too
Who do you think of when asked for a referral?
Tags: pyladies, womeninstem, womenintech, python
Published: 2020-01-30 18:43:21

---
title: Who do you think of when asked for a referral?
published: true
date: 2019-12-18 07:00:00 UTC
tags: pyladies, women in stem, women in tech, Python 
canonical_url: https://jtemporal.com/who-do-you-think-of-when-asked-for-a-referral/
---

#### You know qualified women. Why not appoint them?

* * *

Author note: [Leia este artigo em Português](https://code.likeagirl.io/em-quem-voc%C3%AA-pensa-quando-te-pedem-uma-indica%C3%A7%C3%A3o-b15e047b7759).

This article was originally posted in Portuguese at the Code Like a Girl blog linked above.

* * *
<center>
<img src="https://miro.medium.com/max/3000/1*hPWHuOBEBoxpvAfqqo0bLw.jpeg" alt="PyLadies at PythonBrasil 12">
<small><i>PyLadies at PythonBrasil \[12\]</i></small>
</center>

I’ve given several lectures during 2017, and it has become common for people to call me to and invite me to lecture on other events, to be a hackathon mentor, to organize events, and other things in the like. Sometimes my schedule doesn’t allow me to accept the invitations as I would like, and then these people ask me the crucial question: _Could you appoint someone we could invite?_

And then, I find myself scrolling through my contact list to find people who can fit the event proposal. Most of the time, the people I indicate are close to me. And that’s fine. The problem comes when ALL the indications I want to make _are men_. And look, there are plenty of extremely qualified women on my contact list (and Telegram groups).

I hadn’t given a second thought about this matter for a long time, and maybe you too may not have thought about it. After reading a lot, watching videos, and talking to people about inclusiveness, sexism, and diversity, the penny finally dropped: It’s not enough to indicate a woman, it’s also necessary to show that she is the one that has to be there.

To continue reading, click the button bellow. 
[![](https://jtemporal.com/images/continue-reading.png)](https://jtemporal.com/who-do-you-think-of-when-asked-for-a-referral/)
Hello World, This Is My First Post
Published: 2019-12-18 06:46:50

I have nothing I need help with at the moment, though I hope to help others who may need it in my downtime. 

A bit about me:

- I am a total beginner, just did the "Hello World" tutorial on Github not long ago.

- I have familiarized myself with HTML and CSS in the past via W3schools, and then forgotten most of it, then re-learned it.

- I write, mostly. About a number of things. Some of them being technology.

- I practice minimalism. Too much, perhaps.
WHO IS USING AWS? 
Tags: awstraining, awscertificationtraining, awstrainingcourses, amazonwebservices
Published: 2019-12-18 06:37:41

Here are the names of some big organizations which are currently working with Amazon Web Services. 
Playfish 
Instagram 
Etsy
SmugMug
Zoopla
Ftopia
Pinterest
Dropbox
Talkbox
Netflix

ADVANTAGES OF AWS
Here are some advantages of Amazon Web Services listed below:
The AWS provides a friendly environment to its customers. The AWS does so by providing those tools to its customers to which they are already familiar, for example, models, databases, operating systems, architectures, etc.
The services offered by the AWS are very cost-effective. Here, the user has to pay only for those services which they are using. The AWS won't force you to make commitments for the long-term.
If the user is using Amazon Web Services, then he/she doesn't have to spend their money on various data centers.
The services of AWS provide faster deployment of the products.  
With the AWS, the user can easily remove or add the storage capacity according to his/her requirements. 
more info: https://360digitmg.com/course/amazon-web-services/
CSS Introduction
Tags: beginners, css, webdev
Published: 2019-12-18 06:07:54

CSS stands for cascading style sheets.It is used for styling the web pages like giving color to text, changing font-size, giving background-color,height, width etc.The simplified version of what happens when a browser loads a webpage is defined below:

1. The browser loads the HTML document.
2. It converts the HTML into DOM.
3. The browser then fetches the resources linked to the HTML document like images, videos amd linked CSS.JavaScript is handled a bit later.
4. The browder parses the fetched CSS and sorts the different rulus by their selector types into different "buckets" eg element,class etc.Based on the rules, the browser works out which rules shoulb be applied to which nodes of the DOM and attaches styles to them as required.
5. The tree is laid out in the structure it should appear in, after the rules have been applied.
6. The visual page is displayed on the screen ,this stage is called painting.  

CSS syntax:

A CSS rule-set consists of a selector and a declaration block which define the properties to be applied to the nodes.

        p{
            font-size:30px;
            color:blue;
        }

Here, "p" is the selector which targets the paragraph node of the DOM and the properties inside it defines the styling of the node.

CSS selctors:

The CSS selectors have been classified into five main categories:

1. Simple selctors.
2. Combination Selectors.
3. Pseudo-class selectors.
4. Pseudo-elements selectors.
5. Attribute selectors.
[Capybara] Debug for random error
Tags: capybara, rspec, rails
Published: 2019-12-18 06:05:29

---
title: [Capybara] Debug for random error
tags: capybara, rspec, rails
---

## 🤔 What is random error
Unstable tests. When you run the feature spec, it sometimes goes to fail and sometimes go to success. 

## 👍 1. Read the log and screenshot
omit.


## 👍 2. Run the unstable test for 100 times.
Of course, you can use `binding.pry`

```ruby
100.times do
  scenario 'unstable test' do
    # test something
    binding.pry if something.is_not_expected
  end
end
```


## 👍 Other ways
- under developmnet

## 🔥 Problems
{% link n350071/capybara-find-input-set-will-have-not-done-5cpg %}

## 🔗 Parent Note
{% link https://dev.to/n350071/my-capybara-note-2gp3 %}
Angular's providedIn: "root". What if two lazy modules provided the same service?
Tags: angular
Published: 2019-12-18 05:50:22

Sheesh, I'm not sure about that title.  Let's unpack it a little.  The modern way for an angular application to register a singleton service class is using *providedin*.

https://angular.io/guide/singleton-services

```javascript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}
```
```javascript
@NgModule({
  ...
  providers: [UserService],
  ...
})
```

What if we the module that *provides* the service is a lazy loaded module?  Well, that service code will compile into the lazy loaded bundle for that module.  Simple enough.  But what if a second lazy loaded module also provides it?  Where does angular (webpack?) put the service code?  What bundle?  Does it put it in the main bundle, in both lazy bundles or something else?

The answer is: something else.  Angular is smart enough to realise there is a service that is shared between lazy modules.  It puts that code in its own *common* module.  Then whichever lazy module loads first, downloads the *common* module along with the lazy module.  That way, the service isn't downloaded before it's needed and is still only downloaded once, despite being *provided* by two different lazy loaded routes.  

Pretty clever.
Advent of Code 2019 Solution Megathread - Day 18: Many-Worlds Interpretation
Tags: adventofcode, challenge, adventofcode2019, spoilers
Published: 2019-12-18 05:20:16

---
title: Advent of Code 2019 Solution Megathread - Day 18: Many-Worlds Interpretation
published: True
description: Hey now, you're an Astar, get your game on.
tags: adventofcode,challenge, adventofcode2019, spoilers
series: Advent of Code 2019 Solutions
cover_image: https://i.imgur.com/Ywijh6M.png
---

Welp, it's time for the A Stars to get to work.

### [Day 18 - The Problem](https://adventofcode.com/2019/day/18)
Our run-in with the space police earlier was a dread foreshadowing!

Passing Triton, we've been pulled into some sort of base or prison and need to escape. Lets pick up the keys (which are helpfully all color coded).

Part 1 is to find the most efficient way to get all the keys and report their order.

Part 2 has to wait, since Tuesday is my nerd night out.

### Ongoing Meta

#### Dev.to List of Leaderboards

* `120635-5c140b9a` - provided by [Linda Thompson](https://dev.to/lindakatcodes) 

 If you were part of [Ryan Palo](https://dev.to/rpalo)'s leaderboard last year, you're still a member of that! 

If you want me to add your leaderboard code to this page, reply to one of these posts and/or send me a DM containing your  code and any theming or notes you’d like me to add. (You can find your private leaderboard code on your "[Private Leaderboard](https://adventofcode.com/2019/leaderboard/private)" page.)

I'll edit in any leaderboards that people want to post, along with any description for the kinds of people you want to have on it. (My leaderboard is being used as my office's leaderboard.) And if I get something wrong, please call me out or message me and I’ll fix it ASAP.

There's no limit to the number of leaderboards you can join, so there's no problem belonging to a "Beginner" *and* a language specific one if you want.
Can we have a resume review?
Tags: request, discuss, career
Published: 2019-12-18 05:02:18

---
title: Can we have a resume review?
published: true
description: may be we can do a resume review of each other and give every one suggestions on improving their resumes.
tags: request, discussion, career
---

we can do a resume review of each other and give everyone suggestions on improving their resumes.


this is my resume, please let me know your suggestions 
https://drive.google.com/open?id=1XaxLmNL8-Ni5Z9ta-8oekyEBLot_CCpx
How to understand legacy code
Tags: php, tutorial, beginners
Published: 2019-12-18 04:45:49

## The backstory to [this video](https://youtu.be/cQznriCTBX4)

I currently onboard a team responsible for overtaking a project of ours. And the process made me aware that there are things that aren't found in documentation or tutorials. One of those things is "How to work with legacy code". We all hate it (if we're honest), but nonetheless we will always have to deal with it.

## What's the one trick?

What I also noticed it that people tend to request time to be shown a walk-through of the code-base. This wouldn't be unusual if it happened once, but if team members show a unanimous and frequent tendency of wanting to look over your shoulder while YOU are doing something makes you wonder. But then again, the way the adult learns is still based on the very principle that applied when we were little kids: Show me! Not "explain to me" or "is it documented?", it's "show me".

So the one trick to follow when it comes to teaching/mentoring is to add the "show"-component into the material. 

## But what if ...?

But back to today's topic: ***legacy code***
There are some abstract topics and mental processes you can't really show. Certainly not when you have to abstract the very project itself; So how can I "show" the team the way of thinking when having to backward engineer our own code? I can't. But what I can do is the next best thing:

## Let's take a random repository from GitHub

So this video shows how me picking a random repo I have recently looked at to answer a question on Reddit. And without any knowledge of the code jump into staging the project (including some cursing as I couldn't help myself) including reverse engineering some of the database structure.

[the video](https://youtu.be/cQznriCTBX4)

Needless to say, it's clumsy and structure-less. But it's real and I guess my question would be if you are 

a) Relatively inexperienced: Is this content helpful?
b) Relatively experienced: How do you transfer knowledge on such topics?