teleren/devto huggingface dataset:
3 more APIs to build with this week
Tags: api, webdev, beginners
Published: 2020-10-07 16:48:40

---
title: 3 more APIs to build with this week
published: true
description: A summary of three new & interesting APIs that you can start using today
tags: API, webdev, beginners
---

APIs are fun to tinker with while learning and can also save you huge amounts of time while building new products or features.

Every week I scour the web for new and interesting APIs. Here's what I've found this week:

[Swell](https://www.swell.is/) - This API lets you create e-commerce sites, apps, widgets, or any sort of online storefront. It's essentially a "headless" e-commerce builder that lets you build a custom e-commerce experience without having to rebuild the basics, like checkout, abandoned cart emails etc. 

[Vector Express](https://vector.express/) - This free API lets you convert vector files. If you want to display .eps files online, for example, you could use this API to convert them to SVGs. Useful for building some sort of online marketplace for vectors or streamlining design workflows.

[Improve MX API](https://improvmx.com/api/)  - This API lets you automate email domain & alias creation. You could use this for testing transactional emails, or to make a disposable email service or a Chrome extension that generate email aliases for every service you sign up for, which would make it super easy to unsubscribe.

I'm not affiliated with any of these APIs, but I have started [a newsletter where I share new & interesting APIs I come across](https://metapine.com).

If you've recently come across an API that other developers would find interesting, please let me know in the comments 👇🏼
Async function return promise by default
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-10-07 16:44:23

```js
const asyncFunc = async () => "hi";

asyncFunc().then((result) => console.log(result)); // hi

// is same as

const asyncFunc = async () => {
  return Promise.resolve("hi");
};
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Learn JavaScript with this series of videos for beginners
Tags: javascript, beginners, webdev, node
Published: 2020-10-07 16:43:09

---
title: Learn JavaScript with this series of videos for beginners
published: true
description: Learn the foundations you need to know to start coding with JavaScript by watching this free series of videos for beginners.
tags: 'javascript, beginners, webdev, node'
cover_image: 'https://raw.githubusercontent.com/sinedied/articles/master/articles/javascript/js-beginner-series/assets/js-banner.jpg'
id: 480481
---

Learning a new framework or development environment is made even more difficult when you don't know the programming language. To help you with that, we've created this series of videos to focus on the core concepts of JavaScript. 

**The full video series is available for free here:**
**[Beginner's Series to JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=jsbeginner-devto-yolasors)**

{% youtube _EDM5aPVLmo %}

This series of 51 videos is designed to be consumed as you see fit. You can watch from start to finish, or you can dive into specific topics. You can always bookmark and come back as you need. 

## What you'll learn

The videos take you from the very beginning on how to set up your machine and install the tools you need to develop JavaScript code. After that, you'll dive into the JavaScript syntax and structure including objects, functions, logic, and more. Finally, once the basics are covered you'll get to know about more advanced topics like asynchronous programming and how to use packages to develop apps more efficiently.

Most topics will be covered by explaining first the concepts behind, then show you a demo on how you can use it in your code. All the code used in the demos is also available on [this GitHub repository](https://github.com/microsoft/beginners-intro-javascript-node).

## What's next?

This is only the beginning of your learning journey, and once you're up to speed with JavaScript, maybe you'll want to get started with Node.js?

If you're going that path, you can take a look at this [full interactive Learn path on Node.js](https://docs.microsoft.com/learn/paths/build-javascript-applications-nodejs/?WT.mc_id=nodebeginner-devto-cxa) with 5 in-depth tutorials for learning Node.js.

We have a lot more content in the pipe, so stay tuned 😉

## Tell us your experience

While we don't cover every aspect of JavaScript in these videos, we want to help you build a foundation from which you can continue to grow. By the end of this series, you'll be able to work through tutorials, quick starts, books, and other resources, continuing to grow on your own.

We're also looking to improve, so please tell us what you think of the format, what were your difficulties, and how was your experience in the comments.

Time to learn some JavaScript! 🎉
Day 24 - Dad Jokes App With Vuejs
Tags: beginners, codenewbie, javascript, vue
Published: 2020-10-07 16:41:24

I built an application to generate dad jokes from the [icanhazdadjoke](https://icanhazdadjoke.com/api) API. Get your random dad jokes [here](https://codepen.io/josno/pen/wvWveQL).

## What I Learned
Spent some time in the Vue documentation to learn how to fetch data and display it. 

### How This Will Help Me
To be honest, not quite sure yet. So far I'm enjoying its flexibility and reading the easy-to-follow documentation! I'd love to continue building more applications to more familiar with it.

Onto the next challenge!
Welcome Thread - v94
Tags: welcome
Published: 2020-10-07 16:20:38

---
title: Welcome Thread - v94
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![sloth saying "sup"](https://media.giphy.com/media/8dS4LemYbBZv2/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Need guidance regarding remote job
Tags: career, job, discuss, help
Published: 2020-10-07 16:14:35

Hello friends,

I'm from India, Currently working as a React Developer in a startup since past 1 year, this was my first job I started working from Nov 2019 (before lockdown) but just after 3 months in March end due to lockdown I'm working from home, so it's basically 9 months I'm doing remote work for the company.

But now I'm thinking of switching job will be working remote but there are lot of questions in my mind regarding same do reply you have any idea about these:

While I was searching for remote job in sites like remoteok, many company mentions salary as per there country's market like 50K to 70K euro per year, do they really pay in between these amount or they adjust as per the candidate from which country they are applying from?

What about the time zones? Does it depend on company to company at what time I'll be working on? 

Any thing else I should keep in mind if I'm applying for remote job in different country as per you? 

Thanks!
How to turn any React web app into a native desktop app(Windows, macOS, Linux) with Tauri.
Tags: react, tauri, javascript, rust
Published: 2020-10-07 16:11:38

{% youtube G0KS4iTaZGQ%}

Text based Tutorial: https://geekjr.github.io/reactTauri.html

Do you have any React web app? Would you like to turn that into a native desktop app with minimal effort? Would you like that native desktop app to be memory and disk efficient unlike Electron? Well then, you are at the right place. This video will show you how to do that with Tauri. I will first tell you why you should care about Tauri, then I will show you how to install and configure what you need to develop with Tauri on Windows, macOS, and Linux. Then, we will turn the default React application into a native desktop app! With all of this knowledge, you will be able to turn almost any React web app into a native desktop app. 

Tauri is a framework that has the same goal as Electron: Allow people to create native desktop apps for multiple platforms using JavaScript. However, that is were there similarities stop. Tauri uses Rust. Therefore, it is way more disk and memory efficient then Electron. This means that the binaries are smaller and use less memory.

00:00 - Intro
00:22 - What is Tauri?
02:02 - Windows setup
09:45 - Mac setup
16:00 - Ubuntu/Debian setup
21:47 - Building the app
39:08 - Outro
What is Cloud Computing? 
Tags: aws
Published: 2020-10-07 15:56:15

 Something that has always interested me is the "Cloud". What is it? How does it work? These are a few of the questions I had that drove me to start studying for the AWS Cloud Practitioner Certification! I picked up a course on Udemy which, so far, has done a great job breaking down traditional computing while introducing cloud computing. 
Traditionally, companies would have to have a data center, or server room, to store their servers that host their website. This works however it does get costly and problems arise if the company/ website starts to scale! When going the traditional route, companies face these factors: 
- Rent for the Data center
- Power supply, cooling and maintenance for the servers
- Adding and replacing hardware can get costly and takes time
- Scaling is limited 
The cloud was created to address these factors! 
	
 Cloud computing makes computing power, database storage and other IT resources available on demand! Cloud service platforms allow users to pay as the go and only for the services they use and need. This means that all the above factors are taken care of for the company by the cloud service platform. I was surprised and impressed to find out that Netflix is built on AWS!
Some advantages of cloud computing are: 
- Trading capital expense for operational expense
- Scale based on actual measured usage
- Increase speed and agility 

 So far, it seems like cloud computing is going to become more and more popular with companies because it “outsources” hardware storage and maintenance which allows the company to focus on growth rather than if their hardware can handle the growth!
Day 65: Bug fixes
Tags: 100daysofcode, javascript
Published: 2020-09-19 15:11:01



####Bug 1
I used Favicon checker to check the state of my favicon files and it was all a mess. Output from Favicon checker:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8wsm12qkp3n4o26hj7c2.png)

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

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


I initially used a smaller image, it was about 200px. That was the most likely cause of all the issues I got from the Favicon report. Fixed that by using a larger image and regenerating the manifest files. Here is the [current report](https://realfavicongenerator.net/favicon_checker?protocol=https&site=weatherapp-d2d7b.web.app%2F#.X2YWuBFRW20)
####Bug 2
I was using `forEach()` to loop through the array of weekly forecast data (from open Weather) in the `displayWeeksForecast()` function. The data set had an array length of 8 but I am only interested in the first six. I switched to a for loop and set the array length to 6 (data.length-2).
####Bug 3
The cards created `displayWeeksForecast()` function were overflowing in smaller screens. I created a function to check screen width, then set the array length to 3 for small screens and 6 for larger screens. With an array length set to 3, the for loop would run thrice creating 3 forecast cards.

```javascript
function checkScreenWidth(data){
	let arraylength = 0
	if (window.screen.width < 768) {
 arraylength = data.length - 5
	} else{
	 arraylength = data.length - 2	
	}
	displayWeeksForecast(data, arraylength)
}

function displayWeeksForecast(data, arraylength) {
	clearPlaceholder()
	for (var i = 0; i < arraylength; i++) {
        //code to create cards and update data.
}
}
```
Link to the [weather app](https://weatherapp-d2d7b.web.app/)
I still have 2 more bugs to fix but I run short of time. 

_Day 65_
Hiring Ideas
Published: 2020-10-07 15:49:58

Often, the code exams; which we take while someone is watching can be painful.

**What about this?**

In the era of open source, we could instead work on existing code and submit pull requests. 
We get to pick an existing issue and go for it.

- We win by getting familiar with current code bases.
- Interviewers win by getting pull requests regardless of the final hiring decision. 

**Schedule Interviews After the Pull Request**

- After the pull requests are submitted, call us in for the interview and we can have an intelligent conversation about things that matter.
Display Local Images in Flutter
Tags: flutter, dart
Published: 2020-10-07 15:34:09

Originally posted https://easyflutter.com/display-images-locally-in-flutter/

As a part of [flutter tutorial](https://easyflutter.com/) series, we’re going to learn how to display images locally in your flutter apps

{% youtube T8F98CLpJZY %}

Steps:
- Create new folder in your project called images
- Copy your images into images folder
- open your `pubspec.yaml` and enable access to images folder (watch video)

Source code:

```dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EasyFlutter',
      home: Scaffold(
        body: Center(
          child: Image.asset(
            "images/mypic.jpg",
            height: 200.0,
            width: 200.0,
          ),
        ),
      ),
    );
  }
}
```
Source code: https://easyflutter.com/display-images-locally-in-flutter/
Low-Code Tech Startup Story & Product Development Tips from CEO
Tags: webdev, showcase, uiweekly, nocode
Published: 2020-10-07 15:25:18

Check an interview with the UI Bakery visual apps builder CEO & Co-Founder!
Learn about the platform origin story, its distinguishing features, main milestones, future plans, etc.
Despite talking about UI Bakery, Vladimir shares valuable general product development & business tips.

Get the insights here -> https://www.nocodeportal.com/stories/conversation_with_vladimir_lugovsky_ceo_and_co_founder_uibakery/
Upload user avatar with a custom upload button
Published: 2020-10-07 15:19:09

I recently wrote on how to customize the default upload button but I want to explore more into this topic and try other options.

I designed an interface to upload a user avatar

![final look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5pkkrv9oeuus32qim47.png)

## How to

We'll start with our HTML

```html
<main>
  <input type="file" name="image" id="image" accept="image/*" />
    <div id="preview-wrapper">
      <div id="preview"></div>
      <button
        id="upload-button"
        aria-label="upload image"
        aria-describedby="image"
      >
        🙂
      </button>
    </div>
</main>
```

## Styling

We give some style for our user avatar.

```css
#avatar {
  background-color: antiquewhite;
  height: 200px;
  width: 200px;
  border: 3px solid #0af;
  border-radius: 50%;
  transition: background ease-out 200ms;
}

#preview {
  position: relative;
}
```

We then hide our input

```css
input[type="file"] {
  display: none;
}
```

Then our custom upload button

```css
button {
  padding: 18px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-color: #08f;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
                         0px 6px 10px 0px rgba(0, 0, 0, 0.14), 
                         0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  transition: background-color ease-out 120ms;
  position: absolute;
  right: -5%;
  bottom: 0%;
}

button:hover {
  background-color: #45a;
}

```

We've reached our design goal 🙌, but we aren't done yet.

## Some JavaScript

### Our initialization
```js
const UPLOAD_BUTTON = document.getElementById("upload-button");
const FILE_INPUT = document.querySelector("input[type=file]");
const AVATAR = document.getElementById("avatar");
```

When our custom button is clicked, we have to programmatically click the input element
```js
UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());
```

To render our image

```js
FILE_INPUT.addEventListener("change", event => {
  const file = event.target.files[0];

  const reader = new FileReader();
  reader.readAsDataURL(file);

  reader.onloadend = () => {
    AVATAR.setAttribute("aria-label", file.name);
    AVATAR.style.background = `url(${reader.result}) center center/cover`;
  };
});
```

## **WE ARE DONE!!!** 🥳🥳🥳

Source code available at [codepen.io](https://codepen.io/gameshaker/pen/jOrNqRj) and [github](https://github.com/Dchole/custom-upload-btn-2.git)
Lorgage - Taming Rails Logs (Video)
Tags: rails, tutorial
Published: 2020-10-07 15:16:38

{% youtube xSv0nTsoEWE %}

I've love steaming through the Rails logs, they can help debug problems pretty quickly. However by default they're pretty verbose, which can make searching through & storing a bit tricky.

In this video, I go through the [Lorgage](https://github.com/roidrage/lograge) gem for Ruby On Rails & show how it can be used to reduce your logs to one line per a request.

## The code

To remove attributes from our log lines, we passed a lambda to `config.lograge.custom_options`.

```ruby
# config/initializers/lograge.rb
Rails.application.configure do
  config.lograge.enabled = true
  config.lograge.custom_options = lambda do |event|
    exceptions = %w[controller action]

    {
      params: event.payload[:params].except(*exceptions)
    }
  end
end
```

To filter parameters (replace them with "[FILTERED]") from our logs we added them to the `filter_parameters` config option:

```ruby
# config/initializers/filter_parameter_logging.rb
Rails.application.config.filter_parameters += [:password, :secret_pass]
```
Was ist ein Online-Kurs? Ich erkläre dir wie Online-Kurse funktionieren
Published: 2020-10-07 15:08:27

Online-Kurse. Noch nie hatten wir so einfach Zugriff zu einer so enormen Masse an Informationen. Noch nie war Lernen so einfach möglich wie heute. Doch genau diese Masse an Wissen und Informationen stellt uns vor eine neue Herausforderung – das Filtern von relevanten und seriösen Informationen. 

Online-Kurse servieren uns die gewünschten Informationen – sorgfältig gesammelt und sinnvoll aufbereitet.
...

Fazit
Möchtest du einen Online-Kurs absolvieren, können dir bei dem schier unendlichen Angebot an Kursen Lernplattformen helfen, den richtigen Kurs für dich zu finden. Auch hier gibt es inzwischen freilich eine Vielzahl an Anbietern und ein Vergleich lohnt sich allemal. Eines ist sicher, der passende Kurs für dich ist da draußen!

Mehr lesen: [Was ist ein Online-Kurs](https://kursprofi.com/online-kurs/)
Want to know how to create a dApp on Ethereum?
Tags: blockchain, beginners, tutorial, startup
Published: 2020-10-07 15:07:28

We launched Block Hack Global 2020! 

Today we have Antoine walking us through how to create a dApp on Ethereum! This workshop is for developers AND non-developers so tune in or check out the recording if you cant join now. 

https://www.crowdcast.io/e/create-eth-dapp?utm_source=profile&utm_medium=profile_web&utm_campaign=profile

Follow our Crowdcast to check out the amazing upcoming workshops :)

We are still accepting applications - www.BlockHack.ca 
so join now if you want a shot at 50K of Seedfunding and 8.5k worth of bounties! 

Let me know if you have any questions and have a great day!

Cheers Devs!

Bitcoin Bay.
Making my own Portfolio/Profile Website
Tags: vue, javascript, webdev
Published: 2020-10-07 14:54:02

Hi ✋😁
I would like to introduce my self,
my name is Jenuel Oras Ganawed and I am a web developer.

I wrote this article to share my new portfolio.

I was searching for designs on google for a couple of days, and then I stumbled on a good design that I like. Its a design by Brittany Chiang.

I built my portfolio based on her design using Vue Js, and with the help of the plugin Vuetify. I tweaked my portfolio a little with the taste that I like.

You can check my the website [here](https://jenuelganawed.com)
you can also check the Github [here](https://github.com/BroJenuel/BroJenuelPortfolio)

You can use my use it whatever you like but don't forget to credit me, and especially Brittany Chiang the designer.

Preview:
<img src="https://github.com/BroJenuel/jenuel-portfolio-v2/blob/master/meta-image.png?raw=true" />
Season of Docs, Meeting-6
Tags: github, opensource, docker
Published: 2020-10-07 14:49:10

On 30th of September, I had a meeting with Jet Mante and James Scholz with regards to my Google's Season Of Docs project.
Unfortunately, Prof. Myers was unable to join the meeting to due a conflict in his schedule. I was able to successfully resolve almost all of my doubts in the weekly meeting. Jet suggested a few minor changes in the Plugins page of the documentation, which're as follows:-

1. It might be nice to add the graphic back to the overview section.
2. I think the numbering of subsections helps as it is difficult to see any difference between the installation and using synbiohub title font.
3. I think it makes sense to just link out to the installation section for the heading 'using synbiohub'. The common problems and adding plugins to the admin panel could be added to that section.
4. For the standalone methods:flask servers:anaconda section you have not made some of the code red (it is just formatted as text) 5. this is also the case under the python windows os section and the javascript node.js section
6. under the naming convention section you replaced "<" and ">" with '"' for the second line, this is odd as quotations are generally not used to signal placeholders
7. In the naming convention section there is a lack of enter between the final example and the paragraph that starts "The same name is then used"
8. I think the way recieves and return are structured should possibly be more standard throughout status, evaluate, and run under visual, submit and download
9. making clear that for evaluate and run endpoints what is recieved is the body of an http post request is a good idea
10. I think the general 'indentation' of headings should be changed.

I was able to successfully complete all the above tasks except one, i.e "Adding a graphic back to the overview section".

I'll be having a small conversation with Jet over the Email, so as to understand this point to a better extent. 

This week's meeting won't be taking place since, my mentors will be taking part in COMBINE2020. 
I was also to take part in COMBINE2020, but since my college announced surprise Mid Semester examinations, hence I was unable to, though I'll try to watch the recordings, if they're available.

I would also like to thank my mentors for understanding the situation regarding my examinations and allocating less work!