teleren/devto huggingface dataset:
WhatsApp Done. What about the Other Ones !!! - Cryptomator
Tags: privacy
Published: 2021-01-25 09:01:08

In the past few weeks, there has been a massive exodus of WhatsApp to more privacy-friendly messaging.

This is great news because it shows that the general public understands the issues surrounding their privacy.
But messaging is only one step, I suggest you do the same here with any cloud service you use, such as DropBox, Onedrive or Google Drive.

We pay for its services to host our data, make it available all over the world and secure it, whether against loss or attackers.
But we don't pay them to use our data.

It is not known if this is the case, but when in doubt, it doesn't hurt to be ready.

I suggest that you put all of this in place and take full control over the data you share.
And all this really very simply.

---

You follow me ?!! Here we go.
{% youtube 865jued0fPE %}
<figure>
  <figcaption>Video with French Audio & English Subtitles</figcaption>
</figure>

---

*If you like this content, push the like button, that helps spread the message.* 👍🏼
*If you think it can be useful to anyone in your network, share it.* 📨

---

Video produced by [Wild & Secure](https://wildnsecure.com), your consulting firm to all things security and real estate.
If you want to receive weekly quality content about security, subscribe to our newsletter [on our website](https://wildnsecure.com/contact).
Understanding Docker: part 28 – Build images
Tags: docker, devops, beginners, cloud
Published: 2021-01-25 07:49:15

---
title: Understanding Docker: part 28 – Build images 
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3lkoqavvljqv5q76opqq.jpeg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with an explanation about how to build an image.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3lkoqavvljqv5q76opqq.jpeg)

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

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).
Project 36 of 100 - Dreams Destroyed by CORS
Tags: react, javascript, 100daysofcode
Published: 2021-01-25 08:15:20

*Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://compras.unicornplatform.com/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-37-compras-v1)

I am officially done with week 2 building a startup idea for [Pioneer.app](www.pioneer.app). If you're interested in creating a startup, or even just pushing out a product, I highly recommend you check them out to experience a fun gamified way of building in a social setting with concrete checkpoints along the way.

Today I tried for 3 days to make a landing page for my product. The landing page was easy, but getting the API call to work was seemingly impossible and I couldn't fix the issue before the deadline for Pioneer.

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

Seriously, I've never run into this CORS issue before. Does anyone know how to fix it? Will it persist when I put it on Netlify? I'll have to continue debugging next week.

With one hour to go, I hopped on a cool site-builder called Unicorn Platform and cheated. But, they did help me make a nice, responsive site in under an hour.

I'm a little disappointed I couldn't get the MVP going but still happy I was able to crank out something for the Pioneer tournament- a landing page! A crucial first step for a startup even before your MVP is ready.

Looking forward to learning more about properly fetching data in React in the week to come.

5/5 stars - would no-code again :)
How To Stream Mp3 With NodeJS To HTML Audio Tag
Published: 2021-01-25 08:01:04

In this article we are going to make a simple nodejs API endpoint that streams an mp3 file hosted on publicly anywhere example:
- Amazon S3
- Cloudinary
- Megaphone
- Public mp3 file

## Prerequisites
- Nodejs Basics
- Used Axios request library
- Express basics
- Hosted audio

> Note: This is not a scalable way to stream audio, there are better ways by handling the streaming using HLS and FFmpeg on a server somewhere. You can use this script to stream and binge your favorite podcast.

## Let's get started
First, we need to setup our project:
```bash
yarn init
```
Fill out the prompts or just work with the default values by adding `-y` argument at the end.

Next, we need to install relevant npm packages
```bash
yarn add express axios
```
Let's create our endpoint
```javascript
// We will use this to make HTTP request to the mp3 link
const axios = require("axios");
// adapters are axios modules that handle dispatching a request and settling a returned Promise once a response is received.
const httpAdapter = require("axios/lib/adapters/http");
// express is lightweight web framework
const express = require("express");

// Initialize express and assign to variable app
const app = express();

const INPUT =
  "https://dcs.megaphone.fm/ADV3183643348.mp3?key=c3dc25ae82cc18218902aa6a0675798a";

app.get("/audio", (req, res) => {
  axios
    .get(INPUT, { responseType: "stream", adapter: httpAdapter, 'Content-Range': 'bytes 16561-8065611'  })
    .then((Response) => {
      const stream = Response.data;

      res.set("content-type", "audio/mp3");
      res.set("accept-ranges", "bytes");
      res.set("content-length", Response.headers["content-length"]);
      console.log(Response);

      stream.on("data", (chunk) => {
        res.write(chunk);
      });

      stream.on("error", (err) => {
        res.sendStatus(404);
      });

      stream.on("end", () => {
        res.end();
      });
    })
    .catch((Err) => {
      console.log(Err.message);
    });
});

app.listen(4000, () => {
  console.log("Server is running");
});
```
[Continue here](https://blog.bywachira.com/post/stream-mp3-link-to-html-audio-tag)
What is Semantic HTML and why you should know about it?
Tags: html, webdev, beginners, codenewbie
Published: 2021-01-25 07:55:02

#Overview
[Merriam Webster](https://www.merriam-webster.com/dictionary/semantic) defines the word Semantic as *of or relating to meaning in language*.The meaning of the technical term semantic is no different. Semantic HTML means using meaningful tags, elements which will make sense for developer as well as the user. There are many special purpose elements in HTML, which we should use for their intented purpose as much as possible. Let's know why but first lets see some examples of semantic HTML elements.

`<form>`, `<article>`, `<button>`, `<footer>` etc

# Why should we use these?

Why to use Semantic HTML when we can use CSS and Javascript to make any element behave in any way we want? Why should I use `<button>` to create a button when I can use `<div>` for creating almost everything including a button.

Look at some points. If we use semantic HTML tags then:

1. HTML sematic elements has some suitable styling applied by default.
2. Keyboard Acsessibility - User can navigate using tab and can select things by enter or return key on keyboard. This isn't possible when we use `<div>` instead of `<button>`.
3. Faster site, better for mobile. Semantic HTML is lighter in file size than non-semantic code.
4. Easier to make website responsive.
5. Good for SEO (Search Engine Optimization). using semantic code can make the website appear in top Search results.
Easier to develop. Makes code more readable.
6. Easier to apply style using CSS and manipulate using JS beacuse there are element names to use as selectors.
7. Useful for user using Screenreaders. when we use <heading> instead of some other non-semantic element then
     Screenreaders read and mark heading as progress through 
       the content, so it will work fine.
     It will work when it is asked to jump to next or to 
       previous headings.
     It can get list of all the headings

These are some of the roughly 100 semantic [elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) available to use and make things easier. According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities." Learn more about these new HTML5 elements here:
* [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics)
* [W3Schools](https://www.w3schools.com/html/html5_semantic_elements.asp)

This is my first tech article, any feedbacks appreciated.
Mobile-Friendly, LAMP-Based, F/OSS Forum Software
Tags: php, mysql, linux, opensource
Published: 2021-01-25 07:34:24

I have yet to see any LAMP-based forum software that is at least as robust as FluxBB yet is either Mobile First or Mobile Friendly in design. Even mobile themes I've seen make you squint to see stuff.

It's time to build one. It also could be built with separation of concerns, KISS, good security, and plugin support. No need for some complex framework like Laravel. Should load easily on shared hosting with and without hiding PHP extensions.
My first Open Source library
Tags: typescript, showdev, javascript, webdev
Published: 2021-01-25 07:25:28

*Thanks to Lisheng Chang [@changlisheng](https://unsplash.com/@changlisheng) for making this photo available freely on [Unsplash](https://unsplash.com/photos/M2524ncJQ40) 🎁*

# Long story short

It all started as a pet project, *I know you understand me*.

But rapidly it became more like a developer need: to have something that works as you want it to, something you could share with other developers and be proud of it because, damn, you’ve just became part of an amazing ecosystem called Open Source!

I was finding myself in the need of using the plain JS SDK of Amazon’s Product Advertising API, [link here](https://webservices.amazon.com/paapi5/documentation/), but it was barely usable, with a lot of conventions, zero explicitness and a whole set of unreadable code.

Maybe it’s just me but in the past year I’ve started to appreciate when you jump into a project and you can understand easily how things get passed around. I needed Typescript.

There was little to no libraries as I expect them to be and finally I came to one conclusion: I needed to do it myself.

And I did it! 👇⭐️ 

{% github https://github.com/Pigotz/paapi5-typescript-sdk %}

![Honest work meme](https://dev-to-uploads.s3.amazonaws.com/i/bmaia13p0mti40ut8adr.jpeg)

# I need feedback 🙆‍♂️

This is a small project but a whole set of TS is involved and needs to be maintained ⚙️ 

This is my first time being the author of an Open Source repository so any feedback and proposal is welcome 🙏 

If you are just lazy, leave a GitHub ⭐️ and a 🦄 here, it would be enough for me!

Thanks for reading!
Git: Two ways to merge changes to the base branch from the feature branch
Published: 2021-01-25 07:18:24

Image credit: https://pixabay.com/

In this video tutorial, I'll explain 2 ways to merge changes to the base branch from the feature branch.

Let's learn together 2 ways to merge the changes to the base branch from the feature branch.
1. Normal merge and
2. Using the `--squash` option to squashing multiple commits into a single commit.

And let's also learn 2 strategies used by git to merge the changes based on the base branch changes.
1. Fast-Forward strategy and
2. 3-way merge strategy

[![Screenshot 2021–01–25 at 12.19.08.png](https://ucarecdn.com/88c7defe-220d-4d32-bd5b-752b39961a5a/)](https://www.youtube.com/watch?v=u8keDf6dnpk)

Please leave comments if you want me to cover a specific topic in the next tutorial.
Build a Real-time Chat App with Vue 3, Socket.io and Nodejs
Tags: javascript, beginners, vue, todayilearned
Published: 2021-02-08 16:01:09

---
title: Build a Real-time Chat App with Vue 3, Socket.io and Nodejs
published: true
date: 2021-01-25 07:00:00 UTC
tags: javascript,beginners,vuejs,todayilearned
canonical_url: https://medium.com/js-dojo/build-a-real-time-chat-app-with-vue-3-socket-io-and-nodejs-adc259dd1d07
---

[![](https://cdn-images-1.medium.com/max/1366/0*sUip-7XwOCWyydPG.jpg)](https://medium.com/js-dojo/build-a-real-time-chat-app-with-vue-3-socket-io-and-nodejs-adc259dd1d07?source=rss-8b0955f01559------2)

In this article, we are going to explore in-depth how to build a Real-time Chat App with Vue 3 Socket.io and Nodejs, we’ll also be learning

[Continue reading on Vue.js Developers »](https://medium.com/js-dojo/build-a-real-time-chat-app-with-vue-3-socket-io-and-nodejs-adc259dd1d07?source=rss-8b0955f01559------2)
Is React Native good for mobile game development?
Tags: gamedev
Published: 2021-01-25 06:50:29

React Native started on Facebook as an internal hackathon project and turned out to be so good that it became one of the best languages for coding that could build apps running on any platform. That's right, cross-platform apps are apps for Android and iOS that don't need to be built separately. So you get to create only one app and launch it on both platforms, cutting the work of production in half and doubling your scope.


It is a versatile programming language that is not limited to any one platform and is used for app development. It has been used to build widely common applications such as Uber and Airbnb. React Native is the future of hybrid apps for different reasons.


React Native enables developers to write code parts and reuse them on multiple platforms. They can easily adjust the code for the respective platforms by stylizing elements and describing the finer nuances after deploying the code.


React Native also has a range of pre-built elements in an open-source repository, in addition to code reusability. This implies that you can easily use components already generated by others created and uploaded to the library, enabling a great deal of speed of creation.


A simplified UI with a very well sorted implementation order is provided by React Native. This makes Respond Native-built apps quicker, more responsive, faster to load, and simpler to use. A number of React Native libraries that are supported only simplify the work.


The third-party plugin support is another big benefit React Native provides. So, you don't have to design a calendar from scratch if your e-commerce app requires calendar help. React Native enables you to scan for and simply incorporate a pre-built calendar available for use (there are many) into your app.


React Native is particularly well suited to app creation through modular design, live and hot reloading, declarative coding style, and a range of other capabilities. Rich community support and impeccable documentation make all of this much more worthwhile.


All-in-all, React Native is a great mobile programming language if you're looking to get on board quickly and create a cross-platform app that's quicker, easier, and still awesome.


Now many of company provide the best <a href="https://vasundharainfotechllp.com/react-native-game-development">react native development company</a> in the market for your business. there are With React Native, you can use excellent debugging and bug reporting software. You don't have to restore your application in order to see your updates and improvements.
Welcome
Tags: welcome
Published: 2021-01-25 06:44:37

Hi everyone, my name is Donal and I am from New York (the state, not the city). I am a junior at Penn State and I am a pursuing a degree in IST. Unfortunately, I have not been studying IST for very long, I have only been an IST major since my sophomore year (2019-2020). I originally went into IST because I wanted to be in an industry with a lot of jobs and have skills that are highly coveted by companies. However, I actually enjoyed learning about how technology works because to me it seemed like the knowledge and skills, I was learning was actually applicable and useful inside and outside of college. 

I enjoyed learning more about technology because I didn’t know a lot about it to begin with. I especially liked learning about technology that I encounter on a daily basis like the internet and knowing how it works. I am still very new to IST, so I have a lot to learn. One of the aspects of IST that I enjoy the most is coding. I have always liked creating things and I enjoy creating things using code. I am an amateur when it comes to writing code, but, based on my own coding experiences, it has given me a lot of appreciation for many of the everyday systems that we use and it impresses me how much time, effort, and thought must have been put into creating those systems.   

Some more information about me is that I am an avid reader and have read many books ranging from Dune by Frank Herbert to Frankenstein by Mary Shelley. I am also a massive comic book nerd and have seen all of the Marvel movies and have an ever-increasing comic book collection. However, books and stories are not the main focus of this blog. This blog will be dedicated to discussing many different technologies and how to use them. I am excited to learn more about new technologies and this blog will help me accomplish that.
Below is a link to a YouTube video about me explaining an everyday technology that I originally did not know a lot about: Touch Screens. 
[Link](https://youtu.be/s3Mx0wFmtuE)
Tips on Finding your Management Style
Tags: leadership, career, learning, softskills
Published: 2021-01-25 06:38:24

---
title: Tips on Finding your Management Style
published: true
description: Looking all around to find your management style
tags: #leadership #career #learning #softskills
//cover_image: https://direct_url_to_image.jpg
---

Jumping on a management position on a dev team for the first time can be tricky. Maybe you already had some experience leading large projects or being a scrum master, but taking on the challenge to lead a team is a whole different business and you might be a little unsure as where to start.

One of the most important things you should do is be intentional about finding your management style. Leading a team is not something you can just wing, and finding your style will help drive the decisions you make, but how to start?

# Looking all around
I found that one of the best ways to figure out my management style was reaching out and talking to people with different levels of experience.

## Look back
A great place to start is looking for some of the past managers you had that you admired and reaching out to them. This can be someone at your current company or not. Make sure to come to these catch-ups prepared with some questions in mind. You can ask things like how do you run 1-1s or how do you deal with someone that has low performance. Not only will this be a great help but it will also help you create a mentor-mentee relationship that can be very useful in the future.

## Look up
Your boss is your ally. Maybe you got this position because your he/she put their faith in you or maybe it just fell on your lap. Either way, don't be afraid to ask questions or share doubts with your manager. At the end of the day, the management of your team is also their responsibility. Another thing that might help is to try to find someone if your company with some years of more experience than you. If you don't know anyone reach out to your HR representative and they might help facilitating this connection.

## Look to the side
Just as you are going through this change, there are probably other people in your organization or in your network that are as well. Reach out to these people as well to catch-up every so often as you might have tips to share like books, articles, podcasts and conferences that are good resources for first-time managers.

## Look below
Lastly but not least important, talk to the people you manage. They know that it is your first time in a management position and that you are still figuring out how to do it. Make your relationship a partnership in which you both learn from each other and help each other grow. Ask for and be persistent about getting constructive feedback, and when you get it use it to your best advantage.
How to work with Dynamic ion-segment in ionic with active class.
Tags: ionic, angular, typescript, tutorial
Published: 2021-01-25 06:00:02


What is ion-segment or segment?

Segments are a collection of related buttons displayed in a horizontal row. It can be placed inside of a toolbar or the main content. The functionality of the Ionic segment is the same as Ionic tabs, where you select the one tab that will deselect all other tabs.

So let's dive straight to coding guys.

Come to think of scenarios where you have a list of objects in an array coming from the server-side of your application and you want to be able to loop them on a segment in an ionic app, that seems hard right?
![carbon](https://dev-to-uploads.s3.amazonaws.com/i/9be4pnt7tjjhi1o7kus6.png)
Like what we have an array of objects.

![carbon](https://dev-to-uploads.s3.amazonaws.com/i/gtd3uwlbclbl095qfxwn.png)
the other image above subcribe to an endpoint get that returns an array of objects also.

With above image i hope you have been able to have your array assigned to a variable.

Let's move further to the HTML Part.  
![carbon-3](https://dev-to-uploads.s3.amazonaws.com/i/cfpwnv4vsxrsi5eig2xi.png)

We would break the above codes down into pieces. we go by looping out what we have in our sub_categories array, then we bind every of the select button value to an ngModel name category, Note we have a click event function called, selectTab.

Hope the process is getting more simpler? which i believe your answer to that is yes.

We have to find a way to display the detail of the specific segment button clicked.
![carbon-5](https://dev-to-uploads.s3.amazonaws.com/i/2qzn0cx17zs3nxgiiljf.png)
you have the above code to target each selected segment button display there data when selected.
![carbon-6](https://dev-to-uploads.s3.amazonaws.com/i/cbkytj2lmp7kqd0khm2t.png)


Thanks for Reading!
What do you think of this post? I feel like I had to write about it. Leave comment below and I'll get back to everyone!

See you in the next one ✌  

You can follow me on Twitter https://twitter.com/femithz