teleren/devto huggingface dataset:
Why do we have to write functional instead of class components?
Tags: react, javascript, frontend, webdev
Published: 2020-08-14 19:14:08

Yo! Today we talk about nowadays of ReactJS. The front-end industry is growing up increasingly, and we have to get used to it and prepare for all changes in the programming that can happen.

Recently, we write all ReactJS applications on class components. Now, we have React Hooks that provide our functional component, for example, with the state.
Well, let's talk about the advantages of the functional components. Take a look at this small class that just handle change
and render it.
![Class component](https://dev-to-uploads.s3.amazonaws.com/i/5jnkvq1028wbbl1awc67.png)

It looks a bit great. Next, I rewrite this component to functional.
![Functional component](https://dev-to-uploads.s3.amazonaws.com/i/0zyvrcwjw3b5lylmmyrq.png)

Well, it is a small example, but even it shows us how functional components reduce code, and it is the first advantage.

**Functional components reduce approximately 25 percent of code that is in class components**

**The second reason is that React is going to functional programming.**
The official documentation says that it is good to
practice using Hooks in new and non-critical components. It does not mean that class would not be supported in the future, it will.

**The third reason is not to think about context.**
If you write on class, you always thinking about how not to lose context and bind all methods. In the function, you can forget about it in most situations that can happen.

**The last reason is reusability.** In the function, you can reuse logic, for example, by creating a custom hook and reuse it in every component you want. In class, you can't do it, you must rewrite the whole component.

So, I recommend you to write functional instead of class components.
#30DaysOfCJS: Even Faster: now with Functions!
Tags: community, lambda, function, javascript
Published: 2020-08-14 19:12:03

---
title: #30DaysOfCJS: Even Faster: now with Functions!
published: true
description: #30DaysOfCJS Day 13, Even Faster: now with Functions!
tags: community, lambda, function, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/aa3u7andjeqj4qcesj7d.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 13 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**Even Faster: now with Functions! // Brian Leroux // CascadiaJS 2018**

{% user brianleroux %}

If you'd like to watch the talk, here is the Youtube link.
{% youtube KkJ3DLDUfUY%}

Further readings:
- [Architect](https://github.com/architect/architect)
- [Begin](http://begin.com/)
Top 5 Books Each Programmer Must Read During Their Entire Life. Part 4
Tags: books
Published: 2020-08-14 19:07:39

“Clean Code” by Robert C. Martin.

The main idea of this book is make a developer follow the principle of “Leave the code cleaner than you found it”.

This relatively big book of over 300 pages describes the problem of writing the so-called “Clean Code”. It is written very involving, so reading it will take only several days, but the effect will last for life.

The book is rich of clear theoretical statements and code examples. The principles of developing a clean and qualitative code described by the author can be easily applied on practice, making a significant addition to the knowledge obtained from other books. The reason is that the book contains many practical advices for code improvement, as well as technique for assessment of quality of libraries and apps.

The book has several parts that describe both the beginning of professional programmer’s path (techniques, patterns, general principles) and its peak — debugging the existing code, and developing new software.

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

We also would like to mention the paragraph about multi-threaded applications, which is not common for that type of books.

From the programmer’s point of view, this book’s context is its orientation towards Java software. It has examples of software in this language, as well as signs of both “clean” and “dirty” code. 

That makes it somewhat difficult for those unfamiliar with this language but does not depreciate the benefit of reading it.

Stay tuned! In the Next and Final Part of this Series of Articles, we at WebSailors will tell you about the last book in our Top 5 — “The Art of Computer Programming” by Donald E. Knuth.


Read our new article - [12 Tips how to choose a software development company to not lose money](https://websailors.pro/12-tips-how-to-choose-a-software-development-company)
TS Tip 💁‍♂️ Avoid the boilerplate with `typeof`
Tags: typescript
Published: 2020-08-14 19:07:34

# TLDR 😎
{% twitter 1292936831114387456 %}

# What issue are we solving here? 🤔
We all love TypeScript because it allows us to declare and enforce certain contracts for our types. E.g.
```ts
interface User {
  devCommunityUsername: string
  awesomenessLevel: number
}
```
Now we can reuse this type everywhere the `User` object is expected:
```ts
function iAmExpectingAUserHere(user: User) {
  // now I can safely access user.awesomenessLevel 🤩
}
```

However, there are instances where you have a huge object that you declare only once like:
```ts
const config = {
  username: 'Me',
  password: 'TheyAreWatching 😱',
  ... // imagine many more properties here
}
```
Say you want to reference the type of this object. However, you don't want to declare a type explicitly as it'll lead into duplication, and with duplication comes maintenance cost (e.g. every time you add a property you need to declare it for the sake of using it in this single instance 😒)

![Thinking...](https://media.giphy.com/media/26BoDGStUAafwdZII/giphy.gif)

# Solution: type inference to the rescue 🦸‍♀️
Turns out TypeScript has a special keyword to automatically infer the type of an existing object, which is exactly what we need here!
```ts
// use `typeof`
type Config = typeof config

// this is the same as:
type Config = {
  username: string
  password: string
  ...
}

// you can use it like 🤘
function doSomething(config: Config) { ... }
```

# Looking for more TS tips? 👇
I've recently started tweeting daily tips like the one above. If you've enjoyed it and want to continue learning, follow me for more [TypeScript tips](https://twitter.com/madyanalj) ✨

![Follow me for TypeScript tips](https://media.giphy.com/media/JUB4yOluSaRRsiK0Kt/giphy.gif)
Day 29: Github Profile Readme
Tags: 100daysofcode, github
Published: 2020-08-14 19:06:45

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7r02v08c0qiz31h6itvb.png) In the spirit of readme's i choose to add a github profile readme. I used the following resources
[How To Create A GitHub Profile README ](https://dev.to/m0nica/how-to-create-a-github-profile-readme-1paj)
[Readme Templates](https://github.com/ayushkumar-25/Awesome-Profile-README-templates)

I hoping i'll be back on track tomorrow, i've been a little exhausted.
Until then, that's it for today.
_Day 29_
Dev.to Writing: Assistant (to the) Post Manager
Tags: meta, writing, tutorial, howtodevto
Published: 2020-08-14 19:06:43

_Cover photo by [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/assistant?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)_

---

After [writing up your post](https://dev.to/kallmanation/dev-to-writing-the-two-editors-mel), [tagging it](https://dev.to/kallmanation/dev-to-writing-tag-you-re-it-10bb), and publishing; you might think all that's left to do is let those sweet, sweet unicorn reactions roll in!

But don't neglect one last very important step for your article's success. Post management.

On your published post's page or on [your dashboard](https://dev.to/dashboard?sort=published-desc), beside the `Edit` button, you should now see a `Manage` button. This will take you to a page with three main sections:

# Overview

The first section provides an overview of the article and three important actions:

1. Edit (same edit as other places)
2. Delete (scary!)
3. Pin to profile

![dev.to post management screen showing overall information and edit, delete, and pin to profile actions](https://dev-to-uploads.s3.amazonaws.com/i/lzqflro648cnse2vhyqm.png)

All I'll mention is that pin to profile brings the post to the top of your profile and is limited to 5 posts at a time being pinned (see [my profile](https://dev.to/kallmanation) for an example of what this looks like).

# Suggest a tweet

Probably self descriptive. Suggest a tweet to the staff. If they accept, they'll tweet your article out from one of the DEV twitter accounts!

![dev.to post management screen area to suggest a tweet](https://dev-to-uploads.s3.amazonaws.com/i/wqgqbhx28ht0koefv0w9.png)

# Target to experience level

If you wonder what this maps to; it corresponds to what people have self-selected from their [UX settings](https://dev.to/settings/ux).

![dev.to post management screen area to select post's targeted experience level between 1 and 10](https://dev-to-uploads.s3.amazonaws.com/i/lkvuk4hnj3n6b6c0djvo.png)

And don't worry about any negative repercussions from selecting the "wrong" experience level. From looking through [the code](https://github.com/forem/forem), this seems to only boost your post to those that match in experience level; there's no filtering for posts that are "too simple" or "too advanced". Not selecting an experience level will always be worse than selecting one.

---

Thanks for reading! I hope this helped you with some of the more minute details of post management on [dev.to](https://dev.to).

If you have a question about writing on DEV, just ask in a comment. I read all of them and would love to add another post in this series that will actually help other writers in this awesome community!
My First Front-End-Only Project
Tags: frontend, vue, showdev
Published: 2020-08-14 18:34:10

Hey guys!

Recently I decided to make a front-end-only application, since I felt that as a full-stack developer, I was lacking in my front-end skills. 
So here is a little post on how I created [moviez.io](https://www.moviez.io)

# Idea
I wanted to create something that would be challenging, but also useful. So after some time of thinking and brainstorming, I decided to go with movie-fetching app, which displays info about movies, TV series or actors.

# Frameworks
For JavaScript framework I decided to go with VueJS, since it is the primary FE framework that we use in our company and would benefit me the most to improve on it. 

I also went for [Buefy](https://buefy.org/) Vue package, which is built on top of [Bulma](https://bulma.io/) CSS framework.

# Data source
Since the idea was to create only front-end, the app had to fetch data from external API. I decided to go with [TMDB](https://www.themoviedb.org/) since it provides clean API interface.

# CI/CD
For the convenience reasons I also implemented simple CI/CD using GitLab's CD/CD system. 
It works in the following way: when I push changes to my development branch, project gets built and is deployed on staging AWS S3 bucket. When the *development* branch is merged into *master* branch, project is built and deployed to primary/production AWS S3 bucket. On production server there is also AWS CloudFront, that enables caching and overall better loading times.

# TODO
There is still a lot of improvements to be done. Here are some of them:
* Create and share list of your favourite movies / TV shows
* Enable users to write review to movies and rate them (even tho it will require some back-end action 😊)
* Improve overall page performance

# Conclusion
In the end, I feel like I have learned a lot through this simple project. Even through this project is relatively simple, I tried to follow [Vue good practises](https://vuejs.org/v2/style-guide/) and front-end good practices overall.  

So this is it from my part, if you have any opinions, well-intentioned criticism or just potential improvements, please do share them in the comments 🤗.
Check if PR titles follow contribution guidelines
Tags: actionshackathon, github, opensource, showdev
Published: 2020-08-14 18:25:21

### My Workflow
Contribution guidelines of popular projects often include a recommended title styling like this one from [facebook/docusaurus](https://github.com/facebook/docusaurus):

```
feat: allow overriding of webpack config
^--^  ^------------^
|     |
|     +-> Summary in present tense.
|
+-------> Type: chore, docs, feat, fix, refactor, style, or test.
```

[PR Title Checker](https://github.com/marketplace/actions/pr-title-checker) helps maintainers organise their projects better by tagging titles that do not conform to such guidelines. No, it doesn't check if the summary is in present tense 😅. At least not yet! 
<br/>

Pull Request Titles can be checked for certain prefixes (or even regexps, or both!) and tagged automatically if they fail to comply. This usually prompts the author themselves to fix it so that when a maintainer wakes up from their hard-fought night's sleep, they don't have to be faced with weirdly named pull requests even after they had it all perfectly laid out in the Contribution guidelines. Oh and btw, this little Github action can also show you if the author has _reaaaaally_ read the Contribution Guidelines ;)




### Submission Category: 

Maintainer Must-Haves (or Wacky Wildcards for Maintainers perhaps? 🤔)


### Yaml File or Link to Code

{% github thehanimo/pr-title-checker %}


### Additional Resources / Info

This was my first shot at building a Github action (and a DEV post!). Since it's just released, not many projects use it yet! (You can help change that [here](https://github.com/marketplace/actions/pr-title-checker) 🙂)

Would love to hear your thoughts below! 💭
How to embed Google Drive folders
Published: 2020-08-14 18:24:43

Many of my customers asked me how they could share files and photos in their websites and save some bandwidth/storage as well. 

Here's a quick tip. I hope that helps you to achieve the same goal as them.

1. Open the folder in Google Drive that you want to share
2. Right-click on it.
3. Select the option "Get shareable link"
4. Switch the permissions to "Anyone with the link" and set the role to "Viewer"
5. Copy the given link
6. Extract the folder ID from the URL, like this: 
```
https://drive.google.com/drive/folders/*ABCDEFEG223452345_A12*?usp=sharing
```

7. Copy the ID (e.g: ABCDEFEG223452345_A12)
8. Replace the placeholder in code below with the folder ID:

```
<iframe src="https://drive.google.com/embeddedfolderview?id={{ID_HERE}}#grid" width="100%" height="480"></iframe>
```

You're done!

[![Capturar.png](https://i.postimg.cc/L8dcwPn9/Capturar.png)](https://postimg.cc/GHQgsHFV)
Using Netlify Forms for a Contact Form
Published: 2020-08-14 18:08:06

Netlify is a great platform for hosting static websites. I used it to host my personal website. One feature I discovered while working on my website was [Netlify Forms](https://docs.netlify.com/forms/setup/#html-forms). You can use Netlify Forms to create a simple contact form. It's also great because by default, it displays a success message when a visitor submits a form.

The form was incredibly simple to set up due to great documentation. 

### Step 1: Create an HTML form
Add `name`, `method`, and `data-netlify` attributes.

```html
<form name="contact" method="POST" data-netlify="true"></form>
```

### Step 2: Spam prevention. 
You can add a honeypot field and/or a reCAPTCHA 2. Submissions that do not pass these filters will automatically be rejected.

#### Honeypot field
A honeypot field is a hidden form field that tricks bots into completing a field that humans can't see. So, if a form is submitted with the honeypot field completed, that form will be rejected.

Add a hidden honeypot field to your form by adding the `          netlify-honeypot="bot-field"` attribute to your <form> tag. "bot-field" is the name of the hidden field. You can pick whatever name you would like, just make sure that the name in the form tag matches the name attribute of the hidden <input> field.

So far, this is what the form looks this:
```html
<form 
  name="contact" 
  method="POST" 
  data-netlify="true" 
  netlify-honeypot="bot-field"
>
  <div class="hidden">
    <label>Don't fill this out if you're human: 
      <input name="bot-field"/>
    </label>
  </div>
</form>
```

#### reCAPTCHA 2
You can choose to add reCAPTCHA 2 instead or have both. Netlify provides a CAPTCHA you can use or you have the option of adding your own. I chose to add the honeypot field for my website because I don't like how CAPTCHAs look, but if you would like to add it to your website, then please refer to the [Netlify docs](https://docs.netlify.com/forms/spam-filters/#netlify-provided-recaptcha-2).

### Step 3: Add the other input fields you need to complete the form

```html
<form 
  name="contact" 
  method="POST" 
  data-netlify="true" 
  netlify-honeypot="bot-field"
>
  <div class="hidden">
    <label>Don't fill this out if you're human: 
      <input name="bot-field"/>
    </label>
  </div>
  <input
    name="name"
    type="text"
    class="nameZone"
    placeholder="Full Name"
   />
   <input
     name="email"
     type="email"
     class="emailZone"
     placeholder="Email"
   />
   <input
     name="subject"
     type="text"
     class="subjectZone"
     placeholder="Subject"
   />
   <textarea
     name="message"
     class="messageZone"
     placeholder="Message"
   ></textarea>
   <input type="submit" value="Send Message" class="btn" />
</form>
```

And that's it! You can log onto your Netlify account and click on your website to review recent form submissions. If you click on 'Site settings' and go to 'Forms', you can set form notifications so that you get a Slack or email notification.
Awesome Uses
Published: 2020-08-14 18:02:12

<h3>Development Tools</h3>
💻 <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">Visual Studio Code</a>
🍺 <a href="https://brew.sh/" target="_blank" rel="noopener">Homebrew</a>
⌨️ <a href="https://www.iterm2.com/" target="_blank" rel="noopener">iTerm2</a>
🐚 <a href="https://ohmyz.sh/" target="_blank" rel="noopener">Oh My Zsh</a>
🐙 <a href="https://desktop.github.com/" target="_blank" rel="noopener">GitHub Desktop</a>
<h3>Productivity Tools</h3>
📆 <a href="https://www.notion.so/" target="_blank" rel="noopener">Notion.so</a>
✅ <a href="https://todoist.com/" target="_blank" rel="noopener">Todoist</a>
🎩 <a href="https://www.alfredapp.com/" target="_blank" rel="noopener">Alfred</a>
🚀 <a href="https://matthewpalmer.net/rocket/" target="_blank" rel="noopener">Rocket</a>
🔑 <a href="https://1password.com/" target="_blank" rel="noopener">1Password</a>
🕶️ <a href="https://www.spectacleapp.com" target="_blank" rel="noopener">Spectacle</a>
☀️ <a href="https://justgetflux.com/" target="_blank" rel="noopener">F.lux</a>
✉️ <a href="https://sparkmailapp.com/" target="_blank" rel="noopener">Spark</a>
<h3>Marketing Tools</h3>
👨‍👩‍👧‍👦 <a href="https://www.hubspot.com/" target="_blank" rel="noopener">HubSpot</a>
🛍️ <a href="https://www.shopify.com/" target="_blank" rel="noopener">Shopify</a>
📫 <a href="https://www.salesforce.com/" target="_blank" rel="noopener">Salesforce</a>
🐵 <a href="https://www.surveymonkey.com/" target="_blank" rel="noopener">Survey Monkey</a>
📱 <a href="https://salesmessage.com/get-started-now" target="_blank" rel="noopener">SalesMSG</a>
🚀 <a href="https://www.retently.com/" target="_blank" rel="noopener">Retently</a>
⚙️ <a href="https://zapier.com/" target="_blank" rel="noopener">Zapier</a>
<h3>Desk Setup (/r/battlestations):</h3>
I use two 27" Acer CB271H Full HD Monitors. These can rotate for those long coding sessions and easily flip back for daily use.
Mac Mini (late 2014) that stays on the desk.
I currently use the HyperX FPS Alloy keyboard with Cherry MX Blue switches.
I have been a fan of the Apple Magic Trackpad for many years now, but I plan on upgrading to the Magic Trackpad 2.
I sit on a DX Racer OH/FH08/NR with rollerblade style wheels.
My desk is the typical IKEA Linnmon/Aldis setup that is 78" long.
<h3>Mobile Setup:</h3>
MacBook Pro Retina 15" 2015 - Intel 2.5ghz quad-core i7, 16gb ram, and 500gb flash storage.
iPhone XS Max 64gb
Anker PowerCore 26800
Western Digital My Passport 2tb
<h3>Gaming Setup:</h3>
TCL 55" 4k HDR TV
Nintendo Switch with Pro Controller
Elgato HD60S
<h3>Other Gear:</h3>
I have been using the Everlane Modern Snap Backpack since Christmas. Huge shoutout to my girlfriend Maddie, for seeing that I needed to replace my old bag and getting me this gift last year. ❤️
Accessibility - Running NVDA on a Mac
Published: 2020-08-17 15:10:44

---
title: Accessibility - Running NVDA on a Mac
published: false
date: 2020-08-14 17:52:03 UTC
tags: 
canonical_url: https://tomandrews.co.uk/blog/2020-08-14-accessibility-running-nvda-mac/
published: true
---

## Introduction

For the past month I’ve been work on an accessibility project. There are three major screen readers

- [JAWS](https://www.freedomscientific.com/products/software/jaws/)
- [NVDA](https://www.nvaccess.org/)
- [VoiceOver](https://www.apple.com/uk/accessibility/mac/vision/)

Given that JAWS is pretty pricey and has a steep learning curve I have mostly been focussing ongetting everything running well on NVDA and VoiceOver and getting support from other members of theteam to check JAWS.

For the past 8 years I have been working on a Mac. Whilst there is VoiceOver for Mac (which is notthe same as VoiceOver on iOS) NVDA is not available and only runs on Windows. To get this runningrequired a bit of work that I couldn’t find documented anywhere else. So here it is for you andfuture me.

## Instructions

1. The first thing is to get a copy of Windows so that we can run in VirtualBox locally. LuckilyMicrosoft provide [Window 10 images](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)for testing browsers on Windows. They expire after 3 months but saves £150.
2. Once you have Windows then you also need [VirtualBox](https://www.virtualbox.org/). If you havehomebrew you can install it with `brew cask install virtualbox`.
3. Now you need to load and boot the virtual machine.
4. Download and install [VirtualBox extension pack](https://www.virtualbox.org/wiki/Downloads) intothe VM.
5. Stop the VM.
6. 

Alter the VM Settings and under the audio tab.

  1. Enable Audio
  2. Set the `Host Audio Driver` to `CoreAudio`
  3. Set the `Audio Controller` to `Intel HD Audio`
  4. Under extended features ensure that `Enable Audio Output` is checked
7. Boot the VM and the audio should be working now. You can prove it by visiting YouTube or somethingsimilar.
8. Now, within the VM [download NVDA](https://www.nvaccess.org/download/)
9. Install NVDA

Now you can use a browser and see how it is read by NVDA.

## Optional extra - Getting NVDA to read multiple languages correctly

1. With NVDA running you can right click on it running in the task bar and select `Preference` >`Settings`
2. Under the `Speech` section you need to set the `Synthesizer` to `eSpeak NG`.
3. Now it should respect the element and html language attribute to determine how to read the text.