teleren/devto huggingface dataset:
Catching mistakes as you commit them.
Tags: git, productivity, tooling, javascript
Published: 2020-12-13 19:48:17

You've just made some adjustments to a project or added a new feature. You make a pull request and wait a couple very lengthy minutes just for your CI/CD setup to spit out: 

```terminal
🚨 Lint error!🚨 😡
```

That's when you realize that you didn't save the file, or that you didn't git add it. 🤦‍♂️

**This adds up and is a waste of time!** Even worse if it fails in the build step...

<h3>This is where husky comes in! 🐕</h3>

![husky example where lint error makes it so I cannot commit](https://dev-to-uploads.s3.amazonaws.com/i/tpex5z8s8ujui32rzj5l.gif)
[Github Link](https://github.com/typicode/husky)

As you can see husky makes it so that you can run a set of steps before your git commands go through. And it is extremely simple to setup:

1. Install husky
```terminal
npm install husky --save-dev
```

2. Config
```js
// Inside package.json
// ...
  "husky": {
    "hooks": {
      "pre-commit": "command-or-script-you-want-to-run-here"
    }
  },
//...
```

Pre-commit means before commit. Pre-push would be before push and so on... Husky rejects your git command if all the steps aren't successful.

And that's it. Best part is that everyone working on a project now has this simple check.

[Check out husky](https://github.com/typicode/husky)
--------
My links:
GitHub: https://github.com/ymirke
Medium: https://ymirke.medium.com/
LinkedIn: https://www.linkedin.com/in/ymirke
Olá!
Published: 2020-12-13 19:08:57

Me chamo Michel Moreira e sou estudante do curso de Análise e Desenvolvimento de Sistemas no Instituto Federal da Paraíba - Campus Cajazeiras.

O objetivo deste blog é fazer uma análise sobre o uso de padrões de projeto em outras linguagens Orientadas a Objetos para a disciplina de Padrões de Projeto de Software 2020.1, lecionada pelo Professor [Diogo Moreira](https://www.diogodmoreira.com).
BEM methodology in CSS
Tags: css, beginners, webdev, codenewbie
Published: 2020-12-13 18:58:54

**BEM or Block, Element, Modifier is a popular and effective naming convention for classes in HTML and CSS. The main purpose of BEM is to provide developers more clarity, scalability, and easy reusability in code.** 

## What is BEM style? 

Classes named in context of BEM convention will look like below code snippet : 

```
/* Block component or parent */
.link {}

/* Element or child item */
.link__primary {}
.link__secondary {}

/* Modifiers that style the block */
.link--active {}
.link--color {}
.link-bg-green {}

``` 

The block component `.link` is like a parent element. All of the child elements of this block should have a name like `.link__primary`, notice the two underscores followed by block name. Now, modifiers style the block element and they are written like `.link--active`, these modifiers are named by putting two hyphens after the block element. 

--- 

The above code is easily readable to other developers, they can easily tell which classes are doing what.  In simpler words, BEM gives everyone in the team easy accessibility as the syntax is very declarative, the team members don't need to scratch their heads to know which components are doing what. *One main problem that BEM resolves is the fear of changing CSS code, yeah you heard it right. One change in bad codebase can crash the entire component because CSS just goes level by level, it doesn't have a good nature. So it is better to prepare for the chaos and BEM is an antidote to this chaos.*

--- 

## More reasons to consider BEM


* You will have more confidence in your styling because it doesn't break easily and this is a good factor to look upon.
* **Everything is a class and nothing is nested.**

   This makes CSS specificity very very low, so you don't have to worry too much about specificity while styling.
* The scalability of the codebase will increase because it can be easily modified and maintained in the future. Also, the reliability of code and trust of the team members improves a lot if the interface is maintainable. This is a good point for beginners.
* BEM naming conventions are customizable until you don't kill the core idea behind it. 
You can give it your own flair but other developers should find it easy to read.
* BEM is modular in nature, you can easily use previous block styles in a new project. This feature can save a lot of your time.

---

## Wrapping up

It is fair to say that BEM solves a lot of our problems and is a good habit to have as a developer. There are also other methodologies like  [OOCSS](http://oocss.org/),  [SMACSS](http://smacss.com/),  [SUITCSS](http://suitcss.github.io/). Every one of these has its own advantages and limitations including BEM, feel free to check them out. In the end, it depends on the developer's preference but one should not compromise on the maintainability of code. 

That's it from me, I hope it helps someone who is new to CSS or someone who is afraid of writing CSS. Tell me your thoughts in the comments!
Using node-config
Published: 2020-12-12 21:47:57

# Tutorial about node-config.

Hi! I'm Razielini, and I want to share a package for node I discover some weeks ago, which has been very useful for me.

The package is [node-config](https://www.npmjs.com/package/config), created by [Loren West](https://github.com/lorenwest). 

This package takes the setup level to your next level and is very easy to use and understand.

# Installation

The installation is very simple as usual.

    npm install config

## Create files 

Later, create the config files.

```
    $ mkdir config
    $ vi config/default.json
```

```
    {
		 // Customer module configs
		 "Customer":  {
			 "dbConfig":  {
			 "host":  "localhost",
			 "port":  5984,
			 "dbName":  "customers"
			 },
			 "credit":  {
				 "initialLimit":  100,
				 // Set low for development
				 "initialDays":  1
			 }
		 }
	 }
```

## Use config in your code

```
   const  config  =  require('config');
	//...
	const  dbConfig  =  config.get('Customer.dbConfig');

	db.connect(dbConfig,  ...);

	if  (config.has('optionalFeature.detail'))  {
		 const  detail  =  config.get('optionalFeature.detail');
		 //...
	 }
```

This is where you can start to notice a difference, the package gives you a method to extract information from the config file as if were any object.
```
config.get('Customer.dbConfig')
```

Can validate if exist a property before to use
```
config.has('optionalFeature.detail')
```

And has many other functions like set variables en execution time, override your config with other config files, or even import automatically the values of the variables in a .env file.

You can check the  [Wiki page](https://github.com/lorenwest/node-config/wiki) with the full documentation of this package.
MLH Hackathons are ❤
Tags: mlh, hackathon, gamedev
Published: 2020-12-13 18:29:08

## This week was best for me as I participated in a `hackathon` for the first time 🥳🚀

---

### _MLH Who Done It Hacks?_ 🕵️‍♂️ organized by MLH it was a great experience meeting new people learning new stuff and build something cool 🤓👨‍💻🎈
---
> ### Here is what I created along with my friend :

---

## "**221B-There's only one path**"
#### A thriller mystery game where you have to find  hidden clues and messages in each level and try to decrypt them to move to next level

<img src ="https://dev-to-uploads.s3.amazonaws.com/i/q3qfaelk0a5j52hxharp.png">

> ### Due to this amazing experience :
* Learnt how to create mystery game.
* Learnt how to host a website on using a domain rather that Github pages
* Got to know how to use Devpost.

---

### _Let let fun begin_ 👨‍💻🚀🕵️‍♂️
---

**The official Website :** [sherlockinneedofdetective.co](http://www.sherlockinneedofdetective.co/)

**The Devpost :**           [221B There's only one path](https://devpost.com/software/221b-there-s-only-one-path)

**The GitHub Repo :**      [DebugAgrawal/221B](https://github.com/DebugAgrawal/221B)
Maximum Depth of Binary Tree
Tags: leetcode, algorithms
Published: 2020-12-13 18:13:02

---
title: Maximum Depth of Binary Tree
published: true
description: Find the maximum length of the path in binary tree
tags: #leetcode #algorithms
series: LeetCode 2020 Dec
//cover_image: https://direct_url_to_image.jpg
---

This article is originally written at [Vishy tech notes](https://heyvp7.hashnode.dev/leetcode-2020-dec-1-maximum-depth-of-binary-tree)

**Problem Statement**: We have to find the maximum depth of the Binary Tree. 

*Maximum depth* can be defined at the maximum number of nodes at the  longest path to the deepest leaf node.


Consider the Input as  : [3,9,20,null,null,15,7]

In the above input, 

> 
3 is root node value, it has two childs left is 9 and right is 20; 
Again the node with value 9 has no child nodes which is written as null and null (means no child with value or no node).
And the node with value 20 has two child nodes which has child nodes 15 and 7. 


Fromt the above example we can understand the path 3 -> 20 -> 7 is largest. So the maxiumum depth in this example is 3.

**Pseudo Code**

- Check whether the node is null or not. If it is null then return the height as 0. If not continue.
- Check wehther there are any child nodes. If no child nodes then return the height as 1.
- If there are any one child node, then we have to find the height of those child nodes recursively.
- Find the height of left node, it can be done by invoking the same method with the left node passed.
- Second find the height of left node, it can be done by invoking the same method with the right node passed.
- Both the left node and right node will be going till both their children are null.
- Once we get both the height of left and right node, we will whichever is maximum height and then we will add current node depth (+1) and then return.
  

**Java Code**

```
private static int findHeight(TreeNode node){
    if(node!= null && node.left == null && node.right == null){
        return 1;
    }else if( node != null && (node.left != null || node.right != null)) {
        int leftHT = findHeight(node.left);
        int rightHT = findHeight(node.right);
        return Math.max(leftHT, rightHT)+1;
   }
   return 0;
}
```
TIL - 🧹 unimport linter formatter
Tags: python, linting, formatting
Published: 2020-12-13 09:44:46

{% twitter 1337904660137512963 %}

Thanks to this Jeff Triplets tweet I discovered [unimport](https://unimport.hakancelik.dev/#/), which is an interesting tool to detect unused imports (like flake8 would do) and to **remove** them from the code.

And the cherry on top it's that it can scan the requirements file and detect unused dependencies (which is probably even more important).

Historically this has not been a problem for me (or Nephila team), as flake8 is already well ingrained in our workflow, so we are used to handle [code cleanup](https://sleepy.yaks.industries/posts/python-linting-setup-2020/) before committing.

But as I sometimes inherit a large codebase with messy code, and it's awesome how much you can achieve with the right tools.

Currently `isort` + `black` + `pyupgrade` already do a really good job, but adding `unimport`  to the equation is 💥: a much nicer codebase with zero effort

I will surely give it a more in depth test, and I might add to my [linting reference toolbox](https://sleepy.yaks.industries/posts/python-linting-setup-2020/).

Shootout to [Hakan Çelik](hakancelik.dev) for this package, and its awesome documentation.
Solving day 13 of Advent of Code 2020 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-13 17:43:26

---
title: Solving day 13 of Advent of Code 2020 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 13)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

{% youtube T6AUJp8VRXs %}
Need help with design
Published: 2020-12-13 17:37:40

I need help with design.First take a look how its need to looks like :![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pda4p8wim3uc40dnnen8.png)


i need something like this.
9rows and 4 columns 

or just make "tabel" like this with div's i need onclick action! :D
Thanx guys

Using only bootstrap or css
Create your own NFC business card.
Tags: programming, nfc
Published: 2020-12-13 17:30:46

---
title: Create your own NFC business card.
published: true
description: NFC Business cards are all the rage now, learn how to create your own.
tags: programming, nfc
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/otlaaquy8azvq7krgwgd.png
---

If you've been on Instagram lately then you've probably seen ads for companies like [Blue Social](https://blue.social) that advertise "smart" business cards, letting you share personal information with others simply by tapping this card on their device.

While the concept is cool, I personally didn't like Blue Social. For one, their cards link out to a page on blue social, I wanted to link to my own site. Second, the price just wasn't right, at $34.99, it wasn't worth it to me at that price. 

But then it got me thinking, NFC smart cards aren't rocket science, I bet I could just make one myself. Usually when I do something like this it ends up being much harder than I previously anticipated, but in this case it was actually *way easier than I thought*. So, you ready to make your own NFC smart cards? 

## Step 1: Buy the card

![nfc-cards-on-amazon](https://dev-to-uploads.s3.amazonaws.com/i/sx36hsm32qb56mxexnoa.png)

The first step is to get some NFC smart cards. I would suggest just searching "NFC Cards" on Amazon or Ebay, you can usually get them for around $4.99 for 10 cards. There are many shapes and sizes of these cards and prices vary depending on quantity, it doesn't really matter which one you get.

## Step 2: Load data

Once you get your NFC cards, the next step is to load data on your device. To load data on your device you will need a smartphone with NFC capabilities (most devices support NFC these days) and a free app (there are tons). I suggest NFC tools, you can find the iOS app [here](https://apps.apple.com/us/app/nfc-tools/id1252962749) and the Android app [here](https://play.google.com/store/apps/details?id=com.wakdev.wdnfc)

![nfc-tools](https://dev-to-uploads.s3.amazonaws.com/i/smsyy61kuyq79t2cu3pb.png)

One you open the app go ahead and click "read" and then tap your card to your device, it should read the card and show that there is no data on your card. Next go back and click on write and then add a some records. 

If you want to share contact info with iPhones you can either put your phone number or website and iPhones will read that, however if you add a contact, Android devices will read it but iPhones wont.

Once you add your data, select "Write" and then tap your card to the device. After the data is written you should be able to just tap your card to your device and notification will show up to open your website/contact/phone.

## Conclusion

NFC Smart cards are really easy to make, while companies like Blue social give you a very user friendly way to make one, i prefer to save a few bucks and have fun doing it myself.
Fundamentals Of Programming Quiz - Ultimate Practice Test 76% Discount
Tags: udemy, programming, oops, fundamental
Published: 2020-12-13 17:27:11

Hey Guys, If any One who wanna brush up their basic knowledge of programming. Then this is a best course on udemy.
In this course there is total 240 questions that covers almost all topics from basic programming like ( oops concept, data, operators, functions, flow chart, sdlc, arrays, list, strings and many more).
This course will give confidence. It doesn't matter you are learning, experience.. It will help you in all ways.
Anyone preparing for job interview should definitely go through this.
Link : - https://www.udemy.com/course/programming-fundamentals-ultimate-quiz/?referralCode=C2C46AA371BC6FBC7DB9

Don't Miss the Opportunity
How to check macOS app architecture
Tags: macos, app, architecture, m1
Published: 2020-12-13 17:20:59

# GUI

![Applications](https://dev-to-uploads.s3.amazonaws.com/i/85kuj0pxm0ipo8q1vl3s.png)

Click Apple menu --> About This Mac --> System Report... --> Software --> Applications 

![Example](https://dev-to-uploads.s3.amazonaws.com/i/abk7oqsx6gdfkoq3tcm7.png)

# Command line

## Universal app

```
file /Applications/Pages.app/Contents/MacOS/Pages
```
![Universal App](https://dev-to-uploads.s3.amazonaws.com/i/p7zk90yp3jmb921yum83.png)

## Intel app

```
file /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge
```

![Intel App](https://dev-to-uploads.s3.amazonaws.com/i/6e7q8kk223qfokbfifua.png)

## ARM64 app

```
file /Applications/Visual\ Studio\ Code\ -\ Exploration.app/Contents/MacOS/Electron
```
![ARM64 App](https://dev-to-uploads.s3.amazonaws.com/i/jqr0cukvdlrrggy58f4g.png)

## Execute Binary File

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/euok5af4j35282gj1nry.png)
Identify a hand in poker with python
Tags: python
Published: 2020-12-13 17:13:30

```python
#!/usr/bin/python3

def determine_hand(hand):
    card_value = dict(zip('2 3 4 5 6 7 8 9 T J Q K A'.split(), range(14)))

    cards = []
    suits = []

    for card in hand.split():
        c, s = list(card)
        cards.append(c)
        suits.append(s)

    max_suit = max([suits.count(a) for a in suits])
    same_cards = sorted([cards.count(a) for a in set(cards)])
    card_nums = sorted([card_value[a] for a in cards])

    def is_straight(cv):
        diff = cv[-1] - cv[0]
        if diff == 4:
            return True
        elif diff == 12:
            if cv[-2] - cv[0] == 3:
                return True
        return False

    # We have our flushes in here. Any less suits and we don't care.
    if max_suit == 5:
        if is_straight(card_nums):
            if card_nums[0] == 8: # ROYAL FLUSH!!!
                return "Royal Flush"
            return "Straight Flush"
        return "Flush"

    # Checking in on our same cards
    # With a length of two we either have two pair or a full house
    elif len(same_cards) == 2:
        if max(same_cards) == 4: # Four of a Kind
            return "Four of a Kind"
        elif max(same_cards) == 3: # Full House
            return "Full House"
    elif len(same_cards) == 3:
        if max(same_cards) == 3: # Three of a kind
            return "Three of a Kind"
        else: # Two pair
            return "Two Pair"
    elif len(same_cards) == 4:
        return "One Pair"
    else: # Garbage hand most likely. But maybe a straight!
        if is_straight(card_nums):
            return "Straight"
        return "High Card"

if __name__ == "__main__":
    hands = ["TS JS QS KS AS", # Royal Flush
             "AC 2C 3C 4C 5C", # Straight Flush
             "AC AS 3C AD AH", # Four of a Kind
             "TC 2C 2H TS TH", # Full House
             "AH 5H TH 7H 4H", # Flush
             "3D 4C 5H 6C 7D", # Straight
             "3D 3C 3S 5H AD", # Three of a Kind
             "3D 3C 5H 5S 7D", # Two Pair
             "3D 3C 5H 8S 7D", # One Pair
             "AC 3C 4H 7S 2D"] # High Card Garbage

    for hand in hands:
        print ("With a hand of {}, Bob has a {}!".format(hand, determine_hand(hand)))
```
Create Restaurant Tip Calculator in Html Css  &  JavaScript With Unique UI/UX Design
Tags: dohackathon
Published: 2020-12-13 17:10:19

## Restaurant Tip Calculator 

### Calculator: 


### https://codepen.io/Bilal1909/pen/RwrYWaZ


### Create Restaurant Tip Calculator in Html Css  &  JavaScript 
    With Unique UI/UX Design
 

### https://codepen.io/Bilal1909/pen/RwrYWaZ

### Copyright (c) 2020 by Bilal.Rizwaan (https://codepen.io/Bilal1909/pen/RwrYWaZ)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

### How I built it  {Html Css  &  JavaScript}
What is Laravel Sail and how to get started?
Published: 2020-12-13 17:08:56

Check out this post on the [devdojo.com](https://devdojo.com/) website!

It is a post on [What is Laravel Sail and how to get started?](https://devdojo.com/bobbyiliev/what-is-laravel-sail-and-how-to-get-started) 🔥!

To make things even better you can use this referral link to get a free $100 credit that you could use to deploy your virtual machines and test the guide yourself on a few DigitalOcean servers:

[Digital Ocean $100 Free Credit](https://m.do.co/c/2a9bba940f39)

Link to the post:

https://devdojo.com/bobbyiliev/what-is-laravel-sail-and-how-to-get-started

I strongly encourage everyone to go ahead and check out the [devdojo.com](https://devdojo.com/) website, there's a lot of valuable content there.
Build and learn at the same time
Tags: design, ux, network
Published: 2020-12-13 17:06:40

---
title: Build and learn at the same time
published: true
description: 
tags: design, ux, network
---

I've noticed that I like to work on things while designing the workflow... in parallel. For example

* writing while fiddling with the structure and style of the document
* learning to code while building a site, combining production with looking up methods and solutions

To me this feels like a genuine network society mindset, focusing on multiple things at the same time **and** using the capabilites of modern tools, allowing us to shape messages in numerous ways.
Server hosted solution for Whatsapp accounts
Published: 2020-12-13 17:01:35

Hi,

I am looking for a Whatsapp developer who can create a server hosted Whatsapp solution for a CRM integration. Currently we have the bottleneck that Whatsapp needs to run on a phone all the time, with all the issues that are connected to it.

AmoCRM is providing for instance a solution similar to what we are looking for:

https://youtu.be/G2auLS0PFbg
 

No need to have WhatsApp running on phone all the time, worrying about empty battery, no reception, what so ever. 


If there is anybody out there who can provide a solution like this, please contact me.

Thanks in advance

Damian
How to add multiple where clauses using Laravel Eloquent
Published: 2020-12-13 17:01:14

Check out this post on the [devdojo.com](https://devdojo.com/) website!

It is a post on [How to add multiple where clauses using Laravel Eloquent](https://devdojo.com/bobbyiliev/how-to-add-multiple-where-clauses-using-laravel-eloquent) 🔥!

To make things even better you can use this referral link to get a free $100 credit that you could use to deploy your virtual machines and test the guide yourself on a few DigitalOcean servers:

[Digital Ocean $100 Free Credit](https://m.do.co/c/2a9bba940f39)

Link to the post:

https://devdojo.com/bobbyiliev/how-to-add-multiple-where-clauses-using-laravel-eloquent

I strongly encourage everyone to go ahead and check out the [devdojo.com](https://devdojo.com/) website, there's a lot of valuable content there.