teleren/devto huggingface dataset:
Iron Man... using HTML and CSS?
Tags: webdev, css, html, opensource
Published: 2019-05-15 12:17:02

---
title: Iron Man... using HTML and CSS?
published: true
description: I decided to create Iron Man using HTML and CSS only. This is my story.
tags: webdev, css, html, opensource
cover_image: https://thepracticaldev.s3.amazonaws.com/i/b0qvuonaukyvsiwkz3bl.png
---

I decided to create Iron Man using only HTML and CSS.

# Wait, what?

Yep. Using no SVGs and no clip paths. Only good old fashioned elements, CSS triangles, `border-radius`, transforms, and a few pseudo-elements here and there.

# But why?

I really wanted to push myself and see what exactly was possible. And that's exactly what I did.

# I want to have a look at this right now.

Sure thing! Here's a link to the web page on Surge: [https://iron-man.surge.sh/](https://iron-man.surge.sh/)

Additionally, here's a video where I explain the code in some detail:

{% youtube -VG2NZ5c-ko %}

[Here's the source code as well 😁](https://github.com/parkroolucas/iron-man)

Happy coding!
Semaphore announces CI/CD for iOS
Tags: news, ios, cicd, reactnative
Published: 2019-05-15 12:03:27

---
title: Semaphore announces CI/CD for iOS
published: true
description: Semaphore expands CI/CD platform with support for your Xcode, React Native and Flutter projects on any Apple device.
tags: news, ios, cicd, reactnative
---

Semaphore just announced [CI/CD for iOS](https://semaphoreci.com/product/ios). For years Semaphore has only supported Linux-based builds, and mobile developers had to use another service to complete their projects. Now, both cloud/web and mobile teams can be united on a single platform.

You can define custom [CI/CD pipelines](https://dev.to/markoa/ci-cd-pipeline-a-gentle-introduction-2n8k) that match your workflow, for example:

![CI/CD pipeline for iOS with Semaphore](https://thepracticaldev.s3.amazonaws.com/i/clg0v0gf3nlukj03afr8.png)

And best of all, builds are fast, scale up automatically to every `git push` (and back to zero), and there's no queue time.

For more details, [read the announcement](published https://semaphoreci.com/blog/introducing-ios-cicd) or get hands-on with the [Xcode tutorial](https://docs.semaphoreci.com/article/124-ios-continuous-integration-xcode).

What do you currently use to test and deploy iOS apps? I'm looking forward to hearing your thoughts on the current state of CI/CD for the Apple ecosystem and what can be improved.
Happy to be part of the community
Published: 2019-03-13 18:55:29

---
title: Happy to be part of the community
published: true
description: First post on dev.to
tags: 
---

Hello,

I want to take this opportunity to say hello to the dev.to community. Although it's been many years since I last professionally coded, I hope I can provide insight into some interesting topics, particularly in the realm of data analytics.

One thing I would like to briefly talk about is my experience in transitioning from an embedded software programmer for telecommunications to a marketer focused on data analytics for the mining industry. Particularly, I would like to emphasize the importance of understanding the challenges faced by your audience, the customer.  

Whether you're coding, building a front-end UI, writing a blog post or answering a customer service call, it's super-important to think hard about what sort of pain points your customer faces. It doesn't need to be unique for every customer - even having a basic model in mind helps in order to empathize with their issues.

The more you can imagine your customer as a real person, with real emotions and real problems, the more quickly you'll be able to understand whether the work you are doing is helping them to solve these issues. These challenges may be very broad (for example, concern over looking good to one's superiors, doing a good job, or working more efficiently), or they may be very specific to their industry. Ideally, these challenges have a hint of both. Once you've uncovered a problem that addresses both generic and industry-specific issues, you've put yourself in a position to speak their language, and really address their problems. For example, one of our recent blog posts on the process of [mining comminution](https://www.3agsystems.com/blog/mining-comminution-crusher-ball-mill-advanced-analytics) addresses a very, very specific problem for a very specific industry while at the same time looking bigger picture to see how data analytics can optimize industrial processes. 

The better you can empathize with your customer, not just know him or her, the better you can really solve her underlying problems.
Data Sources DOWN!
Tags: terraform, documentation, fun
Published: 2019-05-15 11:44:24

Do you know that situation where you roam through the [Terraform providers documentation](https://www.terraform.io/docs/providers/), use your trusted browser's search function to search for a resource documentation, clicked the first search match and *bummer!* you landed on the documentation for the data source with the same name?

Well, I was. Multiple times. And I *always* search for the resource documentation and mostly *never* for the data source documentation.

But as we are hacky developers here, I just used the following [tampermonkey](https://tampermonkey.net) script and [JQuery](https://jquery.com) to move that section down when I enter the page:

{% gist https://gist.github.com/dploeger/4ac7b3a3483faf1c016ebf75042d8728 %}

Problem ~~solved~~ mitigated. 😆
Angular vs Vue: Which JavaScript Framework is Better For Web App Development?
Tags: angular, vue
Published: 2019-05-15 11:25:40

---
title: Angular vs Vue: Which JavaScript Framework is Better For Web App Development?
published: true
description: Angular vs Vue vs Angular vs Vue.js, JavaScript frameworks are changing the concept of developing web applications for front-end developers. JavaScript frameworks are giving the potential to build cross-platform web applications with ease and better future considerations. But, not all the JavaScript frameworks are not getting attention from in the development world.
tags: Angular, vuejs, angular, Angularjs
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/r85m6skhabrvpxw5c9i7.png" alt="Angular vs Vue.js">

Angular vs Vue vs Angular vs Vue.js, JavaScript frameworks are changing the concept of developing web applications for front-end developers. JavaScript frameworks are giving the potential to build cross-platform web applications with ease and better future considerations. But, not all the JavaScript frameworks are not getting attention from in the development world.


While numerous new JavaScript frameworks like Vue and Ember have entered the market and are getting more attraction of developers with their excellent alternatives. Some the frameworks like jQuery and Aurelia are losing their market in the JavaScript world. jQuery and Aurelia are losing the attention of web app developers.

Angular vs Vue.js (Angular vs Vue)

Which JavaScript frameworks are best to choose in 2019? Discussing these two popular frameworks, Angular and Vue, and finding which one is better for the application development.

Angular

Angular released by Google and is an open-source framework considered for building dynamic websites and web applications. Angular is under the category of MEAN stack and is supportable with the biggest community of code developers.

**Angular vs React: Which is better for web app development?**

Vue.js

Vue.js created by Evan is an open-source framework. The vue.js framework is in high demand for creating a simple page web application.

Why choose Angular? Read the full article here: https://www.decipherzone.com/blog-detail/Angular-vs-Vue--Which-is-Better-For-Web-App-Development-
Best Resources to learn React Native 
Tags: reactnative, node, beginners, webdev
Published: 2019-05-15 10:00:03

---
title: Best Resources to learn React Native 
published: true
description: Read the full post to know the best resources to learn React Native
tags: reactnative, nodejs, beginners, webdev
---
React Native is the most trending Javascript Framework for cross-platform application development whether it be on Android, iOS or Windows.
![image](https://cdn-images-1.medium.com/max/1200/1*C3kxjCrJy-aWSMpe2chfaA.png)

I have researched a lot and finally gathered some of the best resources that provide good content to learn React Native.

1) [React Native Official Docs](https://facebook.github.io/react-native/)
2) Nader Dabit - The creator of React Native Elements. [Read all his Posts on Medium](https://medium.com/@dabit3)
3)  [Stephen Grider Course on Udemy](https://www.udemy.com/the-complete-react-native-and-redux-course/)
4) [React Native Examples](https://reactnativeexample.com/) 
5) [Native Directory](https://native.directory)

And if there are other sources that are more beneficial please leave the resources in the comment section.
What Makes a Good Open Source Project?
Tags: opensource, discuss
Published: 2019-05-14 09:12:34

---
title: What Makes a Good Open Source Project?
published: true
description: This open source question deserves many takes. Bring 'em on!
tags: open source, FOSS, OSS, discuss
---

I thought it fitting to ask a massively broad, hearty open source question on a platform that also happens to be open source: DEV. Additionally, it's also the first time I have posted here. Hooray!

The open source meetup I run in Bend, Oregon, was the source of this topic, and I wanted to present it to you, my wonderful reader, and ask for input. Let's poke at the question quickly and see what happens.

## What makes a good open source project?

This is loaded with ambiguity, but it came out of the mouth of someone who has worked on and with open source projects for nearly 30 years. A genuine question. They have contributed to some of the most well known projects as well. 

_What gives? Shouldn't someone like this have all the answers?_ No. Thank goodness.

A decades-old veteran will be coming at this having a very different vision of open source than someone just starting - and everyone in between. The experiences will likely trigger a different reaction to the question, which is the point. But don't think about it too hard.

A good project seems to advocate by itself the importance of open source. But what does that even mean? I have some thoughts of course, but this is not for me. It's for you! What say you?

Your comments, new questions, ideas, etc. will help our meetup thrive! I'd love to hear from you in the comments or bug me on Twitter (@ascasson). Cheers!
Windows 10 FluentTerminal
Tags: windows, terminal, productivity, wsl
Published: 2019-05-15 08:55:28

# Use PowerShell, CMD, WSL and custom shells in one terminal with tabs on Windows 10!

I used [Hyper Terminal](https://hyper.is/) on my Windows maschine for quite some time and really like it (especially cool extension like [hyperpower](https://www.npmjs.com/package/hyperpower) ).

But I wanted something new and discovered [FluentTerminal](https://github.com/felixse/FluentTerminal)!

![Fluent Terminal WSL](https://thepracticaldev.s3.amazonaws.com/i/st60e8p51sf45akcjn3b.png)
<figcaption>Screenshot of configured terminal</figcaption>

### Time to install it!
You can install it via Chocolatey or by downloading it from the repository and install it (manual in repo).

```
choco install fluent-terminal
```

![FluentTerminal install log](https://thepracticaldev.s3.amazonaws.com/i/4s2ah4qpw91kfjslk3j1.png)

Note:
I needed to download the latest `*_No_Dependencies` release and run `Install.ps1` afterwards to have the app available via windows menu (start and context)!

![Fluent Terminal install script](https://thepracticaldev.s3.amazonaws.com/i/uqnpggtcy13frrzmk3sk.png)

![Fluent Terminal shortcut](https://thepracticaldev.s3.amazonaws.com/i/vcn8fxrvfcyqm6s587ry.png)

### How does it look?

After the first start, it uses powershell and has the default settings which can be customized.

![Fluent Terminal settings](https://thepracticaldev.s3.amazonaws.com/i/2bxdtp46bicmz8445wdx.png)

I suggest to review the keybindings and the profiles so you know how to open a certain shell by keyboard:

![Fluent Terminal settings profiles](https://thepracticaldev.s3.amazonaws.com/i/yhmid8yzds8naiao7kx0.png)

### Themes
You can import any iterm2 compatible theme!
Find examples here: https://iterm2colorschemes.com/

### Remarks
Fluent Terminal has a huge advantage over hyper for me: custom fonts and symbols from oh-my-zsh in WSL are working properly without any configuration!

The repository:

{% github felixse/FluentTerminal %}
How to store image in Cloudinary Nodejs REST
Tags: node, cloudinary, nodejscloudinary
Published: 2019-05-15 08:48:29

---
title: How to store image in Cloudinary Nodejs REST
published: true
description: Store image from NodeJS into Cloudinary
tags: node, cloudinary, nodejs cloudinary
---

![Cover](https://jakzaizzat.com/wp-content/uploads/2018/10/How-to-store-image-in-Cloudinary-Nodejs-REST.png)

Last week, I’m building my side project using this VEMN stack – (Vue, Express, Mongo, Node). My backend needs to use REST to interact with the Front-end. I need to store the images assets which are uploading by the end user. I do some survey to find what is the best way to store an image for the web application. I found there is two good company provide these services which are Cloudinary and Imgix.

Imgix has a reasonable pricing compare to Cloudinary but Cloudinary has a free package. Since my side project is still in MVP and I want to validate this idea, I decided to go with Cloudinary.

## This is what you need

Register an account with cloudinary first. Don’t worry it’s free.
How to store the image in Cloudinary Nodejs REST 2

Install this package

* [Cloudinary](https://www.npmjs.com/package/cloudinary)
* [CloudinaryStorage](https://www.npmjs.com/package/multer-storage-cloudinary)
* [Multer](https://www.npmjs.com/package/multer)

I make it easier, just run this command.

```
npm install --save cloudinary cloudinaryStorage multer
```
After everything is done, you should inject this middleware to your routes.

## Configuration

Import the package first and then write a cloudinary config. You can get the cloud name, API key and API secret key on your dashboard.

```javascript
const cloudinary = require('cloudinary');
const cloudinaryStorage = require('multer-storage-cloudinary');
const multer = require('multer');
const config = require('../../config/config');

cloudinary.config({
  cloud_name: config.cloudinary.name,
  api_key: config.cloudinary.api_key,
  api_secret: config.cloudinary.api_secret
});
```

Define storage for your own project. You can define your folder name, format, and transformation to the images.

```javascript
const storage = cloudinaryStorage({
  cloudinary,
  folder: 'jomwedding',
  allowedFormats: ['jpg', 'png'],
  transformation: [{ width: 500, height: 500, crop: 'limit' }]
});
const parser = multer({ storage });
```

## Middleware

When everything’s done, inject your middleware to your routes.

```javascript
router.route('/image')
  .post(parser.single('image'), userCtrl.uploadImage);
```

Make sure you’re using the multipart form to send the image

##Example of my REST

The image will be store to the cloudinary before can be accessed in your controller. To access your stored image can be found in req.file.
```javascript
function uploadImage(req, res, next) {
  console.log(req.file);
  const image = {};
  image.url = req.file.url;
  image.id = req.file.public_id;
}
```
Let me know if you have any question or problem.

Original submitted from [my blog](https://jakzaizzat.com/how-to-store-image-in-cloudinary-nodejs-rest/)
🔗 Don't return early from React.Component when using React.createRef
Tags: react, javascript, refs, dom
Published: 2019-05-15 08:27:08

---
title: 🔗 Don't return early from React.Component when using React.createRef
published: true
description: 
tags: react, javascript, refs, dom
---

{% github https://github.com/reactjs/reactjs.org/pull/1456 %}
Accessing serial ports from a virtual machine
Tags: comport, serialport, virtualmachine
Published: 2019-05-15 08:19:08

---
title: Accessing serial ports from a virtual machine
published: true
description:  Software to forward RS232 in virtual machine and step-by-step to work with COM port.
tags: com port, serial port, virtual machine
---
![](https://thepracticaldev.s3.amazonaws.com/i/rwxsn1xbw6xaa0s0h0qr.jpg)
**A simple method for accessing serial ports from a virtual machine**
 
Connecting a virtual machine to remote serial ports and devices is possible through the use of the specialized communication software application known as [Serial to Ethernet Connector](https://www.serial-server.net). It works by creating virtual serial ports that fully emulate physical serial interfaces. Using this powerful software tool you can create a connection from the guest operating system to a physical COM port on any network-attached computer. Devices that are connected to the server’s physical port are made available over the network via the virtual ports created on the client machine.
In order to create virtual COM ports to enable sharing of your serial devices, download the Serial to Ethernet Connector app and install the program on the host machine which will provide the port to share. It also needs to be installed on the guest which will access the port and any connected devices.
The software supports many virtual environments like VMware, Citrix XenDesktop, and Hyper-V and enables you to use those platforms to use virtual serial ports as if they were an actual physical interface.

Article: https://www.serial-server.net/com-port-in-virtual-machine.html
#DevDiscuss on Twitter leaves out EU time zone
Tags: meta
Published: 2019-05-15 08:04:02

---
title: #DevDiscuss on Twitter leaves out EU time zone
published: true
tags: meta
---

Hopefully, this is the right place to put this.

I have seen the #DevDiscuss posts on Twitter and enjoy reading them and sometimes would like to join in. But, due to living in the EU, this seems to happen in the middle of the night and is over by the time I wake up.

I am sure there are other devs in the same time zone as me as well as the various timezones spread across EU and Africa etc. Some of these zones might already work slightly, even though they will be in the early morning.

It would be nice if there was a #DevDiscuss that better suited these timezones. Possible solutions include:
- Additional #DevDiscuss for other timezones
- Altering the time that it occurs in the US (I am not 100% sure what time it occurs in the US)
- Alternating between the start time each week/every now and then

I am sure there are other solutions as well, but I do not think there is a perfect solution to this problem. As any changes might screw over another timezone.

Anyway, something to think about :thinking:
How to kill a node process
Tags: beginners, javascript, node, tips
Published: 2019-05-15 07:46:45

---
title: How to kill a node process 
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vn7frjbxbc5hm9ct2byn.jpg
description: how to kill a running node process
tags: #beginners, #javascript, #nodejs, #tips
---

While working on a full-stack application it might happen that you end up with a bunch of node processes running at the same time. 
It could be some automation script or a script that watches and executes your unit-tests while you code/TDD.
Most likely it is Webpack running and serving your frontend on localhost and the node app that serves the REST API your frontend is connecting to. In both cases **these processes would occupy a specific port**.

For example, our current React App is served on localhost:3000 and the backend runs on localhost:3001 via serverless offline.


Normally you would start those processes via the command line with something like:

```
npm run react-scripts start
```
or 
```
sls offline start --port 3001
```
When you are running those, you can quickly shut them down with  

```
 <Ctrl> + C
```

If you started them via a Debug Configuration in Visual Studio Code or IntelliJ IDEA you can stop the process clicking the Stop button. 

![stop debugging process](https://thepracticaldev.s3.amazonaws.com/i/auiwea35g4z8ofcaknci.png)

Until here no problem.  Sometimes though it happens that you started some process and then despite closing the IDE or the Terminal they still hang there somewhere, and when you try to run them again, then you get errors that the port is occupied. 

I don't know why or how that happens, but every now and then ( weeks or months) I find myself googling for the right command to use ( **i tend to forget quickly stuff that I don't use often - and that I can google under 20 seconds** ). Therefore I will drop it here, it might be useful for someone else too!


```
ps -ef | grep node
# or 
ps aux | grep node
```

This commands will print all the node process running, it might be confusing at first since you might have other stuff that is not related to the project you are working on (like Slack or Postman).
Just find the node process pointing to your script or js file and note down the process ID (second value from the left)

![node processes running](https://thepracticaldev.s3.amazonaws.com/i/828ngsuiutvagooe3bx0.png)

If you find yourself with a wall of text because you have many processes running, then you could  search the processes opened by port ( like normally when I start a react application is on port 3000 while its backend is on port 3001:

```
lsof -i :3001 
```
Once you have your process and its ID..

 
then just kill it without mercy!

```
kill -9 PROCESS_ID 
```

Hope it helps
Can we have an online gathering of Browser Extension developers
Tags: discuss, extensions, meetup
Published: 2019-05-15 07:21:21

Hello All Devs,

I have seen a lot of [great articles](https://dev.to/search?q=chrome%20extension) on Browser Extensions (Chrome, Firefox, WebExt etc.,) on dev.to. I myself love building extensions and wrote a few articles on [related topics](https://dev.to/gokatz/automate-your-chrome-extension-deployment-in-minutes-48gb). But, I guess we don't hang out much to discuss extension arch, design, and more related things. can we organize a small remote online event?
Intro Scrolled
Tags: codepen
Published: 2019-05-15 05:35:00

<p>Text effect using <a href="https://greensock.com/gsap">Greensock</a> </p>

<p>This demo uses <a href="http://greensock.com/SplitText">SplitText</a> from <a href="http://greensock.com/club/">Club Greensock</a></p>

<p>Scroll tracking using <a href="https://scrollmagic.io">ScrollMagic</a></p>

{% codepen https://codepen.io/ahrsavin/pen/NVddQg %}
Infographic: Which Programming Language Should You Learn First
Published: 2019-05-15 03:45:21

Whether you’re looking to build an app for a hobby, improve your career prospects or have a great startup idea learning to code is going to be an important skill to develop.

The problem is if you are a complete novice it can be difficult to know exactly where to start. Perhaps you’ve asked your developer friends for some ideas or even read a few blog posts to try and get your head around some of the best places to learn to code.

So to help you get to grips with learning to code and to help you make your mind up I’ve put together an infographic with helpful information for complete coding novices.

![cheat sheet](https://cdn.makeawebsitehub.com/wp-content/uploads/2016/01/what-code-should-I-learn-cheat-sheet-2016-01-FINAL-1.jpg)
Source: [makeawebsitehub](https://makeawebsitehub.com/which-programming-language/)
EcoAnimation
Tags: codepenanimationcss
Published: 2019-05-15 03:37:02

---
title: EcoAnimation
published: true
tags: codepen animation css
---

{% codepen https://codepen.io/yorkfx/pen/LoRKgP %}
<p>Graphics <a href="http://freepik.es" target="_blank">http://freepik.es</a> </p>