teleren/devto huggingface dataset:
Front-end Challenge: Prevent Clicks
Tags: challenge, javascript
Published: 2019-05-29 18:45:36

This is a challenge for frontend developers. Test your DOM manipulation and CSS skills.

Create two functions, 

### `addBlocker()`
- Should block all clicks on the page. Nothing should be clickable anymore.
- Should print the current mouse position on viewport, and the current element under the mouse on click.

### `removeBlocker()`
- Should remove the blocker created by addBlocker(), everything should be clickable as before adding the blocker.

The two functions should work on any website including, [dev.to](http://dev.to) and [producthunt.com](http://producthunt.com)

Here is a video preview of what should be done.

{% youtube ZkVPheXNqoc %}

Share your code in the comment section or in a github gist.

Good luck!
How I met your Gatsby - Day 0
Tags: challenge, gatsby, blogging, 30daysofgatsby
Published: 2019-05-29 18:27:08

---
title: How I met your Gatsby - Day 0
published: true
description: Gatsby in 30 days
tags: #challenge ,#gatsby, #blogging, #30daysofgatsby
series: The Great Gatsby
---
For the day i researched a little about gatsby and react. Came across a number of posts here. 
Such as,

{% link https://dev.to/laurieontech/rewriting-a-static-website-using-gatsby-and-graphql---part-1-53o0 %}


{% link https://dev.to/alanhylands/migrating-my-blog-from-wordpress-to-gatsby-part-1-580c %}

{% link https://dev.to/coreyja/i-ported-my-blog-to-gatsby-4l9d %}

and so on.

After reading i decided to begin with official docs.

The prequsites are 
<ul>
<li> Node.js and NPM</li>
<li>Git</li>
<li>Gatsby CLI</li>
<li>Text Editor</li>
</ul>

The Gatsby cli commands are pretty much self explanatory up to this point. 
Eventually in order to run **gatsby develop** was pretty much enough . 

Reminds me of different server running commands like *ng serve* and *artisan serve* 

Code structure is not that different from other frameworks.

After some copy pasting,
<ul><li>Learned about Gatsby starters, and how to use them to create new projects
JSX syntax</li><li>Learned about components</li><li>Learned about Gatsby page components and sub-components</li></ul> . Seems interesting . I am looking forward for graphql.
What's something you couldn't work without?
Tags: discuss, productivity
Published: 2019-05-29 18:15:29

---
title: What's something you couldn't work without?
published: true
description: Other than a computer and internet, what can't you live without?
tags: discuss, productivity
cover_image: https://images.unsplash.com/photo-1549082969-62ab24fa9d7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80
---

Besides a decent computer and a decent internet connection, what's something that, if you didn't have around, you couldn't work properly? 
Is it coffee, or tea, a good chair, music, headphones, your favorite editor or IDE, journal, a desk plant...?


For me, although all of the above are pretty useful, it would have to be an elbow cushion. Without it, my elbows get bruised from always being on the hard wood table while I type. I could replace it with any other cushion, but I recently crocheted a new DIY one that works perfectly.


I'm curious. What couldn't you be a developer without?


> You can take this chance to be grateful for always having that nearby. Being grateful is really good for our mental health and well-being. 💙

*Photo by Nicole Wolf on Unsplash*
Sidepact 2019: start a company with a full-time job
Tags: startup
Published: 2019-05-29 18:10:08

---
title: Sidepact 2019: start a company with a full-time job
published: true
description: 
tags: startup
---

Sidepact helps full-time engineers interested in starting companies. If you live in the Bay Area, [apply for the 2019 program](https://www.sidepact.com/blog/2019/5/announcing-sidepact-2019).
No Comment
Tags: javascript, css, react
Published: 2019-05-29 18:03:10

To say I'm overwhelmed would be a huge (#big, #gigantic, #monstrous) understatement. This week marks my 11th week at Lambda school and the start of my first Build Week Project. I have no clue what I'm doing. Yet, I know exactly what to do... 

*What the heck?!!*

The issue lies in the fact that my collaboration and communication skills are being tested. I have to work with one other UI developer to design the marketing page for an app...I think. I'm not even clear on the instructions. Why? Because of my crab-like, anti-social personality, I'd rather sit back and have someone else ask all the clarifying questions so I can just get to work. *Ha!* Eventually I'll know what to do. 

*And I'll fill you in on all the brutal blockers and beautiful breakthroughs once I reach the other side in a couple weeks.*

...But, right now? I'm just going to use up my free time venting, eating an ice cream cone, and watching countless Youtube videos on how to build a login page.

*Pray to the JS gods for me...*
What headphone(s) do you use when coding?
Tags: discuss, headphones, productivity, music
Published: 2019-05-29 17:56:05

I am an avid user with all types of headphones! Some could say that I am a headphone junkie others could say I love to have options. Be that as it may I want to know what everyone uses for certain situations when it comes to coding or listening to music in general. 

#Here is my current list of headphones/earphones that I own at the moment:

![Sony WH1000XM2 Bluetooth Wireless NC Headphones ](https://images-na.ssl-images-amazon.com/images/I/81BG19n0DeL._SL1500_.jpg)
* Sony WH1000XM2 Bluetooth Wireless NC Headphones 
    - Coding/Programming work
    - Long study sessions
    - Deep focus work
    - Reading books

![Sony XB950B1 Extra Bass Wireless Headphones ](https://images-na.ssl-images-amazon.com/images/I/41svkOgYDpL.jpg)
* Sony XB950B1 Extra Bass Wireless Headphones 
   - Coding/Programming work
   - Web development 
   - intense music session
   - Dubstep & Chillstep
   - Any electronic music


![Apple Air Pods](https://images-na.ssl-images-amazon.com/images/I/41g4Idd4y9L._SL1024_.jpg)
* Apple Air Pods 
  - Mainly use these when I am out about in school, work, or at my local library
  - Also use for podcasts and Audio books


![Arctis Steel Series Gaming headset](https://images-na.ssl-images-amazon.com/images/I/61wMnQhL5cL._SL1328_.jpg)
* SteelSeries Arctis 7 
  - Gaming headset for playing the PS4 
  - Also sometimes use with the XBOX 360 

![Wired earphones](https://images-na.ssl-images-amazon.com/images/I/6170biPupgL._SL1000_.jpg)
* Wired earphones 
  - When I forget to charge any of my bluetooth headphones 
  - Back up earphones for when my other headphones die

Let me know which pair of headphones you guys use on a daily basis or use for special occasions! Also I am close to buying the Bose QC 35 so badly >.< even though I don't really need them 🤣
Looks like my luck has run out :( 
Tags: culture, help, career, webdev
Published: 2019-05-29 17:35:17

---
title: Looks like my luck has run out :( 
published: true
description: After 13 years of service, I was given my 30 day notice... AWESOME.
tags: culture, help, career, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/whwqscsmazc9jvb1684b.jpg
---

After 13 years of service, I was given my 30 day notice... AWESOME.

That "AWESOME" was sarcastic in case it wasn't clear. It may be "the best thing to happen to my career", as said by a few higher ups, but that's not how it feels like right now; and as the silver-lining, it still doesn't mean much right now. Right now, I'm upset. Right now, I'm scared. Right now, I'm no longer one of the lucky ones I so happily called myself in my last article. 

{% link nandoblanco/ive-been-at-this-a-long-time-and-i-have-nothing-to-show-for-it-13a8 %}

I can't get into the who or provide my opinion on the why but we've been dealing with layoffs for months now. The first wave came out of no where and rocked our department HARD. 20+ people gone, including my director. I thought I was safe. I figured this move was for the best. It was my time to shine, lets get it cracking. The second wave came with rumors and half truths, 160+ people gone. Wow. At least the worst had passed... nope. Then came outsourced support, to "help" us, since we lost so many people, obviously. We didn't buy it. I lie, most people didn't buy it... I did. I saw the logic behind it, I appreciated the passing my day to day support to someone else so I can focus on "development and innovation". I was so naive. 

13 years... I would've stayed for life! I wanted to move up, run my own team and eventually the department. I looked for better paying jobs but I was never going to leave. Maybe that was the issue. I got too comfortable. But why shouldn't you get comfortable at a good job. This was my second home, I decorated my battlestation dammit! 

I'm scared. I'm scared of whats out there. I'm scared of whats NOT out there. I'm scared I'm not good enough. I know for a fact I'm missing some "must have" skills as a front-end web developer. Our web team handle front-end development for static public sites and our programmers worked on applications using AngularJS and React. Meaning, I don't know React! I worked with the programmers on styling their AngularJS directives but that was about 3 years ago. Most front-end developments jobs want React or some other JS framework... I didn't learn it because there wasn't a need. Plus, I was too busy leading development and innovation for the CMS. I'm ROCK STAR at the CMS, I'm a ROCK STAR at using the Velocity Template Language to do all types of cool stuff on render so it still publishes as a static html page. I've even been doing remote contract work for another company using the CMS. I'm awesome! I'm awesome at this very specific, very niche, non mainstream type of work that isn't used often enough for me to find another full-time job. I'm so awesome.
Chrome DevTools: Conditional Breakpoints
Tags: googlechrome, devtools, chromedevtools, debuggingjavascript
Published: 2019-05-29 17:24:49

---
title: Chrome DevTools: Conditional Breakpoints
published: true
description: Using Chrome DevTools to debug functions that are invoked multiple times with different value
tags: Google Chrome, Dev Tools, Chrome Devtools, Debugging JavaScript
---

Have you ever tried to debug a loop or code that executes at intervals? I know it's hard to navigate through the loop to understand the bug.

> Conditional breakpoints might be just the one for you.

## Conditional breakpoints

You would be familiar with adding breakpoints in your source code in order to debug code execution. This is a pretty common practice of finding bugs or understand the execution of code.

But Chrome also has a feature called conditional breakpoints, which allows you to break at a particular line only if a specific condition is evaluated to be true.

![](https://thepracticaldev.s3.amazonaws.com/i/xosjosjyf4eagl7149y6.png)

The condition can include any variable in code that is available at that particular line. Even the variables inside the closures can be accessed in the condition evaluation.


_Preview (debugging with conditional breakpoints):_
{% youtube l6PKY-l6wys %}

{% github apvarun/learndevtools %}

**Direct Link:** [Lessons: Conditional Breakpoints](https://learndevtools.now.sh/docs/guides/sources/2.-conditional-breakpoints/)

**BONUS:** The new version of Chrome's Canary release (at the time of writing this post) has landed with inline breakpoints which allow you to break at specific points in a line itself. This is helpful in cases where you do multiple function calls or computations in a single line.

Previous Post: [Detecting Element Changes](https://dev.to/apvarun/chrome-devtools-detecting-element-changes-gh6)
16 Week Streak 🎉 + What online poll tool do you use? 🤔
Tags: question, devto, poll
Published: 2019-05-29 17:15:57

## 16 Week Streak 🎉
**Last week I received the 16 Week Streak badge! 🎉** I am very happy to be part of this community, even though most of my blog posts don't have the same audience reach as some of the bigger bloggers here 😉

I have to say that it was hard for me to go for this badge, a couple of times I thought about not writing but then it would be a waste because I was so close already. I am sure that this decreased the quality of my blog posts, so I will now probably make less blog posts but I hope that they will deliver better content.

Thank god @ben confirmed that the 16 week streak will be the final streak badge, he is right that streaks enforce gamification 😅

{% github https://github.com/thepracticaldev/dev.to/pull/2467#issue-271040414 %}

---

## What online poll tool do you use? 🤔
I am looking into adding a poll liquid tag here on DEV. I think this will open a lot of new opportunities to different types of blog posts: 

* Will you watch x live stream?
* What do you think about this new plugin/framework?
* Are you exited with this new feature?
* ...

The list of options is endless I think.

I would like to know if you guys make online polls what free poll tools do you use? 
So far it seems that we can't use Twitter polls, this was of course my first option.

Maybe some requirements:

* It has to be free
* Embed, iframe is easiest to implement in liquid tags I think

An other option is to add native poll support in DEV but the downside would be the added complexity for voting. This would (I think) require visitors to have an account to be able to vote.

So what do you guys think? All idea's are welcome.

*Please note that this is not yet an approved DEV feature, just something that I am investing and possibly will make a feature suggestion and PR for.*
Build a Collaborative Real-time Todo App Backend Using Hasura GraphQL
Tags: jwt, backend, programming
Published: 2019-05-29 16:35:45

---
title: Build a Collaborative Real-time Todo App Backend Using Hasura GraphQL
published: true
description: Learn how to build a working real-time backend for a to-do app using Hasura and GraphQL
tags: #jwt #backend #programming 💻
canonical_url: https://auth0.com/blog/building-a-collaborative-todo-app-with-realtime-graphql-using-hasura/
---

TL;DR In this tutorial, we are going to build a real-time to-do app backend with GraphQL APIs, secured using JSON Web Tokens.

Setup a Real-Time Backend With Hasura
Hasura gives instant real-time GraphQL APIs over PostgreSQL. It comes with built-in role-based access control and supports Authorization over webhooks and JWT. Hasura automatically generates types, queries, and mutations when connected to a PostgreSQL database, and the client can query directly with auth.

A front-end application has been implemented using React, and has the following features:

- A simple UI to list, add and delete our to-dos
- A collaborative real-time UI for public to-dos
- Authentication with Auth0
- Auth0 rules to automate syncing of user signup with a database
- Apollo client connecting to GraphQL APIs

We will focus more on building the backend with Hasura and Auth0, and use a React app demo as an example to show how everything integrates.
[Continue Reading 🛠](https://auth0.com/blog/building-a-collaborative-todo-app-with-realtime-graphql-using-hasura/?utm_source=dev&utm_medium=sc&utm_campaign=collabapp_hasura)
Finished My Portfolio Site
Tags: help, webdev, showdev, career
Published: 2019-05-29 16:15:49

---
title: Finished My Portfolio Site
published: true
description: Looking for feedback, finally finished my portfolio.
tags: #help #webdev #showdev #career
---

## https://bbarbour.dev

So, I finished my portfolio site. I am pretty excited, and looking for some constructive feedback. I know it's not perfect and that I have a long way to go before I'm a top-notch Front End Developer. Still, I'm happy with how it turned out.

Also does anyone have tips on using your portfolio as a tool to help you get a job? Is there a best practice to point recruiters/potential employers to it?

I'm just wondering now that I have a portfolio, how I should best use it.
“Dad, telephones dial with sound!”
Tags: dailywriting
Published: 2019-05-29 18:58:15

---
title: “Dad, telephones dial with sound!”
published: true
tags: daily-writing
canonical_url: https://marcusblankenship.com/why-telephone-keypads-make-noise/
---

Growing up in the 1970s, I developed a mental model of how push-button telephones worked.

My mental model went like this:

1. When you lifted the receiver, you heard a dial tone. That told you that you could dial.
2. When you pressed a number on the keypad, you heard a tone. That told you a number was pressed.
3. Pressing different keys on the keypad made different tones. That helped you know you’d touched different numbers.
4. When you’d pressed enough numbers, the other phone “rang” and someone might answer.

When I was fourteen, in 1984, I downloaded a program named “Silver box” from a BBS for my Commodore 64, which was output to my 10″ B&W TV.

I spent a whole Saturday trying to figure this program out.

It didn’t make any sense – when I would use the “Dial Touch Tone” function, it generated the same tones as I heard when I dialed a telephone keypad. But who wants to hear the sound a phone makes?  That’s not interesting.

Finally, out of frustration, I entered my friend Robert’s phone number into the program and held my touch-tone phone near the TV speaker.

The program made the tones… just like it had for the past nine hours… and then I heard, _“Hello? Marcus? Hello??”_

Incredulous, I brought the phone up to my ear, _“Hello? Who is this?”_

_“It’s Robert. You called me, goofball.”_

I promptly hung up on him, shaking.

**How the hell had the speaker on a TV dialed a telephone????**

So, of course, I tried it again.

And again, he answered, a bit more annoyed this time.

I couldn’t put into words what had happened, but I knew something was happening.

Rushing into my father I yelled, **_“Dad, telephones dial with sound!!! WITH SOUND!!!”_**

He looked at me, confused, and kept reading the paper.

**This is one of my earliest memories of having a mental model shattered.**

Turns out that the tones made by the keypad are NOT for people to “know they pressed the right key” – they controlled the central office switch and dial the phone. It also turned out that operators had more keys than the normal phone, which allowed them to do some fun stuff. But that’s a story for another time… ![😉](https://s.w.org/images/core/emoji/11.2.0/72x72/1f609.png)

Having a mental model about something is essential for using it.

But having an incorrect mental model creates frustration, and blinds us to reality.

In this case, I was lucky enough to make this “discovery” at an early age, and become joyfully aware that I might have wrong mental models about the world.

Tomorrow I’ll show you a tool you can use to improve your mental models.

But today, would you tell me if you’ve ever had an experience like this, where your mental model was joyfully shattered?

Best,  
Marcus

The post [“Dad, telephones dial with sound!”](https://marcusblankenship.com/why-telephone-keypads-make-noise/) appeared first on [Marcus Blankenship](https://marcusblankenship.com).
What was THAT moment you understood you wanted to become a dev?
Tags: discuss, beginners, career
Published: 2019-05-29 15:53:37

---
title: What was THAT moment you understood you wanted to become a dev?
published: true
description: What was THAT moment you understood you wanted to become a dev?
tags: discuss, beginners, career
cover_image: https://thepracticaldev.s3.amazonaws.com/i/g6da467nwbf0v7mmd748.jpeg
---

**Mine**
8 years old; a C64; the sound a 5¼ inch floppy disk; things moving on the screen on my command.

![](https://media.giphy.com/media/yidUzHnBk32Um9aMMw/giphy.gif)

**What was yours?**
Angular Material 9|8 Icons Tutorial with Real-world Examples
Tags: angular, angular98, angularwithrealworld
Published: 2020-01-31 21:02:42

---
title: Angular Material 9|8 Icons Tutorial with Real-world Examples
published: true
tags: Angular ,Angular 9|8, Angular with Real-world
canonical_url: https://www.positronx.io/angular-material-8-icons-tutorial-with-real-world-examples/
---

The post [Angular Material 8 Icons Tutorial with Real-world Examples](https://www.positronx.io/angular-material-8-icons-tutorial-with-real-world-examples/) appeared first on [positronX.io](https://www.positronx.io).

Today I am going to share with you use **Angular Material 8 Icons** in Angular 8 app. Angular Material design is advantageous when it comes to building the user interface in no time. Nowadays, the usage of Angular material design is rapidly increasing. Angular material 8 offers lots of robust and beautiful UI components to build the user interface seamlessly. In this tutorial, I will teach how to use Angular Material 8 icons in your Angular 8 project.


[Click here to read more](https://www.positronx.io/angular-material-8-icons-tutorial-with-real-world-examples/)
Project Euler #5 - Finding the Smallest Multiple
Tags: projecteuler, challenge
Published: 2019-05-29 15:44:07

---
title: Project Euler #5 - Finding the Smallest Multiple
published: true
description: Solving problem #5 from Project Euler, finding the smallest multiple
tags: projecteuler, challenge
series: Project Euler
---

Continuing the wonderful community solutions to [Project Euler](https://projecteuler.net).

This is [Problem 5](https://projecteuler.net/problem=5), finding the smallest multiple.

> 2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.
> 
> What is the smallest positive number that is evenly divisible by all of the numbers from 1 to 20?
Tourguide.js - A simple, lightweight, clean and small library for creating guided product tours for your web app.

Tags: opensource, github, javascript
Published: 2019-05-29 15:24:46

# Tourguide.js

Hi everyone :) 
We build tourguide.js as a lightweight alternative to current libraries that are on the heavier side as they rely on jquery. 

Tour data can be supplied via json or dom. If you could give it a try I would highly appreciate it. 

[Git Repo](https://github.com/LikaloLLC/tourguide.js) 


[Try on JSFiddle](https://jsfiddle.net/eugenetrue/q465gb7L/)
How do you network at conferences?
Tags: discuss, conferences
Published: 2019-05-29 15:19:27

---
title: How do you network at conferences?
published: true
tags: discuss, conferences
---

How do you socialize/network at conferences? Are there many people in the community that you know, and meet up with during conferences? Do you just join random conversations? What can/do conferences do to help this often introverted community make new connections?