teleren/devto huggingface dataset:
Letter combinations of phone number with a queue
Tags: javascript, algorithms
Published: 2021-03-04 14:18:28

Here I try to break down and simplify an algorithm that can be solved iteratively with a queue (BFS) or recursively (DFS). Javascript has the simplicity of allowing any array to become a queue, but a LinkedList can also be used as a queue, which is how the algorithm is implemented in Java.

The quick overview of the algorithm is to consider every number in the `digits` array e.g. `'23'` and for each number combine the corresponding letters each keypad (`abc` and `def`) in this case would result in:

 * `ad, ae, af, bd, be, bf, cd, ce, cf.`

![phone keypads](https://images.unsplash.com/photo-1514314099746-d801a5238646?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvbmUlMjBrZXlwYWRzfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60)
<span>Photo by <a href="https://unsplash.com/@charissek?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Charisse Kenion</a> on <a href="https://unsplash.com/s/photos/phone-keypads?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

The queue keeps track of the letters we have to combine (`next`) at the beginning and also stores the result of the combinations at the end (`next + char`).

The most challenging part of this algorithm is that it has three nested loops, but the first one iterates over the digits, the second one makes sure that all pending combinations in the queue are made, and the third one iterates over the letters of each number in the phone keypads.

```javascript
const letterCombinations = (digits) => {
    if(digits.length === 0) return []
    
    let queue = []
    
    queue.push('')
    
    let mapping = {
        '2': 'abc',
        '3': 'def',
        '4': 'ghi',
        '5': 'jkl',
        '6': 'mno',
        '7': 'pqrs',
        '8': 'tuv',
        '9': 'wxyz'
    }
    
    for(let i = 0; i < digits.length; i++){ // digits '23'
        
        let currQL = queue.length
        
        while(currQL > 0){ // consider all elements in current queue
            console.log(currQL)
            // stay in the while loop until all pending items in queue have been processed
            
            console.log(i, queue[0])
            
            let next = queue.shift()
            
            console.log('next:', next )
            
            for(let char of mapping[digits[i]]){ // specific letters on phone number keypad
                
                console.log('char:', char )
                
                queue.push(next+char) // concatenate strings
                
            }
            currQL--
            
        }
    }
    return queue
};
```

Feel more than welcome to reach out with any ideas/comments at [Linkedin](https://www.linkedin.com/in/santiago-salazar-pavajeau/) or [Twitter](https://twitter.com/santispavajeau), or check out my [portfolio](https://www.santiagosalazarpavajeau.live).
5 habits every developer should adopt!
Tags: codenewbie, webdev, beginners, computerscience
Published: 2021-03-04 14:14:24

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/).

## 1. Don't repeat yourself

This habit is based on DRY.

The “Don't Repeat Yourself” principle is a software development practice aimed at reducing the repetition of information.

So when you have a piece of code that repeats in your codebase try to put that into a function.

## 2. Code every day

This is so important especially if you're learning how to code.

Typing some code for as little as 15 minutes every day can increase your skills a lot faster.

And by developing this habit you won't rely on motivation.

## 3. Never stop learning

Being a developer is a lifelong learning journey.

The worst thing you can do as a developer is to stop learning new technologies.

This field evolves so fast and you need to keep up with it.

## 4. Think before you write code

Don't just write code without having a solution in mind.

Start by thinking about the solution for the problem you want to solve and only after that start to write it.

This will save you a lot of time down the road.

## 5. Avoid burnout

Listen to your body.

When you feel like you need some rest take a break.

Burning out == at least a few weeks of no code.

A small break from time to time can help you avoid this.

## Conclusion

I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) .
Prop Drilling in React
Published: 2021-03-04 14:05:41

I was working on my GitHub Finder project when I noticed an issue. I had fallen victim to prop drilling. In short, prop-drilling is where your application is passing props up and down the component tree. This can cause components to re-render when it is not necessary to, also in large applications, this can have significant performance issues.

However, prop drilling is not always an issue. If we are passing data between 2 or 3 levels of component, it is completely acceptable and will most likely not cause any headaches. It will be easy to trace the flow of data. Once we hit the 5+ levels of components is when to start thinking about a better way to handle this!

Here are a few different ways to handle accessing data without prop drilling:

I think the [React Docs](https://reactjs.org/docs/context.html) has the best one liner when it comes to what the Context API does. “Context provides a way to pass data through the component tree without having to pass props down manually at every level”. Basically, when you use Context in your application, you avoid passing data down the component tree through props while still being able to access the data. Context is mainly used when certain data needs to be accessible by many components at various nested levels. 

It is difficult to talk about the Context API without bringing up Redux. Redux labels itself a predictable state container. Redux lets you create a data store and connect any component to the store, no matter where the component is positioned in the Component Tree it can access the store!

Passing props down from one component to another is not a bad thing, however if we over use it, it can have negative effects on our application. I hope you enjoyed this break down, thanks for stopping by!
Find records missing an association with `where.missing`
Tags: ruby, rails, webdev
Published: 2021-03-04 14:55:05

---
title: Find records missing an association with `where.missing`
published: true
date: 2021-03-04 13:00:00 UTC
tags: ruby,rails,webdev
canonical_url: https://boringrails.com/tips/activerecord-where-missing-associations
---

You can’t prove a negative, but what about querying a database for a negative? While the majority of the time, you are writing queries to find data, there are some cases when you want the opposite: writing a query that looks for the absence of data.

When it comes to raw SQL, you can use a `LEFT OUTER JOIN` combined with a `null` check to find records without certain associations.

## Usage

In Rails, you can apply the same concepts from SQL directly with ActiveRecord.

Let’s say you have the following model:

```ruby
class Account < ApplicationRecord
  has_many :recovery_email_addresses
end
```

If you wanted to find `Account`s that have not yet set up a backup recovery email, you could write this query and everything will work just fine:

```ruby
Account.left_joins(:recovery_email_addresses).where(recovery_email_addresses: { id: nil })

# SELECT "accounts".* FROM "accounts" LEFT OUTER JOIN "recovery_email_addresses" ON "recovery_email_addresses"."account_id" = "accounts"."id" WHERE "recovery_email_addresses"."id" IS NULL
```

But it’s kind of verbose. Since Rails 6.1, you can use a much cleaner shorthand to write this same query.

```ruby
Account.where.missing(:recovery_email_addresses)

# SELECT "accounts".* FROM "accounts" LEFT OUTER JOIN "recovery_email_addresses" ON "recovery_email_addresses"."account_id" = "accounts"."id" WHERE "recovery_email_addresses"."id" IS NULL
```

This will generate identical SQL and is a lot easier to read. You can use this functional on `belongs_to` relationships as well.

```ruby
class Contract < ApplicationRecord
  belongs_to :promiser, class_name: "User"
  belongs_to :promisee, class_name: "User"
  belongs_to :beneficiary, optional: true, class_name: "User"
end

Contract.where.missing(:promiser) # Contracts without a promiser
Contract.where.missing(:promiser, :beneficiary) # Contracts without a promiser AND beneficiary
```

You can also combine `missing` with your normal ActiveRecord chaining methods

```ruby
Contact.where("amount > ?", 1200).where.missing(:promiser)
Contact.where(signed: true).where.missing(:beneficiary)
```

## Additional Resources

Rails repository: [Finding Orphan Records](https://github.com/rails/rails/pull/34727)

Rails API docs: [WhereChain#missing](https://api.rubyonrails.org/classes/ActiveRecord/QueryMethods/WhereChain.html#method-i-missing)

* * *
[![](https://boringrails.com/images/twitter-banner.png)](https://twitter.com/_swanson)
Which benefits make Flutter the future of cross-platform app development?
Tags: flutter, mobile, android, ios
Published: 2021-03-04 13:11:36

Flutter is from the stables of Google, a name that speaks for itself and needs no introduction to anyone even remotely connected with mobile and computers. Since 2017, Flutter has been making rapid strides and is scaling newer heights every day.

It is a mobile framework that works using a cross-platform approach and is run by Google. The kind of apps that can be built by Flutter is more modern in design and heavy-duty as well. It works effectively on Android as well as iOS and is one of the most flexible platforms that are available.

Let’s see here these features and benefits which can make the best future of Flutter cross-platform applications:https://qr.ae/pNd44g
Daily Developer Jokes - Thursday, Mar 4, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-04 13:00:21

---
title: "Daily Developer Jokes - Thursday, Mar 4, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Mar%204%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258dec9298.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What airline do developers prefer when they're in a rush?

___A:___ Delta.
 -->
Will WordPress 5.6 Hamper Your WordPress Site? Know the Possibilities
Tags: wordpress
Published: 2021-03-04 12:55:55

WordPress has rolled-out its last release of 2020 on 8th December – WordPress 5.6 (the “Simone”). The latest WordPress version not only includes a few major updates and new features, but it also includes many improvements. While some are much needed, a few caused security and compatibility with existing WordPress websites. This blog post reviews how new improvements may cause security vulnerabilities or break down your website.


WordPress 5.6, the last release of 2020, rolled out on 8th December with dozens of improvements and new features. WordPress 5.6 has received positive feedback from the developer community so far, probably because it has not broken anything. But that’s a half-truth!


The latest WordPress version not only includes a few major updates and new features, but it has a huge number of minor improvements and bug fixes reported in the earlier versions. And a few of the changes or enhancements introduced have repercussions considering the security and compatibility of the existing WordPress websites. Let’s dig into how WordPress 5.6 can break your website like its ancestor.

<b>The upgraded version of jQuery Migrate Plugin – A good initiative with a “Negative” impact</b>

Earlier, when WordPress 5.5 released, millions of websites stopped functioning normally since jQuery was removed. Although WordPress made an announcement a long time back about their move to modernize WordPress, many website owners left with a website that was stopped displaying at all or locked out of their website.


That was the first dose of modernizing WordPress by forcing the WordPress ecosystem to change their code and onboard with the newest jQuery version. With WordPress 5.6, the WordPress team has taken the modernization to the next level by updating jQuery Migrate Plugin to the next version – 3.3.1!

Read Complete blog article at - <a href="https://addwebsolution.com/blog/will-wordpress-56-hamper-your-wordpress-site-know-possibilities">Will WordPress 5.6 Hamper Your WordPress Site? Know the Possibilities.</a>
"Don't Make Me Think" Summary for UI/UX designers [Fifth Chapter]
Published: 2021-03-04 12:55:54

###Get rid of half the words on each page, then get rid of half of what’s left
in this time, I'm gonna summarize the part of "getting rid of  extra and unnecessary words in sites"

**1-Omit needless words**:
   get rid of words that nobody is going to read to:
     1-Reduce the noise of the page
     2-Make the useful content more prominent
     3-Make the pages shorter, allowing users to see more of each page at a glance without scrolling

**2-Happy talk must die:** It’s the introductory text that’s *supposed to welcome us to the site and tell us how great it is or to tell us what we’re about to see in the section we’ve just entered.

**3-Instructions must die:** Your objective should always be to eliminate instructions entirely by making everything self-explanatory. When instructions are absolutely necessary, cut them back to the bare minimum 




 **Example:**
                          Before Editing:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6u3bufbkqr1y2u7qwgf.png)
               After removing [and how much should you remove]:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2diipjl24h2rggtm2fbp.png)
Finally a CSS-only solution to create masonry layouts
Tags: css, html, webdev
Published: 2021-03-04 12:39:33

<sup>**hold on!** the below feature is experimental and can be tested only on Firefox</sup>

The specification of [CSS Grid Level 3](https://drafts.csswg.org/css-grid-3/#masonry-layout) is actually under construction and it's about *masonry layout*

>This module introduces masonry layout as an additional layout mode for CSS Grid containers.

## What the hell is masonry?

It's what you see when navigating Pinterest. Something like the below:

![Masonry layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwmuem7kaaacg9wkxcuq.png)
<sup>figure taken from the linked specification</sup>

We used to build this using JS or a lot of hacky CSS but now only one CSS property can do it.

```css
.container {
  grid-template-rows: masonry; 
}
```

Yes, only this!

Here is what a full code will look like:

```html
<div class="container">
  <img src="https://picsum.photos/id/1/200/300">
  <img src="https://picsum.photos/id/17/200/400">
  <img src="https://picsum.photos/id/18/200/100">
  <img src="https://picsum.photos/id/109/200/200">
  <img src="https://picsum.photos/id/1069/200/600">
  <img src="https://picsum.photos/id/120/200/150">
  <img src="https://picsum.photos/id/130/200/100">
  <img src="https://picsum.photos/id/203/200/100">
  <img src="https://picsum.photos/id/109/200/200">
  <img src="https://picsum.photos/id/11/200/100">
  <img src="https://picsum.photos/id/119/200/100">
</div>
```
```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fil, minmax(200px, 1fr));
  grid-template-rows: masonry; /* this will do the magic */
  grid-gap: 10px;
}
img {
  width:100%;
}
```

You can test the above on Firefox but you need to first enable a flag:

 1. open Firefox and write `about:config` in the url bar
 2. do a search using `masonry`
 3. you will get one flag, make it true

![Flag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62rhe663hibtkav5u6lk.png)

You should get the following result:

![Masonry layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltb1df32hxl5drltrd11.png)

Which is fully responsive thanks to `repeat(auto-fil, minmax(200px, 1fr))`

![CSS masonry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwrhyf0vdejxu4vl80bs.png)

We can also have the other direction by adjusting the CSS like below:

```css
.container {
  display: grid;
  grid-template-rows: repeat(auto-fil, minmax(200px, 1fr));
  grid-template-columns: masonry; 
  grid-gap: 10px;
  height:100vh;
}
img {
  height:100%;
}
```

![Masonry horizontal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4dhrz1n88ktmzj8wkla.png)

The specification introduces many other properties to control our masonry grid but it's still early to investigate them since they may change at any time. 

Worth to note that the [CSS Grid Level 2](https://www.w3.org/TR/css-grid-2/) is still not fully implemented by all the browsers so we need to be patient for the Level 3.
Development Progress of AbstractMark, the modern markup language
Tags: javascript, showdev, markdown, abstractmark
Published: 2021-03-04 12:52:06

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

# Quick overview of AbstractMark
In short, AbstractMark is the next generation of markdown language which inherits markdown language to be simple but with more features like the styling to build a modern website. Despite being simple, you can build modern web pages using it! Indeed, the [AbstractMark Documentation Site](https://abstractmark.netlify.app/) is built using AbstractMark itself.

For more information about AbstractMark, you can visit this previous blog about AbstractMark.
{% post https://dev.to/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1 %}
Otherwise, you can visit our [documentation website](https://abstractmark.netlify.app/).

## Links 🔗
- [AbstractMark documentation site](https://abstractmark.netlify.app/)
- [GitHub](https://github.com/abstractmark/abstractmark)
- [AbstractMark Playground](https://abstractmark.netlify.app/playground)
- [AbstractMark Syntax Guide](https://abstractmark.netlify.app/syntax)
- [AbstractMark Cheatsheet](https://abstractmark.netlify.app/cheatsheet)

# Current Development Progress 💻
For now, AbstractMark has been implemented on JavaScript and is being implemented on Python. Version 0.1.1 of JavaScript implementation has been released and available on [npm](https://www.npmjs.com/package/@abstractmark/abstractmark) while Python implementation is still in early development progress.

Surely we will expand AbstractMark into another language, but of course, with your help. AbstractMark not only needs contributors but also maintainers!

## JavaScript Implementation Progress
All of the AbstractMark syntaxes had been implemented on JavaScript. This implementation progress is regularly maintained too! The current version is v0.1.1. Version 0.1.1 is a version that fixed typography and spacing bugs from the previous version, v0.1.0. Version 0.1.1 of AbstractMark includes the following features:
![Features available on version 0.1.1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjt9rcf84dbfzyf8u1t2.png)

Also, AbstractMark CLI had been implemented on the JavaScript version. You can install AbstractMark CLI by typing `npm i @abstractmark/abstractmark -g` on your terminal. For further information about AbstractMark CLI, please visit this [documentation](https://abstractmark.netlify.app/cli)

## Python Implementation Progress
Python implementation progress is still in early development progress. We will write a new post after AbstractMark implemented on Python, stay tuned!

Any comments or contributions or even star [this repository](https://github.com/abstractmark/abstractmark) is much appreciated.

### Happy Coding! 🎉

You might also like these articles:
{% post https://dev.to/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1 %}{% post https://dev.to/kimlimjustin/google-forms-clone-with-django-and-vanilla-javascript-7ha %}{% post https://dev.to/kimlimjustin/whatsapp-clone-with-mern-stack-mongodb-express-react-node-12pd %}
git: BFG installation
Tags: git, tutorial, tooling, productivity
Published: 2021-03-04 12:51:25

---
series: [BFG]
---

BFG Repo Cleaner is both faster and easier to use than using git filter-branch. It handles simple use cases for editing sensitive information in git. 

- [BFG usage](https://rtyley.github.io/bfg-repo-cleaner/)
- [BFG download](https://repo1.maven.org/maven2/com/madgag/bfg/1.13.2/bfg-1.13.2.jar)
- [java download](https://www.java.com/en/download/manual.jsp)

## Invoking BFG

BFG is a .jar file that is invoked from the command line using java.

`$ java -jar path/to/bfg.jar`

Invoking BFG this way can become tedious...

## Easier way to reference BFG?

To simplify it, consider creating an alias

.bashrc
```
...
alias bfg='java -jar path/to/bfg.jar'
```

BFG is now invokable from the command line in any directory: 

`$ bfg ...`
Error: Type 'FirebaseUser' not found.
Published: 2021-03-04 12:40:49

Starting from Version firebase_auth 0.18.0:
`FirebaseUser` has been changed to `User`

AuthResult has been changed to UserCredential

`GoogleAuthProvider.getCredential()` has been changed to `GoogleAuthProvider.credential()`

`onAuthStateChanged` which notifies about changes to the user's sign-in state was replaced with `authStateChanges()`

`currentUser()` which is a method to retrieve the currently logged in user, was replaced with the property `currentUser` and it no longer returns a `Future<FirebaseUser>`
This bad boy got a new battery
Tags: macbookpro, apple, love
Published: 2021-03-04 12:37:13

---
title: This bad boy got a new battery
published: true
description: 
tags: macbookpro, apple, love
---

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

This bad boy (MacBook Pro 15 late 2013) just got a new battery.

I’m hoping to keep it alive until Apple comes up with a decent pro laptop again.

I had it serviced yesterday, and I was nostalgic.

Learned Node.js (v0.11) on this device in 2013.

Got promoted to software architect working on it.

Built an AI product in 2015 on it.

Pitched a COO of an F500 company with it.

Got my 1st gig (and the next 40) as a consultant and executed on it.

Built Archbee as a diagram tool on it.

Pivoted Archbee into a docs tool for technical teams on it.

Sold $60K worth of Archbee licenses on a deal on it, first month into the pandemic.

Got it to $1M+ valuation from the first angels on it — the same year.

Now we’re close to 100 customers paying monthly subscriptions.

It sounds cheesy, but I love it. I’m not going to sell it or let it die dusty somewhere on a shelf.

The build quality, the keyboard, the retina display, the rock-solid OS, the speed of it. It’s so good.

And people saying it's not worth $500 bucks more than other laptops. It's worth $10,000 more... if you value your time.

I hope Apple can go back to this type of magic device.

What's your most loved device? Let us know down below why.

#macbookpro #apple #quality