teleren/devto huggingface dataset:
Spot the malware
Tags: security, challenge, punycode
Published: 2018-07-16 19:27:01

---
title: Spot the malware
published: true
description: Can you find out how malware is injected in this page?
tags: security, challenge, punycode
---
# Challenge

## Help!  

My website was recently infected, and I can't seem to get rid of the casino ads it is generating!
All I am serving is this plain html file, could you help me find out what is causing it?

The google analytics part was generated from the [Adding analytics.js to Your Site ](https://developers.google.com/analytics/devguides/collection/analyticsjs/) page!

Index.html:
```html
<title>Are you lost ?</title>
<h1>Lost on the internet?</h1>
<h2>Don't panic! I'm here to help</h2>
<strong><pre> * &lt;----- You are here</pre></strong>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-аnаlytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
```

# Solution
This may seem like a regular website with Google Analytics attached, but there is a twist! 
It **may** be more obvious when serving the page and inspecting the network tab: 
![Analytics](https://thepracticaldev.s3.amazonaws.com/i/4zih0adpm9zbc89je484.png)

Instead of loading the expected `google-analytics.com` domain, the `xn--google-nlytics-1tlb.com` domain is loaded.  
Why is that you may ask?  
Well, the answer is in both `a` of `google-analytics.com`: They aren't your good old ascii `a`, but are actually [cyrillic a](https://en.wiktionary.org/wiki/%D0%B0)!  
Check it yourself: [https://www.google-аnаlytics.com](https://www.google-аnаlytics.com) (Note: Domain not registered)

This leads us to a good old homograph attack, where most of us will see the legit google-analytics domain while its punycode equivalent, `xn--google-nlytics-1tlb.com`, will be loaded.

Punycode and homograph attacks are used a lot in phishing campaigns but most browsers will show the decoded `xn--` url.  
When reading source code though, IDE's and text editors usually show a regular cyrillic a, which is hard to distinguish with our bare eyes.
This can be leveraged by malware creators by registering hosts similar to popular CDN's and injected scripts, then replacing genuine domain with their own.   
 
This would make it impossible to see when simply looking at the source code, such as with the `index.html` file, yet would allow them to inject malware on the websites.



# Reference
* [Homographs-attack](https://dev.to/loganmeetsworld/homographs-attack--5a1p)
Check out this post's reference if you need more, I can't match its completeness.
React + Bootstrap Template
Tags: react, bootstrap
Published: 2018-07-16 16:46:03

---
title: React + Bootstrap Template
published: true
description: How to properly work with Boostrap template in React
tags: react, bootstrap
---

Hello everyone,

On a side project, our team is going to be creating an admin dashboard, and we purchased a boostrap + jquery template, but our application is going to be React.

Should we use the template as is, importing boostrap and jquery (and other plugins), or try to "copy" the template to React as a standalone, leaving boostrap and jQuery out of the equation?

I'm thinking that removing boostrap and jquery is a better option, but might take more time than simply importing, but could cause less problems in the future, is that accurate?

Thank you.
freelancing
Tags: softwareengineering, freelancing, containers, kubernetes
Published: 2018-07-16 16:23:41

---
title: freelancing
published: true
description: Have a technical problem you need an expert on? I can help.
tags: software engineering, freelancing, containers, kubernetes
cover_image: https://thepracticaldev.s3.amazonaws.com/i/k8c2odkcvx4q2m4bi5c4.png
---

I'm starting to do some freelancing work, and so I put together a little page to describe what it is that I do and how I can help. Spread the word so that I can help get more folks on cool stuff like **containers**, **Kubernetes**, **OpenShift**, **NodeJS**, etc.

https://vault.osninja.net/freelancing/
Need help with editing a massive file
Tags: discuss, learning, advice
Published: 2018-07-16 16:12:55

---
title: Need help with editing a massive file
published: true
description: 
tags: #discuss, #learning, #advice
---

I have a very large sitemap XML file that I need to alter.  I need to remove all nodes that do not contain a reference to ".jpg".  

Here's an example:

```
  <url>
    <loc>https://www.mywebsite.com/page-without-image</loc>
    <lastmod>2018-06-05</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
      <image:image>
  </url>
  <url>
    <loc>https://www.mywebsite.com/page-with-image</loc>
    <lastmod>2018-06-05</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.9</priority>
      <image:image>
        <image:loc>https://www.mywebsite.com/images/image-on-this-page.jpg</image:loc>
        <image:title>image title</image:title>
      </image:image>
  </url>
```
I need to go through the entire file, using SublimeText or any capable program, and remove all nodes (from <url> to </url>) that do not have .jpg in them.

Any suggestions?

THANKS!
Who's looking for open source contributors? (July 16 edition)
Tags: discuss, opensource
Published: 2018-07-16 14:41:57

---
title: Who's looking for open source contributors? (July 16 edition)
published: true
description: Please shamelessly promote your project. Everyone who posted in previous weeks is welcome back this week, as always.
tags: discuss, opensource
---

Please shamelessly promote your project. Everyone who posted in previous weeks is welcome back this week, as always. 😄
Taking a step back from tactical to focus on strategy
Tags: career, worklife
Published: 2018-07-16 14:25:59

---
title: Taking a step back from tactical to focus on strategy
published: true
tags: Career,Worklife
canonical_url: http://christine-seeman.com/2018/07/taking-a-step-back-from-tactical-to-focus-on-strategy/
---

We just got through a full company retreat.  Thinking back over my career, this might be the first company that I worked at that actually did one of those.  I have done team things before, and had all company meetings, but not a full on retreat. It was great to see the entire company come together to work on a common theme, and stop our day to day work to take a step back and look at our upcoming focus from a higher level.

There were some great talks by my fellow employees (the employees were in charge of the programming for one of the days), and one that stuck with me, discussed effective vs. efficient and how one should work first on the effective and then try for it to be efficient. I see this all the time pop up with processes that occur around requesting code changes, deployment strategies or how the business works with IT.  It also made me think back to my first software engineer position, I was an associate at a transaction processing software company. For my first code review I actually printed off my code. Literally onto paper, handed out copies to my product group and they made suggestions, in pen, for the code.  Was it efficient? Not on your life, but for some reason that was how it was done and that was how I was supposed to do it. This might have been somewhat effective, as a learning experience and sharing what people were working on, but was not at all efficient.

When you just focus on your day to day, and getting work done these type of problems just seem to pop up.  They usually start because it was the easiest or quickest way of fixing something. If we don’t take a step back and look at the why, and our long term goals, it is easy to get bogged down in the weeds.

![](https://media.giphy.com/media/3ov9jJlkW5BhgkJF3a/giphy.gif)
Can react be used as a utility full stack web app?
Tags: react, discuss, javascript
Published: 2018-07-16 11:03:36

---
title: Can react be used as a utility full stack web app?
published: true
description: 
tags: react, discuss, JavaScript
---

I was just wondering, that since react is/has


- ES6 compatible
- NPM support
- Request Support
 
Consider the case where we have a UI based interface to some data that is in a different website, where we use APIs/requests to fetch data and render it to the frontend. Can react be used as a standalone frontend+backend solution for small task stuff?

Since react has it's own routing mechanism, can the processing that an express app does be done via imported libraries in react itself? Assume that the size transferred in requests is very less and processing the response is basic string manipulation/html parsing, and there is no requirement for a database, the client's storage should do.

Why did i think of this? No need to maintain a server that acts as a middleware to the react app.

EDIT: For such an app, compile the code into react native, and every user who uses the app is their own server. Possible?

Thoughts?
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2018-07-16 12:16:26

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

#1. Minty Fresh

TL;DR: Mint is a typed programming language which compiles to JavaScript for building single page applications. In this post, Szikszsai explains why they built another programming language that compiles to JavaScript. 

{% link https://dev.to/gdotdesign/mint---a-refreshing-programming-language-for-the-front-end-web-347m %}

#2. Something for everyone

Great list of git problems you're probably always googlin'.

{% link https://dev.to/citizen428/10-common-git-problems-and-how-to-fix-them-234o %}

#3. "Algorithms + Data Structures = Programs"

Common data structures and the questions that tend to be associated with them. Super useful articles for those in the interview process, or anyone looking for a refresher.

{% link https://dev.to/fahimulhaq/top-8-data-structures-for-coding-interviews-and-practice-interview-questions-2pb %}

#4. Take the shortest path

A must-know algorithm that was created in 20 minutes. Maria walks us through an example implementation in Python.  

{% link https://dev.to/mariamxl/dijkstras-algorithm-in-python-algorithms-for-beginners-dkc %}

#5. Compromised 😰

A critique on npm and how the team handled the repercussions of a hijacked account. 

{% link https://dev.to/kuhnerdm/eslint-and-the-problem-with-npm-51kl %}

#6. Observe, orient, decide, act

Solo coders needs to be more deliberate about finding iterative opportunities for improvement. In this post, Vicky shares seven steps on how to shorten the feedback loop as a freelance developer.

{% link https://dev.to/vickylai/how-to-set-up-a-short-feedback-loop-as-a-solo-coder-4gbc %}

#7. Thanks the aliens

This is a story about determination and how one goal can open doors for unforeseen opportunities. 

{% link https://dev.to/hugh_jeremy/lessons-from-releasing-a-personal-project-as-a-commercial-product-150g %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Don't leave TODOs in your code!
Tags: todo, javascript, node, npm
Published: 2018-07-16 09:48:37

---
title: Don't leave TODOs in your code!
published: true
description: Do you ever want to know what TODOs you have in a project without looking through all your files?
tags: todo, javascript, node, npm
---

### What was the problem?
A few days ago, while working on a project, I wanted to find all of the TODOs that I had written to make sure that nothing was left unfinished. I tried looking through all of my project files, but it was time consuming and I wasn't certain that I had checked everything. This gave me an idea, I wanted to make an NPM package that would check my files for me.

### What did I do?
Since then, I have created a package that searches your files and prints the TODOs to the terminal so you never leave any unused TODOs in your code. This will not only clean up your code, but help you avoid errors by not leaving unimplemented features in your code. 

### Links
Feel free to check out the [package](https://www.npmjs.com/package/todo-viewer) and [project files](https://github.com/jakegore/todo-viewer).

### How do I install it?
Install the package with NPM, either locally with `npm i -D todo-viewer`, or globally with `npm i -g todo-viewer`. For the usage instructions, check out the [documentation on Github](https://github.com/jakegore/todo-viewer).

Don't hesitate to make any changes to the code and submit a pull request! Any feedback on the package is highly appreciated. Thanks!
How frequently do you code?
Tags: dailywork, job, career, discuss
Published: 2018-07-16 08:15:32

---
title: How frequently do you code?
published: true
description: If you are interested how frequently developers code on the job, vote, please!
tags: daily work, job, career, discuss
---
I'm interested in how frequently my fellow developers code on the job. Your pet projects, the time you spend learning a new framework during lunchtime, whatever else doesn't count. Only the coding activities that are required for your daily job.

Please, vote on [Twitter](https://twitter.com/SandorDargo/status/1018735089134469122):

{% twitter 1018735089134469122 %}

Thanks for your collaboration!

If you wish, feel free to leave a comment below.

I'll announce the results in a later posts.
Quick Tip: Write an HTTP server in Dart 💻
Tags: tips, dart, http, beginners
Published: 2018-07-16 08:03:15

---
title: Quick Tip: Write an HTTP server in Dart 💻
published: true
description: Learn how to write a basic HTTP server in Dart
cover_image: https://thepracticaldev.s3.amazonaws.com/i/iy3fqhxjx8gfonfqg2go.png
tags: tips, dart, http, beginners
canonical_url: https://creativebracket.com/write-an-http-server-in-dart/
---

In today's quick tip, we will explore one of the inbuilt classes Dart gives us for creating web servers. This class comes as part of the "[**dart:io**](https://api.dartlang.org/dev/2.0.0-dev.68.0/dart-io/dart-io-library.html)" library in the SDK.

---

The class in particular is appropriately named `HttpServer`. Here's how we'll use it:

```dart
HttpServer.bind("localhost", 8080).then((HttpServer server) { ... });
```
`bind()` represents a static method that takes as required arguments a hostname and a port. This returns a `Future<HttpServer>`, allowing us to chain on methods like `then()` and `catch()`.

A successfully bound hostname and port now allows us to receive incoming requests by calling the `listen()` method on the server object, which has a `Stream`ing interface:

```dart
// ...
server.listen((HttpRequest request) {
  request.response.write('Hello world');
  request.response.close();
});
```
Receiving the request allows us to write out our response and end it. Here's the full snippet in its glory:

```dart
import 'dart:io';

void main() {
  HttpServer
    .bind("localhost", 8080)
    .then((HttpServer server) {
      server.listen((HttpRequest request) {
        request.response.write("Hello world!");
        request.response.close();
      });
    });
}
```

## Using Async/Await 🔥

Here's a prettier way of writing a basic server:

```dart

import 'dart:io';

main() async {
  var server = await HttpServer.bind("localhost", 8080);

  await for (var request in server) {
    request.response.write("Hello world");
    request.response.close();
  }
}
```

Here's a video demonstrating the first example:

{% youtube ko-urshBwU4 %}

Hope this was insightful.

**Like, share and follow me** for more content on Dart.

## Quick links

1. [HttpServer class](https://api.dartlang.org/dev/2.0.0-dev.68.0/dart-io/HttpServer-class.html)
2. **[Free Dart screencasts on Egghead.io](https://egghead.io/instructors/jermaine-oppong)**
This is how I talk to my non-technical designer
Tags: devops, mongodb, postgres, nosql
Published: 2018-07-16 07:10:28

---
title: This is how I talk to my non-technical designer
published: true
description: Talking to the designers at software organizations
tags: devops, mongodb, postgreSQL, NoSQL
---

Sometimes you need to make it easy for people & it works out really well. Check this out, we have our all-time favorite article 'Why we moved from NoSQL MongoDB to PostgreSQL' and we wanted a featured image for the same. 
I told my designer to create an image for that article and explained to him about the image something like this (See our Slack conversation)

![talking to designers](https://thepracticaldev.s3.amazonaws.com/i/f78cdmg32jqn1jban75q.png)


Okay some of you might ask me about this article, so here you go http://blog.shippable.com/why-we-moved-from-nosql-mongodb-to-postgressql
React Native Header Bar Example Using React Navigation
Tags: react, reactnative, webdev, android
Published: 2018-07-16 04:01:24

---
title: React Native Header Bar Example Using React Navigation
published: true
description: React Native Header Bar Example Using React Navigation
tags: #react #reactnative #webdev #android
---


# React Native Header Bar Example Using React Navigation


In this tutorial, We are going to share some idea how to create header bar in react native application using React Navigation Library.
In a web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack.
Similarly React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history.React Navigation is that React Navigation's stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.
  
  <a href="https://www.skptricks.com/2018/07/react-native-header-bar-example-using-createStackNavigator.html" >React Native Header Bar Example Using React Navigation </a> 
  
  <img src="https://4.bp.blogspot.com/-66firxnL3yY/W0wWP805T9I/AAAAAAAABt0/zMCF-BIyK90niSNE7AwopOMAFGYEgprOwCLcBGAs/s400/he.jpg" />
FIRST POST
Tags: nontechnical
Published: 2019-03-18 02:03:45

---
title: FIRST POST
published: true
tags: non-technical
canonical_url: https://davefollett.io/2018/07/16/first-post/
cover_image: https://davefollett.io/2018/07/16/first-post/getting-started.jpg
---

Hi, I’m a husband, father of two, and a software developer that lives in the Metro Detroit area. With more than 18 years of professional experience and countless side projects, I have a pretty diverse background. Through this blog I hope to share some of that knowledge and also improve my own accountability to completing projects. As many of you know, fully wrapping up a side project can be challenging when balancing a career and family.

While the blog will mostly be technical, I may sprinkle in a personal items as well. Raising two girls with my wife could fill several blogs.

**LEARN._always_**
TIL: Element.prototype.matches can be used to check if an element includes a certain class
Tags: javascript
Published: 2018-07-16 07:12:54

---
title: TIL: Element.prototype.matches can be used to check if an element includes a certain class
published: true
tags: javascript
canonical_url: https://www.stefanjudis.com/today-i-learned/element-prototype-matches-can-be-used-to-check-if-an-element-includes-a/
---

To figure out if an element contains a particular class is a quite common operation when building interfaces. Today I came across an article by [David Gilbterson](https://twitter.com/D__Gilbertson) which describes ["15 HTML element methods you’ve potentially never heard of"](https://hackernoon.com/15-html-element-methods-youve-potentially-never-heard-of-fc6863e41b2a) and it introduced me to `Element.prototype.matches`. This element method can be used to check if an element includes a certain class and is way shorter than `element.classList.contains`. 🎉

```javascript
const elem = querySelector('.foo');

elem.classList.contains('bar'); // true
elem.matches('.bar');           // true
```
When to use exceptions? 
Tags: discuss, design, languageagnostic
Published: 2018-07-15 21:53:13

---
title: When to use exceptions? 
published: true
description: A language agnostic discussion on when exceptions should be used.
tags: #discuss #design #language-agnostic
---
When is the right time to use exceptions and when should you just code against something? Really interested to see what people's opinions are on this one!
Building for Alexa - 1 - Anatomy of a Skill
Tags: alexa, net
Published: 2018-09-01 13:36:27

---
title: Building for Alexa - 1 - Anatomy of a Skill
published: true
tags: Alexa, C#, .NET
canonical_url: http://www.dotnetindia.com/2018/07/building-for-alexa-1.html
---

This is the first of a series of posts that talk about building an Alexa Skill using .NET.


I have been playing around with building Alexa skills for the last couple of years, but never wrote about it. The idea for this set of blog posts came as I was building one recently and found that is was very difficult to find information around this. The idea here is to have enough information to get started, rather than in-depth information of different aspects. I may also post about some problems I had, as .NET is not a supported platform from Amazon Skill Kit perspective.

## Anatomy of a Skill

An Alexa Skill flow has four major entities involved in each flow:

1. The user who speaks a command to the echo or Alexa enabled device (I will use echo for simplicity in my posts, but it mean any Alexa enabled device should work).
2. The echo device, which receives the initial voice input and also plays back the final voice output.
3. The Amazon Alexa service, which receives the data from the devices, decodes it and then forwards it for processing to the backend. It also converts what it receives from the backend and sends it over to the actual echo device.
4. The actual back end services which contains the business logic for the skill itself. This can be hosted either in Amazon or outside. Amazon provides hosting in its cloud based Lambda service if you want to build these backends in Node.

So, basically when you are talking about building a skill one you are actually building of the back end service and configuring the Amazon Alexa service. A simple diagrammatic representation is a below.

[![image](http://manand.typepad.com/.a/6a00d83451a61969e2022ad3815204200d-pi "image")](http://manand.typepad.com/.a/6a00d83451a61969e2022ad38151ff200d-pi)

 

The Amazon Alexa Service maps the incoming request to what are called Intents (that the developer defines) and then creates a JSON with data that you need and then sends it over to the back end services. The backend service does whatever process it is supposed to do and then returns the data back as a JSON. The JSON formats that are part of this interchange is defined by Amazon.

In this series, I am going to talk about building this Back End service using .NET, c# and  then hosting it as a Azure API service. So this will be built using the default Web API MVC project type. You can deploy this to any publicly accessible endpoint and Azure just happens to be something that was easily accessible for me.

In the next post, I will talk about the different ways you can create the backend service and what you will need to do this in .NET
What are your programming hype songs?
Tags: discuss, music, productivity
Published: 2018-07-15 18:57:32

---
title: What are your programming hype songs?
published: true
description: Aside from Code Monkey by JoCo
tags: discuss,music,productivity
---

I've been meaning to put together a playlist of songs to get into the zone to finish ALL THE FEATURES EVER.

Right now, it's just [Code Monkey](https://open.spotify.com/track/3cLqK3LPVrTIzfENVmYLoU?si=bUy9YvCKTem1a9mepIglfA) on repeat.

What are your suggestions for some good hype songs?