teleren/devto huggingface dataset:
How to add style loaders to webpack
Published: 2020-08-05 07:55:46

In this post I am going to show how to configure webpack adding support for [SASS](https://sass-lang.com/) and CSS files.
It is slightly inspired by [this post](https://developerhandbook.com/webpack/how-to-configure-scss-modules-for-webpack/),
but implemented as standalone module that you can easily to add your project.

## Install dependencies

Step one.

Single line script for NPM:

`npm install --save-dev autoprefixer css-loader mini-css-extract-plugin postcss-loader postcss-preset-env sass-loader source-map-loader style-loader`

Single line script for Yarn:

`yarn add --dev autoprefixer css-loader mini-css-extract-plugin postcss-loader postcss-preset-env sass-loader source-map-loader style-loader`

## Webpack Configuration

Step two. Copy below code to file and name it as `webpack.sass.js`;

```javascript
const path = require("path");
const ExtractPlugin = require("mini-css-extract-plugin");

const NODE_ENV = process.env.NODE_ENV || "development";
const isDevelopment = NODE_ENV === "development";

const postcssLoader = {
  loader: "postcss-loader",
  options: {
    plugins: [require("autoprefixer")({}), require("postcss-preset-env")({})],
  },
};

const sassOptions = {
  outputStyle: "expanded",
  includePaths: [path.resolve(__dirname, "node_modules")],
};

const sassLoader = {
  loader: "sass-loader",
  options: { sassOptions },
};

const rules = [
  {
    test: /\.css$/,
    use: [
      "source-map-loader",
      isDevelopment ? "style-loader" : ExtractPlugin.loader,
      "css-loader",
      postcssLoader,
    ],
  },
  {
    test: /\.scss$/,
    use: [
      "source-map-loader",
      isDevelopment ? "style-loader" : ExtractPlugin.loader,
      "css-loader",
      postcssLoader,
      sassLoader,
    ],
  },
];

module.exports = function withSass(config) {
  if (!config.module) {
    config.module = {};
  }
  if (!config.resolve) {
    config.resolve = {};
  }
  config.resolve.extensions = [...(config.resolve.extensions || []), ".scss"];
  config.module.rules = [...(config.module.rules || []), ...rules];
  config.plugins = [
    ...(config.plugins || []),
    new ExtractPlugin({
      filename: isDevelopment ? "[name].css" : "[name].[hash].css",
      chunkFilename: isDevelopment ? "[id].css" : "[id].[hash].css",
    }),
  ];
  return config;
};
```

Step three. Modify `webpack.config.js` as following pattern:

```javascript
const withSass = require("./webpack.sass.js");

// your base webpack config goes here
const baseConfig = {
    /// ...
};

// extend webpack config
const config = withSass(baseConfig);

module.exports = config;
```

Enjoy! EOF :smile:

Link to [original post](https://tsvbits.com/webpack-sass/)
When and why do you use go?
Tags: discuss, go
Published: 2020-08-05 07:31:12

I really like go, *as a replacement to python for system automation and admin tasks*. 

In the past I tried building client-software using [fyne-io/fyne](https://github.com/fyne-io/fyne), which was fun, but it was not as feature-rich as I hoped. 

I haven't gone beyond the simple rest-service, or automation for quite a while. That's where I always look back at python. 

What is your opinion on go and it's use-cases?
Introduction to Smtpman: SmtpMan.com—Free fake/mock smtp testing server and Dummy smtp email testing for development team
Tags: stmp, fakestmp, email
Published: 2020-08-05 07:19:22

SmtpMan is a free fake/mock SMTP server for QA & development teams. All test emails sent from the development and staging environments will be catched in SmtpMan without spamming real customers.

If you need,you can visit: https://smtpman.com/

When you use it, you need to create an account,easy and fast, as well as guide you through the testing process.

This allows you to register and log in using your Gmail account.

When you finish logging in your account.

Configure your development environment with appropriate SMTPMAN settings and send your first test message. Go to your inbox and see your message that sent your application.

The exciting thing is that,Smtpman application support custom domian for sending and receiving emails. 

Please use email Address to test your first mail.

Finally, if there is anything else you don’t understand, you can reference:

https://smtpman.com/faq

Thank you very much for reading. Hope help this post.
Google Cloud Shell -Part 2 Installing Cloud9
Published: 2020-08-05 06:16:46

##Installing Cloud9

In [Part 1](https://dev.to/virtiogroove/google-cloud-shell-part-1-configuring-rclone-25i9), we installed rclone, in this article we will install AWS Cloud9 IDE.

`git clone https://github.com/c9/core cloud9`
`cd cloud9`
`./install-sdk.sh`


That is it - installation will stay between sessions, as long as you access your shell at least once in 120 days.

###Starting Web IDE
You need to start Cloud9 on port 8080, or any other, which GCS provides you for web preview:

![GCS web preview ports](https://www.virtiogroove.com/dev/devtoimages/Capture.PNG)

`cd cloud9`
`node server.js -p 8080 -l 0.0.0.0 -a : &`
to avoid session expiration run 
`watch ls -n 15`

### Installing additional SDKs
You can also add different Google Cloud SDKs - examples bellow are for Firebase SDK 

- `cloning git https://github.com/firebase/firebase-js-sdk`
- `npm install firebase@7.17.1 --save`
- `using` [bower](https://github.com/firebase/firebase-bower)

More details can be found [here](https://firebase.google.com/docs/firestore/quickstart)
Now you can enjoy developing using both AWS and Google Firebase SDKs
![cloud9 ide](https://www.virtiogroove.com/dev/devtoimages/cloud9ide.PNG)
todos-list
Tags: javascript
Published: 2020-08-05 06:06:12

---
title: todos-list
published: true
tags: javascript
---

Created using html, css and javascript.
Based on the course Modern Javascript from [The Net Ninja (Shaun Pelling)](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg).

{% codepen https://codepen.io/omarmorales/pen/gOrOPVy %}
MagicLeapアプリのThe Labからのアンインストール方法
Tags: magicleap
Published: 2020-08-05 05:24:16

The LabでDeviceBridgeを行いMagicLeapと接続する
Appタグを開くとアプリケーション一覧が確認できるのでその中から目的のアプリを削除する

![img](https://raw.githubusercontent.com/D-RyusukeMatsumoto/my-image-storage/master/dev-to-magicleap-dev-memo/app-remove.JPG)

アプリの終了処理とか入れ忘れた時とかアプリが重くなりすぎて動かせないとかって時に便利よね
Make web apps with Hyperapp
Published: 2020-08-05 05:56:35

Recently I discovered [Hyperapp](https://github.com/hyperapp/hyperapp) which is a really neat little Javascript library for building user interfaces for web apps. It's like a super minimal version of React, and much more lightweight.

I made another [Slingcode](https://slingcode.net/) screencast to show you how to get started making apps with Hyperapp in the Slingcode editor.

{% youtube 9zIOnl6N45s %}

Enjoy!
Famous Technology Quotations
Published: 2020-08-05 05:49:52

> The beginning of wisdom
is to call things by their right names.
—Chinese proverb

|

> Designers are from Mars;
developers are from Venus.

|

> A computer lets you make more mistakes faster
 than any other invention
 with the possible exceptions of handguns and Tequila.
—Mitch Ratcliffe

|

> OO makes code understandable by encapsulating moving parts;
FP makes code understandable by minimizing moving parts.
—Michael Feathers

|

> For me, coding is a form of self-expression.
—Justin Frankel, Nullsoft’s founder

|

> Your code is how you express value,
but your real business is your data.
—Peter van Hardenberg, founding dev of heroku postgres

|

> Less than 10% of the code has to do with the ostensible purpose of the system;
the rest deals with input-output, data validation, data structure maintenance, and other housekeeping.
—Mary Shaw

|

> These days we do not program software module-by-module;
 we program software feature-by-feature.
—Mary Poppendieck, user stories

|

> The amateur software engineer is always in search of magic,
 some sensational method or tool whose application promises to render software development trivial.
 It is the mark of the professional software engineer to know that no such panacea exists.
—Grady Booch, Object-Oriented Analysis and Design

|

> The purpose of computing is insight, not numbers.
—Richard Hamming, Numerical Methods for Scientists and Engineers

|

> The hardest things about running and managing a company
 is tracking what people are working on.
—Joe Spolsky, creator of Trello

|

> The hardest part of the software task is arriving at a complete and consistent specification, and much of the essence of building a program is in fact the debugging of the specification.
—Frederick P. Brooks (1931–)

|

> In programming, the hard part isn't solving problems,
 but deciding what problems to solve.
—Paul Graham


|

> Constraints are not limitations; they are insight.
—Steve Sanderson

|

> The purpose of abstraction is not to be vague,
 but to create a new semantic level
 in which one can be absolutely precise.
—Edsger Dijkstra

|

> The effective exploitation of his powers of abstraction
 is one of the most vital activities of a competent programmer.
—Edsger Dijkstra

|

> It is downright sinful to teach the abstract before the concrete.
—Z. A. Melzak: Companion to Concrete Mathematics

|

> If you have too many special cases, you are doing it wrong.
—Craig Zerouni, Computer FX Ltd. London. England, quote in 'More Programming Pearls'

|

> The software is done;
 we are just trying to get it to work.
— statement made in a Joint STARS E-8A FSD Executive Program Review


|

> It is better to have 100 functions operate on one data structure
 than 10 functions on 10 data structures.
— Alan Perlis (1922-1990), first recipient of the ACM Turing Award





---
---
## Status:

There are just a few so far.
I'll be adding more soon.

---
---
## Call To Action:

Feel free to post your favorite quotes in the comments below!
28 Free SEO Tools In 2020 To Optimize Your Website Performance And Ranking
Published: 2020-08-05 05:48:33

SEO tools are an essential aspect of a successful website. There are many free SEO tools available that can help you to optimize your website performance, ranking, and awareness. But identifying each tool separately can be a difficult task. 

Don’t worry we have got you conversed reading this article will help you in identifying the best and free SEO tools that you can use in 2020. 

In this article, we will be drawing your attention on the best and free SEO tools that can help you in optimizing your website performance and ranking. To make your navigation process easier we have categories for each tool under different sections.

Read more :-  <b><a https://www.egoodmedia.com/28-free-seo-tools-in-2020-to-optimize-your-website-performance-and-ranking/">28 Free SEO Tools In 2020 To Optimize Your Website Performance And Ranking</a><b>

 Read More Articles:
•	<b><a https://www.egoodmedia.com/google-image-search-to-drive-organic-traffic-on-your-website-in-2020/">Google Image Search To Drive Organic Traffic On Your Website In 2020</a><b>

•	<b><a https://www.egoodmedia.com/technical-seo-guide-tips-to-optimize-website-for-search-engine-in-2020/">Technical SEO Guide: Tips To Optimize Website For Search Engine In 2020</a><b>

<b>Contact Details:<b>
1-6046704333
422 Richards St Unit 170, Vancouver, BC V6B 2Z4, Canada

<b><a https://www.egoodmedia.com/">Seattle Website Design Company</a><b>

<b>Visit Reference Profile Websites:<b>
https://bit.ly/3fcFirm
https://bit.ly/3fl9bWt
https://bit.ly/2XfaKir
https://bit.ly/30jyW5r
https://bit.ly/3fjY289
https://bit.ly/3hRmNKB
https://bit.ly/3gaFaKd
https://bit.ly/311aNQc
https://bit.ly/311jQR7
https://bit.ly/39IAvN6
https://bit.ly/33afRUP
https://bit.ly/39Kdut3
https://bit.ly/3hTznsO
https://rdbl.co/30f2qkT
https://bit.ly/39G7uBE
https://bit.ly/2P9qZZQ
Has anyone built a full / real-world application with Ember.js ?
Tags: discuss
Published: 2020-08-05 05:10:05

If you've ever built a jQuery / or backbone / or batman - or whatever MVC-ish type library/framework - then well, you've dealt with a lot of weird unexpected problems and state-management stuff - that most _new_ developers have not.

There was a freaky time where Ember was (way ahead of it's time) but _scary and ugly_ - with `<script>` tags and stuff... but _we're talking_ about - post 2013 here. Have you ever use this framework? In real-world scenarios?

https://dev.to/_adam_barker/the-super-brief-history-of-javascript-frameworks-for-those-somewhat-interested-3m82

jQuery, Backbone, Angular, Batman, Knockout, Meteor, React...

(wait... there was also Ember... you know - the thing that came from the thing... that apple made - and that LinkedIn is built with... and Apple music... and all of those things you use A LOT...)

What's the deal?

Have you ever built an application with Ember.js ?

If you haven't... what are your reasons?

At the end of the day - CSS / JS - whatever... these libraries and frameworks seek to solve some of the problems in the ecosystem. It shouldn't' matter their names - and their marketing - but --- do they solve the problems? Do they help us make better products? Do they save the world?
Updating My GitHub Profile README
Tags: github, showdev
Published: 2020-08-05 05:06:54

A few weeks ago, [GitHub](https://dev.to/github) released full support for adding READMEs to profile pages. This allows users to spice up their pages with greetings, contact & professional information, or to [create a fun, random game of chess](https://github.com/timburgan). 

{% twitter 1286724102099816448%}

I've been meaning to create one for a few weeks, and apparently midnight on a Tuesday was the right time for me to actually go through with it. All it takes is to create a new repository named after your username with a `README.md` file in it! My profile README includes the following:

* A nice introduction to greet people
* Some quick facts about myself to get people up to speed
* A disclaimer that my public GitHub code may not be up to par with my best skills 😅
* My current projects, volunteering efforts, and hobbies
* My latest Dev blog posts (credit to [@gautamkrishnar](https://dev.to/gautamkrishnar) for the workflow)
* My GitHub stats across repositories

You can [visit my profile](https://github.com/dstarner), or just check out the screenshot below. What kind of stuff have you seen, or what does your profile README look like?!

![GitHub Profile](https://dev-to-uploads.s3.amazonaws.com/i/4iumjzayrjj1sf35zdef.png)
Building custom Headless CMS that powers Blogging platform
Tags: architecture, showdev, api, development
Published: 2020-08-05 05:05:25


Being a beginner means exploring new horizons of programming by stepping into unknown and getting your hands dirty.

It's fascinating to start working on a project with a new piece of technology, isn't it? Problems you encounter and try to solve aren't as easy though, they're part of your learning path.

So, let me share with you the experience of building my first distributed system: headless CMS, API and a blog. It may help you to create a similar system by yourself avoiding mistakes I did. By the way, it's the most comprehensive article I could find on the web🥰.

I won't explain introductory information but will leave links to resources where you can learn more. Additionally, you can watch [the talk](https://youtu.be/KX4G49ZrvY0?list=PLJRhuqXHXswxDLwneCeLtbSYVkyhCa4Ve) in case you're not familiar with the advantages of distributed systems over monolithic ones.

The source code of the project along with the walkthrough the UI and API documentation (suggest not reading until you finish the article):

{% github Vidzhel/Bluro/ %}

[Read more](https://medium.com/@vidzhel/building-custom-headless-cms-that-powers-blogging-platform-d6d33515f109)
Boost Web Performance: content-visibility (chrome 85)
Tags: webdev, javascript, css, news
Published: 2020-08-05 04:41:45

To boost web app performance, A new css property is introduced with the launch of chrome 85.

* content-visibility allows the element's rendering work, including layout and painting, until it is needed. 
* If heavy part of your content is not visible to the screen, using this property will make the initial load much faster.
* You have control to make it automated or via a script to handle it.
* The 'auto' keyword allows for the user-agent to manage content visibility based on proximity to the viewport.
* Whereas 'hidden' keyword allows full script control of content visibility.
Let's solve LeetCode! Fibonacci Number
Tags: beginners, tutorial, javascript
Published: 2020-08-05 04:09:59

# Problem 509 - [Fibonacci Number](https://leetcode.com/problems/fibonacci-number/)

The Fibonacci numbers, commonly denoted F(n) form a sequence, called the Fibonacci sequence, such that each number is the sum of the two preceding ones, starting from 0 and 1. That is,

```
F(0) = 0,   F(1) = 1
F(N) = F(N - 1) + F(N - 2), for N > 1.
```

Given `N`, calculate `F(N)`.

This problem is a great introduction to recursion and a little fun concept called dynamic programming (DP).

## Conceptual Overview

In mathematics, the Fibonacci numbers form a sequence called the Fibonacci sequence, such that each number is the sum of the two preceding ones starting from 0 and 1. 

For example: 0, 1, 1, 2, 3, 5, ...

So how do we solve this? I mentioned earlier that this problem is an introduction to recursion and DP. It is, but there are a few ways we can solve this problem.

If you want to learn more about Dynamic Programming, check out [Dynamic Programming I: Fibonacci, Shortest Paths](https://www.youtube.com/watch?v=OQ5jsbhAv_M&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb&index=19) from MIT OpenCourseWare.

So there are a few solutions:
1) Recursion
2) Recursion with DP
3) Iteratively

Each with different time and space complexities.

## Coding walkthrough

### Recursion only
Any function that uses Recursion you must remember that there needs to be a base condition to stop the recursion. If the base case is not reached or defined then there will be stack overflow due to memory limitations.

```javascript
/**
 * @param {number} N
 * @return {number}
 */
const fib = (N) => {
    if (N < 2) return N; // base condition

    return fib(N - 2) + fib(N - 1); // recursion
}; 
```

Pretty straight forward, there's a base condition that will stop the recursion when it evaluates to true.

#### Time & Space Complexity

Time: O(2^N) & Space: O(N)

### Memoized dynamic programming algorithm

```javascript
/**
 * @param {number} N
 * @return {number}
 */
const fib = (N) => {
    let memo = {}
    memo[0] = 0 // Given
    memo[1] = 1 // Given
    
    if (N in memo) return memo[N] // Base condition
    else  {
        memo[N] = fib(N - 1) + fib(N - 2) // Memoize results
        return memo[N] 
    }   
};
```

Whenever we compute a Fibonacci number we put it into the hash table. We do this to "store" or memorize the value so we do not have to do the calculation again. We can look up the key-value in constant time.

#### Time & Space Complexity

This would be considered a top-down approach
Time: O(N) & Space: O(N)


### Iterative approach
```javascript
const fib = (N) => {
    const lastTwo = [0, 1]
    let counter = 3
    
    if (N <= 1) {
        return N;
    }
    if (N == 2) {
        return 1;
    }
    
    while (counter <= N) {
        const nextFib = lastTwo[0] + lastTwo[1]
        lastTwo[0] = lastTwo[1]
        lastTwo[1] = nextFib
        counter++
    }
    
    return lastTwo[0] + lastTwo[1]
};
```

#### Time & Space Complexity
Time: O(N) & Space: O(1)
Difference between Gravitee and Gravitee AM
Published: 2020-08-05 04:02:28

Hi,

I would like to understand main difference between Gravitee and Gravitee AM as I am seeing we have 2 variants 

Graviteee - Gravitee gateway, gravitee api, gravitee ui
Gravitee AM - Gravitee AM gateway, gravitee AM api, gravitee AM ui

Here its bit confused. Why do we have 2 variants of solutions? In which case we need to use them.

Thanks,
David.
How to Deploy a Node.js App on Heroku: Hands-on!
Tags: node, heroku, tutorial, codenewbie
Published: 2020-08-05 03:54:45

{% youtube w3S03IDIljM %}
In this video, you will learn how to deploy your nodejs app on Heroku. I will show you a simple chat app will deploy on Heroku using VSCode.

Code: https://github.com/codingx01/node-heroku


------------------------------SOCIAL------------------------------
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
GitHub Codespaces - Extensions
Tags: github, vscode
Published: 2020-08-05 03:29:19

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

Trying out various features of GitHub Codespaces - tonight I am testing out the performance of extensions.  Seems like all of the extensions are available already.  Tried out the Terraform, Scala and Dockerfile extensions.

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


Very snappy - no lag whatsoever.  Tried a bioinformatics file viewer (for VCF files), loaded as quickly as when I used the desktop version of VSCode.

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

Good Job Microsoft.  I will keep posting here as I continue to work through this beta release.
We earned $2.6k after we go viral on HackerNews
Tags: motivation
Published: 2020-08-05 03:25:31

Hello Everyone, 👋

Yesterday, we posted our product www.frontendor.com (create landing pages by copy-paste) on HackerNews and got it to the front page without any help from friends (no up-votes or comments).

🙌 Results in 48 hours:

10k+ visits
840+ visited our Gumroad page
80+ sales & $2.6k

If you want to make it, consider following these tips:

👉 Post on Sunday (less competition).
👉 Reply quickly to all comments (my friend didn't sleep all night 😝)
👉 Try to open conversations (this will really help you rank higher)
👉 Choose your headline carefully (we got many compliments about our headline)
👉 Don't break the rules, read the guideline.

Good luck 😻
User Authentication (react-native)
Tags: authentication, expo, reactnative, react
Published: 2020-08-05 03:14:40

---
title: User Authentication (react-native)
published: true
description: 
tags: authentication,expo,reactnative,react
//cover_image: https://direct_url_to_image.jpg
---

Damn, I didn't realize how much of a hassle, user authentication is,
Create landing pages by COPY-PASTE
Tags: html
Published: 2020-08-05 02:58:40

Hello Everyone,👋

💰 Beautiful & Professional Landing Page Is Critical For Lead Generation 💰

-------------------------------------
🎉 We are extremely excited to announce Frontendor  🙌. A library of reusable and separate HTML blocks (pricing tables, heroes, etc) to help developers build modern landing pages quickly by COPY-PASTE.

-------------------------------------
🤔 Why did we build this?

We have noticed that many of us trying to buy ready templates from other marketplaces, However, they are often complex templates that are difficult to modify or perhaps even arrange. From here we focused on two essentials gaols:

👉 Neat code, easy to customize
👉 Separate blocks, easy to integrate

Secondly, as indie hackers, we are sure we need to build dozens of landing pages for our new ideas, products, etc. this way, we can build a new landing page every day just by copying the HTML & CSS from our library. 


-------------------------------------
🙌 We are launching with a limited number of lifetime plans. This means you only pay once and get access forever to Unlimited Updates & Support. 

👉🏻👉🏻 Grab the deal before it runs out. 💰 Get 50% OFF  - www.Frontendor.com

-------------------------------------
🤩 We're planning to add new blocks regularly over time and all new blocks added will be totally free for existing customers.


Thanks for reading this, you are special 😻