teleren/devto huggingface dataset:
Trying out the flutter_lints package
Tags: flutter, mobile, dart
Published: 2021-07-01 03:48:02

I made another post [last month](https://developermemos.com/posts/linting-flutter-projects) about using linting in Flutter projects but the other day I found out about a (relatively) new package called flutter_lints so I thought I'd try it out and give my impressions.

## The (somewhat) older options

If you read my other post or use linting in your Flutter projects you'll probably already know that there were two major options up until now for linting:

- [lints](https://pub.dev/packages/lints) 
- [pedantic](https://pub.dev/packages/pedantic/install) (used internally at Google?)

I've used both and they are both pretty good, I use lints a lot more often though. I kind of get the feeling that lints is a little stricter but that just might be my imagination. 

## The new challenger(flutter_lints)

So I was browsing Twitter the other day and I saw a [tweet](https://twitter.com/redbrogdon/status/1405307830135971842) in my timeline about `flutter_lints`. It looks like this package is actually endorsed and maintained by the Flutter Team. According to the pub.dev page it's built on top of the `lints` package I mentioned above:

```
This package is built on top of Dart's recommended.yaml set of lints from package:lints.
```

I also saw something else cool in the README:

```
Flutter apps, packages, and plugins created with flutter create starting with Flutter version 2.xx are already set up to use the lints defined in this package. Entities created before that version can use these lints by following these instructions:
```

It looks like this is going to come bundled automatically when you set up a new project from now on? I created a new Flutter project with 2.2.2 two days or so ago and couldn't confirm this but, so maybe it's something that hasn't landed on stable yet.

## My impressions

So I decided to add `flutter_lints` to one of my older projects and take it for a test drive. If you need steps on how to do this you can check out my [post from last month](https://developermemos.com/posts/linting-flutter-projects).

Unsurprisingly I found it to be really similar to `lints`, but I did notice I got a lot of 'Use widget key in constructors' warnings in my custom widgets. This warning is definitely fair, I just hadn't seen it before with `lints` or `pedantic`. Apart from that I mostly got the same warnings as with the other options, especially about adding const keywords 😅.

![Flutter Lint Warnings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gu2pjo8vu5c33w7dv09.png)

If this ends up automatically being added to all new projects it will be great, it'll take another step off my setup process. Plus, I never used to use any linting in my Flutter projects until a couple of months ago and I kind of regret not doing it sooner - it will definitely make things a lot cleaner and streamlined for newcomers.
Plans for the 2022 Hackathon Season
Tags: programming, productivity, hacker, mlh
Published: 2021-07-01 03:17:21

I started doing hackathons from past 2-3 months as I am loving to make new projects and learn new skills. my plan is to explore new topic like ML, AWS, etc. And more focus on skills which I have .
although plans are to explore more and make more connection with new people.

On begining I don't know what is hackathons but now i am able to make project . with the skills which i learnt on the way of hackathons . As i am university student i also have many class work going on .  

Still planed to do as many as hackathon i can do in 2022.
5 Tools to Create Color Palettes for Your Websites and More - II
Tags: design, webdev, css, beginners
Published: 2021-07-01 02:26:55

This is the extended version of my [last post](https://dev.to/tannudaral/5-tools-to-create-color-palettes-for-your-websites-and-more-jj2). Here are some more of my favorite tools for finding the ideal color palette for the websites. Let's get started: 

1. ColorsWall
It is the place to store your color palettes. Brand color codes. Generate Random colors palette. Design colors combinations and more...
You can find it [here](https://colorswall.com/palette/25148/).
![colorswall website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnlk071hjur159sgzhti.jpg)

2. ColorSpace
Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more!
You can find it [here](https://mycolor.space/).
![ColorSpace website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hejv72sc9o7bupu3b6tm.jpg)

3. Canva Color Generator
The easiest place to get colors from your photos ... Want a color scheme that perfectly matches your favorite images, use this!
You can find it [here](https://www.canva.com/colors/color-palette-generator/).
![Canva Color Generator website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kan1x2gvq6lfswz6blnp.jpg)

4. Muzli Colors
One of the best resource out there, helps you create Beautiful Color Schemes that works!
You can find it [here](https://colors.muz.li/).
![Muzli Colors website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9suyzq4lvxbmsvvrhrot.jpg)

5. Colormind
Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art...
You can find it [here](http://colormind.io/).
![Colormind website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue98r0g8by766uxyt37h.jpg)

Those are my magic recommendations, if you have some more, do share them in the comments!

Happy Coding!
What are First Class Functions in JS?
Tags: javascript, beginners
Published: 2021-07-01 02:09:44

Let's go over common jargons used in JS.

####What is a function statement and a function expression?
```js
//function statement
function statement() {
 console.log('statement')
}
//function expression
var expression = function () {
 console.log('expression');
}
```
####What is the difference between declaring a function as an expression vs. a statement?
The main difference between declaring functions this way is hoisting.

```js
statement(); // prints 'statement'
expression(); // TypeError: expression is not a function

function statement() {
 console.log('statement')
}

var expression = function () {
 console.log('expression');
}
```
When JS allocates memory it copies the whole function when it is declared as a statement. But, JS assigns a value of *undefined* for variables which is why JS does not recognize function expressions as functions.

####What is an anonymous function in JS?
Anonymous functions are functions without names. If you declare a function without a name it returns a syntax error. Anonymous functions are used when functions are used as values. In the example above, a function expression uses an anonymous function where the function is a value and has no name.

```js
function () {} // this in itself returns SyntaxError;
```

####What are first-class functions in JS?
First-class is the ability to use functions as values, arguments, and returned values.
Faster angular universal with PWA
Tags: angular, pwa, javascript, universal
Published: 2021-07-01 02:00:16

This article speaks about an interesting side-effect of mixing angular universal with progressive web application (pwa) - and that's a massive performance boost!
&nbsp;
### The Setup
--
Let's start by creating a standard angular-cli application (v12.1.0 in my case). I enable SSR (angular universal) on that.
```
ng add @nguniversal/express-engine
```
Once this is done, let's quickly check if SSR is working as per our expectation.
```
npm run build:ssr && npm run serve:ssr
```
Node server fires up on port `4000` and I check for my webpage's source.
```
view-source:http://localhost:4000/
```
![SSR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flvbc1rht8js94alxv2m.JPG)
Wonderful! Nothing fancy so far, and everything works great! CLI application works and universal works.
&nbsp;
The next step is to add PWA support.
```
ng add @angular/pwa
```
No extra configurations so far, and that's how it will be. Let's build our universal application once again and serve it on `localhost:4000`.
&nbsp;
**`But wait!!!`** Now when I view my webpage source on the browser, I get this:

![SSR with PWA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5cf4nckc11h86hol56c.JPG)
_So does this mean that my SSR is broken?_
&nbsp;
The answer is **Nope! My SSR is perfectly fine :-)** Let's run a quick check to prove this. Open up POSTMAN and run a `GET` request against `http://localhost:4000`. And voila! I see my server-side-rendered page once again!
![POSTMAN](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t66k0w3snhzl6dot2lcy.JPG)
So what is happening here?
&nbsp;
&nbsp;
### The conclusion and explanation
--
The reason why we do not see the server-rendered content on the browser source is that, the `index.html` is now cached by service-worker at the browser. _**The browser does not need to wait for the server to render the content any more, and it simply serves the cached version**_, and **Angular** takes over thereafter, like a normal SPA. Open up `ngsw-config.json` and verify that `index.html` is one of the cached resources.
![ngsw-config.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdc36kwtedpid369zp69.JPG)
The search-engines/crawlers, on the other hand, would see your website just the way POSTMAN sees it, and will continue to have the entire generated HTML for search-engine-optimization. So this way, you gain the performance boost via service-worker caching, without losing the advantages of angular universal!

**Note (and a small exercise)**: If you remove `index.html` from `ngsw-config.json` and re-build your universal, you would see that the server-rendered content is back on your browser source, since the HTML is now no longer being cached!
&nbsp;
Cheers -:)
[Anirban Mukherjee](https://anirbmuk.appspot.com/en)
Deploy Nuxt-Express app on Vercel with SSR functionality
Tags: vercel, nuxt, ssr, express
Published: 2021-07-01 01:58:30

---
title: Deploy Nuxt-Express app on Vercel with SSR functionality
published: true
description: This Article descuss how to use  the nuxt-express template with Vercel.
tags: vercel, nuxt, ssr, express
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf0c99kr70qv8r8jbo9c.png
---

Today I tried to deploy a Nuxt-Express app on Vercel and wanted to share this experience. 

## what is Nuxt?

In case you don't know. Nuxt.js is a framework that helps you build server-rendered Vue.js applications easily. It abstracts most of the complex configuration involved in managing things like asynchronous data, middleware, and routing. It’s similar to Angular Universal for Angular, and Next.js for React.


## what is vercel?

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

## Let's get started

1- Create the project. You can do that manually or just go with [the Starter template for Nuxt.js with Express](https://github.com/nuxt-community/express-template/) it won’t make a difference but I’ll suppose you downloaded the template and installed the packages. 

2- Install @nuxtjs/vercel-builder. 
```bash
npm i @nuxtjs/vercel-builder --save-dev
```
3- Create a vercel.json file and add this into:
```json
{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["api/**"] // HERE ADD THE PATH TO YOUR SERVER FILES
      }
    }
  ]
}
```
That’s all for the code. Now let’s deal with Vercel.

1- Import your github repo.
2- select the Vercel scope in my case I choose personal account.
3- Configure the build and output settings. You need to override the default values. In The build command field add `npm run build`. And in the output directory add `.nuxt`

4- The last step is to add your `env` variables. 

At the end you should have something like this.

![Vercel Configurations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g3w5b433717x81apqih.png)


Now click deploy and That’s it you can now visit your app. Enjoy! 🎉
How to add a remote Github repository to local
Tags: github
Published: 2021-07-01 01:44:37

You might have been given a task to accomplish using github classrooms or created a remote repository on github and you are wondering how to push your local project to the remote repository. In this article i will quickly show you how to accomplish that task. Sit tight. 
<img width="100%" style="width:100%" src="https://media.giphy.com/media/pOJSTD1nNXUyN0xnwN/giphy.gif">

On the terminal of your ide . you will want to initialize the local directory as a git repository by using this command. 

```
git init -b main
```
This command converts your local repository into a git repository. The next thing you would want to do is add the files you have in your local repository into your git repository by committing them.  Before committing the files you would first have to add them . The command for adding is below 
```
git add .
```

After adding the files you then commit it to the local git repository by using the command:

```
git commit -m "First commit"
```

First commit represents the commit message. it is usually a short title that is an overview of what you have done.  This local commit also prepares the files to be pushed to a remote repository. 

At the top of your github online repository setup page you would see the repository url . either HTTPS or ssh. depending on your organization's requirements

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

You would need to add the url you have copied to your local github repository by using the below command. 

```
git remote add origin  <REMOTE_URL>
```

Then verify the remote url 

```
git remote -v
```

After adding the url to the local github repo. You can then push your changes to your online repo by using the below command

```
 git push -u origin main
```

With main being the name of the branch online you are pushing your local changes to 

Thank you very much and i hope this article helps you with your first steps in github. I am always free to answer questions and help. you can check my profile out on twitter 
@rake_code
What are Closures in JS?
Tags: javascript, beginners
Published: 2021-07-01 01:30:12

####What is a closure in JS?
A closure is a function bundled together with its lexical environment. The following is a simple example of a closure.
```js
function outer() {
  var a = 7;
  function inner() {
   console.log(a);
  }
  inner();
}
outer();
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znruo6d4iwiy8p4uyuip.png)

As you can see closure is possible because of the concept of scope chaining which we have discussed in the previous part of this series. If a certain variable is not found in its local memory then it goes down the call stack to its parent's local memory to find the variable which is closure.

####Fun problem!
```js
function outer() {
 for (var i = 1; i <= 5; i++) {
  setTimeout(function () {
   console.log(i)
  }, i * 1000)
 }
}
```
What do you think is the output of this code?

Most people would think that 1, 2, 3, 4, 5 would be the output of the code above. But, the output is actually 6, 6, 6, 6, 6. The reason the code outputs 5 sixes is because JS continues the for loop without waiting for setTimeout to finish. Once setTimeout is ready to output some value, *i* is already at 6 which is why is outputs 5 sixes. The simple solution is to use let instead of var because it creates a block scope meaning that a new copy of variable *i* is used for every loop. But can you think of another way to solve this problem without using let? (Hint: closures)

```js
function outer() {
 for (var i = 1; i <= 5; i++) {
  function useClosure(i) {
   setTimeout(function () {
    console.log(i)
   }, i * 1000)
  }
  useClosure(i);
 }
}
```
The problem was that we needed to create a new copy of variable *i* each time the loop was executed. This is possible if you use closures.
When I have no clients or projects as a freelancer , What should I do?
Published: 2021-07-01 01:09:16

Hi everyone,
hope you are doing great. Today i want to discuss a topic as mentioned in title. As a freelancer what should we do in our free time?
According to me we learn any new skill related to our field.
like if you are a web developer you can learn any new language like laravel / php or you can learn any new js framework. if you already learn then you can create an app or website for practice. you can work on your portfolio. 

I advised you to never stop learning. Doing Something  great all time. Try to learn and explore more new things.

I hope that's will help you.
**Thanks**
Create an Electron desktop app version of jwt.io
Tags: javascript, beginners
Published: 2021-07-01 01:08:14

So last night, for some reasons I couldn't access jwt.io to decode a token (the website was loading very slowly) so I thought why didn't I create a desktop app so I don't have to suffer from this wait in the future?

Well, after a few hours of work, I got exactly (nearly) what I wanted:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h32wgwunuu157kq8dt4x.png)

Let me show you how I did it.

## Step 1: Search for electron vue
I didn't work with electron much but I knew that it's based on Javascript so it's a good chance that somebody has already created a project that have electron bundle with Vue. My guess was right, I found this awsome repo on github:

https://github.com/SimulatedGREG/electron-vue

All credit to the author.
I cloned the repo and opened it in VSCode.

## Step 2: Find a jwt decoder
Again, with google, I got this repo from Auth0 that help me decode jwt to get header and body:

https://github.com/auth0/jwt-decode
Again, thanks the developers.

So in my project, I ran 
```
npm install jwt-decode
```

And I got the first working version.

## Step3: Install codemirror for syntax highlighting

I used this repo:
https://www.npmjs.com/package/vue-codemirror

Thanks the developer :)

But only get basic function of a code editor functioning. I couldn't get syntax highlighting work yet (Have no idea why, hopefully you guys can give a pointer).

So, with the help of all the awesome developers of the repos I cloned, I got a working version of a jwt decode in just a few hours.

To be honest, the most time I spent was on trying different syntax highlighting libs and got no results :D

## Conclusion
Building desktop app is fun and easy, especially for small projects like mine. You should give it a try.

Thanks for reading
How the MLH 2022 Season is Gonna Rock!
Tags: majorleaguehacking, 2022, hacking, programming
Published: 2021-07-01 00:24:42

##What are my plans?
One of my big plans for the 2022 season is to run a hackathon! Be it an MLH member event or not, I would love to run an event and coordinate all elements of a hackathon, be it sponsors, prizes, judging or marketing.

##What else am I doing?
Honestly, just vibing. Looking to start at University College Isle of Man to study a BSc in Computer Science. Hopefully some form of internship or computing experiences; travel!
Introduction to AVL  tree
Tags: algorithms, beginners, codenewbie, computerscience
Published: 2021-07-01 00:15:38

Hello, today, we're going to talk about **AVL tree**.
\#day_19
## why we need to use AVL trees.

Sometimes, the Binary search tree's operations become O(n) instead of O(log n) due to being a skewed binary search tree, that's why **A**delson, **V**elskii and **L**andis. *so what's an AVL tree ?*
<br />
if you're not familiar with binary search tree, this [post](https://dev.to/ayabouchiha/part-3-binary-search-tree-in-data-structure-3p7m) will help you :)

## Definition of AVL tree

> AVL tree is a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees cannot be more than one for all nodes. 
> - [www.geeksforgeeks.org](https://www.geeksforgeeks.org/avl-tree-set-1-insertion/)

## Time and Space complexity

The space complexity of the avl tree is **O(n)**

| insert | search | delete | 
|--------|--------|--------|
| O(log n) | O(log n) | O(log n) | 

## Balance factor

the difference between the height of left and right subtrees can be calculated using this formula below:
```
BalanceFactor = height(left-sutree) − height(right-sutree)
```
if the balance factor was 1 or 0 or -1, the tree is balanced, if not, we use the rotation to make it balanced. There are four types of rotation:
1. Right rotation
2. Left rotation
3. Right-Left rotation
4. Left-Right rotation 

in the next post, we'll cover rotation types with the implementation, see you tomorrow, have a great day!

## References and useful resources
+ [https://en.wikipedia.org/wiki/AVL_tree](https://en.wikipedia.org/wiki/AVL_tree)
+ [https://www.geeksforgeeks.org/avl-tree-set-1-insertion/](https://www.geeksforgeeks.org/avl-tree-set-1-insertion/)
+ [https://www.tutorialspoint.com/data_structures_algorithms/avl_tree_algorithm.htm](https://www.tutorialspoint.com/data_structures_algorithms/avl_tree_algorithm.htm)
+ [https://www.javatpoint.com/avl-tree](https://www.javatpoint.com/avl-tree)
True innovation requires colocation … or does it?
Tags: distributedteams, remotework, office, innovation
Published: 2021-07-02 17:18:06

---
title: True innovation requires colocation … or does it?
published: true
date: 2021-07-01 00:00:00 UTC
tags: distributedteams,remotework,office,innovation
canonical_url: https://jhall.io/archive/2021/07/01/true-innovation-requires-colocation-or-does-it/
---

I recently heard someone say this:

> True innovation and collaboration take place when those working together are actually working together, in the same room.

It’s a common sentiment. And it’s getting a lot of attention as some companies are now deciding to mandate colocated workforces again.

But is it true?

Let me offer some counter-points:

- [Apache HTTP Server](https://httpd.apache.org/), to say nothing of the other [300+ Apache projects](https://projects.apache.org/projects.html)
- [Automatic](https://automattic.com/) (owners of [WordPress.com](https://wordpress.com/))
- [Buffer](https://buffer.com/)
- [DuckDuckGo](https://duckduckgo.com/)
- [Elastic](https://www.elastic.co/)
- [GIMP](https://www.gimp.org/)
- [GitLab](https://gitlab.com/)
- [Go](https://golang.org/)
- [Help Scout](https://www.helpscout.com/)
- [Invision](https://www.invisionapp.com/)
- [KDE](https://kde.org/)
- [Linux](https://www.linux.org/)
- [Mozilla](https://www.mozilla.org/)
- [Product Hunt](https://www.producthunt.com/)
- [Python](https://www.python.org/)
- [Toptal](https://www.toptal.com/)
- [Zapier](https://zapier.com/)

These, and literally thousands of other companies and open source projects, are operated by completely or mostly remote and distributed teams. If these things, including some of the most important software running the entire Internet (Linux, Apache web server and WordPress) can be built by remote, distributed, asynchronous teams, this pretty clearly debunks the idea that “true innovation” requires sitting together.

There are valid reasons to work together in an office, but don’t let this myth be one you use.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._