teleren/devto huggingface dataset:
What is the <wbr> HTML tag and why do I need it?
Tags: html, css
Published: 2020-12-09 05:48:08

So, a straightforward explanation of the <wbr> tag in HTML stands for a work break. It doesn't mean it will break every time, but it will break every time it needs to.

You might think, huh, but CSS can do this as well using `word-break: break-all` and yes, that will work but we will have zero control.

To quickly show you the difference:

![wbr vs css](https://cdn.hashnode.com/res/hashnode/image/upload/v1607059142377/q1f2sTA5U.png)

As you can see right away the `<wbr>` version is way more readable because we control where it breaks! The `CSS` solution will just break every time.

Of course, you can't go and edit every content piece on your website, but I find this method super useful for headers!

## How the HTML <wbr> tag works

It's super easy to use this tag, we simply place it in the long word where it might have a breakpoint!

```html
super<wbr />long<wbr />word<wbr />that<wbr />needs<wbr />to<wbr />break<wbr />better
```

You can see this is just a bogus word, but if we run this in our demo, you will see it breaks only on these points if it needs to!

It is an empty element meaning it doesn't have an end tag and doesn't need to self-close.

In the example above, you can see we can have multiple breaks in one word.

> Note: If you go smaller than the actual smallest breaks it will not show!

## Demo

I created this demo on Codepen to demonstrate the difference between the `<wbr>` HTML tag and the `CSS` `word-break` method.

You can resize these boxes horizontally to see the breakpoints.

{% codepen https://codepen.io/rebelchris/pen/PoGZQzG %}

## Browser Support

Full support!! Since IE is dead 💁‍♂️!
I really like to use this super cool `HTML` attribute to fix little responsive design issues.

![HTML wbr support](https://caniuse.bitsofco.de/image/wbr-element.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Writing a good variable name
Tags: 100daysofcode, code, programming, cleancode
Published: 2020-12-09 05:42:32

As a  Developer! Writing a good variable name, function name really helps a lot while coding
it saves time, helps while debugging, and most helpful when anything will changes further according to the requirement you could easily find
                                                                                          
                                                                              Same in Git hub, writing a good commit message is a skill (eg:- fix -> a bug fix;  test-> everything related to testing)

This small thing helps a lot in save time, good habits
Advent of Code 2020 Solution Megathread - Day 9: Encoding Error
Tags: adventofcode, challenge
Published: 2020-12-09 05:41:11

---
title: Advent of Code 2020 Solution Megathread - Day 9: Encoding Error
published: true
description: Who doesn't love plugging in and hacking cryptic data exchange formats?
tags: adventofcode, challenge
series: Advent of Code 2020
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/svaf3204d9tz42daq8c3.png
---

Whoo!  After yesterday's palate-cleansing interpreter, I'm ready to move on to new things.  I'm managing to stay on top of this year's challenge so far, and I think it's the longest I've managed it so consistently.  But we'll see how things go.  We're not even halfway yet.

## The Puzzle

In [today’s puzzle](https://adventofcode.com/2020/day/9), we're tasked with finding a weakness in the XMAS data cypher system (which consists of streams of numbers with requirements about sums) by finding the number that doesn't fit the pattern.  As long as it doesn't have a big complicated string to parse, I'm happy.

## The Leaderboards

As always, this is the spot where I’ll plug any leaderboard codes shared from the community.

```
Ryan's Leaderboard: 224198-25048a19
```

If you want to generate your own leaderboard and signal boost it a little bit, send it to me either in a DEV message or in a comment on one of these posts and I'll add it to the list above.

## Yesterday’s Languages

Updated 03:09PM 12/12/2020 PST.

| Language   | Count |
|------------|-------|
| JavaScript |     4 |
| Python     |     3 |
| Rust       |     3 |
| Ruby       |     3 |
| TypeScript |     2 |
| Haskell    |     1 |
| C#         |     1 |
| COBOL      |     1 |
| Go         |     1 |
| C          |     1 |
| Elixir     |     1 |

Merry Coding!
Functor's flavor in JS
Tags: javascript, functional, todayilearned
Published: 2020-12-09 05:20:26

## There's no secret it's just mystery, straight to the point without hysteria ✨🔮

#### Basically it is a wrapper of a value, an object that encapsulates this value and implements the `map ()` function.

An example as popular as *Rock n Roll* or *Ronaldinho Gaúcho* is the **Array** in JS, where it is a container (object) that contains a list of values or a dimensional and we have the map function that applies processing to these internal values, so much so that you launch a `typeof [🦇, 🐙]` will have an `object` as answer.

## Creating your own functor

```javascript
const secureType = value => ({
  value,
  map(fn) { 
    return secureType(fn(this.value))
  }
})

//using
const { value } = secureType('who\'s bad?')
  .map(text => text.toUpperCase())
  .map(text => `${text} 👹`)

console.log(value)
```
Is Gridsome scalable?
Tags: discuss, gridsome, vue, ssg
Published: 2020-12-09 05:01:52

I've been testing the waters with Gridsome for some smaller statically-generated eCommerce & blog projects with great success. There, the amount of content, frequency of publishing, and desired timeliness of content going live aren't too intense. So in those projects, build times aren't an issue.

Though something I've been toying with is the idea of bringing my day job's news publishing platform (which uses good ol' WordPress, jQuery, and PHP) into a more modern Vue-centric frontend stack that's either SSR'd or statically generated. I'm interested in what a headless Gridsome frontend might look like at scale for our publishing platform.

We've got about 100k pieces of content with related & recent posts that'll populate on each page as cache invalidation happens on a publishing event. The current response time from publishing to a live audience article is somewhere in the 5s-30s range. 

As I've developed my smaller Gridsome projects, I do see the build times increasing. However, I haven't been able to get a feel for how the quantity of content relates to consecutive build times where one to three pieces of content are added or updated every hour. 

Something I wonder about Gridsome is how efficiently the build cache works at a scale of tens or hundreds of thousands of pages. Obviously, it wouldn't be ideal for a news org if the whole platform has to be rebuilt for 30 minutes each time a piece of content is updated.

This very well could be something I just prototype to gather info on my own and get a feel for real-world scenarios and scalability. I can't seem to find any info online about how Gridsome handles this kind of scale and if there are any issues that boil up besides build-time complexity potentially becoming a deal-breaker. 

Any insight from the wiser of us who have been around the block would be wonderfully appreciated

## Anecdote
Just to give some rationale to why I'm considering going SSG on top of Vue, the pain points of being locked into a custom WP theme have created quite a bit of technical debt and we're looking to become more agile with more powerful frontend capabilities, better page speeds, and better SEO scores.
Overcome your Muscle memory to Stay Calm & Productive
Tags: procastination, dopamine, socialmedia, workfromhome
Published: 2020-12-09 04:27:02

---
title: Overcome your Muscle memory to Stay Calm & Productive
published: true
date: 2020-12-09 04:20:12 UTC
tags: procastination,dopamine,socialmedia,workfromhome
canonical_url: https://medium.com/@requestly/overcome-your-muscle-memory-to-stay-calm-productive-fce5ffdf1f8f
---

In this pandemic situation, almost entire tech industry is working from home. Staying focussed & productive is a constant challenge especially when you are working alone. There are a good number of studies available on web which shows why do we keep on browsing social media just before 5 mins of a meeting or starting any difficult task.

Here’s what [Chamath Palihapitiya](https://medium.com/u/dbfc705250be), Former Vice-President of User Growth at Facebook [mentioned once](https://www.parlia.com/a/social-media-causes-dopamine-highs) —

![](https://cdn-images-1.medium.com/max/381/1*Ey35csdtia3kESJxj9Dwqw.png)

> I feel tremendous guilt. The short-term, dopamine-driven feedback loops that we [Facebook] have created are destroying how society works.

In a recent conversation with a couple of Requestly users, we figured out how one of the rules they have created is helping them to overcome this habit of going to Social Media — Facebook/Instagram/Netflix in between regular intervals and how it increases their productivity. Lets have a look at this -

#### How about you do rounds of Inhale Exhale activity than killing time on Social Media?

This is how Requestly provides powers you to control your web browsing. For this, we have setup a simple 1-page web app — [https://staycalm-app.web.app/](https://staycalm-app.web.app/) and created a Requestly Rule to redirect Instagram, Netflix, Facebook, LinkedIn to this app which helps you do rounds of Inhale-Exhale breathing exercise. Follow this exercise and you will see the pressure, tension in your mind is released and how you become productive again for your next meeting.

#### Requestly Rule

Here is the Requestly Rule screenshot —

![](https://cdn-images-1.medium.com/max/1024/1*ogrj-BaJ3Qkatk1p84f2sg.png)<figcaption>Requestly Redirect Rule to redirect Social Media Sites to Breathing Exercises</figcaption>

#### Get this Rule in 2 Clicks

1. Install [Requestly](http://requestly.com) from [Chrome Store](https://chrome.google.com/webstore/detail/requestly-redirect-url-mo/mdnleldcmiljblolnjhpnblkcekpdkpa?hl=en)
2. Open [https://app.requestly.io/rules/#sharedList/1607487126556-Redirect-Social-Media-Sites-to-Stay-Productive-And-Calm](https://app.requestly.io/rules/#sharedList/1607487126556-Redirect-Social-Media-Sites-to-Stay-Productive-And-Calm)
3. Click Import List

That’s it! Hope it really helps to you & your colleagues. If you have any ideas for which you want us to write about, you can share that with us on our [Github Discussions page](https://github.com/requestly/customer-support/discussions) or drop us an email at [contact@requestly.io].

> And lastly — Stay focussed & Stay Productive.
About Tapesh Vasisth ( A Web Developer )
Tags: javascript, webmonetization, beginners
Published: 2020-12-09 04:14:00

Hello, I am Tapesh Vasisth, I have over 5 years’ experience with project management, business analysis, process improvement, and change management where I have delivered multiple successful project results.

Responsibilities have included:

* Managing teams of business, analytical, and/or technical members
* Defining servicing needs and related operational requirements
* Ensuring ongoing scalability and supportability of the implementation
* Understanding the customer and/or user experience
* Documenting key processes, user stories, and use cases
* Driving change management efforts - which included training

I am a highly motivated, detailed-oriented...
When you run command via child_process module you can't able to use cd command, but here I found a way to do that
Tags: html, javascript, terminal, node
Published: 2020-12-09 04:11:58

Hey people, 
     In my [old post](https://dev.to/utsavladani/how-you-can-execute-terminal-command-on-server-via-ui-from-client-side-39jd), I mentioned a issue . And cause of that issue we couldn't move from one dir to other dir. If we can't change our Current Working Directory, then it is a huge issue and our some task became difficult. But I find a way to do that.

I make one more input box, where you can write your Current Working Directory path and all are working fine. :smile:

### How?
```javascript
// code ...

const options = {
    cwd: location, // Here location is your Current Working Directory(cwd)'s path
}

exec(command, options, (err, stdout, stderr) => {
    if (err) {

//code ...
```

So using this web app you can make another web app in your server, but still you haven't any text editor to edit those files.

### Next features:
- Simple text editor to edit text file
- Improve I/O and O/P experience
- and more...

Write your suggestions in comment :smile:
For better understanding, here is the link of my github project {% github Utsav-Ladani/Html-and-Terminal no-readme %}
How to write C/C++ Code in VS Code?
Tags: c, cpp, vscode, computerscience
Published: 2020-12-09 04:06:05

###Install [VS Code](https://code.visualstudio.com/)
[Click](https://code.visualstudio.com/download) here to download the latest version of VS Code.
![VS Code](https://dev-to-uploads.s3.amazonaws.com/i/f497fpw7wxhy579pjyoc.png)

###Install VS Code extension for C/C++ 
[Click](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools) here to install latest version of extension for c/c++ ![extension for c/c++](https://dev-to-uploads.s3.amazonaws.com/i/9nqfor956epmhe96qo7w.png)
##OR
You can directly install it from VS Code extension menu. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2hmmz0mt84wzkuac3z3g.png)

To compile and Debug your C/C++ code you need to install compiler. Here I'm using GCC Compiler with Mingw, so we need to install Mingw-w64
Dealing with huge amounts of data in a sql database!
Published: 2020-12-09 03:26:59

So I was recently tasked with creating a postgres database that contains 10 million unique records. I also have to be able to perform realistic queries on this database in a max time of 50ms. 

First, let's talk about the seeding script. A regular seeding script with insert statements may work for a few thousand pieces of information but for 10 million it simply just is not going to work. So for this seeding script we are going to write to a csv file, and then transfer that csv to our database. CSV stands for comma separate values and a csv is essentially just a text list with text value for each column of your database. For this process we will be using fs so be sure to require that in the top of your seeding file.
So lets make a 10 million record csv file! First set up a write stream to the correct path, this is where your csv will be generated. Then write a header line with the column names of your database. For the next step we are just going to write a function that essentially is just going to run a while loop with faker.js that writes a new piece of fake data for every row of the csv file. To be safe it may be smart to practice with a 100 record csv before you switch to a 10 million record database. 

Postgres time! Now we will simply create our table that this data is going to live in, be sure to add all of the correct columns. It may be smart to not add foreign keys in the  creation of the table to save time. 
Once the table is ready just perform a copy statement in the postgres shell that will write every line of your csv to the database. 

Now we have data! So lets worry about query times, you can add timing to the postgres shell with \timing and see exactly how long your queries are taking. My intitial query is a select inner join from 2 tables and it is taking about 700ms. That is incredibly long so we are going to do something called indexing. Select the proper column to index and add an index, for my example it is a listing id on my photos table that corresponds to a listing on the listings table. The new query time after indexing is .8ms!
Hack Reactor Week 3 (react)
Tags: react
Published: 2020-12-09 03:23:28

Hey everyone! I have just gotten to my 3rd week of hack reactor. It has been very fun and I have been enjoying it a lot! But I want to talk about react states! React states is such a powerful tool! It constantly re renders a page if the state of something has been changed. Let me model a demonstration!


class App extends React.Component {
  constructor(props) {
   super(props)
   this.state = {
    counter: 0;
}
}

incrementCounter() {
  let currentVal = 0;
  currentVal++; 
setState({
  counter: currentVal
 })
}
  Render() {
   
 return <h1 onClick = {this.incrementCounter}>Click me! {this.state.counter}</h1>
 }
}

What is awesome about this is that it will re render the entire page when you click on the click me element! And can be used in many different ways. Examples can be like whenever a user sends a tweet. The state of the current tweets are tracked. When we add a new tweet it changes the state and re render the page to display that new tweet! You can find a way to do this in vanilla js. But react does that for us and helps us save so much time!
Code Smell 47 - Diagrams
Tags: oop, codenewbie, tutorial, webdev
Published: 2020-12-09 03:11:50

*Diagrams are not code. They cannot be a code smell. They are just Diagram Smells.*

# Problems

- Maintainability

- Trash code

- Code Duplication

- Diagrams focus only on structure (accidental) and not behavior (essential).

# Solutions

1. Use diagrams only to communicate ideas with other humans.

2. Program on your favorite IDE.

3. Thrash all diagrams. Even the ones generated from the source code.

4. Trust your tests. They are alive and well maintained.

5. Use [Domain Driven Design](https://en.wikipedia.org/wiki/Domain-driven_design) technique.

# Sample Code

## Wrong

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

## Right

{% gist https://gist.github.com/mcsee/36f0af6785ea36a05c3ec394fa71e4e8 %}

# Detection

We can remove all code annotations and forbid them by policy. 

# Examples

- [Automatic Code Generators](https://maximilianocontieri.com/lazyness-ii-code-wizards)

# Conclusion

Designing is a contact sport. We need to prototype and learn from our running models. 

Papers and JPGs don't run. They live in the utopic world where everything works smoothly.

[CASE](https://en.wikipedia.org/wiki/Computer-aided_software_engineering) was a very hot trend back in the 90s. 
No good system was developed with these tools.

# Relations

{% post https://dev.to/mcsee/code-smell-01-anemic-models-4dg2 %}

{% post https://dev.to/mcsee/code-smell-25-pattern-abusers-2dgi %}
 
# More info

[Code Wizards](https://maximilianocontieri.com/lazyness-ii-code-wizards)

[CASE](https://en.wikipedia.org/wiki/Computer-aided_software_engineering)

[DDD](https://en.wikipedia.org/wiki/Domain-driven_design)

# Credits

Photo by <a href="https://unsplash.com/@seagrave">Nick Seagrave</a> on <a href="https://unsplash.com/s/photos/map">Unsplash</a>

* * *

> The Diagram is Not the Model. The model is not the diagram. It is an abstraction, a set of concepts and relationships between them.

_Eric Evans_
Solving Programming Challenges
Tags: python, challenge, logic, reasoning
Published: 2020-12-09 03:09:01

Developing logical and algorithmic thinking is essential for any programmer, so one of the most important things to improve this skill is to solve challenges

Then I bring you one of the many exercises that are in the discord group Tech With Tim where you can access through his excellent YouTube channel https://www.youtube.com/channel/UC4JX40jDee_tINbkjycV4Sg

Challenge

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

My Solution

https://github.com/yoanbello/Challenge-Books-and-Pages

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

I would greatly appreciate any suggestion, criticism or feedback on the solution.
Why we should use linkedlist??
Published: 2020-12-09 02:46:32

As we know that integer type variable covers 4 bytes of memory. So let's suppose we have an integer type of array with size three and also a LinkedList with three nodes.int array[3] will cover 12 bytes of memory and integer type of LinkedList with three nodes will cover 24 bytes of memory because data part of each node will cover 4 bytes and pointer part also covers 4 bytes. So each node will cover 8 bytes of memory. Collectively three nodes will cover 24 bytes of memory while integer type of array with the same size will cover 12 bytes of memory. Now, why we should use LinkedList over an array?
Make 2020 brighter --> send an open source maintainer some gratitude
Tags: discuss, webdev, typescript, programming
Published: 2020-12-09 02:32:36

Hi there. We all know that practicing gratitude is one of those Oprah magazine tricks to getting happier.

So in the spirit of that, why not send some gratitude to an underappreciated library and/or it's maintainers that you feel could use a little boost of happiness. Being a library maintainer can be a tough and thankless job since you rarely get to see the impact of your work. Let's change that. :)

Which library comes to mind for you?
on the horizon
Published: 2020-12-09 00:48:07

There are many things just on the horizon within reach these days, a sars-nCov-2 vaccine, life being able to return to normal, new languages, new youtube videos, the whole shebang... so what's on the horizon that i'm talking about? It's a new OS @17lwinn ( and now me ) is working on... We have some major plans for it, including Xent being involved ( my own personal plans for it ) for things such as events, and even more stuff!

I'll be giving updates throughout the month and into next year on this project and others coming along with it!
How I got to understand binary search
Tags: programming, algorithms, interview, teaching
Published: 2020-12-09 00:39:30

![Photo of a book](https://i0.wp.com/ctlibrary.org/wp-content/uploads/2015/11/foradults.jpg?resize=560%2C337&ssl=1)


Not long ago, while interviewing for an internship position, I was asked one of the most abstract and surprising technical questions I have ever been asked in an interview:

> *' How would you teach a 7-year-old child binary search?'*

Alongside the obvious purpose of verifying my ability to articulate complex ideas using simple words, the question made me reflect on something else: all the great [Eureka!](https://en.wikipedia.org/wiki/Eureka_(word)) moments I had so far when understanding a concept that seconds before seemed so hard to comprehend. 

I asked myself further, what do those moments have in common? Where does the talent of transforming simple words into complex ideas live?

I suddenly remembered myself, how I was thought binary search, by a very talented schoolmate, almost a decade ago. She grabbed a thick book, I recall... and asked me how I would find page 256 in it. At first, the question did seem odd, as I used to find a page in a book by picking a place to open it at and then turning pages from there. She then opened it to the half and showed me the page number: 273. The things were already starting to fall into place. She then followed her plan to the end by opening the book to the half between the first page and the 273rd page. It was by that moment, that the idea behind binary search was in my mind and nothing could have blurred it anymore. Not only that it made sense but it felt real and all around me.

Since the interview, I happen to ask myself more often, how would I explain a hard technical concept to someone outside my field of research?

Too often, we get blocked behind the walls of technical words, missing the beauty of simplicity. Feel free to share your own [Eureka!](https://en.wikipedia.org/wiki/Eureka_(word)) moments and tell us a story about finally understanding a difficult topic and what do you think made it possible. Was it a person, a place, a good example or something else?