teleren/devto huggingface dataset:
CSS Selector
Tags: cheatsheet, css, selector
Published: 2020-05-14 06:42:10

### [target]
Selects all elements with a target attribute.

### [target=_blank]
Selects all elements with target="_blank".

### [title~=flower]
Selects all elements with a title attribute containing the word "flower".

### [lang|=en]
Selects all elements with a lang attribute value starting with "en".

### [href^="https"]
Selects all elements whose href attribute value begins with "https".

### [href$=".pdf"]
Selects all elements whose href attribute value ends with ".pdf".

### [href*="w3schools"]
Selects all elements whose href attribute value contains the substring "w3schools".
Flutter: Simple Bottom Navigation Bar
Tags: flutter, dart, navigation, app
Published: 2020-05-14 06:39:49



Bottom Navigation Bar is a component that makes it easy to explore and switch between the top-level view in single click or tap.

1. Create Flutter Project
2. Create Screen
3. Create Navigation Container

#### 1. Create Flutter Project

```bash
$> flutter create --org com.yourdomain navexample
```

#### 2. Create Screen

```dart

import 'package:flutter/material.dart';

class Screen extends StatelessWidget {
  String title;
  Screen({this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Text(title),
      ),
    );
  }
}
```

#### 3. Create Navigation Container (main.dart)

```dart
import 'package:flutter/material.dart';
import 'package:navexample/screen.dart';

void main() {
  runApp(MyApp());
}

class NavObject {
  Widget screen;
  Icon navIcon;
  Text title;
  NavObject({this.screen, this.navIcon, this.title});
}

List<NavObject> navItems = [
  NavObject(
    screen: Screen(title: "Home"),
    navIcon: Icon(Icons.home),
    title: Text('Home'),
  ),
  NavObject(
    screen: Screen(title: "Settings"),
    navIcon: Icon(Icons.settings),
    title: Text('Settings'),
  ),
  NavObject(
    screen: Screen(title: "Share"),
    navIcon: Icon(Icons.share),
    title: Text('Share'),
  ),
];

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _screenNumber = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: navItems[_screenNumber].screen,
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: navItems
              .map((navItem) => BottomNavigationBarItem(
                    icon: navItem.navIcon,
                    title: navItem.title,
                  ))
              .toList(),
          currentIndex: _screenNumber,
          onTap: (i) => setState(() {
            _screenNumber = i;
          }),
        ),
      ),
    );
  }
}

```
Daily Challenge #242 - Expressions Matter
Tags: challenge
Published: 2020-05-13 14:58:55

---
title: Daily Challenge #242 - Expressions Matter
published: true
series: Daily Challenge
description: Try every combo to return the highest number. 
tags: challenge
---
Given three integers a ,b ,c, return the largest number obtained after inserting the following operators and brackets: `+, *, ()` In other words , try every combination of a,b,c with `[*,+,()]` , and return the highest number.

Here's an example:
```
1 * (2 + 3) = 5
1 * 2 * 3 = 6
1 + 2 * 3 = 7
(1 + 2) * 3 = 9 <-- So the maximum value that you can obtain is 9.
```

####Tests
expression_matter(5, 1, 3)
expression_matter(3, 5, 7)
expression_matter(5, 6, 1)
expression_matter(1, 6, 1)
expression_matter(2, 6, 1)

Good luck!

***
_This [challenge](https://www.codewars.com/kata/5ae62fcf252e66d44d00008e) comes from MrZizoScream on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Flask - A Quick Guide
Tags: python, mlh, majorleaguehacking, localhackday
Published: 2020-05-14 06:13:57

Hey there developers! How's your day going? :) 

This post is for those who want to create a basic Flask app pronto !

## What is Flask?
Flask is a micro web framework written in Python meant for easy and quick development of web apps.

## Quick - Launch
The official documentation is always necessary, however it may not be handy when you have the deadline ticking over your head. You could be having cool ideas yet be unsure of how to go about them, and knowledge of other frameworks would only add to the confusion. This could get frustrating.

So, how could you quickly skip the basic setup and jump into the main section to start modeling your ideas? 

## Starting your Flask App

- Make sure you have python and a good code editor installed on your laptop which would be the base of our construct.  
- Now, navigate to the project directory, either from your files or from Command Prompt. 
- Create a virtual environment where you can work on this project independently, without worrying about the quirks of other projects with: 
```
py -m venv env 
```
where env is the name of the environment. You could change its name if you 
  want.
- Activate the environment with:
```
env\Scripts\activate
```
- Install flask in this environment with:
```
pip install flask
```
- To install a specific version of flask, simply mention it :
```
pip install flask==0.6.1
``` 
- In case you get a pip warning, you might have to upgrade pip :
```
python -m pip install --upgrade pip
```
I always upgrade pip when I install flask for my projects.

- In your text editor,  simply copy-paste the following code and save the file as app.py

```
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello World!'

if __name__ == '__main__':
    app.run()
``` 
- Now in the terminal, set the environment variable for your app and you are good to go !
```
set FLASK_APP = app.py
flask run
```
Alternatively, you could run it directly by:
```
python app.py
```
With that we have our localhost running, with the following message expected to show up on the terminal
```
* Debugger is active!
* Debugger PIN: XXX-XXX-XXX
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
```
Voila ! And there you go, with your basic flask app ready to be exploited for your game.
Object.freeze() in Javascript🎈
Tags: javascript, html, news
Published: 2020-05-14 06:12:26

I was reading a post here on [dev.to]() which explained the difference between [var, let and const by Sarah Chima](https://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e).

The article was well explained but what I would love to explain in this article is the `const` variable declaration.

>The const variable declaration cannot be reassigned and updated, that's very true but in the case of arrays, objects we could still update their values. So the `Object. freeze` method helps us freeze our data or variable to protect our data from mutation. 
```
const name = "Joel"
name = "John" //this will throw an error
```
**const alone does not guarantee protection** for your data or let me say it does not protect your data from mutation, 

Example:

    const GREETING = {
	    name : "Joel",
	    info : "Goodday!"
	 }
Though the above code makes use of const I can still update the values via the code below since it's an object or an array. 

    GREETING.name = "Elijah";
    
But this could easily be avoided by making use of `Object.freeze()` to freeze our const variables.
Just add this line of code and you will discover that the values cannot be updated.

    Object.freeze(GREETING); 
    
    GREETING.name = "Elijah"; // This will now be ignored due to mutation

For more clarification check: 
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/prevent-object-mutation

p.s: I'm looking forward to being your friend:rocket: let's connect on [twitter](https://twitter.com/olawanle_joel).
NodeJS require() vs fs.readFileSync to read JSON files
Tags: javascript, node
Published: 2020-05-14 06:10:39

you can read json files either using `require('filename.json')` or `fs.readFileSync('filename.json')`

If the JSON file is static, `require()` is better because `require()` caches the file. On the other hand, if the JSON file changes, `fs.readFileSync` is better because reads the file every time and hence useful when the contents of the JSON file have to be re-fetched. 

Also, do note that when using `fs.readFileSync`, additionally you have to do JSON.parse after reading the content.
 

```js
// using require directly to read json
let data = require('./file.json')

// using fs module to read json
const fs = require('fs')
let data = JSON.parse(fs.readFileSync('file.json', 'utf-8'))

```
Github Sponsor機能を使ってESLintに支援した
Tags: javascript, eslint, opensource
Published: 2020-05-14 05:34:02

コードによる貢献もすばらしいとは思いつつ、色々な貢献の方法もあることはいいなぁと思っていました。
今回は以前からずっとやってみたいと思っていた金銭的貢献をGithub Sponsor機能を使って行いました。毎月$5をこのプロジェクトに貢献して、さらに素晴らしいパッケージになることを望みます。

なぜ[ESLint](https://eslint.org/)かというと、普段のフロントエンド開発をする時に必ずインストールするパッケージの一番上位のものがESLintだったからです。
しかも、自分の開発スタイルはLintやテストをキチンと通した方法を好んでいるので、ESLintは欠かせません(インストールしないことはありません)。
仕事でもプライベートでも、このライブラリを使っています。

今回僕からは微々たる貢献ですが、ESLintのさらなる発展に寄与できたら本当に嬉しいです(^o^)

(https://github.com/tokuda109 のSponsoringのところから確認できます。)
Build your first RESTful API with Node.js and Express Part-1
Tags: tutorial, javascript, webdev, node
Published: 2020-05-14 05:09:29

---
title: Build your first RESTful API with Node.js and Express Part-1
published: true
description: Build your first RESTful API with Node.js and Express Part-1
tags: Tutorial, JavaScript, WebDev, Node
---

In this video, In this video, We are going to learn about How we can create RESTful API with node.js and express. 

As you know, Express is one of the most popular frameworks for creating a web application with node.js . In this video, We are going to use the same. We are going to use a static array as our database for the demo purpose. And we are also going to use Express router to map our API Calls Urls(End Points) to our function where we are going to write code to receive and send JSON.


{% youtube 9gcCKpH1vLg%}

Source Code for this video is available on - https://github.com/JalpeshVadgama/FirstNodeJSRestAPI


If you like this video and wanted to see a similar kind of video then, please subscribe to my youtube channel at - http://bit.ly/codewithjv.

Also, Do let me know what more content you wanted to see in for node.js.
PDC Virtual Tech Carnival 2020
Tags: opensource, techtalks, redis, kubernetes
Published: 2020-05-14 05:07:20

[Pune Developer's Community](https://www.meetup.com/Pune-Developers-Community/), India's number 1 tech community has started Tech Carnival 2020, there are 30 + webinars by industry experts on various trending technologies.

- All the webinars are FREE to register
- All the webinars scheduled across all Saturday, Sunday for the next 6 weeks.
- All the webinars will be streamed, published on PDC social accounts
- RSVPs to respective webinar links from the PDC meetup events page.

RSVPs now: https://www.meetup.com/Pune-Developers-Community/events 

Don't forget to share a link with your office friends, share knowledge, learn together.
Simple React Shopping Cart
Tags: react, javascript, hooks
Published: 2020-05-14 05:03:55

Hi all! 

For those who are still learning stuff about React (just like me :P),  I wanted to share a Shopping Cart example using React Hooks and Context API. 

Please, know that this is just an example with basic Shopping Cart functions and not a fully "Store" boilerplate.

Any feedback is appreciated and I hope some of you find this usefull for learning!

GIT: https://github.com/AlexSegen/react-shopping-cart
DEMO: https://react-shooping-cart.netlify.app

You can follow me on Twitter to share more programming stuff.
https://twitter.com/pixelagil/

Thank you!
Code Sandbox / Developer Playground Options
Tags: codesandbox, devplayground
Published: 2020-05-14 04:30:33

I'm often annoyed with codepen.io (sorry codepen peeps; love ya though!). Looking for alternatives...

See also:
https://www.reddit.com/r/javascript/comments/c13c4t/what_are_some_of_the_alternatives_to_codepenio/

### Flems
Interesting and uses unpkg.com for dependencies. Not sure how that works until I try it...
https://flems.io/

### JSFiddle
It's grown a lot since the old days, but still feels a little back-woods to me.
https://jsfiddle.net/

### CodeSandbox
This may become my new goto.
https://codesandbox.io/

### rainbow9.org
Just noting it here because I miss it. 

### AWS Cloud9
This is more of a full-fledged development environment.
https://aws.amazon.com/cloud9/
https://console.aws.amazon.com/cloud9/home/product

### Repl.it
I used this years ago when learning Scheme. Looks like it's evolved to include tutorials and a community feel.
https://repl.it/

### Practice Board
New to me, but omg this looks like one of the originals! 
https://www.practiceboard.com/

### Outpan
Seems like a hot spot for me to publish quickie apps. Although I must say many of the apps here do not look like quickies. As their tagline says: awesome apps in your browser.
https://www.outpan.com/

### Glitch
Collaborative development sandbox.
https://glitch.com/

---


## Update 2020 June 29

Just saw this one here on dev.to. Nice work!!
https://dev.to/chr15m/i-built-an-online-code-editor-3aj5

---

## Update 2020 May 18

### Snack
I didn't know it was possible, but snack has iOS, Android, and browser previews for React Native code. e.g. This [demo from Formik](https://snack.expo.io/?dependencies=yup%2Cformik%2Creact-native-paper%2Cexpo-constants&sourceUrl=https%3A%2F%2Fgist.githubusercontent.com%2Fbrentvatne%2F700e1dbf9c3e88a11aef8e557627ce3f%2Fraw%2Feeee57721c9890c1212ac34a4c37707f6354f469%2FApp.js). Do other playgrounds have this option?

----

## Look for more alternatives...
Several more alternatives nicely organized with pros, cons, and screenshots.
https://www.slant.co/options/5535/alternatives/~codepen-alternatives
Remove K Digits - LeetCode
Tags: stack, greedy
Published: 2020-05-14 03:55:24

---
title: Remove K Digits - LeetCode
published: true
description: LeetCode Medium
tags: stack, greedy
---

Given a non-negative integer num represented as a string, remove k digits from the number so that the new number is the smallest possible.

Observation 1: We need to select the first k digits which is most significant as least possible.

Consider this example "191" and k = 1

As we go throught "191"

1. 91 -> min = 91, "1" is removed
2. 11 -> min = 11, "9" is removed
3. 19 -> min = 11, "1" is removed

Here 9 is the most significant digit which means, if any digit less than 9 will make the whole number lesser

In order to solve this kinnd of problem you can think of greedy algorithm

[Greedy](https://www.hackerearth.com/practice/algorithms/greedy/basics-of-greedy-algorithms/tutorial/) algorithm is a technique used whenever an optimal solution is required(i.e, min or max)

Here, we need the smallest number possible

Let's see the algorithm

0. Create a stack to hold the numbers
1. Loop through each element in the num string
2. while `stack length > 0 && k > 0 && stack[stack.length - 1] > num[i]`
3. Pop the elements in the stack and decrease k by 1
4. Push each elem to the stack
5. After coming out of for loop, if `k > 0` pop k times from stack
6. Now remove any leading `0`'s from the stack
7. Now convert the stack to string and return it
8. There is a edge case when there is "0", it might return empty string, handle it

Let's consider few examples of different scenarios

**Case 1:**

num = "1432219" and k = 3

We need to find the best fit for the first 3 digits in num which is smallest possible. i.e, 143 should be replaced with smallest fit as they are most significant

Steps:

1. stack = [1], k = 3
2. stack = [1, 4], k = 3
3. stack = [1, 4, 3], k = 3
4. stack = [1, 4], k = 2 as 3 > 2
5. stack = [1], k = 1 as 4 > 2
6. stack = [1, 2], k = 1
7. stack = [1, 2, 2], k = 1
8. stack = [1, 2], k = 0 as 2 > 1
9. stack = [1, 2, 1]
10. stack = [1, 2, 1, 9]

Here's the code

```js
var removeKdigits = function(num, k) {
	let stack = new Array();

	for(let i = 0; i < num.length; i++) {

		while(stack.length > 0 && k > 0 && stack[stack.length - 1] > num[i]) {
			stack.pop();
			k--;
		}

		stack.push(num[i])
	}

	while(k > 0) {
		stack.pop();
		k--;
	}

	let res = stack.join('');
	while(res.charAt(0) === '0') {
		res = res.slice(1);
	}

	if(res.length == 0) {
		return "0";
	}
	return res;
};
```
Best hosting provider for open source and FOSS projects 
Tags: free, hosting, opensource
Published: 2020-05-14 03:47:36

Recently I discovered fosshost 

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

"A not-for-profit provider of cloud-based hosting services to the free and open source software community. " looking fo a host for a project of mine and I got to say it's the best free host I have ever seen "semi-dedicated virtual instances, storage and web hosting services to projects for development, testing and production use." When I saw this I thought yea right whatever but it turns out there true and legit I had to give them a shout out the guy who runs fosshost is also a great dude the entire team has been nothing but helpful if anyone out there has an foss or open source project and can't pay for a host fosshost is an fantastic option and there flexible with vm's you have the option to bring your own os 
And it only targets open source and FOSS projects which is what make it great as its not at all for big Business

https://fosshost.org




P.s
I know there are people out there who will try to abuse this service and to those sub-humans no one likes you these people are running this at there expense with there hard work go abuse your own stuff
Managing the inevitable: Rabbit holes
Tags: discuss, watercooler, strategy
Published: 2020-05-14 03:27:27

---
title: Managing the inevitable: Rabbit holes
published: true
description: What are your tips and tricks to manage your time when you feel stuck? 
tags: discuss, watercooler, strategy
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5triqm3iw5naabwsof3n.jpg
---

Problem solving requires deep analysis, but sometimes it can feel like we are spending too much time on the same issue. What are your tips and tricks to manage your time when you feel stuck?
Check “Crowdedness” before you go anywhere nearby and avoid Coronavirus (COVID-19)
Tags: opensource
Published: 2020-05-14 02:26:14

Coronavirus (COVID-19) has spread to more than 177 countries and the number of deaths is continuously increasing. Under the circumstances, many people are reluctant to take part in huge gatherings or crowded places such as exhibitions, conferences, and public events because the larger the crowd, the higher the likelihood of being exposed to the coronavirus.

However, just avoiding huge public events is not enough. More often than not we need to know when we can visit supermarkets or grocery stores to stock up our daily necessities while keeping away from long queues. Sometimes we might want to know how crowded places like restaurants, cafes, and drug stores are to reduce potential health risks not only for ourselves but also for fellow shoppers.

On this note, Ainize team would like to share a very useful website called Crowdy that gives us the population density information before you go somewhere. This website displays nearby places you want to go (shopping mall, supermarket, cafe, hospital, pharmacy, bank, etc..) based on your current location. Once you pick a place, it will show you the current crowdedness level based on popular times data from Google maps, and you can also see the crowdedness of the place on different days and times of the week.

We found the original project created by Andrew Lim among submissions to CGH 1.0 (COVID-19 Global Hackathon 1.0) on Devpost, where he had provided a Youtube video on how to use Crowdy as well as some project information. Ainize team added some additional features to Crowdy since we enjoyed the web app very much and wanted to contribute to the open source community. We believe discovering great projects that we can improve and make available as live services is one of the great benefits of open source. Now, Crowdy is hosted by Ainize where you can run and deploy any open source projects for free.

Hope this website is helpful for everyone to check crowdedness close-by and let’s steer clear of coronavirus!

Crowdy Website: https://link.ainize.ai/2WPzlJD
GitHub repository: https://github.com/andrewlimcj/crowdy
Powered by Ainize: https://link.ainize.ai/2zuP9d0
Some thoughts about frontend learning
Tags: career, beginners, css, javascript
Published: 2020-05-14 02:06:12

Everyday a great number of new people start to study programming and web development. The Front-end is one of the main areas of software development that are chosen by this people. And they have a lot of questions about what framework/library to learn, what tools to use and etc.

But, if I could give an advice to them, I would say that the most important thing is to dominate the fundamental technologies of the web. Become advanced in this technologies, not just learn the basic stuff, because with this solid fundamentals, the path to learn advanced librarys, frameworks and tools will be easier than before.

## HTML, CSS & JAVASCRIPT

The three main Front-end technologies hide a trap. Its easy to learn the basics, but hard to learn the advanced concepts and know this advanced content will be the difference in your career as a developer.

We see in great companies developers having problems making layouts with CSS, for not knowing how the box-model works; or not making the app fully accessible for not using a semantic HTML approach. And with the JavaScript this become much more important, because of the peculiarities of the language.

### 20-80 rule

This technologies use the 20-80 rule. With 20% of the effort you will learn 80% what you need to start to work in the market. The problem is that only know the basics will make you have a lot of issues in problem solving, taking you to difficulties, bugs and errors.

The big problem is that learn this other 20% requires 80% of the effort!

### Conclusion

So the advice is to keep calm and go deep in the learning of this three technologies. Please, don’t underestimate the complexity of HTML, CSS and JavaScript. And understand that all that amazing frameworks, that huge number of names and tools is made with this three fundamental technologies.

- Template engines like liquid, pug, EJS and etc is converted to HTML.

- The pre-processors like SASS and LESS is just CSS with some other features.

- React, Angular, Vue is just JavaScript with some design patterns and software engineering concepts.

The learning curve to this hype tools is very low if you have an advanced knowledge in the fundamentals. Here is an amazing website with a list of the topics that is nice to learn in the three technologies and a lot of others too: [Web Skills Website](https://andreasbm.github.io/web-skills/)