teleren/devto huggingface dataset:
#HELP : Angular + Jhipster
Tags: angular
Published: 2020-03-06 16:01:37

I have a project built based on jhipster , so when i want to use HttpInterceptor of angular, it doesn't work. the project used to use HttpInterceptor of ng-jhipster , EVEN when i remove it and its configuration and replace it with the one of angular it doesn't work : Any ideas to try !!
How to make a custom splash screen with animated android views in Flutter?

Published: 2020-03-06 15:59:40

How to make a custom splash screen with animated android views in Flutter?

In the Flutter Splash Screen documentation they have mentioned one, but I couldn't understand how to implement that.

The documentation link is here.

https://flutter.dev/docs/development/ui/splash-screen/android-splash-screen#creating-a-custom-splashscreen
Nevertheless, blrku Coded
Tags: wecoded
Published: 2020-03-06 15:29:40

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title & narrative! ✨ -->

## Equality in tech looks like… 

## I’m an expert at…

## My advice for allies to support self-identifying women and non-binary folks who code is...

<!-- Once your post is published, it will not appear on the /t/shecoded page until an admin approves it. This is an extra step to ensure there is no abuse on this important tag. -->
Nevertheless, Laura Coded (and admin'd and ops'd and...)
Tags: wecoded
Published: 2020-03-06 15:26:16

I'm what a dev looks like. I'm a DevOps practitioner, a self-taught coder, a self-taught admin, and a beginner-safe speaker.

I'm also an example of what a developer looks like when they've changed careers and came to the industry as an adult. I've been a literacy researcher, a science museum educator, a standardized test editor, and a technical writer. I was the kid who read the manuals and watched as others played video games (though I got to play sometimes, too). I got into hardware as a hobbyist, learned to put Linux on old boxes because I needed a space to tinker with an operating system I had heard about but couldn't afford to mess up the computer that I needed for school, taught myself to solder so I could teach kids at the museum, and picked up Python by myself--and then taught other people how to code from there. When I had an opportunity to prove my coding skills in the real world, I grabbed on with both hands. Little did I know that I was going to be taking on a production environment for a legacy system.

Nevertheless, I coded, admin'd, ops'd, owned prod, knocked over prod, rebuilt, and showed the world what a DevOps practitioner can look like.

I go out now and speak in front of people along with coding and running systems, and I delight in helping people new to tech understand how things work. If I'm going to take people on a deep dive into a topic, I try my hardest to ensure everyone can keep up with me at every step of the way.

For International Women's Day, here's my message to all of you (a little early, yes, but I want y'all to get this): Dream big. Fight hard. Show the world what you can do. I believe in you because I've walked this road with you already. You are not alone.
Input from web page to python script
Tags: python, help
Published: 2020-03-06 15:14:15

---
title: Input from web page to python script
published: true
description: 
tags: python, help
---

I want to take user inputs from web page(which do not need any authentication) and pass those as arguments to python script on a remote machine and share the script output as a result to webpage , all in python . What frameworks and modules in python will help me to achieve this workflow ? .
Kubernetes Secrets
Published: 2020-03-06 15:10:26

## Secrets
Kubernetes Secrets let you store and manage sensitive information, such as passwords, OAuth tokens, and ssh keys. Storing confidential information in a Secret is safer and more flexible. Kubernetes uses the feature internally for generating access token for its API.  
Kubernetes is managed and distributed internally. Secret can be used in the following ways:
- Secret as **environment variables**
- Secret as a **file** which needs a volume to be mounted with the file in it.
- store secret as a separate image in a private registry to get pulled along with your container.

## Create Secret
#### Generate secret from file
```
$ kubectl create secret generic ssh-key-secret --from-file=ssh-privatekey=/path/to/.ssh/id_rsa --from-file=ssh-publickey=/path/to/.ssh/id_rsa.pub
 
 secret "ssh-key-secret" created
```

#### Generate secret using a yaml
```
apiVersion: v1
kind: Secret
metadata:
  name: mysecret
type: Opaque
data:
  username: YWRtaW4=
  password: MWYyZDFlMmU2N2Rm
```
the values are Base64 values of the actual string.
```
$ kubectl create -f secret.yaml

secret "mysecret" created
```
## Using Secret

#### Pod using secret as env variable
```
apiVersion: v1
kind: Pod
metadata:
  name: secret-env-pod
spec:
  containers:
  - name: mycontainer
    image: redis
    env:
      - name: SECRET_USERNAME
        valueFrom:
          secretKeyRef:
            name: mysecret
            key: username
      - name: SECRET_PASSWORD
        valueFrom:
          secretKeyRef:
            name: mysecret
            key: password
```
#### Pod using secret from a volume
```
apiVersion: v1
kind: Pod
metadata:
  name: secret-test-pod
  labels:
    name: secret-test
spec:
  volumes:
  - name: secret-volume
    secret:
      secretName: ssh-key-secret
  containers:
  - name: ssh-test-container
    image: mySshImage
    volumeMounts:
    - name: secret-volume
      readOnly: true
      mountPath: "/etc/secret-volume"
```
a volume is created of the type secret and it fetches and stores the secret from the k8 secrets. the secret is then used by the container.  
here the container can now access the secret from the path
```
/etc/secret-volume/ssh-publickey
/etc/secret-volume/ssh-privatekey
```

## Demo
- create a secret.yaml file and deploy it. Secret are now stored on k8 cluster
- In the pod deployment use a volume that is fetching the secret and the pod must be mounting the volume to read the secret.
Dynamic configuration of Wireguard
Tags: wireguard, networking, configuration, vpn
Published: 2020-03-06 15:05:53

Hi, I’m working on a tool for dynamic configuration of Wireguard (wireguard.com) network overlays in the form of a single lightweight binary that runs on every node alongside wireguard itself, and communicates with a server responsible for providing the most up-to-date settings, which in turn are managed by the user through a simple web UI. The only assumption is that each node has internet connection and proper authentication credentials to the server. 

Do you think this would you be useful for, say, connecting devices such as Raspberry Pis to the cloud and being able to dynamically manage IP addresses, firewall rules, etc across the entire network? Are there any particular features you consider important? Do you see any major design flaws?

I'm not sure if this is the right channel for collecting feedback on this, but I just thought that this could be interesting to the community, and decided it was worth a try :)

Cheers!
Measuring Text on React with Hooks
Tags: react, hooks, callback
Published: 2020-03-06 14:37:58



Sometimes UI brings constraints that make development a little bit harder. This week at Entria I need to implement an array of labels that fills buttons.

The problem, simply, I need all buttons to have the same size because of the UI. Reading the React docs I found a simple way to implement this and I think should be a good idea shared with everyone.

So, just to situate us let's imagine that we need to implement a scale of buttons. And the labels of these buttons are dynamic, so the user can have any type of strings on this.


A good scale example can be: "does not meet", "partially meets", "meets", "surpasses".

That is, we have our array `["does not meet", "partially meets", "meets", "surpasses"]`

Our component will receive these labels as array from our backend. Thinking our user in some scenarios will have a poor internet connection, we need to understand how to handle this case until we have the bigger text. So, I create a hook for this:

`const [isCalculating, setIsCalculating] = useState<boolean>(true);`

Until this hook will set as `false`, our component won't be rendered. After, we need to calculate the bigger text of all. At this point, we go to this react doc https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node.

Based on this, we will measure a DOM node and with our hook, we can know if this is already done or not. 

If our hook `isCalculating` is true we will call a function to get the `biggerText` and set it on a DOM node (span tag).

{% gist https://gist.github.com/daniloab/fb6d13798e8712e2a21c11e1a323ce4c.js %}

The function's really easy and simple. I just got my array of labels and with a reduce I got the bigger text and return it.

{% gist https://gist.github.com/daniloab/4ad6124ab538b7565ccbe2bde78f2007 %}

When returned, will be set on `span` that contains the react measure function example. I just add two things:

- New hooks called `setWidth` setting the dom node width. We will use it later.

- The hooks `isCalculating` setting as false.

{% gist https://gist.github.com/daniloab/405691f6e0004577edc60ec970c934b5 %}


Now, our component will check our hook, see it is false and returned our whole component with the scale of buttons.

{% gist https://gist.github.com/daniloab/7c48ea17dde9f9b51076078f85670384 %}

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/58wr7gcqnibmjnutqh00.png)

So, if we have a case where the scale is bigger than width screen, we can handle easily with css flexbox:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/arzgn2gdge97rgqp560u.png)

Feel free to contact me to give advice about better ways to implement this or improves my English. My DMs on twitter is always open.
Releasing `javascript-library-template`
Tags: javascript, node, productivity, opensource
Published: 2020-03-06 14:35:47

---
title: Releasing `javascript-library-template`
published: true
description: JavaScript library template to focus on ⌨️ coding, 🙌 collaborating and 🚀 shipping
tags: javascript,node,productivity,opensource
---

👋 JavaScript developers

One of the hidden challenges of authoring opensource JavaScript libraries is to provide a project that is **easy to contribute to**.

Doing so requires a good amount of boilerplate, you have to think about and provide tooling for:
- ✅ testing
- ✅ code coverage
- ✅ dependencies maintenance
- ✅ release scripts
- ✅ software requirements like Node.js and Yarn: which versions are we using again?
- ✅ code editor configuration
- ✅ formatting
- ✅ linting...

**This can be daunting** and you might already be tired of this long list. Well, fear no more, I created a JavaScript library template that covers all of that!

After publishing JavaScript libraries for 7 years now, this template contains all my experience when it comes to providing good modern defaults to a JavaScript library tooling.

It's available on GitHub as a repository template:
👉 https://github.com/vvo/javascript-library-template

Next time you want to create a reusable opensource (or not) JavaScript library: give a try to my template and let me know how it goes.

The next steps for the template are highlighted in the README and I would love you to contribute, join me 🚀
Write a GraphQL Subscription with React Hooks using Urql
Tags: javascript, react, urql, graphql
Published: 2020-03-06 14:33:29

---
title: Write a GraphQL Subscription with React Hooks using Urql
published: true
description: Urql is a flexible alternative to Apollo GraphQL client.
tags: javascript, react, urql, graphql
series: Introduction to Urql A Robust GraphQL Client
---

[Watch "Write a GraphQL Subscription with React Hooks using Urql" (community resource) on egghead.](https://egghead.io/lessons/graphql-write-a-graphql-subscription-with-react-hooks-using-urql?pl=introduction-to-urql-a-react-graphql-client-faaa2bf5&af=ay44db)

Urql provides a `useSubscription` hook for us to subscribe to a GraphQL subscription. The first thing we need to do is `import {useSubscription} from 'urql'`.

`useSubscription` takes an object, like `useQuery` this object expects a property of `query` and `variables` to be defined on it. In our particularly query, we are subscribing to the comments on a course. So we need to pass the slug of the course to our subscription query.

```js
function App(){
  const course_slug = 'usesubscription-example'
  useSubscription({
    query: commentSubscriptionQuery,
    variables: {course_slug}
  })
  return (
    // ...
  )
}
```

Heres what our subscription query looks like:

```js
const commentSubscriptionQuery = `
  subscription subscribeToComments($course_slug: String!) {
    comments(where: {course_slug: {_eq: $course_slug}}){
      text
    }
}`
```

`useSubscription` returns an array with the first element in that array being the `result`: `const [result] = useSubscription({})`

Like the the result of `useQuery`, this result has a couple methods on it that are useful to use.
We can use `result.error` to display any errors that the my have ran into.

```js
const commentSubscriptionQuery = `
  subscription subscribeToComments($course_slug: String!) {
    comments(where: {course_slug: {_eq: $course_slug}}){
      text
    }
  }
`

function App(){
  const course_slug = 'usesubscription-example'
  const [result] useSubscription({
    query: commentSubscriptionQuery,
    variables: {course_slug}
  })

  if (result.error !== undefined) {
    return <div>{res.error.message}</div>
  }
  return (
    // ...
  )
}
```

Next, we need to tell the user if the query is fetching or if the data hasn't arrived yet.

```js
function App(){
  // ...
  if (!res.fetching && res.data === undefined) {
    return <p>Loading...</p>
  }
  return (//...)
```

If `result` passes all of these checks, we know that we have `result.data.comments` and we can display them in a list.
Use localStorage in Vue.js
Tags: javascript, beginners, vue
Published: 2020-03-07 00:15:47

---
title: Use localStorage in Vue.js
description: Learn to use localStorage to save user data in a Vue.js app. This lesson builds off last week's Vue.js app, but it can also stand alone.
published: true
date: 2020-03-06 14:17:00 UTC
tags: javascript,beginners,vue
canonical_url: https://raddevon.com/articles/use-localstorage-in-vue-js/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0m3vdb46o8rs4mcxxtuq.jpg
---
{% youtube K0_pkOPRu7E %}

Video Notes
-----------

In this video, we’re going to use localStorage to persist some user data in a Vue.js note-taking application.

We built this application from the ground up (well, almost) in [my previous video](https://www.youtube.com/watch?v=yGFJmM4G8ik). If you just want to watch this video to see how to implement localStorage in Vue, that’s fine too. Feel free to jump straight in.

Here are some resources that might help as you watch:

*   [The Vue.js site](https://vuejs.org/)
*   [Vue’s documentation on lifecycle hooks](https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks)
*   [MDN’s guide to using localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
*   [MDN documentation on the built-in JSON object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)
*   [MDN documentation on console.log](https://developer.mozilla.org/en-US/docs/Web/API/Console/log)
*   [Vue docs on watchers](https://vuejs.org/v2/guide/computed.html#Watchers)

Thanks for watching the video! If you have questions, toss a comment down below or on the video [over on YouTube](https://youtu.be/K0_pkOPRu7E). Mention me [on Twitter](https://twitter.com/raddevon) instead if that's your jam.

If you want to become a web developer, you may be focusing on learning to code. That seems like the most logical place to start, and it’s definitely the most fun. **If you don’t know *why* you’re doing it**, you’re going to run out of gas pretty quickly.

[My free email course](https://raddevon.com/stick-with-web-development/) will help you find your Big Goal, giving you the most important tool to make sure you can finish the job… **by *getting* the job**.
How do you organise code in a monolith?
Tags: rails, discuss, organisation
Published: 2020-03-06 14:16:28

By monolith I mean a full stack MVC (Model-View-Controller) application.

For example, in Ruby on Rails (RoR), the code is organised by (category?, I don't know the right technical term for it) what part it plays under MVC. For example, all models go under one folder, all controllers under one and same for the views. It looks like this...

```
app/
├── controllers/
|   ├── posts_controller.rb
|   └── ...
├── models/
|   ├── post.rb
|   └── ...
└── views/
    ├── posts/
    └── ...
```

I've been working with this in Rails and I've noticed that as the project gets larger and larger, you have to hop around a lot between folders. For example, if I'm working on the `Posts` module, I'll need to make some change in the model, then open the controllers folder, search for the `posts_controller` and then go do something in the views folder. It becomes quite cumbersome to deal with.

I think what better suits my workflow, would be to have a folder for the `Posts` module and have its model, view and controller inside it. Like, so...

```
Posts/
├── controller.rb
├── model.rb
└── views/
```

Which way do you prefer?
Step by Step building a PWA in Angular 8
Tags: pwa, angular, newdev, 100daysofcode
Published: 2020-03-06 14:10:38

Creating a Progressive Web Application, the application which can be run as like a native app from the mobile devices and regular sites from a browser, using Angular 8, I have consumed a simple REST API and displayed the data in the landing page.

Read the detailed article here in [medium](https://medium.com)

{% medium https://medium.com/@avishekpatra.1986/step-by-step-building-a-pwa-in-angular-8-eb85443491b7 %}

The source code is available on (GitHub)[https://github.com/patravishek/pwa-angular]

On completion of the tutorial, you should be able to build a similar application like shown below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0j3smrnq5h8p2x1f61l1.png)

If you love the tutorial please like or comment so more tutorial can bring afterwards.
5 awesome css resources
Tags: css
Published: 2020-03-06 13:29:28

This post is originally written for my blog here -> https://easyontheweb.com/5-awesome-css-resources/

CSS has always been one of the most under-appreciated skills amongst web developers. Maybe because developers think it is the job of web designers to write CSS. This couldn’t be far from the truth. I write quite a lot CSS in my daily work as a full stack dev and so have compiled an awesome list of 5 CSS resources that could be very helpful to you.

John Duckett – HTML and CSS
One of the first resources that came to my mind for this list was this beautiful book that I read many years ago. I repeat, it’s beautiful ! With great illustrations and a good explanation of CSS, this should be your go to resource if you want to initially build up your CSS skills.

https://wtf.tw/ref/duckett.pdf

Internetting is hard
This is an awesome online course which I really liked. Again, full of beautiful illustrations and diagrams that would get stuck in your memory. A very well designed course that takes you from zero to hero in CSS and treats writing CSS as an art.

https://internetingishard.com/

Wes Bos
If you are not a reader and are a watcher instead , i.e, you prefer to learn via videos then this is a great platform for you. Wes Bos is a great frontend developer whose videos have taught me a great deal over the years. Take a look at his JS and React videos along with the CSS ones as well, they are pure gold.

Wes Bos

Advanced CSS and SASS
This is arguably the most in depth and advanced CSS course I have ever taken (and sorry, not completed). The teacher is an absolute expert, the content is great. We get to learn under the hood working of CSS as well as the practical stuff and we also learn SASS which is as they say themselves ‘awesome’.

https://www.udemy.com/course/advanced-css-and-sass/

CSS-tricks
The second most used CSS resource in my daily life after stackoverflow. This is not a course or a series but a site that will help you in times no one else will. With a huge library of content and articles you can just browse through the site to learn something new every day. All I can say is an absolute must visit website.

https://css-tricks.com/

So, these were my 5 favourite css resources. Do comment yours below so that I and other readers can have a look at them !

Do you also want to know about the best Ruby on Rails resources ? Go check them out -> https://easyontheweb.com/ruby-on-rails-resources-teach-yourself-rails-today/
Question on Front-End Help for a WebApp
Tags: help
Published: 2020-03-06 13:04:34

Hi devs

I need your help. My team and I been handed a project to rewrite a legacy PHP web app.

Our tool of choice is Laravel/MySQL as at now.

Any pointers where we can get a top designer who can make a design the layouts and a front end developer to convert the designs to responsive Bootstrap 4 CSS & HTML?

I haven't had much luck with Freelancer.com and 99Designs is way too expensive.

Thanks.
Mar. 6, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-03-06 13:02:26

Photo by [twinsfisch](https://unsplash.com/@twinsfisch?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/learning?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![Yoda wooping someone's butt](https://media.giphy.com/media/yDYAHbqe5DfyM/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/jess/what-was-your-win-this-week-5dj6 %}

![Little kid making a fist as if to say "Yes!"](https://media.giphy.com/media/6brH8dM3zeMyA/giphy.gif)