teleren/devto huggingface dataset:
How to change the font on your Facebook posts and messages using a third-party website

Tags: ios, android, instagram, facebook
Published: 2020-09-10 14:07:24

> You can change the font of your Facebook posts or messages using the LingoJam text generator.

> To use the LingoJam text generator, simply type your message into the platform's font generator, select the style of font, and then copy and paste it into your Facebook post or message.

## Best Way To change the font on Facebook

1. Go to [Cool Fancy Fonts or Text Generator](https://coolfancyfonts.com) on your PC or Mac computer. 

2. Type the text that you want to appear on Facebook into the box on the left. As you type, your message will appear in a variety of text styles in the box on the right. 
Type your text into the box on the left.


3. Scroll through the list of generated fonts in the box on the right until you find the one that you want to use. Then, click and drag your mouse over the text to highlight it.
Select your font from the box on the right.


4. If you're using a PC, right-click and then click "Copy" to copy the text, or use the "ctrl + C" keyboard command. On a Mac, right click or hold "command + "C."

Select "Copy."

5. Go back to Facebook and paste your new text into your post or message. On a PC, right click then click "Paste" or use the "ctrl + V" keyboard command. On a Mac, right click or press "command" + "V" on your keyboard.

Other Best Text Generator for varies Text styles to use as you need [undertale text generator](https://coolfancyfonts.com/undertale-text-fonts-generator.html) 
[crossed out text generator](https://coolfancyfonts.com/crossed-out-text-generator.html)
The React Typescript path - 2020
Tags: react, typescript, javascript
Published: 2020-09-10 13:57:30

---
title: The React Typescript path - 2020
description: Learn to use React with TypeScript
canonical_url: https://blog.alexandrudanpop.dev/posts/the-react-typescript-path-2020-1hjo
---

I get this question from time to time:
> How to start using **React** with **Typescript** (TS)?


Let's be honest, Typescript can be intimidating if you've never been exposed to a typed language before. 

In this article, I will explain how you can start programming UI's with **React** and **Typescript**.

### Who should consider this
- intermediate JS developers
- React developers that want to learn writing React code in TS

## What's the minimal start
I encourage people to start learning React without TS first. After you build a few sample apps using just React and JS, you can start looking at:

**1) A TS Crash Course** 
This will teach you the bare bones of TS, that you need to get a hang of before combining it with React.
{% youtube rAy_3SIqT-E %}


**2) A a React TS tutorial**
This will teach you the basics of what you need to know for successfully using TS with React.
{% youtube Z5iWr6Srsj8  %}

**3) Read the React-TS Cheat sheet**
This can be found [here](https://react-typescript-cheatsheet.netlify.app/), and it's gold. ⭐ 
A very handy resource of how to use TS in React Function components, classes, hooks, etc. There are even migration guides, telling you how you could approach the migration from a JS-React app to a TS-React app.
![React-TS-Cheat-Sheet](https://dev-to-uploads.s3.amazonaws.com/i/97q437b3v3so1l8qvujw.PNG)

## How to really learn 🧠
Don't just watch the tutorials, but actually have them set up on your computer and follow them, while you watch the videos. After you watched the videos, try to tweak those small applications and extend them a little bit.

Don't rush the process and be consistent. You cannot learn everything about using React with TS in a few days. Be consistent and build some things with those technologies. 🏗️  

## Live long and enjoy TS
Hope this helps, now you should be able to use TS in any React codebase, enjoy!

![Live long gif](https://dev-to-uploads.s3.amazonaws.com/i/0tro5mcnzsm4zmzf80dr.gif)

Leave a 🧡 & 🦄 if you like this article, also check out my [Twitter](https://twitter.com/alexandrudanpop) where I post more cool content.

👇 **Comment below** 👇
What other cool learning materials exist for React & Typescript out there?
Dev.to Writing: RSS
Tags: meta, writing, tutorial, howtodevto
Published: 2020-09-10 13:53:01

_Cover photo by [Philipp Meeh](https://unsplash.com/@philmeahh?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/feed?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText")_

---

I saw a question yesterday about RSS:

{% link https://dev.to/rogue_halo/rss-for-dev-1k20 %}

The short answer is: Yes! DEV automatically provides RSS feeds. Erick Ruiz de Chavez already [beat me to the answer](https://dev.to/eruizdechavez/comment/14ina); but let's expand this.

Looking at the [FAQ](https://dev.to/faq), all the way at the bottom, we see three examples of feeds that can be followed:
1. The main https://dev.to/feed (for those just wanting the firehose of DEV content)
2. User based feeds, like https://dev.to/feed/kallmanation
3. Tag based feeds, like https://dev.to/feed/tag/meta or https://dev.to/feed/tag/writing or https://dev.to/feed/tag/tutorial

---

Think something else should be an RSS feed? Start a [feature request](https://github.com/forem/forem/issues) on [forem](https://github.com/forem/forem) (the open source software powering DEV).

---

Thanks for reading!

If you have a question of your own about DEV, just ask in a comment, I read all of them. I love trying to help others answer their questions!
Reactjs Learning Experience (v1.0)
Tags: react, javascript, webdev, productivity
Published: 2020-09-10 13:49:54

Hello Developers !!! 🖥️
First of all sorry that I was not active for quite a few months and didn't write anything for you guys😔

There was a reason, **I was so busy in learning React.js.**🤓

####Whats React??
_Basically, React.js is a javascript based library developed by Facebook for making user interfaces easier to manipulate and make them lightning fast using component-based architecture._

You can read the [Official Docs](https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet) too. 😇 

So, let's begin with the topic of what I want to share🧐

Basically today I want to share one thing from my learning journey of React.js and I think If anyone ask me to give some tips to be a better developer, this will be my only tip which I am going to give you all in few minutes.😲

**Let's start from Day 1:** when I decided to learn React.js I was so worried about where to learn from??  Everyone's learning psychology is different so in short, I decided to learn from Udemy!😵

I took a course of React.js and start learning, the course was of 42 hours of video tutorials😵, and honestly, I am just able to complete 10 hrs of tutorials in 5 months.🤭

After 2.5 months of learning from the course I felt dishearted😞, I feel like I am in **tutorial hell** now😰. 

It's not the first time for me that I was stuck in a tutorial hell so I know how to come out of it😎.

__I quit the course for 1 month and start to build my own project, instead of thinking about that I am not ready, I don't know enough React.js I just jump into it and guess what ??? In first few days of building my own project it feels like It's so hard to think in react but just after few days It feels like Its fun, I enjoyed It.__ 😇 

The project gives me a ground to apply whatever I have learned in that 2.5 months about React.js and when I got stuck I write my query on Facebook groups, StackOverflow, or googled It.✍️

And now I came back to the course again and I feel satisfied that I know What I have learned and what I am going to learn.👨‍🎓 

**__So the Advice in short: Build your own project with the knowledge you have just took the start, google it apply it, and get results.__**

**Note:**
I will share the course link and my project links soon in coming post.😀

That's all for today, thanks for reading my post and don't forget to follow me and also you can ask me anything in comments below, I am open to reply.🙋🏻‍♂️

Happy Coding !!!👨🏻‍💻
Let's get ready for Hacktoberfest 2020 !
Tags: hacktoberfest, challenge, github
Published: 2020-09-10 13:30:56

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

Stay tone for Hacktoberfest 2020 !
Link: https://try.digitalocean.com/hacktoberfest-2020/
Reversed Strings with Python
Tags: python, 100daysofcode, codenewbie, beginners
Published: 2020-09-10 13:29:50

{% youtube V3p4OqTxM-A %}


To solve this problem, we’ll take 5 different approaches.
Enjoy the video 😀🙏

Also written version https://losseff.xyz/katas/011-reversed-strings/python/
What is Directives in Angular ? 
Tags: angular, typescript, javascript
Published: 2020-09-10 13:27:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bzf78fjelvq0enrpn3lc.png)
If you have been working on Angular you must heard the keyword Directive. What is Directives in Angular ?
Lets take a look!
Directive is a Decorator that marks a class as an Angular directive. You can define your own directives to attach custom behavior to elements in the DOM. 
So how many types of Directives exist in Angular?
Basically, there are three types of Directives that exist in Angular. But it's not done you can also create your own Directive in Angular. Will discuss...
1 #Component Directive
Components are just directives with templates they use the directive API and give us a cleaner way to define them. it doesn't manipulate the Dom it creates them.

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

2 #Structural Directive
Structure directives manipulate the DOM elements. These directives have a * sign before the directive. For example, *ngIf and *ngFor etc.

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

3 #Attribute Directives 
Attribute directives are used to change the look and behavior of the DOM element. For Example, NgStyle, NgClass etc.

Note* Structural Directive is used to manipulate the Dom while Attribute directives are used to change the look and behavior of the DOM element.
Open-Source Community Growth - how we've tripled it within 5 weeks
Tags: opensource, github, machinelearning, javascript
Published: 2020-09-10 13:27:09

As an entrepreneur, there’s nothing more exciting than achieving the goals you set. It’s not about project management, social proof, or product-market fit. It’s just the feeling that you’re doing something right. In this post, I’d like to share with you 5 milestones we’ve achieved in the last 5 weeks, how we did it and what were the results.

Read the full article here: 
https://blog.xscode.com/1379/5-milestones-weve-achieved-in-5-weeks/
On Desire Paths & Inclusive Design
Tags: surfaceduodev, beginners, mobile, design
Published: 2020-09-10 13:20:35

---
title: On Desire Paths & Inclusive Design
published: true
description: A series of posts on designing and developing for modern mobile environments with the user in mind!
tags: surfaceduodev, beginners, mobile, design
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7ssocjyz0lhopisxyxav.png
---

# About This Post

> This post is currently a placeholder for a talk I am giving today, to a group of student developers who are looking to explore ideas for social impact. Learn more here and check back later today (and this week) for longer posts and updates

{% twitter 1304029608455667712 %}

---

## Update: Presentation Slides

Here are the slides from my talk - I'll also add a couple of posts to this series to expand on some of the ideas I talk about here:

{% speakerdeck df88290dc43f4618aa8eb0ede00b9e3c %}

---

## Motivation

My motivation for doing *this* talk is simple. I am a long-time mobile developer and researcher, and also a recent developer advocate at Microsoft, focused on mobile and fusion dev teams. 

And over two decades I've seen the mobile landscape transform from a communications ecosystem (centered on the _phone_ application) to an information appliance (focused on _internet_ access) to a social appliance (focused on _media_ creation) to almost an extension of self - where my mobile device is now my virtual assistant, my development environment, my entertainment complex, my personal album and a lot more.

The problem is that all mobile devices are not equal, all mobile environments are not consistent, and all mobile users are not identical. And so, as we keep evolving the ecosystem, we unwittingly grow the gap between what users want - and what they actually get.

Unless we become more intentional in our design-dev workflows, this gap will only continue to widen.

## Desire Paths

Desire Paths are the organic trails created by natural human movement in a physical environment (like a college campus or a hiking trail). They emerge as _preferred shortcuts_ or alternatives that are taken because the _constructed_ paths are either non-existent or ineffective _for that user's context_.

Here's a a sketchnote on what desire paths are and how they relate to ideas like wayfinding

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


# The Design-Dev Workflow

Find this interesting? Check back here later this week for a longer essay (or series of posts) that break this down into a design-development workflow for building more inclusive mobile apps for next-generation devices and ecosystems.
Work-life balance
Tags: career, working, lifebalance
Published: 2020-09-10 13:19:33

If you are a developer who follows many wonderful people on Twitter it's sometimes hard to see how any of them have real lives. People always seem to be coding, learning, discussing code, answering questions, and never have what we shall call a normal life. Cooking dinner, paying bills, going out on date night, having a full-on Netflix and chill session. I have noticed it and always wonder if as a developer I do enough. 

Do I do enough to stay current, to stay in the know, tech changes so quickly and every day there seems to be a new Javascript framework or a new way to do the thing you've been doing for years. I read sometimes with envy at all these wonderful CSS animations or the way a certain project was structured, seeing people on there #100Daysofcode journies, learning new wonderful things.

And then I realise I work 60 hours a week, senior front end developer and I have meetings, sprints and Pull Requests to review and that's not even before I start my code and any requests I have to do. By 5:30 all I want is my dinner and some TV or music, looking at code is the last thing on my list.

My point to this post is when you finally get into it, when you finally have a job and are working everyday with your eyes buried in a screen and looking at code, it takes its toll. You have to find time to relax and find the perfect work life balance that works for you. 

Like the great Tallahassee says in Zombieland - 'Gotta enjoy the little things'
Getting better with time
Tags: javascript, webdev, motivation, watercooler
Published: 2020-09-10 13:17:17

> The first version can never be good enough but subsequent versions will be always better

When we start with any application development, it will not look good at first but it doesn't mean that it is not good, it's just at its initial phase. It will evolve into something better each time through continuous efforts.

So I wanted to share one such story of mine. A competition was held in my organization where we have to create a product of music visualization. 

So I started my research, looked into a few libraries and finally selected Three.js to show 3D effects on music beats.

I had not ever done "Hello World!" in Three.js but It was a chance to learn so I started and created the first version.
Here is how my first version looked like
{% youtube 6OICI1HiVAQ %}

So as the above video, I have created something that visualizes music...But there are many things missing, I did not like that first version and I did not have much time. But luckily I was not demoralized by that, and instead I kept improving it...

There are few sleepless nights I spent on it as I also have a job in the day time. But it was easy as I was interested and enjoying it. And most importantly at each step, I was seeing an improvement. 

So here is the evolved final version which got me the win.
{% youtube H4Nzaoy0mA4 %}

>“You'll never reach perfection because there's always room for improvement. Yet get along the way to perfection, you'll learn to get better.”
Accidentally Destructuring in Ruby
Tags: ruby, bug, testing
Published: 2020-09-10 13:07:17

The funniest thing happened to me yesterday. Funny now I guess. At the time it was distinctly _unfunny_. I struggled for hours on the simplest unit spec that was failing.

The response I was expecting to see in my test:
```ruby
{:response=>{
   "pspReference"=>"883598242852329J", 
   "resultCode"=>"Authorised", 
   "amount"=>{"currency"=>"AUD", "value"=>1000}
   },
 :header=>{ "Sandwich"=>"Eggplant-Parma-Sanga"},
 :status=>200}
```

The failure message, less than helpful:
```
TypeError:
  no implicit conversion of Symbol into Integer
```

Staring at the code.
Staring at the spec.
Thinking I'd done something stupid in my `before` block. 

A `binding.pry` in my code shows me the Hash I'm expecting to be able to access with a `:response` key is coming back inside an Array?!
```ruby
[{:response=>{"pspReference"=>"883598242852329J", "resultCode"=>"Authorised", "amount"=>{"currency"=>"AUD", "value"=>1000}},
  :header=>{"Sandwich"=>"Eggplant-Parma-Sanga"},
  :status=>200}, “api_version”]
```
You wot m8! 

It took a second pair of eyes to help spot the error.
```ruby
def initialize(result:, api_version:)
  @result = result,    # <-------- this stray comma
  @api_version = api_version
end
```
As soon as that silly stray comma was pointed out I laughed out loud.

I was accidentally **Destructuring** in Ruby and I'm chalking up the fact I knew that's what was happening as my win here! And also that I'd been meaning to write about Destructuring in Ruby earlier, so, win win I guess 🤷‍♀️

Destructuring is described in [Common Lisp the Language, 2nd Edition](http://www.cs.cmu.edu/Groups/AI/html/cltl/clm/node252.html) as the ability to "bind a set of variables to a corresponding set of values anywhere that you can normally bind a value to a single variable".

In Ruby we assign values to a single variable like this
```ruby
my_choice_sandwich = "eggplant parma"

# irb(main):001:0> my_choice_sandwich
# => "eggplant parma"
```
Destructuring allows us to do multiple assignments with a simple comma separating the multiple values like so
```ruby
my_choice_sandwich = "crumbed eggplant", "sugo sauce", "mozzerella"

# irb(main):001:0> my_choice_sandwich
# => ["crumbed eggplant", "sugo sauce", "mozzerella"]
```
Above we see the Object on the left (the "variable") is an Array because we are passing in multiple values on the right.

You can set multiple variables (on the right) with corresponding values (on the left).

```ruby
sandwich, pizzas = "salad", {vege: "mushrooms", meat: "aussie"}

# irb(main):001:0> sandwich
# => "salad"

# irb(main):001:0> pizzas
# => {:vege=>"mushrooms", :meat=>"aussie"}
```

Above you'll see:
`sandwich` returns a **String** because only one value is being assigned on the right.

`pizzas` returns a **Hash** as that was the corresponding value on the right.
 
Isn't learning fun!
CLI tools I use
Published: 2020-09-10 12:57:19

I recently reinstalled Ubuntu on my Windows 10 machine using WSL2. But before I did that, I noted down the tools I frequently use. In the hopes this might be helpful, here are the tools in no particular order.

### 1. [Neovim](https://neovim.io/)
Although VScode + VScodeVim is my daily editor, I am still somewhat [attached](https://github.com/ducaale/dotfiles/blob/master/neovim/.config/nvim/init.vim) to it. 

### 2. [fzf](https://github.com/junegunn/fzf)
I mostly use this to search through my commands history

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

### 3. [ngrok](https://ngrok.com/)
This is useful as a proxy both inspecting HTTP requests/responses and for temporarily exposing your local-server to the internet. 

### 4. [qrcp](https://github.com/claudiodangelis/qrcp)
Whenever I need to send files between my phone and computer, this is the tool I reach if I don't have a USB nearby.

![qrcp](https://dev-to-uploads.s3.amazonaws.com/i/e7w2v2hqyg7lfu0wdlmn.png)


### 5. zsh + [oh-my-zsh](https://ohmyz.sh/)
oh-my-zsh is packed with features that I keep discovering every day. For example, if you type a letter and press up, you will only get the entries that begin with that prefix. Not to mention the awsome git integration and preinstalled prompt themes. 

### 6. [HTTPie](https://httpie.org/)
A great alternative to Postman or curl + jq.

### 7. [fx](https://github.com/antonmedv/fx)
A modern terminal JSON viewer with support for collapsing nodes.

### 8. [Z](https://github.com/rupa/z)
I use this tool whenever I need to quickly navigate between frequently visited folders. This comes pre-installed with `oh-my-zsh` and just needs to be enabled in its plugins section.

### 9. Others that I don't use so often
- [ripgrep](https://github.com/BurntSushi/ripgrep)
- [fd](https://github.com/sharkdp/fd)
- [neofetch](https://github.com/dylanaraps/neofetch)
Harmony OS 2.0
Tags: news
Published: 2020-09-10 12:47:57

# Harmony OS will be coming to smartphones next year (2021)

Huawei has confirmed that - beta of the Harmony OS 2.0 SDK will be available from September 10, 2020 (today). Aimed towards smartwatches, TVs, and car head units initially. 

A beta SDK version for smartphones will also be made available around **December 2020**.

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

# OpenHarmony

This project would be the open-source version of the Harmony OS project. The idea here is pretty similar to the AOSP project for the Android OS - providing an open-source approach for the masses to work on independently

> Huawei says it will fully open Harmony OS before October 2021

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9mmls1d1c85pocdi791l.jpg)
JavaScript currying 3 - Compose
Published: 2020-09-10 12:42:28

The `compose` function in the code below takes any number of functions, returns a function that takes the initial value, and then uses the `reduceRight` function to iterate right-to-left over each function `f` in `functions` argument and returns the accumulated value `y`. In other words, the `compose` function creates a pipeline of functions with the output of the function is connected to the input of the next function.

```js
const compose = (...functions) => (x) =>
  functions.reduceRight((y, f) => f(y), x);

const g = (n) => n + 1;
const f = (n) => n * 2;
const h = compose(f, g);
h(20); // => 42
```