teleren/devto huggingface dataset:
On Glitch This Week
Tags: glitch, glitchthisweek, showdev
Published: 2019-06-21 14:56:02

---
title: On Glitch This Week
published: true
canonical_url: https://glitch.com/@glitch/glitch-this-week-june-19-2019
series: Glitch This Week
cover_image: https://cdn.glitch.com/02863ac1-a499-4a41-ac9c-41792950000f%2Fdevto-twog-aug-17.png?v=1561128724327
description: Just a few projects that caught our eye this week on Glitch (June 19, 2019).
tags: glitch,glitchthisweek,showdev
---

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on [Glitch](https://glitch.com/). Here are a few projects that caught our eye this week.

## [An Optical Illusion ✨](https://glitch.com/~tripping-balls)

You might have seen that brown ball optical illusion doing the rounds on Twitter. Yeah, [this one](https://twitter.com/chazfirestone/status/1139533381597847555).

{% twitter 1139533381597847555 %}

Well, [Kate Beard](https://glitch.com/@sbinlondon) re-created it in WebVR. Her delightfully named project "[tripping-balls](https://glitch.com/~tripping-balls)" is a virtual recreation that you can walk around to try and understand just how the illusion works.

{% glitch tripping-balls app %}


## [Just Jam! 🎹🤖](https://glitch.com/~ml-jam)

"[ml-jam](https://glitch.com/~ml-jam)" by [Pablo Samuel Castro](https://glitch.com/@psc-g) features an in-browser keyboard and drum machine. Using Magenta.js, it allows you to jam with machine learning models in real-time and without having to train a thing.

How it works is explained in the [accompanying blog post](https://magenta.tensorflow.org/mljam), but it's a way for musicians to make use of machine learning during live performances.

{% glitch ml-jam app %}


## [Try Lodge.js ⛰️](https://glitch.com/~lodge)

[Jesse von Doom](https://glitch.com/@jessevondoom) made [lodge.js](https://glitch.com/~lodge) to make working with bite-sized functionality much simpler. It brings consistency in interaction to the little workflows we often reinvent — modals, quick forms, embeds, and even checkout flows.

It's a single lightweight library that simplifies modal content and enables secure synchronization of events between windows.

{% glitch lodge app %}

Other apps in [this week's round-up](https://glitch.com/@glitch/glitch-this-week-june-19-2019) include a typing game, an interactive art piece, and a crash course in electronics. [Check them out](https://glitch.com/@glitch/glitch-this-week-june-19-2019)!
Weekly Coding Challenge - Week #15 - Instant Search
Tags: challenge, html, css, javascript
Published: 2019-06-21 14:44:35

---
title: Weekly Coding Challenge - Week #15 - Instant Search
published: true
description: Week #15 of the Weekly Coding Challenge program - Instant Search
tags: challenge, html, css, javascript
canonical_url: https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/
cover_image: https://www.florin-pop.com/static/be6834d8a8d94180aad1dad3655f70d8/ff993/vanilla-javascript-instant-search.png
series: Weekly Coding Challenge
---

Theme of the week: **Instant Search**

### Description

We live in a fast world and we want everything to be FAST, including search results, this is why instant search functionality became pretty much a "must have" feature instead of a "nice to have" feature.

## Useful Resources

Check out my submission for this challenge: [Instant Search with Vanilla JavaScript](https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/).

See all the submissions in this [Codepen Collection](https://codepen.io/collection/AYxNeN/).

Are you interested in joining the challenge? :smiley: Read [The Complete Guide](https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/) to find out how. Don't forget to share your creation! :wink:

Happy Coding! :innocent:
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-06-21 14:22:38

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

⏪⏪⏪

Looking back on your week -- what was something you're proud of?

![https://media.giphy.com/media/dF7d5Fn8Cbt9m/giphy.gif](https://media.giphy.com/media/dF7d5Fn8Cbt9m/giphy.gif)

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

Happy Friday!
How was your experience when switching from mac/windows to Linux
Tags: discuss, linux, os
Published: 2019-06-21 14:00:51

---
title: How was your experience when switching from mac/windows to Linux
published: true
description: 
tags: discuss, linux, os
---

I've been thinking about writing a friendly guide for new linux users that might be afraid to use it. I would say I am a intermediate experience user. From what I remember the hardest thing for me was trying to install stuff on linux. Tar balls, compiling from source, were things I never had to do as a windows user. I mainly use Lubuntu, Ubuntu is just has too much baggage and UI that I don't particularly like.

If you have made the switch or are a dual/triple user, what did you struggle with the most?
Free eBook on ASP.Net Core 2.2 is available for download
Tags: dotnet, netcore, book
Published: 2019-06-24 17:22:37

The eBook on ASP.NET Core 2 I wrote together with [Ugo Lattanzi](http://tostring.it/) is available for [download for free](https://www.syncfusion.com/ebooks/aspnet-core-2-succinctly) from the [Free Ebooks section of Syncfusion Tech Portal](https://www.syncfusion.com/resources/techportal/ebooks).


In April 2017, Ugo Lattanzi and I published [ASP.NET Core Succinctly](https://www.syncfusion.com/ebooks/asp_net_core_succinctly), and it became one of the most downloaded ebook for 2017 and was also [2017 Succinctly Readers Awards Silver Winner](https://www.syncfusion.com/awards/succinctlyseries/2017succinctlyreadersawards), among all the 33 books released by Succinctly in 2017.

This year we published an update to the book. All code and explanation have been adapted and updated to cover version 2.2 of ASP.NET Core, and also we added features that were not available before like:

- Health Checks
- SPA templates
- Razor Pages

So, if you haven't already, go download the [book](https://www.syncfusion.com/ebooks/aspnet-core-2-succinctly) and let us know what you think of it.
Easily Inspect Arguments Passed to a bash Script
Tags: bash, basics, beginners
Published: 2019-06-21 13:50:08

Have you ever had problems with `bash` scripts? Not understanding why they're not working? Sometimes, you just need to echo the arguments to make sure they're being interpreted correctly:

{% gist https://gist.github.com/awwsmm/27d68da263f4d3ab5ecb8e37ebeb4c7f %}
Linux Terminal Tricks
Tags: linux, terminal
Published: 2019-06-21 13:47:07

---
title: Linux Terminal Tricks
published: true
description: linux terminal tricks
tags: linux, terminal
---
![](https://thepracticaldev.s3.amazonaws.com/i/0u0pi7no1h590exk5mn2.jpg)

You can do all kind of tricks in the Linux terminal. Like using multiple terminals at once, navigating the terminal with few keys and much more. Learn more: <a href="https://www.bitdegree.org/course/linux-terminal-tricks-for-beginners">Linux Terminal Tricks for Beginners</a>

If you just learned the Linux terminal or never learned beyond the basic commands, chances are you are wasting a lot of time typing commands.

The course below teaches you:

* How to work faster in the terminal
* Use keyboard shortcuts to save time
* Use windows, panes. Don't be stuck in a single terminal window
* tricks like path expansion, command completion
* programs that will make your life easier
* Course includes overviews of commands and shortcuts
* boost your productivity

<a href="https://www.bitdegree.org/course/linux-terminal-tricks-for-beginners">Linux Terminal Tricks for Beginners</a>
Get last returned value in the console
Tags: rails, ruby
Published: 2019-06-21 13:39:42

It happens that when we are working on the console we need to make use of last return value. It is also annoying when we forget to assign it to a variable to make use of it and have to type/copy it all over again.

When this happens, we can conveniently use underscore `_` to retrieve the last return value.

```shell
$ irb

['I am last returned array']
_
['I am last returned array']
```
Learning NextJs - Day 4
Tags: react, nextjs
Published: 2019-06-21 13:23:07

You can add css to your pages components using [styled-jsx](https://github.com/zeit/styled-jsx) and since the creators of this library are the same than next you can use it without write a single line of configuration.

You will need the special **style jsx** component inside of your pages.


```jsx
function Home({ users }) {
  return (
    <div>
      <h1>Users</h1>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
      <style jsx>{`
        p {
          color: blue;
        }
      `}</style>
    </div>
  );
}

export default Home;
```

This page will show a list of users and the name of each user will be **blue** since we are giving that color to the **p** element.

One advantage of style jsx is that our css is isolated from the rest of the world, in this case **the world** means other pages/components. So other **p** elements will remaing with the default color.

### Global Styles

But what about if we want to all of the **p** elements have the same color? Easy, style jsx give you an special **global** prop.

```jsx
function Home({ users }) {
  return (
    <div>
      <h1>Users</h1>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
      <style global jsx>{`
        p {
          color: blue;
        }
      `}</style>
    </div>
  );
}

export default Home;
```

### Dynamic Styles

Let's suppose your manager goes crazy and tell you that your users pages needs a button for every user and if the ID of the user is greater than 5 the button background must be **red** otherwise **green**.

First you create a custom button component and you accept and **ID prop** and according to that writing a simple ternary you can make the crazy request.

```jsx

function CustomButton({ children, id }) {
  return (
   <button>
     { children }
     <style jsx>{`
        button {
          background: ${id > 5 ? 'red' : 'green'};
        }
     `}</style>
   </button>
  )
}

```

Now in your home page just import the component

```jsx

import CustomButtom from './../components/CustomButtom';

function Home({ users }) {
  return (
    <div>
      <h1>Users</h1>
      {users.map(user => (
        <div key={user.id}>
          <p>{user.name}</p>
          <CustomButtom id={user.id}>Click Me</CustomButtom >
        </div>
      ))}
      <style global jsx>{`
        p {
          color: blue;
        }
      `}</style>
    </div>
  );
}

export default Home;
```

And now you have dynamic styles using the values of props.
C#'s Type System
Tags: csharp, deepdive
Published: 2019-06-21 12:53:56

**_Exploring the Terminology:_**

*C# 1's type system is static, explicit, and safe.*

**Statically** typed is where each variable is of a particular type, and that type is known at compile time. In other words, the compiler does type checking at compilation time.

In the test method _StaticTypeWontCompile()_ you can see the string "Hello". But because we gave it the type Object, the compiler sees its type as Object and not String. Hence the _.Length_ method being unavailable. This test won't run because the compiler will state **object does not contain a definition for 'Length'**.

{% gist https://gist.github.com/daneb/e0ed55842fdaa89527ace839d2abfe34 %}

**Explicitly Typed** is where the type of every variables must be explicitly stated. Of course, explicit vs implicit types is only relevant in statically typed languages.

{% gist https://gist.github.com/daneb/85bd70dc0111f3663038e7e72eebe79b %}

**Safe Type System** is the characteristic of code that allows the developer to be certain that a value or object will exhibit certain properties so that he/she can use it in a specific way without fear of unexpected or undefined behavior. 

In the method _ThisIsSafe()_ the compiler will clearly state that an _Operator '+' cannot be applied to operands of type 'int' and 'bool'_. This safety applies for the majority of C# up until we get to Collections, Inheritance, Overriding and Interfaces as witnessed in method _ThisIsUnsafe_ which compiles perfectly.

{% gist https://gist.github.com/daneb/c30ff2e9ad9c122ea12af3ba3532b159 %} 

**Reference**
1. [C# In Depth - Jon Skeet](https://csharpindepth.com/)
2. [StackOverflow Why Is CSharp Statically Typed](https://stackoverflow.com/questions/859186/why-is-c-sharp-statically-typed)
3. [StackOverflow What is Type Safey in .NET](https://stackoverflow.com/questions/2437469/what-is-type-safe-in-net)
4. [C#s Type System - Microsoft Docs](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/types/)
How to send a magic link with Nodemailer and Namecheap
Published: 2019-06-21 12:34:36

---
title: How to send a magic link with Nodemailer and Namecheap
published: true
description: Automate the first email to your user
tags: 
---

For my project [Growthhacklist](https://nodemailer.com/about/) I needed a simple and fast way to send new users a “magic link” after leaving their email address on my landing page. To do so, I hacked together a little recipe with [Nodemailer](https://nodemailer.com/about/) and Namecheap. 

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


As you can see on my landing page I have a little input field where the user can submit an email. After clicking the Start Learning button he will be redirected to the “Create Account” page. 

Now in the background my little recipe will start working. To get the "magic link" working you need a namecheap account (in my case, can also be another email provider) and the npm package Nodemailer. 

First of all install the npm package and require it in your controller (i am using express js) with 

*const nodemailer = require('nodemailer');*

After that you need the following code which will do the magic. 

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

The var transporter part is for your email provider. For security reasons make sure to put the account details in your environment variables. 

In the var emailOptions you need to set up the sending email address. You can then add the subject of your email address and after html: set your welcome message for your first email to the user. 

You also need to add the post request somewhere. In my case I added it to my index.js file. 

*router.post('/email', userController.newEmail);*  

You could also do that in one file but it is cleaner to have an index.js in your routes folder. The only thing you need to do now is to add the code for the form to your frontend. I am using Pug JS but of course you could use also use another template engines. 


**Frontend code**
That's it already. I hope it helps, if you have questions please let me know in the comments section. 

![](https://thepracticaldev.s3.amazonaws.com/i/aiyfpwu94x21q8otjtmu.png)
 
That's it already. I hope it helps, if you have questions please let me know in the comments section. 

This article first appeared on my project [Growthhacklist](https://growthhacklist.com/methods/send-a-magic-link-with-nodemailer-and-namecheap)
#PureCSS - Responsive Bob The Minion
Tags: codepen, css, purecss
Published: 2019-06-21 12:33:26

---
title: #PureCSS - Responsive Bob The Minion
published: true
tags: codepen,css,purecss
---

<p>Responsive Bob The Minion using CSS</p>

{% codepen https://codepen.io/AsyrafHussin/pen/wXjpyB %}
Mapping JavaScript Objects with Modern APIs
Tags: javascript, webdev, beginners
Published: 2019-06-21 12:26:36

`Object.entries` allows you to convert an object into an array structure:

```js
console.log(Object.entries({prop1: 1, prop2: 2 }))
// [ ["prop1", 1], ["prop2", 2] ]

```

This method is part of the ECMAScript 2017 Spec and already heavily used by many developers (including me).

Until recently, there was no convenient method available to transform this structure back into an object.

Now, we finally have `Object.fromEntries` which allows constructing an object from the structure returned by `Object.entries`.

This makes it super convenient to map objects:


**Implementation:**

```js
const mapValues = (input, mapper) =>
  Object.fromEntries(
    Object.entries(input).map(([key, value]) => [
      key,
      mapper(value, key, input)
    ])
  );
```

**Usage example:**

```js
const input = {
  prop1: 1,
  prop2: 4,
};

const output = mapValues(input, value => value * 2);

expect(output).toEqual({
  prop1: 2,
  prop2: 8,
});

```

**Support**

Browser Support: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries#Browser_compatibility
Node Support: https://node.green/#ES2019-features--Object-fromEntries
Demo: Scaling pods with alexa, AKS and KubeInvaders
Tags: alexa, kubernetes, aks, azure
Published: 2019-06-21 12:05:23

---
title: "Demo: Scaling pods with alexa, AKS and KubeInvaders"
published: true
description: Demo: Scaling pods with alexa, AKS and KubeInvaders"
tags: alexa,kubernetes,aks,azure
---
My first open source project
Tags: opensource, php
Published: 2019-06-21 00:51:34

---
title: My first open source project
published: true
description: Just wanted to come here and tell you, fellow developers, about my first open source project
tags: opensource, php
---

Hi everyone. As the description states, I just wanted to come here and tell you, fellow developers, about my first open source project. Why? Because even I've been developing software since at least 2005, it hasn't been until I joined this website that I got interested in open source projects.

Anyway, the motivation was simple. Me and my sisters need to execute, during this year, a series of financial movements in order to proceed with some stuff for wich my English is too poor to explain.
I pointed out that we needed to keep track to every income and outcome, from the main "cash resource" and when some of us makes an expense that has to be refunded.
Obviously, the main approach was to create a shared spreadsheet, but I wanted to make a software, for some reasons:

1. I wanted to make a new web app from scratch with my framework of choice, CakePHP, since this year I'm mainly mantaining apps and that's not that fun.

2. I also wanted to keep track to incomes and outcomes respecting accounting principles, and that's hard to achieve with a spreadsheet.

3. Then I had in mind to make this little software an open source project, in case anyone in the world can benefit from this effort

So I created "Easyaccounts", a software that requires the definition of accounts (in an accounting sense of the word), cash resources and income / outcome concepts. The software keeps track of:

1. **Incomes**: records an income that is linked to a cash resource and a concept in a way that money comes in that cash resource

2. **Outcomes**: records an outcome that is linked to a cash resource and a concept in a way that money comes out that cash resource

3. **Transferences**: records a movement that moves money from one cash resource to another

Everyone of the three generates an accounting entry, and the main motivation is to keep updated a balance of the fund we manage.

I leave some screen-captures of the running instance of the app:

![Income](https://thepracticaldev.s3.amazonaws.com/i/nkuq4i9x2z5k1gotvteo.jpg)

![Outcome](https://thepracticaldev.s3.amazonaws.com/i/2z9xtxotpftg6jt90sb1.jpg)

![Transference](https://thepracticaldev.s3.amazonaws.com/i/nhyzz2rp4hsl3zm2u4kn.jpg)

This is the link to the GitHub repository, in case anyone wants to check the source code:

[repo](https://github.com/dcoturel/easyaccounts)

Saludos,
Mobile DevOps curated list
Tags: devops, ios, android, beginners
Published: 2019-06-21 11:40:26

---
title: Mobile DevOps curated list
published: true
description: A curated list of resources for Mobile DevOps
tags: DevOps,iOS,android,beginners
---

Hey gang, @AlexRS95 did a great and very awesome list with links to DevOps resources for mobile world. Many beginner developers in the CI/CD world will need to research a list of tools. But this guy did this for help this need community.  

https://github.com/alexrs/mobile-devops
The story of migrating Cloud9 to AWS Cloud9
Tags: cloudide, webdevelopmentide
Published: 2019-06-21 13:43:59

---
title: The story of migrating Cloud9 to AWS Cloud9
published: true
tags: Cloud IDE,cloud IDE,Web development IDE
canonical_url: https://kevinhq.com/the-story-of-migrating-cloud9-to-aws-cloud9/
cover_image: https://i1.wp.com/kevinhq.com/wp-content/uploads/2019/06/My-experience-migrating-Cloud9-to-AWS-Cloud9.png?resize=930%2C512&ssl=1
---

Because AWS decided to disable access to all of the Cloud9 workspaces by the end of this month on June 30, 2019, I have no choice but to migrate them to AWS Cloud9. Here’s the story. Before starting Backup your whole database on SQL dump and leave it on your old Cloud9 workspace. This is… 

[Read More »The story of migrating Cloud9 to AWS Cloud9](https://kevinhq.com/the-story-of-migrating-cloud9-to-aws-cloud9/)
Friday Showcase
Tags: showdev, discuss, tech
Published: 2019-06-21 11:14:35

As it is Friday, let's do something more fun. Show me what you are working on, need to promote, is interesting to you or whatever you want. It can be almost anything. Products/ tools/ highlights/ feature/ facts/ history/ code/ people/ video/ places/ anything (within d2 terms).

It's not a competition & you can show junk, incomplete too, especially if makes someone laugh.


My choice: the sounds of Wikipedia edits: 
[http://listen.hatnote.com](http://listen.hatnote.com)
(random selection of something I thought was cool, no connection)


(let's see if this gets any traction).
Golang PayU
Tags: go, payu, paymentgateway, integartion
Published: 2019-06-21 10:50:07

Quick PayU Integration using Golang

PayU is the widely used payment gateway for the online payment in India, USA as well as other countries.

You can integrate PayU to your Golang website for easy payment. You have to verify Merchant key received from PayU official Website.

To see code how we made this check here: [Golang- PayU](https://github.com/Mindinventory/Golang-PayU).
Add custom text woocommerce single product page
Tags: wordpress, woocommerce
Published: 2019-06-21 10:32:45

---
title: Add custom text woocommerce single product page
published: true
description: Add custom text woocommerce single product page
tags: wordpress, woocommerce
---

[Add custom text woocommerce single product page](https://wordpress.org/plugins/woo-add-custom-text/)

**Please check this give me your reviews on it.**


Thank you

**Therichpost**