teleren/devto huggingface dataset:
Hotspots, Social proof, Map form | Module Monday 39
Tags: showdev, opensource, webdev, javascript
Published: 2019-05-13 16:12:23

---
title: Hotspots, Social proof, Map form | Module Monday 39
published: true
description: Module Monday 39
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1557525210/image-highlights_af2wuu.gif
canonical_url: https://guide.anymod.com/module-monday/39.html
---

## Modular code you can add anywhere

All the mods below are open source and free to use in any project you choose -- they work on any website or web app because of [Anymod](https://anymod.com).

Click a mod to see it in action along with its source code.

## Image hotspots
Highlight parts of your image for further actions.
<a class="btn btn-sm" href="https://anymod.com/mod/image-hotspots-rambna?v=20">View mod</a>
<a href="https://anymod.com/mod/image-hotspots-rambna?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1557525210/image-highlights_af2wuu.gif"/>
</a>

## Customers section
Showcase your customers or partnerships.
<a class="btn btn-sm" href="https://anymod.com/mod/customer-display-bambdd?v=20">View mod</a>
<a href="https://anymod.com/mod/customer-display-bambdd?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1557525209/customers_ddtzj8.gif"/>
</a>

## Contact form with map
An all-in-one contact section.
<a class="btn btn-sm" href="https://anymod.com/mod/contact-form-with-map-mlnkbd?v=20">View mod</a>
<a href="https://anymod.com/mod/contact-form-with-map-mlnkbd?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1557525209/map-form_mplaj2.png"/>
</a>

## Team cards
Show off your team in a handsome grid format.
<a class="btn btn-sm" href="https://anymod.com/mod/team-cards-nkabdn?v=20">View mod</a>
<a href="https://anymod.com/mod/team-cards-nkabdn?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1557525209/team_nfblqr.gif"/>
</a>

## Character counter
Powered by Vue.js, demonstrates how to count characters in realtime.
<a class="btn btn-sm" href="https://anymod.com/mod/word-character-counter-onnml?v=30">View mod</a>
<a href="https://anymod.com/mod/word-character-counter-onnml?v=30">
  <img src="https://res.cloudinary.com/component/image/upload/v1557525208/counter_b1dmoy.gif"/>
</a>

<hr>

I post new modules [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
Using passed in props in react class methods
Tags: react, props, beginners
Published: 2019-05-13 15:37:25

---
title: Using passed in props in react class methods
published: true
description: 
tags: react, props, beginner
---
To make use of a prop, passed in or down from a parent component. You first created a constructor for the class. Check the code below:
```javascript
class SomeClass extends Component {
   Constructor(props) {
       super(props);
       this.props = props; 
   }

   someMethod = () => {
       console.log(this.props)
   }
}
```
Weird! Thought it will happen some other way.
Laravel E-Commerce Application Development – Assets Setup Using Laravel Mix
Tags: laravelecommerce, laravelmix
Published: 2019-05-13 15:21:09

---
title: Laravel E-Commerce Application Development – Assets Setup Using Laravel Mix
published: true
description: This is the second part of Laravel E-Commerce Application Development tutorial series, in this part, we will set up the static assets using Laravel Mix.
tags: laravel ecommerce, laravel mix
---

This is the second part of Laravel E-Commerce Application Development tutorial series, in this part, we will set up the static assets using Laravel Mix.

 
You should have your e-commerce application project on your machine, which we set up in the last part of this series.

.gitigonre Changes
First thing first, we have to add a couple of lines in our .gitignore file. This file is used to list all folders and files which we don’t want to add to our Git repository. It’s always helpful to think ahead about any folders and files which you want to exclude from Git.

So let’s start, we know we will be building backend (Admin Section) and frontend (Store Website) in this series. So we will have to manage our backend assets and frontend assets. It’s entirely up to you how you want to manage your assets. I will be showing how I will manage the assets for this project (normally I use the modular structure for a project but this series is to help newbies so I will keep it simple).

Having said that, we will have to manage two folders for static assets in our public/ folder named backend and frontend (you can name them whatever you are fancy).

Also, we will have another folder named uploads where we will be uploading all our products and other images from the backend.

Open you .gitignore file from the root of your application and add a couple of below lines in it.

Read the full article at [https://www.larashout.com/laravel-e-commerce-application-development-assets-setup-using-laravel-mix](https://www.larashout.com/laravel-e-commerce-application-development-assets-setup-using-laravel-mix)
Laravel Clear Cache Using Artisan Command
Tags: laravelclearcache
Published: 2019-05-13 15:19:27

---
title: Laravel Clear Cache Using Artisan Command
published: true
description: If you are making a lot of changes to your views and configurations then you might have encountered the problem I can’t see my changes, you should run the Laravel clear cache command in your terminal.
tags: laravel clear cache,
---

If you are making a lot of changes to your views and configurations then you might have encountered the problem I can’t see my changes, you should run the Laravel clear cache command in your terminal.

When your application is in production mode you should try to leverage the cache as much as you can, but if your application is in the development mode then you can face some issues regarding the actual results you are looking for. This is due to some part of your application is served by the cache.

Read full article at [Laravel Clear Cache](https://www.larashout.com/laravel-clear-cache)
Asking for advice: the best way to organise my future post?
Tags: discuss
Published: 2019-05-13 14:59:56

---
title: Asking for advice: the best way to organise my future post?
published: true
description: seeking advice for using dev
tags: discussion
---

I have used wordpress.com for blogging but I don't think anyone visit ever there anyway. Until now I did it more for personal recording rather than showing to others. Anyway, the number of posts are in one digit.

I recently found here and really like the service. I really like to centralise my posts, but I don't feel like posts such as review on MOOC course is not suitable here. However, at the same time, it feels a bit inefficient to move to Medium and cross post there and here.

I know dev is not for blogging, but I think it is not possible to see my posts by tags. I might be able to use series for that I think.

I know it's kind of silly to worry about this when I barely have written any post, but I think I might be that kind of person. It also feels a bit weird to post a question here, but I couldn't find any dedicated forum or Slack so it will be great users kindly approve this post. Any advice would be appreciated!
How to create a flexible hero block
Tags: expressionengine, eecms
Published: 2019-05-13 14:37:00

---
title: How to create a flexible hero block
published: true
date: 2019-05-13 14:37:00 UTC
tags: ExpressionEngine, eecms
canonical_url: https://u.expressionengine.com//article/how-to-create-a-flexible-hero-block
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hks4mm9cr156x42bopb2.png  
---

So you want to offer your authors the ability to specify a “hero” style header for your entry, but have a fallback for when they don’t want one.

For the purposes of this example, we’ll assume your hero block will have an image, heading, and description.

## Let’s set up some fields

| Field Name | Field Short Name | Fieldtype |
| --- | --- | --- |
| Hero Image | `hero_image` | File |
| Hero Heading | `hero_heading` | Text |
| Hero Description | `hero_description` | Text |

## Now add some code

```
{exp:channel:entries channel="my_channel" limit="1"}

{if hero_image}
  <div class="hero" style="background-image:url({hero_image});">
      <h1>{hero_heading}</h1>
      <p>{hero_description}</p>
  </div>
{if:else}
    <h1>{hero_heading}</h1>
    <p>{hero_description}</p>
{/if}

...

{/exp:channel:entries}

```

What we’re doing here is using a conditional `{if hero_image}` to check if the image exists. If it does, then we output the image as a background image using the `style=` parameter in the `div` container. If it doesn’t exist, then we just output our plain heading and description.

That’s it! All you need to do is add some style!

--
Originally published by <a href="https://u.expressionengine.com/author/rob-allen">Rob Allen </a> at <a href="https://u.expressionengine.com//article/how-to-create-a-flexible-hero-block">u.expressionengine.com</a>
Password input in Elixir
Tags: elixir
Published: 2019-05-12 19:12:42

---
title: Password input in Elixir
published: true
description: How to get input from the user without echoing
tags: Elixir
---

I was looking for a function to get user input without echoing on the screen, for example to get a password from the command line interface. I didn't find any function in the IO Elixir library and the erlang `:io.password` does not work while running a Mix Task. As suggested in [this Stackoverflow answer](https://stackoverflow.com/questions/37720961/elixir-or-erlang-prompt-for-password-with-hidden-input) I went to look how the hex tasks implements this feature.

# Processes on the rescue

The approach seems a bit hacky at first, but quite effective. The idea is to spawn a process while the user is typing and clearing the row every millisecond. After the user has typed, the process is stopped by sending an appropriate message.

Here you can see the full code snippet, extracted from the hex repository [See this pull request](https://github.com/hexpm/hex/issues/2).

```elixir
defmodule Get do
  # Password prompt that hides input by every 1ms
  # clearing the line with stderr
  def password(prompt) do
    pid = spawn_link(fn -> loop(prompt) end)
    ref = make_ref()
    value = IO.gets("#{prompt} ")

    send(pid, {:done, self(), ref})
    receive do: ({:done, ^pid, ^ref} -> :ok)

    value
  end

  defp loop(prompt) do
    receive do
      {:done, parent, ref} ->
        send(parent, {:done, self(), ref})
        IO.write(:standard_error, "\e[2K\r")
    after
      1 ->
        IO.write(:standard_error, "\e[2K\r#{prompt} ")
        loop(prompt)
    end
  end
end
```

First a process is spawned and the newly created process enters in a loop. Every millisecond, the following string is printed on the screen: "\e[2K\r". This is an [XTerm control sequence](https://invisible-island.net/xterm/ctlseqs/ctlseqs.html) that erases all the line (ESC [ 2K) and then brings back the cursor at the beginning of the row (\r).

After the value is read from the command line, a message is sent to the spawned process to signal the end of input. The process then ends the loop and signal back to the parent that he has been closed.

I think that in this code snippet there are some interesting tips:
* the clear of the row happens by writing on the `:standard_error` and not on the `:standard_input`. I think this is because the `:standard_input` is blocking on receiving what the user is typing
* a couple of messages are exchanged between the parent and the child process: in particular the parent waits for the child to acknowledge that he has finished. Likely this is to protect from the corner case where the last character(s) are not cleared up (the last `IO.write` in the `:done` block) and from the case where the child process clears the next prompt line (receive block in parent process).
* `make_ref` is used to create a unique reference and used as a "uniqueness" flag when sending messages.
Bulma CSS - BulmaPlay
Tags: bulma, css, appseed
Published: 2019-05-13 13:58:58

---
title: Bulma CSS - BulmaPlay
published: true
description: JAMStack App, built with Bulma CSS
tags: bulma, css, appseed
---
Hello coders, 


I'm moving my web development to **[Bulma](https://bulma.io/)** and I didn't find many usable, free Bulma templates. There are a few on ThemeForest, (less than 5), and the free ones are .. unusable for a real project.

---

> Thank you! **Content provided by [AppSeed - App Generator](https://appseed.us)**.

--- 

So, I decided to build something and release it as a free asset, with some nice tooling aside. The result is the **[Bulma CSS - BulmaPlay](https://appseed.us/apps/bulma-css/bulmaplay)** web app:

![BulmaPlay - Made with Bulma CSS](https://raw.githubusercontent.com/app-generator/static/master/bulmaplay/jamstack-bulmaplay-made-with-bulma-css.jpg)

- [Bulma CSS BulmaPlay](https://appseed.us/apps/bulma-css/bulmaplay) - official product page
- [Bulma CSS BulmaPlay demo](https://bulma-css-bulmaplay.appseed.us/)
- Tooling: **Gulp**, Hot Reload, **Panini Static Generator**, **SaaS** files for customization, FTP deploy Script

- Credits: Illustration from **Absurd.Design**


![Screen Shot 1 of BulmaPlay - Free app built with Bulma CSS.](https://static.appseed.us/apps/bulmaplay/bulmaplay-bulma-css-app-screen-1.jpg)

![Screen Shot 2 of BulmaPlay - Free app built with Bulma CSS.](https://static.appseed.us/apps/bulmaplay/bulmaplay-bulma-css-app-screen-2.jpg)

![Screen Shot 3 of BulmaPlay - Free app built with Bulma CSS.](https://static.appseed.us/apps/bulmaplay/bulmaplay-bulma-css-app-screen-3.jpg)


**Related Resources**
- [Bulma](https://bulma.io/) - official website
- A short list of [Bulma CSS apps](https://appseed.us/apps/bulma-css) and the [documentation](https://docs.appseed.us/apps/bulma-css/) to use them
- [Bulma CSS BulmaLanding](https://appseed.us/apps/bulma-css/bulmalanding) just anoter app built with **Bulma CSS** 

Happy Coding!
The Building an Indie Business Podcast- The Results of Dogs and Web Development
Tags: podcast, startup
Published: 2019-05-13 12:58:36

---
title: The Building an Indie Business Podcast- The Results of Dogs and Web Development
published: true
description: 
tags: podcast, startup
---

https://overcast.fm/+RG5g_jCjk

[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
application that could help you?
Tags: javascript, node, html, css
Published: 2019-05-13 12:30:06

---
title: application that could help you?
published: true
description: Inspiration
tags: #JavaScript, #Node.js, #HTML, #CSS
---

Hello out there!

The last few weeks I learned JavaScript and some basics of Node.js.
Now I would like to apply my knowledge.
Because of that I am looking for inspiration for a project.
Is there any application that is still missing and could be helpful four you guys?
Let me know :)!
Weekly Links – 5/13
Tags: cloud, links
Published: 2019-05-13 14:18:36

---
title: Weekly Links – 5/13
published: true
tags: Cloud,Links
canonical_url: 
---

Here’s this weeks links:

### Technical Links:

- How do teams work together on an automated machine learning project – [https://azure.microsoft.com/en-us/blog/how-do-teams-work-together-on-an-automated-machine-learning-project/](https://azure.microsoft.com/en-us/blog/how-do-teams-work-together-on-an-automated-machine-learning-project/)
- How to accelerate DevOps with Machine Learning Life cycle Management – [https://azure.microsoft.com/en-us/blog/how-to-accelerate-devops-with-machine-learning-lifecycle-management/](https://azure.microsoft.com/en-us/blog/how-to-accelerate-devops-with-machine-learning-lifecycle-management/)
- How Skype Modernized its backend infrastructure using Cosmos DB – [Part 1](https://azure.microsoft.com/en-us/blog/how-skype-modernized-its-backend-infrastructure-using-azure-cosmos-db-part-1/), [Part 2](https://azure.microsoft.com/en-us/blog/how-skype-modernized-its-backend-infrastructure-using-azure-cosmos-db-part-2/), [Part 3](https://azure.microsoft.com/en-us/blog/how-skype-modernized-its-backend-infrastructure-using-azure-cosmos-db-part-3/)

### Developer Life:

- Did I leave the garage door open? A no-code project with Azure IoT Central and the MXChip DevKit – [https://www.hanselman.com/blog/DidILeaveTheGarageDoorOpenANocodeProjectWithAzureIoTCentralAndTheMXChipDevKit.aspx](https://www.hanselman.com/blog/DidILeaveTheGarageDoorOpenANocodeProjectWithAzureIoTCentralAndTheMXChipDevKit.aspx)
- Art Exploration with AI – [https://channel9.msdn.com/Shows/AI-Show/Art-exploration-with-AI](https://channel9.msdn.com/Shows/AI-Show/Art-exploration-with-AI)
- How one microsoft leader sparked an engineering team’s transformation – [https://www.microsoft.com/itshowcase/blog/how-one-microsoft-leader-sparked-an-engineering-teams-transformation/?\_lrsc=f5389d17-6528-43c1-b781-246ebe7b5287](https://www.microsoft.com/itshowcase/blog/how-one-microsoft-leader-sparked-an-engineering-teams-transformation/?_lrsc=f5389d17-6528-43c1-b781-246ebe7b5287)
-
Angular vs React: Which one is best for web application development?
Tags: angular, react, web, application
Published: 2019-05-13 12:15:21

---
title: Angular vs React: Which one is best for web application development?
published: True
description: Angular vs React, While making a web application, picking which JavaScript system to utilize can be an awesome choice. The Google and Facebook front end movement structures have enormous planner frameworks, at any rate, unique excitement for the business vs application idea. There are different choices, yet unequivocal contest incorporates the decision between two of the heaviest hitters: Angular or React? 
tags: angular, react, web, application
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/n4iz8kup3wwswkoo8mhf.png" alt="Angular vs React">

Angular vs React, While making a web application, picking which JavaScript system to utilize can be an awesome choice. The Google and Facebook front end movement structures have enormous planner frameworks, at any rate, unique excitement for the business vs application idea. There are different choices, yet unequivocal contest incorporates the decision between two of the heaviest hitters: Angular or React?

Angular vs React 

Angular is a full stack web application system situated in Typescript, regularly connected with the front end design pattern toward Single Page Applications, and kept up by Google. Angular is a superheroic JavaScript MVVM system, developed in 2009, which is incredible for structure exceedingly web applications. React is a UI library situated in JavaScript, ordinarily connected with the pattern toward part based engineering, and is kept up by Facebook.

Angular vs React: Which one is best for web application development?

Angular vs React, Utilizing tools for creating different web applications, there can never be the best one. Everyone has its own advantages and downsides. A component that is profitable in one circumstance may demonstrate to be a disadvantage for another.

Advantages of Angular: Read the full article here: https://www.decipherzone.com/blog-detail/Angular-vs-React-for-Web-Application-Development
Neplyn Technologies Ecommerce Development Company
Tags: ecommercecompany, ecommercedevelopment, neplyntechnologies
Published: 2019-05-13 12:13:11

---
title: Neplyn Technologies Ecommerce Development Company

published: True

description: Create #ecommerce website and you develop your ecommerce business connect to Neplyn technologies and develop your business this is Ecommerce Development Company in India. They easily develop your business and provide best to best services.

tags: Ecommerce Company, Ecommerce Development, neplyn technologies
---
Launch story: 1st month
Tags: product, react, node, launch
Published: 2019-05-13 10:21:28

---
title: Launch story: 1st month
published: true
description: Where am I a month after launch?
tags: product, react, node, launch
series: InvoiceMaker
---

# Introduction

My application <a href="https://invoicemaker.xyz">InvoiceMaker</a> has officially been up for a month now. It is time to reflect on what I managed to do in the pas couple of weeks.

## Features

#### Accounts

The main thing that I worked on is the accounts functionality. To handle the accounts creations and the login functionality, I chose to use passport.js and JSON Web Token. I use the local storage to keep track of the token send back from the server, coupled with an Express middleware, to verify the identity of the users.

#### Define your organisation's informations

So far, the only thing you can do when you have an account is to save your organisation's informations in a database. So, you don't have to re-enter your details everytime you need to create an invoice. Chances are these informations won't change too much over time, so having the possibility to save them felt natural.


#### About page

I added an about page, because I suppose I'll need one at some point :D I just added a few questions some people may have, and their answers. Not quite sure where I want to go with this page yet.

#### Bug fixes

- Finally managed to make the production build for React work in production. Couldn't quite figure out why it didn't work.
- Solved a font rendering problem on the generated PDF. I believe it was because I used a font that was not supported on Linux (Helvetica Neue), so the generated PDF falled back to a different font.

## Conclusion

I didn't manage to set aside too much time to work on the project unfortunately. The next steps will be:

- Having the possibility to add a logo on the invoice.
- Start thinking about Stripe integration

Happy Coding :)
Connecting USB devices over a TCP/IP connection
Tags: usbovertcp, usbremote, usbtcpip
Published: 2019-05-13 09:44:04

---
title: Connecting USB devices over a TCP/IP connection
published: true
description: Through the use of dedicated communication software, you can attain the ability to share USB devices over a TCP/IP network
tags: usb over tcp, usb remote, usb tcp/ip
---

 
Most computer users have been exposed to the TCP/IP networking communication protocol. The term is an acronym for Transmission Control Protocol (TCP) and Internet Protocol (IP). These two distinct protocols are often used together in the underlying architecture of the majority of networks that the average computer user accesses every day. Many of the common computer activities such as connecting to websites, playing multi-player online games, and using social media sites all rely on the TCP/IP protocols to establish and maintain communication.
 
Through the use of dedicated communication software, you can attain the ability to share USB devices over a TCP/IP network. [USB Network Gate](https://www.net-usb.com/) is an application that allows any computer attached to the network to remotely access network-connected USB devices. See the benefits that this tool provides by downloading the software. Then, follow the simple steps we present and start sharing USB devices over any network that employs the TCP/IP protocols.

More https://www.net-usb.com/usb-over-ip/
The linting configuration script you should use
Tags: linting, react, prettier, eslint
Published: 2019-05-13 09:29:36

---
title: The linting configuration script you should use
published: true
description: Configuration script for ESLint and Prettier on your react projects
tags: linting, react, Prettier, ESLint
---

Hello to the Dev community,

This is my first post here and I wanted to share a script I started to use recently on my react projects.

To quickly talk about me, I'm junior in React and even if I code alone on small projects, I wanted to have some rules defined to have the best practices and the cleanest code possible.

So I started to get interested in ESLint and I found this script : [eslint-prettier-airbnb-react](https://github.com/paulolramos/eslint-prettier-airbnb-react)

The ESLint and Prettier configuration can be tedious and time consuming if you have to do it on all your projects and this scripts allows you to be good to go in seconds.

I hope you'll like this and it'll help others as it helped me.