teleren/devto huggingface dataset:
K Donation Portal
Tags: twiliohackathon
Published: 2020-04-30 12:41:27

[Comment]: # Donation e-website for people to make purchase and keep track on the donation items.

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## What I built
#### Category Submission: COVID-19


## Demo Link
https://drive.google.com/drive/folders/1bYCFg1Y7Q_M5cWhm_f0uPaRvtbvh8bPO?usp=sharing
https://github.com/homeyong/Kdonationportal/blob/master/Demo/Demo_KDonationPortal.mp4

## Link to Code
https://github.com/homeyong/Kdonationportal

## How I built it 
The biggest challenges is to set environment variable for the token of twilio.


## Additional Resources/Info
Setting Up React with Git Hooks to Automatically Test and Lint before Pushing Code
Tags: javascript, react, git, webdev
Published: 2020-04-30 12:41:01

---
title: Setting Up React with Git Hooks to Automatically Test and Lint before Pushing Code
published: true
description: One topic I have gotten more and more excited about throughout my software development career is quality! Today we learn how to force testing and linting with git hooks.
tags: javascript, react, git, webdev
canonical_url: https://typeofnan.dev/fun-with-react-and-git-hooks/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/66rzst7ekgbdkrxd5e6n.jpg
---

One topic I have gotten more and more excited about throughout my software development career is quality! Perhaps I've been burned one too many times. Alas, I decided to test adding git hooks to a React project using the `husky` package. My goal was to make it so that, prior to either committing code or pushing to a git repository, both the `eslint` linter and `jest` test suite must run. The code repository that accompanies this post can be found [here](https://github.com/nas5w/fun-with-react-and-git-hooks).

## Set Up from Scratch

Setting this up from scratch turned out to be fairly trivial. I started out by boostapping with `create-react-app`.

```bash
create-react-app fun-with-git-hooks
cd fun-with-git-hooks
```

Next, I installed [husky](https://github.com/typicode/husky), which claims to be "git hooks made easy." (Accurate!). Since it's only necessary in the dev environment, only install it as a dev dependency.

```bash
npm install husky --save-dev
```

We actually end up needing one additional dev dependency called `cross-env`, which will allow us to configure a CI environment variable in whatever environment we're currently in.

```bash
npm install cross-env --save-dev
```

Finally, let's make some modifications to our `package.json` file to accomplish a few things:

- Reconfigure `jest` tests to be run in Continuous Integration mode
- Add a linting command (we didn't have to install `eslint` seperately as it bootstraps with `create-react-app`)
- Configure our `husky` hooks to first lint and then test

```json
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "cross-env CI=true react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "lint": "eslint src"
},
"husky": {
  "hooks": {
    "pre-commit": "npm run lint && npm test",
    "pre-push": "npm run lint && npm test"
  }
}
```

And that's it! Now, whenever you try to commit or push your code, you will be prevented from doing so if linting or testing fails.

Quality for the win!

## The Annoyance Trade-Off

Admittedly, forcing tests to pass before each commit (or even each push) might hinder your workflow so much that it's not worth it. That's okay! Importantly, you should find the configuration that works best for you. For my current project, I make sure linting passes before each push and then automated tests are run by a Continuous Integration server without blocking git commits or pushes. Find what works for you!
On.NET Episode: Bots, BBQ, and .NET Core
Tags: dotnet, iot, azure, homeautomation
Published: 2020-04-30 12:30:07

Who doesn’t appreciate good BBQ? Well, maybe some people don’t but we do!

In this episode, Cam Soper comes on to show us another one of this home projects. Cam tells us the story of how a Raspberry PI, a chat bot, and a little .NET Core allows him to control his smoker and make great BBQ!

{% youtube 4kJGRuXZ4kg %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).


## Useful Links
<ul>
<li><a href="https://github.com/CamSoper/inferno" target="_blank">Project Inferno - Wood pellet smoker powered by .NET Core</a></li>
<li><a href="https://dev.botframework.com?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Bot Framework</a></li>
<li><a href="https://docs.microsoft.com/en-us/dotnet/core?WT.mc_id=ondotnet-c9-cephilli" target="_blank">.NET Core Guide</a></li>
</ul>
beginner
Published: 2020-04-30 12:18:27

Hello world,😊
This is computer science, extremely extraordinary subject in my life.During my high school I never realized the test of computer science and the world of computing and programing.It is a great interesting thing in my life.

So,being a village boy I did not notice any computer screen or computer monitor even a smart mobile till my higher secondary education.After my high school education, i am provided a hp laptop and every thing which are new in my life are started with this laptop.

Today i am very happy that i have started to know and started to explore this world of computing.

Today i am beginer,yea i know .If i knew these things, about computing, some year before ,i think that today i were stay a some level upper the beginer stage. 😊 

I am beginer both in computer science and in the DEV community,and i think this community may help me a lot and this will be a friendly environment for me.

So,yea. And another thing I want to tell that 
The world is changing so fast.In upcoming future a totally upgraded world , a new version of world is coming..............
Sometimes you don't need getElementById
Tags: html, dom
Published: 2020-04-30 12:16:09

Sometimes I feel a little dumb. In one of my previous post on Mithril, I even didn't notice that you can get an element by id using **window.id**, yet it's still awesome...

```js
<div id="main">
 This is the main container
</div>

<script>
 alert(main.innerHTML)
</script>
```
You can play with it here : [WinElt](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8SMgDcABGSQBeADohcDMnXkA+WXXEAVLGTCT98LBHGLl4nnyV0IAJw2CA9CNHqVdQWFi2yAB3hu4gwwtvAAFGZ0GMo2tgASWgCyADIAlA6OXj7+qpyQMAhkvFToAGyoAJwgAL6E9Ews6BgAVlTElvzwrJw8uL4UdqwARgxD0DV1IIzMrBiwYG1cvJ3d1QC61UA)
Daily Developer Jokes - Thursday, Apr 30, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-04-30 12:00:30

---
title: "Daily Developer Jokes - Thursday, Apr 30, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Apr%2030%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259d54c109.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: Did you here about the witch who was off by two when casting a hex?

___A___: They failed to make the target DEAD and made them DEAF instead!
 -->
Have you used Netlify for real client projects?
Tags: discuss, netlify, hosting, clients
Published: 2020-04-30 12:00:26

---
title: Have you used Netlify for real client projects?
published: true
description: 
tags: #discuss #netlify #hosting #clients
---

I read a lot of case studies of developers who use Netlify for their personal projects (blog, portfolio, experiments, ...).

I've almost never heard anybody telling how they used Netlify as a hosting/CD solution for real-world client projects.

I would be curious to hear about your experience using Netlify for your client projects.

- Which plan did you choose (free or professional)?
- How did you explain Netlify to your client? I have the impression that the decoupled nature of JAM stack websites is confusing for clients (as opposed to a monolithic Wordpress site)
- How was the handover? Did you make a Netlify account for your client?

Please share!
A Side Project Journey from Idea to Front Page of Product Hunt under a Week
Tags: podcast, mvp, wfh, workfromhome
Published: 2020-05-05 08:45:07

---
title: A Side Project Journey from Idea to Front Page of Product Hunt under a Week
published: true
date: 2020-04-30 12:00:00 UTC
tags: podcast, MVP, WFH, Work From Home, 
canonical_url: https://share.transistor.fm/s/b74c99ea
---

{% spotify spotify:episode:5FoaBs0CldtoFGs4LdBq1L %}

From MVP to launch under a week was our main goal. With a little development time and features, the focus was instead on launching a product to get feedback as quickly as possible keeping most things manual. From writing the MVP requirements for launching on Product Hunt were less than one week.

- Launch Day Submitted to:
  - Reddit Startups - [https://www.reddit.com/r/startups/](https://www.reddit.com/r/startups/)
  - Indie Hackers - [https://www.indiehackers.com/](https://www.indiehackers.com/)
  - Dev.to - [https://dev.to/](https://dev.to/)
  - Hacker News - [https://news.ycombinator.com/](https://news.ycombinator.com/)
  - Product Hunt - [https://www.producthunt.com/posts/the-work-from-home-list](https://www.producthunt.com/posts/the-work-from-home-list)
- Product Hunt we were floating around the top 12 most of the day until the US woke up then slid down to 21 at the end of the day.
- Stats for the day
  - Featured on Product Hunt
  - 215 Product Hunt votes
  - 800+ users
  - 25 new products submitted
Typeform - [https://www.typeform.com/](https://www.typeform.com/)  
Google Sheets - [https://docs.google.com/spreadsheets/u/0/](https://docs.google.com/spreadsheets/u/0/)
Is 2021 the end of AngularJS?
Tags: angular, react, javascript, reactnative
Published: 2020-04-30 11:59:56


AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of people and corporations to deal with many of the challenges encountered in developing single-page applications. Angular is its successor and uses equivalent philosophies like declarative templates and dependency injection.

To develop web applications AngularJS is the stable framework and utilized by number of developer around the globe. The usage of Angular is also expanding faster than Angular JS and new releases have been introduced and are planned to release in upcoming years.

Currently there are number of developers are out there using AngularJS and it’s been complex task for everyone to perform immediate migration process.

In 2018, they announced that the major releases will be ceased after the release of AngularJS version 1.7. Currently it’s under LONG TERM SUPPORT (LTS) period so, there will not be any kind of new major releases. The team of Angular JS totally focus on publishing patch releases, 1.7.1, 1.7.2 etc. These release only include non-breaking change features and fixes to the framework. So their existing users do not have to face any security concern or other bug issues.

That means that there’ll be no more releases of AngularJS: so no more features. This does not denote that you must cease utilizing AngularJS: it will resume to work for you as it does now.

All AngularJS applications that work now will resume work in the future. AngularJS has not received many new features within the last year approximately. It is a very sophisticated and consistent product. As a consequence of that and the many projects using it in production, the vast majority of bugs have been identified and fixed. Therefore it’s unlikely that new bugs are going to be discovered during and after the LTS period. Nor does it mean that you simply must upgrade to Angular: indeed many projects will never upgrade; they simply work as they are and do not need to be modified to use Angular. If you’re actively developing your application, and you identify that AngularJS won’t support your current or future requirements then that might be a honest time to consider upgrading to Angular.

If you’re planning to migrate from AngularJS, kindly contact Vibidsoft as they have in-house team of expertise who can help you to do so. You can shoot an email to inquiry@vibidsoft.com
How do you interact with the clipboard using JavaScript?
Tags: coding, clipboard, copy, cut
Published: 2020-08-16 16:26:55

---
title: How do you interact with the clipboard using JavaScript?
published: true
date: 2020-04-30 11:56:42 UTC
tags: Coding,Clipboard,Copy,Cut
canonical_url: https://blog.jws.app/2020/how-do-you-interact-with-the-clipboard-using-javascript/
---

This should be a pretty quick post.  I wanted to explore how to Copy/Cut/Paste on a webpage.  I figured how to do Copy and Cut pretty easily but Paste was a different story.

{% codepen https://codepen.io/steinbring/pen/ExVmybY %}

So, why isn’t paste working in [the pen](https://codepen.io/steinbring/pen/8c1048bb48ac37c2a078ec31e3957a9f)?  It looks like as of Chrome 39, you can only do it after declaring the clipboard permissions in the manifest file.  Am I going to do that for this demo?  Of course not. 🙂

Have a better way to do this … or a easy solution for fixing paste?  Please drop a comment, below.
First Missing Positive
Tags: javascript
Published: 2020-04-30 11:53:33

Given an unsorted integer array, find the [smallest missing positive integer](https://leetcode.com/problems/first-missing-positive/). Note: Your algorithm should run in O(n) time and use constant extra space.

Sounds hard right?

```js
var firstMissingPositive = function(nums) {
  if (nums.length <= 1)  return nums[0] == 1 ? 2 : 1;    
    
  const max = Math.max(...nums);
  for (let i = 1; i <= max + 1; i++) {
      if (!nums.includes(i)) return i;
      //alternatively: if (nums.indexOf(i) === -1) return i;
  }    
  return 1; //every other case, ie all n in nums are < 0
};
```

// Runtime: 48 ms, faster than 95.76% of JavaScript online submissions for First Missing Positive.
// Memory Usage: 33.8 MB, less than 91.67% of JavaScript online submissions for First Missing Positive.
2 years of writing code
Published: 2020-04-30 11:44:51

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

For starters, I have joined all my high school shenanigans into one year. Let's be honest, not much was going on there. Some guys from Andela used to come and teach us basic HTML tags. At this point, I felt like I could now rule the world with my programming skills (some will say HTML is not a programming language). There was only one problem, my links, buttons, and forms were useless as I did not know where to store my data or what to do with it. Then Javascript came swinging in. This was something very new and the idea of having to learn data structures and control flows was not the best. I just wanted to dive deep into writing complex code. Later I came to learn (the hard way 😣 ) that it was not the best idea.


Skip all that and come to after school, I was lucky to get into the access program at Moringa school. This was where everything changed. I got to learn various languages and how to adapt and learn them. It's not always about getting to write code straight away. There were basics one needed to learn. I can't tell you how many assignments I had to repeat because I did not do them as expected. Again, it's where I had to choose whether to take up full-stack web development or move to Android/Java. Of course, I took Android. My reasons being:
Most people were choosing python as it was said to be easier than Java and so I decided to take up the challenge ✊
Android seemed cool. Just imagine creating applications. We are used to interacting with websites and there are so many ways to create one but Android was just something else. Let's say the cool kid's stuff 😎 .
Advice from a good friend. He told me Android had very many opportunities and that it has a good community 💪.

Those were enough to make me go to Java. It was quite awesome to create apps and run them on my android device (we all know emulators don't mix with 4GB RAM machines. smh). I can't forget my first app. I wanted to create a hybrid between Spotify and Musixmatch i.e streaming + lyrics. Too bad I had no idea how to use the Spotify SDK and the Musixmatch API only gave 30% of the lyrics. Copyright issues :(

I graduated from Moringa school and was convinced that I was ready for the market, but I could not get a job. I came to realize that I had a long way to go before I could get into the job world. There were many things I had to learn and get a few tricks up my sleeves. I had no other option but to go to campus and see what I could gain from there. I got to learn kotlin and drop java for my applications. I wrote some small app that consumes the Github API for basic activities and published to play store. Fast forward to now, I enjoy writing kotlin code and have recently taken up VueJs and NodeJS for server-side. Although, Node is being replaced with Kotlin Server-side in my list. My goal is to migrate to Kotlin fully: web applications with Kotlin.JS, server-side, and android applications. I will be posting various "how to's" and their codes as I share my journey as a developer.
Custom Elements made easy with Swiss
Tags: customElements, swiss, css
Published: 2020-04-30 09:30:00

Recently I have discovered a very nice library called [Swiss](https://swiss.netlify.app/)
It's certainly the simplest mode to create custom elements.
In the example below I use the nifty cssinjs library [Bss](https://github.com/porsager/bss)

In HTML page :

```html
<s-hello name="Swiss"></s-hello>
```


In JS Page

```js
b.css("body", {
 background: "black"  
})

b.css("s-hello", {
  textAlign: "center"
})

const style = b({
  color: "deeppink"
}).$hover({
  cursor: "pointer",
  color: "red"
})

function Hello (el) {
  const name =  el.getAttribute("name")
  const view = `<h1 class=${style}>Hello ${name} & Bss<h1>` 
  return view
}

swiss.element("s-hello", Hello)
```
You can play with it here : [SwissCustomElement](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHjgFpCYopaACTDgC8AHRABlAO4Q4cMQD4WAeg5ceteSLSUQcbjGrEI9BIhAAGRAEYAbCAC+FdNlxn8AKwRU6DJsTwARvjUsgAUYgG0ACYAnmIUfMBafAEY1ADWAOYATrQArmhRiHwRUGnpYnwlaPYAlFpaQSFw4bqc3Lzxicl8jAAexACCUBCZaMVi1H4w2WJadQ1oPnDEfCsxsHxCKaFJaFV0vNkTIFEwMAAOFxBoFSDztfgAJIS0AG4zuz3UedlwtMcSiALrQboxZpRvrQjidsjAonMavU0FowAVDMZ9gAJDr8ULcWrdfZ8ZarQQwLZVbj4TIwIbEYjZCABPKMVrksTIg4mVZvCAwSSUgAGLEIVhJZVkQiewHWsHs8hx6j4MvJ9j4ADI+AAhWSiqzyIXVKpw4i-fZ8gXzRZwaSyfD6HAMVqqXFdJW8Wo6OhYa6wbKBDABbg6PSwDEmPAAJisiAAzFZ2JZzA4nCByXhgrJvfRGMwzA4ALpUEa3UyodMuPC2mReEC-chmEjEC5wRBKJQFC5ZYK0LAqO1wAACVnwUfwViUURkxAHtY8deIMQurl01CZF38jmcOEC2aoDbwzdb7c7aG7mV7-YCshH+Bs+AALEob3AFzolyvq+uIJui-YgA)
Post makers - Week 6
Tags: quarantine, covid19, jobhunt
Published: 2020-04-30 11:36:06

I make this post slightly late...it's funny how with nowhere to be, and little to do, things can get rather busy!

Over the last week I have joined the British public in moaning about the recent change of weather, and having a full social diary of zoom quizzes with friends and family each evening. 

Coding this last week has been good. I have continued to explore react and the Chart.js library which has been great. I also took a couple of days to properly refactor the code, as much as I claimed to have good coding principals, this particular project did not reflect this. I started to research about the best practises of React components and spent the next 2 days creating parent child relationships to effectively and efficiently pass down props between them. 

This again got me thinking just how good Makers prepared me for real world coding. I did not learn how to write JavaScript or Ruby...I learned how to write good code and design good programmes. This has helped me search the right things,  read the right documentation, and search out the right code. Again a small victory feeling in these dark times.

The job hunt still seems futile, but i'm pressing on and applying as much as possible for roles that grab me. I'm not expecting much still, the world has bigger issues currently, but fingers crossed something positive will happen for everyone in the near future!

I wish everyone a warm quarantine, until next time.

David
How do you handle authentification?
Tags: security, help
Published: 2020-04-30 11:13:04

Hello everyone,

I'm currently in the process of planning a new application with the goal to learn something about using microservices in practice. One major topic, no matter what architecture I'd choose, is obviously security which starts with a secure login function. This is already a challenge when building monoliths, but seems to increase in complexity when talking about microservices. 
I considered only using 3rd party login providers like Google, Facebook etc, but since I'm targeting less tech-savy users, I think that might scare them off. So having at least the option to login with email+password is an requirement. I've been researching this topic for a while and I learned found some best practices that also confused me a bit.

Most resources I found seem to recommend Open ID connect for (official) applications and the use of a identity server implementation like Keycloak or IdentityServer4, so I started digging deeper and found out about the different OAuth authentification flows that exist and how they differ. One of the major differences was the use case.
Some flows (authorization code flow) were only meant for traditional webapps where a webserver makes API requests on behalf of a user. Others were meant for SPAs and native mobile apps, so that is what I was looking for.

For the use-case of a native mobile app using the authorization code flow with PKCE is considered best pracice. However, using this flow requires redirecting the user to an authorization site on the identity server which I don't mind doing for the web-app. But for the mobile app, I'm afraid this would totally break the user-experience, so here I am looking for other options.

How do you handle user logins in your applications? Do you have any experiences or tools to share? Do you implement the logic yourself or are you using options like Keycloak, Auht0 etc?