teleren/devto huggingface dataset:
node & react & svelte & vue
Tags: node, react, svelte, vue
Published: 2020-01-18 12:53:08

thanks to https://dev.to/mikenikles/why-i-moved-from-react-to-svelte-and-others-will-follow-210l ive now added svelte to my todo list

on devto
* https://dev.to/methodcoder/svelte-crash-course-with-pics-27cc
* https://dev.to/jesseskinner/svelte-is-the-most-beautiful-web-framework-i-ve-ever-seen-325f

on svelte
* https://svelte.dev/
* https://svelte.dev/blog/virtual-dom-is-pure-overhead
* https://svelte.dev/blog/write-less-code
* https://svelte.dev/blog/svelte-3-rethinking-reactivity
github fork refresh hack
Tags: github, fork
Published: 2020-01-18 12:21:24

github fork master branch merge / refresh hack

would the following work ? i think i need to read these first 
* https://dev.to/datreeio/10-insanely-useful-git-commands-you-wish-existed-and-their-alternatives-8e6
* https://github.com/brianamarie/10-git-problems/tree/master/05-merge-two-repos

```
CLONE YOUR FORK
$ git clone git@github.com:osde8info/symless-synergy-core.git
$ cd symless-synergy-core
$ git remote add upstream https://github.com/symless/synergy-core.git
$ git fetch upstream

MERGE
$ git merge upstream/master

FIX or DELETE any conflicts
$ git rm CONFLICTINGFILES
$ git commit -m 'deleted all conflicts'

MERGE AGAIN
$ git merge upstream/master

PUSH YOUR FORK
$ git push origin master
```

adapted from 

https://dev.to/rrampage/git-how-to-keep-your-fork-updated-with-remote-repository-1g4i
Introduction à l'utilisation de Waves Signer
Tags: blockchain, wavesplatform, signer, node
Published: 2020-01-18 12:06:06

Bonjour à tous,

En décembre dernier, Waves Blockchain à sorti la version beta de Waves Signer, une alternative à Waves Keeper (équivalent Metamask pour Waves) proposant des fonctionnalités similaires mais sans imposer l'installation d'une extension navigateur.

J'ai préparé une petite vidéo afin de vous montrer comment l'utiliser pour connecter un compte et signer des transactions.

https://www.youtube.com/watch?v=5BGJmJlpHx8

N'hésitez pas si vous avez la moindre question et n'oubliez pas le wébinaire de samedi prochain qui se concentrera sur les fondations de la blockchain Waves à savoir :

- Consensus
- Cryptographie
- Comptes
- Transactions

PROCHAIN WEBINAIRE LE 25 JANVIER
Enregistrez-vous sur :
https://www.meetup.com/Waves-Blockchain-Developpeurs/events/267268217/

Suivez nous et posez toutes vos questions sur :
Telegram : https://t.me/wavesdappsFR
Twitter : https://twitter.com/WavesDevFr
Reading Snippets [35 => Git]
Tags: beginners, git, github
Published: 2020-01-18 11:37:14

Git rebasing makes a linear sequence of commits. The commit log/history of a repository can be a lot cleaner if rebasing is used.

For example, git rebase could be used to move work from one branch directly to work from another master, making the features on both branches look like they were developed sequentially even though they were actually developed in parallel. 


<kbd><small>Source:<a href="https://learngitbranching.js.org/">Learn Git Branching</a></small></kbd>
100 Days Of Reflection (And Code)
Tags: 100daysofcode, discuss
Published: 2020-01-18 11:20:28

**TL;DR:** How to enrich the #100DaysOfCode challenge with a "reflection surface" for thoughts and ideas?

Hi there! I've read about the challenge about a year ago. As I've come across a lot of peoples' reviews on the challenge, it seems that mostly newer developers take it up. And it makes sense! In the beginning of learning any craft, *actually practicing it* is very beneficial to the learning progress.

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

Now I wonder whether an intermediate developer like me can benefit as much. Practice never hurts, but according to my experience, at some point the challenging parts of developing something are not in finding the correct combination of characters ("the code") that gets the job done. It's about structures on a larger scale and finding the right level of abstraction in implementing, designing, deploying, and of course documenting the solution. And learning/improving in these areas - at least to me - goes hand in hand with talking about them to someone else! Getting feedback and toying around with ideas help me see and examine aspects that I might have missed about the problem, the solution, or the user. Ideally, it spawns new ideas on *both* of our minds, and we *both* learn something new. At least for me, 15 minutes of a good discussion can yield as much of a learning effect as a whole day of coding.

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

So I expect working 100 days on something by myself - with occasional motivational exchanges via social media channels - might be a lot of fun! But I suspect that I won't *learn* a lot. This is not a bad thing since it'd still be fun, right? I still wonder how to enrich the challenge with some kind of "reflection surface" that I can bounce off thoughts and ideas - ideally with more than 280 characters per message.

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

Thoughts and Ideas, anyone? :)
react-awesome-reveal v2.4.0 released!
Tags: react, javascript, typescript, webdev
Published: 2020-01-18 11:12:32

A new version of [react-awesome-reveal](https://www.npmjs.com/package/react-awesome-reveal/v/2.4.0) has just been released, featuring a `reverse` option that... reverses the animation direction 👻 It is useful for making elements visible and invisible in a controlled way (form error indicators, badges, notifications and so on)!
How to make a grouping of all API call
Tags: react
Published: 2020-01-18 10:56:16

Goal:
Create a api.js for grouping all api call into a single file.

Problem:
If you have many webpages with many api calls, how should you create a group of all api call into a single file?
Do you have a sample?

Stackblitz:
https://stackblitz.com/edit/react-pvb5w2

Info:
*Angular has a grouping of all call by using service but I don't know if it possibly to create the same approach for react js. Do you have a sample?
*I'm newbie in reactjs.

Thank you!
node webdev would be easier if ...
Tags: node, webdev, cloudinary, pug
Published: 2020-01-18 10:47:39

node webdev would be easier if ... every vendor didnt invent their own protocols ... for example this morning ive already had issues with babel, glitch, zeit and webpack

many so called 'quick starters' simply hide functionality

glitch never call your package 'build' script so you have to include it inside your start script, they have renamed git/github 'push' to 'export' (and SOMETIMES push from local master into remote glitch), 'node run' doesnt work inside a package file (use run-script instead) AND babel & webpack dont work when installed globally ... 

i could go on and on but here is a node express pug cloudinary example that i THINK works

try it for yourself and let me know if it works for you :)

you can start with either the glitch repo or the github repo

{% glitch osde8info-node-express-cloudinary %}
{% github osde8info/node-express-cloudinary %}
Reading Snippets [34 => Git]
Tags: beginners, git, github
Published: 2020-01-18 10:45:23

Branches 🌳 in Git point to specific commits. Many Git enthusiasts maintain that it is important to branch early, and branch often. 

There is no storage or memory overhead when making different branches. It is easier to divide work than to have big branches.

A branch essentially includes the work of a commit and all parent commits. 


<kbd><small>Source:<a href="https://learngitbranching.js.org/">Learn Git Branching</a></small></kbd>
Include my hosted html webpage into blogger
Tags: javascript, html, async, htmltojs
Published: 2020-01-18 10:38:17

Hello, so I'm a bit new to javascript, and I have made an html webpage that supports some temp comments and all ... Well the clients wanted to host the page with its css and all in a server, and then call it using
 < script charset="utf-8" src="" async >< /script >

I guess the src needs to be a js file, can you help me please thank you
Calculating mean iteratively
Tags: algorithms, python
Published: 2020-01-18 10:22:16

---
title: Calculating mean iteratively
published: true
description: 
tags: algorithm, python
---

Recently I ran into a situation, where I wanted to calculate a mean of an unknown size set. My first naive idea was to calculate the average value between current mean and the new value:

```python
xs = [3, 7, 6] # Assuming we don't know the length

mean = x[0]
n = 1
while n < len(xs):
  mean = (mean + xs[n])/2
  n += 1
```

Which quickly reveals to be simply wrong:

```
(3 + 7 + 6)/3 = 5.3333
((5/2 + 7/2)/2 + 6/2) = 5.5
```

In order to find the actual relation between current mean and the i'th value, I started comparing mean from 2 and the mean from 3 values:

```
(3 + 7)/2 = 3/2 + 7/2
(3 + 7 + 6)/3 = (3 + 7)/3 + 6/3
```

From here, it's possible to rewrite mean from 3 values in terms of mean from 2 values:
```
(3 + 7)/3 + 6/3 = 
= (3 + 7)/2 * 2/3 + 6/3 =
= (3/2 + 7/2)*2/3 + 6/3
```

Where I noticed the pattern:
```
mean(i) = mean(i-1) * (i-1)/i + x(i-1)/i
```

Which gives us the correct algorithm for iterative calculation of the mean:
```python
xs = [3, 7, 6] # Assuming we don't know length

mean = xs[0]
n = 1
while n < len(xs):
  n += 1
  mean = mean*(i-1)/i + xs[i-1]/i
```

While I know that in this example iterative calculation is unnescessary, I found this real handy for implementing a segment growing algorithm, where I decide what pixels to add to the segment based on current segment's mean value.
What is a Kubernetes Stateful Set?
Tags: kubernetes, devops, tutorial, docker
Published: 2020-01-18 10:21:22

Stateful Sets are used specifically to run ***stateful, replicated services, like Databases inside Kubernetes cluster***.

 
Configuration of a Stateful Set:

```
apiVersion: apps/v1

kind: StatefulSet

metadata:

  name: mysql

spec:

  replicas: 3

  template:

    spec:

      containers:

        - name: mysql

          image: mysql:8.0

          env:

            - name: MYSQL_DATABASE

              value: my-db

            - name: MYSQL_ROOT_PASSWORD

              valueFrom:

                secretKeyRef:

                  name: mysql-credentials

                  key: password

          ports:

            - name: mysql

              containerPort: 3306
```

The main part of stateful set, that makes it able to run databases is that each replica pod gets assigned a unique ID. This ID sticks to the pod even when its rescheduled to another worker node. Through this unique ID, the pod retains the connection to the volume that holds the state of the database. However because when rescheduling the pod, the volume gets detached and then reattached again, the storage volumes must be on a remote persistent disk, which means the storage need to be hosted outside of the cluster itself.   


So overall, each replica pod in a stateful set has its state and data. So when it gets restarted it needs to regain that state. This means we can't use local storage for stateful sets, since local storage is bound to node, so when pod is rescheduled to another node its previous state won't be available for it. Instead it should use a remote storage that isn't bound to any specific node.

----------
[Complete and FREE Kubernetes & Docker course on Youtube](https://www.youtube.com/playlist?list=PLy7NrYWoggjwPggqtFsI_zMAwvG0SqYCb)
Singleton Pattern
Tags: design, pattern, singleton, java
Published: 2020-01-18 10:13:10

Singleton pattern is the simplest pattern in java and is under the creational pattern. some key points to use in singleton pattern.

* It is static in nature
* private constructor
* private static instance of the class
* public static getter method
* no parameters to the constructor

create singleton class

```
public class Singleton {
    private static Singleton object = null;
    private Singleton() {
    }
    public static Singleton getInstance() {
        if (object == null) {
            object = new Singleton();
        }
        return object;
    }
    public void showMessage() {
        System.out.println("Singleton Pattern");
    }
}
```

create demo class

```
public class Demo {
    public static void main(String[] args) {
        Singleton object = Singleton.getInstance();
        object.showMessage();
    }
}
```

but this classic implementation not thread safe. therefore using synchronized make sure that the one thread can execute the getInstance();at one time.
As this;

```
public class Singleton {
    private static Singleton object = null;
    private Singleton() {
    }
    public static synchronized Singleton getInstance() {
        if (object == null) {
            object = new Singleton();
        }
        return object;
    }
}
```
Automated local HTTPS environment with Traefik
Tags: traefik, devops, networking, security
Published: 2020-01-18 10:10:31

---
title: Automated local HTTPS environment with Traefik
published: true
cover_image: https://docs.traefik.io/assets/img/traefik-architecture.png
description: Serve your localhost apps on .test domains with HTTPS
tags: traefik,devops,networking,security
---

[Traefik](https://doc.traefik.io) is an open-source edge router that intelligently routes incoming HTTP and TCP traffic to services that it's able to find dynamically.

It natively integrates with service providers like Kubernetes, Docker, Amazon ECS, and Azure Service Fabric making it incredibly versatile.  

This means you can start your Docker containers with a few labels specifying the URL (e.g. `https://foo.test`) and Traefik will do the heavy lifting of routing HTTP requests it receives matching that URL to that container.

To go further, it can also manage creating and renewing LetsEncrypt certificates! 🤯

I wanted to share a project I created on GitHub to get started with a local Traefik environment to serve local containers via HTTPS and named domains.  As it's intended for a local environment and you likely don't own `traefik.test`, you'll need [`mkcert`](https://github.com/FiloSottile/mkcert) to create HTTPS certificates signed by your very own local certificate authority.  

You can learn more about Traefik through their documentation [here](https://docs.traefik.io/), which is a fun read and informative when you're ready to move away from localhost.

See you on GitHub!

https://github.com/cwilby/simple-local-traefik
HOW TO CREATE A CUSTOM PROGRESS BAR
Tags: html, css, javascript, codenewbie
Published: 2020-01-18 07:57:11


There wasn't a native way to create progress bars out the box with HTML, not until the HTML5 specification was released and new elements, Modern components and APIs was bundled in.

Before that, programmers have discovered several beautiful hacks to this problem, and today I will be showing you a very common hack also using purely div elements, a few CSS rules and javascript for the interactive animation.


How does it work?

This article is broken into 3 stages:

The HTML:

This section defines the structure for the elements on the page.
The HTML consists of 3 parent elements.

The first element is a div that defines a container for the percentage value of the progress bar, another option is to make this appear inside the progress bar itself.

The second element is also a div (but a super div), which is where the progress bar is housed. It consists of 2 div elements in total. The first one is the bar container and the inner one is the bar itself.

The third element is a button element, that we will use to increment the progress bar by 10 percent(10%) on every click.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9jesx78bm84eq90aieg7.png)


The CSS:

This section defines the presentation and stylize the HTML elements.
The code itself is commented and there is really nothing much to say here if you already know how to read CSS just do your thing!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/89tkz9nby5clfekbkmg6.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/il7oyh6ioxyym7tzurt5.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/yracne7tp93cuf2oqs65.png)


The Javascript:

The javascript is a 14 lines long code base and all it does is to fetch elements from the DOM and attach an event listener to the button element, this will, in turn, add a 10% increase to the bar element every time the button is clicked. It also includes a condition that will reset the bar width to 0% when the count reaches 100%. Ohh! and then it updates the text component with the current percentage value.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/64ffrwjjltbbswap3ps6.png)

Just before I forget, of what use is an article like this without a demo, so here you go:

{% codepen https://codepen.io/codeliterate/pen/QWwZqyy %}

Disclaimer: This post wasn't intended to anger anyone, if you are a PRO, you are reading the wrong article, this is for the beginners, so do a good thing by sharing. Thank you!
Free Social Media Icons Mobile Web & Desktop 
Tags: design
Published: 2020-01-18 07:47:57

42 Free social media icons for your project, presentations and UI and UX Design and Development. Available for Android, IOS and Web in SVG & PNG formats.
Visit for More Illustrations- Krayoncraft.com https://krayoncraft.com/product/free-social-media-icons-mobile-web-desktop/
Lesson 11 Discussion
Published: 2020-01-18 06:51:33

1.	Conditionals are important because you can execute certain outcomes with variable information. If you receive a value, you can make a code that will act upon it, with these >=< modifiers.
2.	Let desiredTemp = 80
if desiredTemp < 80 { “Now warming.”}
if desiredTemp > 80 {“Now cooling.”
if desiredTemp <=  {“Desired temperature Achieved.”
Caching made easy in android (with annotations)
Tags: android, kotlin, opensource
Published: 2020-01-18 06:27:45

ColdStorage (https://github.com/crypticminds/ColdStorage) library will allow you to create a caching layer in your android application with simple annotations.

Check out the indepth tutorial here :

https://medium.com/@crypticmindscom_5258/caching-made-easy-in-android-with-kotlin-part-2-61bb476063b4

If you like the library leave a star :) 

Contributions are welcome.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ok719cgnvx1ku6mi6a2q.jpg)
New Found Passion
Tags: html, css, coding, learning
Published: 2020-01-18 06:21:27

Less than a year ago I started learning about coding, HTML & CSS with a terrific group of young people, and everything was fine until we got to the wondrous JavaScript. I'm not saying everything went down down (in Chile we repeat words to emphasise something), but it seemed like my brain lost power and suddenly I felt like it was impossible to learn one more word! OK, things went down, but very slowly.

I was so excited about memorising new concepts, typing "var = something something, console.log("whatever")" and when the code worked it was an adrenaline rush like no other. But my classmates and I started experiencing a quiet frustration when the problems seemed impossible to solve and our faces had that "undefined" look for long minutes. I kept experiencing the lack of answers in my brain and one day I realised I couldn't do it anymore. That same day I learned it was the last day of classes. I felt a HUGE relief.

The problem was that the exhaustion seemed to kill this new found passion for coding, and I did not open my laptop for weeks. Why couldn't we just stick to the beautiful HTML & CSS like any healthy human being? Why did we have to dive into JS when life was so much easier without it?

After a few weeks of rest I kept thinking about coding, but whats coding without coding? ...to be continued.
Practicing Flexbox: How to Build a Portfolio Page With CSS & JavaScript
Tags: codepen
Published: 2020-01-18 06:04:01

<p>For details on how to build this, check out George Martsoukos’ tutorial <a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933"> 
How to Build a Static Portfolio Page With CSS &amp; JavaScript</a> on Tuts+.</p>

{% codepen https://codepen.io/tutsplus/pen/VNLrWj %}
React Navigation 5 for React Native: Getting Started
Tags: reactnative, learning, youtube, react
Published: 2020-01-18 05:44:36

I have put together a video guide on getting started with React Navigation 5 and its new dynamic component-based API.

Included in this video guide:
* Installing and setting up React Navigation 5
* Using its new component-based API
* Routing through your application
* Using dynamic updates with state

[React Navigation 5 for React Native: Getting Started with Installation, Routing and Dynamic Updates.](https://youtu.be/gJX8plp4_sc)

[![React Navigation 5: Getting Started](https://img.youtube.com/vi/gJX8plp4_sc/0.jpg)](https://youtu.be/gJX8plp4_sc "React Navigation 5: Getting Started")
Terraform Provider for Telegram
Tags: terraform, telegram
Published: 2020-01-18 05:36:03

*Originally published at https://blog.jiayu.co/2020/01/terraform-provider-for-telegram/ on 2020-01-14.*

Over the weekend, I wrote a [custom Terraform provider](https://www.terraform.io/docs/extend/writing-custom-providers.html) for Telegram:

{% github yi-jiayu/terraform-provider-telegram %}

[Terraform](https://www.terraform.io/) is an infrastructure as code tool which allows you to declaratively specify your infrastructure and reproducibly set it up.

My main goal was to have first-class Terraform support for setting a [bot webhook](https://core.telegram.org/bots/api#setwebhook). Right now, you can automate all the infrastructure for a Telegram bot except for setting the webhook, which has to be done manually or with a workaround like using the [`local-exec`](https://www.terraform.io/docs/provisioners/local-exec.html) provisioner.

With the Terraform provider for Telegram, a bot webhook can be declared as a Terraform resource:

```hcl
resource "telegram_bot_webhook" "example" {
  url = "https://www.example.com/webhook"
}
```

Creating, updating and deleting a bot webhook works as expected.

Besides setting a bot webhook, there is also a Telegram bot data source for getting details about the currently-authenticated Telegram bot:

```hcl
data "telegram_bot" "example" {}

output "bot_link" {
  value = "https://t.me/${data.telegram_bot.example.username}"
}
```


## Getting started

Since the Terraform provider for Telegram is a third-party plugin, you need to manually install it by dropping its executable into your user plugins directory. You can find precompiled binaries for your OS on the [releases page](https://github.com/yi-jiayu/terraform-provider-telegram/releases), or build it from source with a Go toolchain (Go 1.13 or newer).

The user plugins directory is located at `%APPDATA%\terraform.d\plugins` on Windows, and `~/.terraform.d/plugins` on all other systems. See the [Terraform documentation on third-party plugins](https://www.terraform.io/docs/configuration/providers.html#third-party-plugins) for more information.

Once you've installed the plugin and added some Telegram resources, you'll need to run `terraform init` again for Terraform to pick up the new provider before you can run `terraform plan` or `terraform apply`.

## Support

If you're already using Terraform in your Telegram bot projects, give the Terraform provider for Telegram a try! If you aren't already practising infrastructure as code, it's a good opportunity to get started! Contributions on GitHub are welcome.

I've also applied to have the Terraform provider for Telegram listed on the [Terraform community providers](https://www.terraform.io/docs/providers/type/community-index.html) page.