teleren/devto huggingface dataset:
Toggle Password Visibility
Tags: vanillajs, javascript
Published: 2019-10-20 05:01:50

---
title: Toggle Password Visibility
published: true
date: 2019-10-15 00:00:00 UTC
tags: vanillajs, javascript
canonical_url: https://hiltonmeyer.com/articles/toggle-password-visibility.html
---

I've joined the [Vanilla JS Academy](https://vanillajsacademy.com/) taught by [Chris Ferdinandi](https://gomakethings.com/). The awesome thing about the course so far has been that the lessons are pretty short and you produce something in the end of the day. The major bonus is also that the is an amazing Slack channel that is actually where I have been learning even more. Our first project was to create a Show Password checkbox that would toggle showing the password in plain text. This is a handy little feature to have and is sprinkled throughout the web.

```
<!DOCTYPE html>
<html>
  <head>
    <title>Password Visibility</title>
    <link rel="stylesheet" href="/css/style.css" />
  </head>
  <body>
    <p><a href="/"> < Home</a></p>
    <h1>Password Visibility</h1>

    <p>Enter your username and password to login.</p>

    <form>
      <div>
        <label for="username" style="white-space:nowrap"
          >Username <input type="text" name="username" id="username"
        /></label>
      </div>

      <div style="white-space:nowrap">
        <label for="password"
          >Password <input type="password" name="password" id="password"
        /></label>
      </div>

      <div>
        <label for="show-password">
          <input type="checkbox" name="show-passwords" id="show-password" />
          Show password
        </label>
      </div>

      <p>
        <button type="submit">Log In</button>
      </p>
    </form>    

    <script src="script.js"></script>
  </body>
</html>

```

My thoughts for tackling this was firstly to make it super complicated trying to look at ways to catch the event with some checkbox listener that I found my way wandering down in the MSDN docs. Luckily I took a step back and decided to get back to something Chris mentioned in a post a while back, that is [planning it out on paper](https://gomakethings.com/how-to-plan-out-your-javascript-project/). By simplyfying it I foudn that the solution required me to

1. Select the elements of the password and the checkbox
2. Check when the checkbox was clicked
3. Toggle the password field

```
// Elements
const showPassword = document.querySelector("#show-password");
const password = document.querySelector("#password");

// Toggle Password Field
const togglePassword = () => {
  password.type = showPassword.checked ? "text" : "password";
};

// Listen for checkbox click
showPassword.addEventListener("click", togglePassword, false);

```

I must say that each of us took a different view of the problem and found various solutions. I actually incorporated one of them as I had used password. On my solution I had used `password.setAttribute('type','text')` which also works but I was not aware of the `.type` for setting the attribute directory without jumping through loops. It's going to be an interests few weeks of intense learning.
FEATool Multiphysics Updated with IGES, STEP, and STL CAD Geometry Import
Tags: matlab, cad, step, iges
Published: 2019-10-16 04:32:19

---
title: FEATool Multiphysics Updated with IGES, STEP, and STL CAD Geometry Import
published: true
date: 2019-10-15 00:00:00 UTC
tags: matlab, cad, step, iges
canonical_url: https://www.featool.com/news/2019/10/15/FEATool-Multiphysics-v1p11p1-IGES-STEP-CAD-Geometry-Import.html
cover_image: https://www.featool.com/images/featool-multiphysics-iges-step-cad-model-examples.jpg
---

[FEATool Multiphysics](https://www.featool.com) has been updated to support IGES and STEP CAD geometry models, as well as STL models with automatic feature and boundary recognition.After updating, the new IGES and STEP CAD import options can conveniently be accessed from the corresponding menus. Moreover, it is now also possible to directly export geometries and grids to fully interactive web browser plots.

Visit https://www.featool.com/news/2019/10/15/featool-multiphysics-v1p11p1-iges-step-cad-geometry-import for more information.
Swifducks: simple Redux store with multiple reducers
Tags: swift, playground, unidirectional, redux
Published: 2021-12-13 21:06:40

---
title: Swifducks: simple Redux store with multiple reducers
published: true
date: 2019-10-15 00:00:00 UTC
tags: [swift, playground, unidirectional, redux]
canonical_url: https://www.vknabel.com/pages/Swifducks-simple-redux-store-with-multiple-reducers/
---

A simple example implementation of the Redux pattern with multiple reducers and listeners.

The name is derived from Swift + Redux = 🏎🦆

_Originally written at 2018-06-10_

## Definitions

```swift
public final class Store<State, Action> {
    public typealias Reducer = (Action, inout State) -> Void

    public private(set) var state: State
    private var reducers: [Reducer] = []
    private var callbacks: [Weak<Listener<State>>] = []

    public init(initial state: State) {
        self.state = state
    }

    public func select(_ changes: @escaping (State) -> Void) -> Any {
        let subscription = Listener(on: changes)
        callbacks.append(Weak(subscription))
        return subscription
    }

    private func reduce(with reducer: @escaping Reducer) {
        reducers.append(reducer)
    }

    public func dispatch(_ action: Action) {
        state = reducers.reduce(into: state) { intermediate, reducer in
            reducer(action, &intermediate)
        }
        callbacks = callbacks
            .compactMap { $0.value }
            .map(Weak.init)
        callbacks.forEach { $0.value?.onChange(state) }
    }
}

public extension Store {
    convenience init(initial state: State, reducer: @escaping Reducer) {
        self.init(initial: state)
        reduce(with: reducer)
    }
}

internal struct Weak<A: AnyObject> {
    weak var value: A?

    init(_ value: A?) {
        self.value = value
    }
}

internal final class Listener<State> {
    var onChange: (State) -> Void

    init(on change: @escaping (State) -> Void) {
        onChange = change
    }
}
```

## Example Usage

```swift
enum IntAction {
    case increase
    case decrease
}

let root = Store<Int, IntAction>(initial: 0) { action, state in
    switch action {
    case .increase:
        state += 1
    case .decrease:
        state -= 1
    }
}

var sideEffect = -1
var listener: Any? = root.select {
    sideEffect = $0
}

root.dispatch(.increase)
root.state // will be 1
sideEffect // will be 1
listener = nil
root.dispatch(.decrease)
root.state // will be 0
sideEffect // will be 1
```

## Conclusion

Without explicit support for modularity, supporting multiple reducers as above is probably not needed. Instead some composability functions should be used.

On the other hand: it is obvious, that are implementing the Redux pattern and embracing unidirectional data flow is relatively easy.
Native Javascript Ready Function and JSON with AJAX GET Request
Tags: javascript, ajax, json
Published: 2020-05-30 14:10:26

---
title: Native Javascript Ready Function and JSON with AJAX GET Request
published: false
date: 2019-10-14 23:50:00 UTC
tags: javascript,ajax,json,javascript
canonical_url: https://www.railsmine.net/2019/10/native-js-ready-function-and-json-ajax-get-request.html
published: true
---

I use [You Might Not Need jQuery](http://youmightnotneedjquery.com) as reference when building something with Native Javascript.

In this post I write about example usage for ready function and JSON with AJAX GET request.For POST request, please see my previous [Native Javascript AJAX POST Request with Data or Parameters](https://dev.to/kuntoaji/native-javascript-ajax-post-request-with-data-or-parameters-3819-temp-slug-4444054).

The code below is ready function based on jQuery and Native Javascript.

```js
// jQuery
$(document).ready(function(){
});


// Native JS, IE 9+
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
```

And the code below is JSON GET request based on jQuery and Native Javascript.

```js
// jQuery
$.getJSON('/my/url', function(data) {
});


// Native JS, IE 10+
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
  } else {
    // We reached our target server, but it returned an error
  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();
```

## Example Usage

Suppose there’s HTML like this:

```html
<div id="my-selector">
</div>
```

And JSON response like this:

```json
{
  "example": {
    "foo": "bar"
  }
}
```

Here is example code how to insert HTML element from JSON response with Native Javascript.

```js
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function() {
  var request = new XMLHttpRequest();
  request.open('GET', 'https://example.com', true);

  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      var data = JSON.parse(this.response);
      var element = document.getElementById('my-selector');

      if (data['example'] == null) {
        element.innerHTML = '<p>Empty resultt</p>';
      } else {
        element.innerHTML = '<p>'+ data['example']['foo']+'</p>';
      }
    } else {
      console.log('server error');
    }
  };

  request.onerror = function() {
    console.log('request error');
  };

  request.send();
});
```
Introduction of Myself Part 1
Tags: android, java
Published: 2019-10-14 23:35:49

My name is Kelvin Pere. And i live in Nigeria. I am currently an Android Developer who is interested in so many things. 

The Journey as not been easy and its still a long way to go. I started learning how to build mobile android apps with the help of Udacity. The platform as been great. During the first section of the course. I learnt what an IDE means and also how you build layouts to the screen. 

Then went further in learning Java Programming language, which is a strongly typed language. I wanted more challenge so i saw a post of an Android Developer Intern at a Startup close to where i live. I didn't know anything like i was a beginner but i still decided to apply. 

On getting there, i realized i was the only Android Developer there. So the CEO liked me and offered me the opportunity to be taught by a Senior Developer. And it was a game changer for me.....
Remember its just a Job
Tags: productivity, softwaredevelopment, development
Published: 2019-10-14 23:19:55

I want to be a doctor, i want to be a lawyer and so on. That is what many of us said we wanted to be. And when eventually we get to that destination. Well? All we will say is, its just a job.

We need to have the same mentality with regards to Software Development. Many persons work everyday,Sunday - Saturday on their job writing code and testing and doing other things. But if we view our job like the other regular work. We will have a balanced view of working.

This also applies to learning how to code. You do not need to spend your whole day just watching a 8 Hours tutorial. Take a break, remember its just a job nothing much.

While working as a Software Developer, remember its just a job. Nothing much.
No more hero's anymore.
Tags: design, webdev, help, ux
Published: 2019-10-14 22:35:53

Is it a carousel, is it a massive title... Sorta yes. I'm board, really board with hero images. The image the size of your screen dominant and bold, it demands your attention... But so does everyone else's, what else is there?

Using a hero is so bold that it actually requires an arrow to tell your users that they can scroll down.

From the perspective of pretty looking, as effective and accessible I ask can you think of an alternative or statistics as to why I should use one? Images are greatly appreciated I am in need of some inspiration.
Sentiment Analysis of Australian political hashtags
Tags: sentimentanalysis, python, microservices
Published: 2019-10-14 22:25:11

---
title: Sentiment Analysis of Australian political hashtags
published: true
description: 
tags: #SentimentAnalysis #Python #Microservice
---

![Sentiment Analysis](https://thepracticaldev.s3.amazonaws.com/i/qkil6en1msxmeb75ilsh.png)

It's time for another post from my [home blog](https://www.jmcpdotcom.com/blog). This is another #Python #microservice, which ties together some #NaturalLanguageProcessing (using the [nltk toolkit](https://www.nltk.org), the @Twitter search API and #SentimentAnalysis with some basic #MachineLearning. To visualise all this I used the [C3.js](https://c3js.org) charting library, and put together some more JavaScript for periodic (30 second) and flowing visuals.

[https://www.jmcpdotcom.com/blog/posts/2019-10-04-microservices-part-2/](https://www.jmcpdotcom.com/blog/posts/2019-10-04-microservices-part-2/)

I'm going to return to this project shortly, to update the tweet source corpus. The source I've used for this project is based on British tweets, and while Australia and Britain share many things, I'm not completely confident that our sarcasm and cynicism is reflected in the corpus.
Day 11 : In Due Time
Tags: hiphop, code, coding, lifelongdev
Published: 2019-10-14 22:00:34

_liner notes_:
- Saturday : Radio show day! Even though something really random happened to throw me off, we still had a great show and I had a great time. You can check it out here: https://kNOwBETTERHIPHOP.com
![OUR show episode graphic of an upside down house](https://thepracticaldev.s3.amazonaws.com/i/l6kgrkm73a5kwswf7cbf.jpg)

- Sunday : Didn't get as much done as I would have liked. Fortnite (a game I've never played) was having a worldwide online event. Basically the whole game world got sucked into a black hole. All that was left was the black hole in the center of the screen. Every once in a while a number would flash on the screen. I spent way more time than I'd like to admit watching players of the game come up with theories on what it all meant. haha At least I wasn't alone, some streams had tens of thousands of people watching. Fortnite's official stream had over 1 million people. Amazing. It's been over a full day and still there's just the black hole and people still trying to figure out what's happening. I did get to do some anime watching and a little coding. Wasn't a total loss. haha

![Image of a mountain goat in front of mountains in Mont Blanc, France](https://thepracticaldev.s3.amazonaws.com/i/h6lcgn4a1z0dfacp4ed1.jpg)

Was pretty productive today. Worked out some issues I had with pushing my code to the GitHub repo I created for my assigned project. Also got the project's frontend and backend running on the same Glitch project. Did some changes based on reviews of the reviews I did for some tutorials. Started an outline for the Use Case I'll be writing. Looking forward to seeing everything coming together. In due time.

Right now, I'm in my car downtown waiting to go check out the Orlando Devs meetup tonight. If all goes well, I'll be streaming the event on https://otech.events

About to head out.


Have a great rest of the day!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube gvMCA9jHFZ0 %}
Serverless Deployment Best Practices Link
Published: 2019-10-14 21:18:31


The serverless blog posted an article covering security, staging, and naming conventions:

- [Serverless Deployment Best Practices](https://serverless.com/blog/serverless-deployment-best-practices/?utm_source=dev_to&utm_medium=social&utm_campaign=promoted&utm_content=deployment_best_practices)
Standardizing input type="range" styling
Tags: css, webdev
Published: 2019-10-14 20:46:46

Currently, the state of styling `<input type="range">` across browsers is a nightmare. Chrome, IE, Safari, and Edge each have their own way of styling range inputs with differently named pseudo-elements. With this proposal, I want to bring some unity and standardization to this similar to the CSS scrollbars spec. Currently, Chrome has no support for styling the "progress" part of a range input (the area corresponding to "below" the current value, in LTR languages, the track to the left. @danielstern has written [an article about it on CSS-Tricks](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/), and although it was last updated in 2017, most of it still applies.

## Definitions
**Thumb:** the UI element that the user interacts with and is dragged by the user - it shows the current state of the range.
**Track:** The "groove" or bar that the thumb runs along - shows the "range" (min and max values) of the range.

## Current state of range styling
**WebKit/Blink (Chrome/Opera/Safari):**
```css
::-webkit-slider-thumb { /* Styles the thumb of the input*/ }
::-webkit-slider-runnable-track { /* Styles the track of the input*/ }
```

**Firefox**
```css
::-moz-range-thumb { /* Styles the thumb of the input*/ }
::-moz-range-track { /* Styles the track of the input*/ }
::-moz-range-progress { /* Styles the progress/fill below the thumb of the input*/ }
```

**IE/Edge**
```css
::-ms-thumb { /* Styles the thumb of the input*/ }
::-ms-track { /* Styles the track of the input*/ }
::-ms-fill-lower { /* Styles the progress/fill below the thumb */ }
::-ms-fill-upper { /* Styles the fill above the thumb */ }
```

## Proposal
As you can see, attempting to style a consistent range input across browsers is a daunting task and requires a lot of CSS and repetition of styles. I'd like to propose three new standard pseudo-elements for styling the range:

```css
::range-thumb { /* Styles the thumb of the input*/ }
::range-track { /* Styles the track of the input*/ }
::range-progress { /* Styles the progress/fill below the thumb of the input*/ }
```

![range-pseudo-proposal-diagram](https://user-images.githubusercontent.com/8939680/66600408-0e922e80-eb6b-11e9-97c6-2d4eb439e3ae.png)

Sample CSS for the above mockup would be something like this:

```css
input[type=range]::range-track {
  width: 100%;
  height: 20px;
  border-radius: 10px;
  background-color: #eee;
  border: 2px solid #ccc;
}

input[type=range]::range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: white;
  border: 2px solid #1976D2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

input[type=range]::range-progress {
  height: 20px;
  border-radius: 10px 0 0 10px;
  background-color: #2196F3;
  border: 2px solid #1976D2;
}
```



If you think this is important, feel free to give a 👍 on the GitHub issue.

{% github https://github.com/w3c/csswg-drafts/issues/4410 %}
Java Developers, What's in Your Toolkit?
Tags: java, discuss, android, javascript
Published: 2019-10-14 20:42:44

What IDEs, frameworks, languages, and other software do you use on a regular or semi-regular basis? Spring? Android Studio? Git? Maven / Gradle / Ant? What do you use for the front-end? React? Vue? JavaFX?

I'll go first:

__Language(s):__ Java, some Scala

__Project Management:__ Maven

__Version Control:__ Git, GitHub, GitLab

__Database:__ MongoDB, H2, Hadoop, or Derby, but I've also used MySQL and PostgreSQL (I'm flexible)

__IDEs / Editors:__ nano mainly, but starting to use Eclipse and VS Code more

__Front-End:__ I've dabbled in JavaFX, but I'm trying to learn some more JavaScript, including ReactJS

__Other:__ Trying to catch up and learn REST / Spring, and Android Development

It looks a lot more intimidating now that I've written it all out like that!

How about you? What are you using and what are you learning? Let me know in the comments!
Got an issue while running test with Jest on my typescript next js app
Tags: testing, javascript, react, typescript
Published: 2019-10-14 20:41:45

Hi everyone,

I had an issue while I was testing my next js app. My app needs some environment variables to get data. However, I didn't found a way to make my code work...

https://github.com/hugos29dev/the-Project-Alpha/issues/3

Can someone take a look to it...

Hugo
My first Pull-request to an open-source project
Tags: java, spring, beginners, tutorial
Published: 2019-10-14 20:30:54

I enjoy helping others, but in terms of programming I am just asking around people from different communities about solutions with regards to my issues. I think it is time for me as well to start giving back to the community and help others in need.

Having this in mind, I decided to start small and make a simple **Pull-request** to an open-source project on **Github** like [Spring-framework](https://github.com/spring-projects/spring-framework).

I read the *conduit* and how to *contribute* to the project, but I could not find  there where to modify and how to create a **Pull-request** with my changes. 

Here comes in handy this [tutorial](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) which I recommend to any of us that is starting helping out on open-source projects. It contains all the information needed in order to achieve this and it is very explicit.

Happy coding!
Add Custom JavaScript to a Gatsby Site
Tags: gatsby, javascript
Published: 2019-10-14 20:28:55

---
title: Add Custom JavaScript to a Gatsby Site
published: true
description: Add custom JavaScript to a Gatsby site
tags: gatsby, javascript
canonical_url: https://stevenmercatante.com/how-to-add-custom-javascript-to-a-gatsby-site
---

___
*This post was originally published at [stevemerc.com](https://stevenmercatante.com/how-to-add-custom-javascript-to-a-gatsby-site)*
___

I recently found myself needing to add some custom JavaScript to the `head` of a [Gatsby](https://www.gatsbyjs.org/) project. In this article I'll show you how to do this.

Gatsby doesn't actually use an `index.html` file. Instead, it uses an `html.js` file, which isn't exposed by default.

Following their [docs](https://www.gatsbyjs.org/docs/custom-html/), we can expose `html.js` by invoking the following command in terminal:

```bash
cp .cache/default-html.js src/html.js
```

This copies `html.js` to our `src` folder so we can edit it.

Now, let's add our custom JavaScript. Below is a contrived example for demonstration purposes.

```javascript
// html.js
<script>var foo = 'bar'; console.log(foo);</script>
```

Since our HTML doc is a JavaScript file, we can't just copy and paste the above example, otherwise React will complain about a syntax error.

The trick is to use React's [dangerouslySetInnerHTML](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml) attribute. As its name suggests, you're going to set the inner HTML of whatever tag you apply it to. Let's see it in action!

```javascript
// html.js
<script
  dangerouslySetInnerHTML={{
    __html: `
      var foo = 'bar';
      console.log(foo);
    `,
  }}
/>
```

Now if you refresh your app, you should see `bar` logged to the console.

I admit, this is more work than I care for to just add something to the `head` of a site, but as with all tech, there are tradeoffs we must make. Since Gatsby makes so many other things easy, we can overlook this minor invonvenience.

👋 **Enjoyed this post?**

Join my [newsletter](https://stevemerc.com/newsletter/?r=dev) and follow me on Twitter [@mercatante](https://twitter.com/mercatante) for more content like this.