teleren/devto huggingface dataset:
How to build a todo app with React and Firebase Database
Tags: challenge, react, es6
Published: 2019-06-28 16:03:25

---
title: How to build a todo app with React and Firebase Database
published: true
description: Mocking the application state, implementing some action handlers and restyle the app
tags: challenge, react, es6
series: How to build a todo app with React and Firebase Database
cover_image: https://media.giphy.com/media/nVXzt7FSJlX7W/giphy.gif
---

## Day 2 - To the infinity and beyond

:date: 28-06-2019
:clock1: 2h
:checkered_flag: Mocking the application state, implementing some action handlers and restyle the app

It's been a long time since my last publishing. I've been quite busy (not just for watching Toy Story 4 in loop, of course).

Anyway, I invite you to continue this reading on the GDG Galway forum, where I published all the code for my first DevTalk.

I introduced React to our followers in Galway and we've been followed by some friends in Italy, via Google Hangouts. It's been a great experience and we are scheduling future dates.

**Don't worry**, I will implement Firebase to save some data. For the moment the mock is enough. But if you don't want to wait.. Hey buddy! Do it by yourself! *The best way to learn is "learn by doing", don't you know?*

------

On the forum you can find another nice codelab by [Julien](https://twitter.com/BPS_Julien), my colleague at the GDG Galway. He introduced NodeJS.

React tutorial https://github.com/gdg-galway/codelab-react-introduction
GDG Galway Official forum https://forum.gdg-galway.com/

Check out the code here
{% github https://github.com/gdg-galway/codelab-react-introduction %}
Fix your memory! Write it down or lose it.
Tags: discuss, learning, memory
Published: 2019-06-28 15:52:36

---
title: Fix your memory! Write it down or lose it. 
published: true
description: You probably don't have a bad memory, you just don't use it like you think you do.
tags: discuss, learning, memory
---

How many times have you said "I should know this!", or "I thought I learned this already.". Maybe you think you have a bad memory, like I've told myself a hundred times.

I've watched easily over a hundred hours of video on the Egyptians, so you would think I would know a lot about them. If you asked me a simple question on them, I couldn't answer it.

Or the fact that I've watched hundreds of hours of study material but half the time I have to go back and redo it later when I actually need it.

That got me asking myself, why is that?! 

I've come to a realization that it's not a bad memory, but it's how I process the data coming in. 

We are bombarded with input daily, from work, home, family, friends, news, tv, our phones and a million other ways.

Our brain is designed to be able to filter all of that and hold on to whats important. 

Just because we assume our brains should work a certain way, doesn't mean that is how they work. You assuming you should just remember everything you see, hear, feel, smell, say... doesn't make it reality.

You still need to help your brain know what-is-what when it comes to important memories, so that it's able to be a fine tune machine.

That is where it comes to writing things down! This tells your brain that it's important and most likely needs to be saved long term. 

You read it as you write it. It not only gives you a verbal input (in your head or perhaps you voice it), but a visual input. 

I've been practicing this, writing things down that I want to remember and  I saw improvement immediately.

All those years you thought high school teachers had you write things down, just to be annoying? Well who knew they had this answer all along?! 
:P

Want some other helpful tips to improve your memory? Check out some random links I found on the innerwebz yo!

[10 Tips for Improving Your Memory](https://www.inc.com/kevin-daum/10-tips-for-improving-your-memory.html)

[6 Science-Backed Methods To Improve Your Memory](https://www.fastcompany.com/3028359/6-science-backed-methods-to-improve-your-memory)
Help us discover the biggest development trends in 2019 and beyond while helping us donate to the Raspberry PI foundation!
Tags: survey
Published: 2019-06-28 15:50:28

---
title: Help us discover the biggest development trends in 2019 and beyond while helping us donate to the Raspberry PI foundation!
published: true
description: 
tags: #survey
---

Hi everyone!

DevEconomics is conducting
survey to discover the biggest
development trends in 2019.
Have your voice heard. Let the
world know your preferences
and experiences with popular
development tools, platforms,
and technologies, as well as
developer skills.

Will JavaScript remain on its throne as the go-to programming language? Join 20,000+ dev around the world - take the Developer Economics survey & leave your mark! Complete the survey by registering and you may win one out of USD $12,000 worth of prizes. Open until July 23rd to developers only.

You can take the survey here https://developereconomics.net/?member_id=M62yk5Kk&lang=en
Stop Judging Books By Their Covers
Tags: todayilearned, discuss
Published: 2019-06-28 15:38:22

Many of us (myself included) are guilty of passing judgement on great books because of their jaded or pale or lackluster appearance or accompanying artistic material. Something which all too often prevents us from tapping into the insights which great authors or great content producers provide to us.

In the digital age, the equivalent effect is our perception of stock photos, the images which accompany the articles that publications like the ones found on Medium produce.

How often have we decided to pass up the opportunity to read something interesting because of a badly selected stock photo, or scrolled through a Medium article hurryingly as we pass judgement on the content of the article.

But do we ever stop to think, to think about the awesome content we are missing when we make value judgements about articles or books, or podcasts, or even people. I’d argue that the answer to that question is nay.

Why did I choose to write an entire post on this topic? The answer can be found in the pages of a book I recently purchased by Henry Allison, on the topic of the Transcendental Aesthetic.

Allison, goes to painstaking lengths (through the use of complex metaphysical arguments) to attempt to prove to its reader that the reasoning which German Philosopher, Kant used in his various intertextual critiques had something quite important to say on the topic, and the reasoning as to why human beings make value judgements about abstract concepts such as beauty and appeal.

In that sense, beauty is very much relative. What I find beautiful, you may not find beautiful and what I hold dear to my heart as something which retains aesthetic value, you may view through a lens of normality. 

This may include books, and their covers. That will always be the case unfortunately, so I guess this article is just a polite means of drawing our attention to the beauty within the pages of your next read.

Happy reading!
On Glitch This Week
Tags: glitch, glitchthisweek, showdev
Published: 2019-06-28 15:31:09

---
title: On Glitch This Week
published: true
canonical_url: https://glitch.com/@glitch/glitch-this-week-june-26-2019
series: Glitch This Week
cover_image: https://cdn.glitch.com/02863ac1-a499-4a41-ac9c-41792950000f%2FleadEditorBannerDevTo.png?v=1561735307999
description: Just a few projects that caught our eye this week on Glitch (June 26, 2019).
tags: glitch,glitchthisweek,showdev
---

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on [Glitch](https://glitch.com/). Here are a few projects that caught our eye this week.

## [Make Art with Friends 🖼️](https://glitch.com/~inter-art-ivity)

As [Vidhi Bagadia](https://glitch.com/@vidhi), creator of "[inter-art-ivity](https://glitch.com/~inter-art-ivity)", says: "creativity is best crafted together." Which is what I love about it. You can create art with friends, or indeed, random strangers on the internet. Pick a color, enter your name, and then paint your masterpiece alongside others. You can even download a copy of it too.

{% glitch inter-art-ivity app %}


## [Play Diversity Pandering Bingo ⭕](https://glitch.com/~diversity-pandering-bingo)

"[diversity-pandering-bingo](https://glitch.com/~diversity-pandering-bingo)" by [Geoff](https://glitch.com/@gapple) is an interactive version of [Rani Molla](https://twitter.com/ranimolla)'s [crowd-sourced](https://twitter.com/ranimolla/status/1138276871781531648) bingo board, dedicated to the weak excuses tech companies use to explain why they’re not more diverse yet.

It's an accompaniment to her article "[Why women in tech are being Photoshopped in instead of hired](https://www.vox.com/recode/2019/6/17/18678541/women-tech-photoshop-diversity)", that dives into the diversity reports of tech companies over the last 5 years to see what's changed, or more accurately what hasn't changed.

{% glitch diversity-pandering-bingo app %}


## [Get Started with Zdog 🐶](https://glitch.com/~zzzdog)

Zdog is Metafizzy's 3D JavaScript engine for canvas and SVG. It enables you to design and render simple 3D models on the Web, bringing the simplicity of vector illustration to 3D. You can see the types of things you can make with it [here](https://zzz.dog/#made-with-zdog). Then use [Derek Reynolds](https://glitch.com/@drk)'s project "[zzzdog](https://glitch.com/~zzzdog)" to get started making your own fun scenes with it.

{% user drk %}
{% glitch zzzdog app %}

Other apps in [this week's round-up](https://glitch.com/@glitch/glitch-this-week-june-26-2019) include a Good Omens game, a SpongeBob Squarepants search engine, and a Sesame Street music app. [Check them out](https://glitch.com/@glitch/glitch-this-week-june-26-2019)! And don't miss [Michael Fairchild](https://glitch.com/@mfairchild365)'s [curated list of digital accessibility resources](https://factual-raven.glitch.me).
Challenge: Write a useState hook without copying React's
Tags: javascript, react, reacthooks
Published: 2019-06-28 14:59:14

---
title: Challenge: Write a useState hook without copying React's
published: true
description: 
tags: javascript, react, react hooks
---

Hi there,
Yesterday I came up with the idea of building my own useState function. I thought it'd be easy, since we can always use lexical's scope. So I tried it. And it didn't work.

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

If you see, I created a higher-order function to persist the value of the variable *current*, in the returned function, I return the actual values we would need.

The problem is, after I call the setCounter function several times, it does persist the current state and successfully update it, but doesn't return it.

I tried returning [current, updateValue] directly from useState function, but in that case, updateValue doesn't keep its lexical scope. So my last code is what I think is the closest.

What I can think by looking at this error, I'm not passing a reference but the actual value. I remember the way to work with references is with objects and arrays, I tried the objects' approach but I'm not sure if it was badly implemented and the array reference I don't even know how that works. I would expect that returning [current, updateValue] from updateValue function would do the magic, but it doesn't.

As I said, I'm trying to solve this not looking at React's code for useState. I want to create it myself, maybe with some help.

What do you guys think I'm missing? Have you tried doing a useState of your own?


Best regards!
Typeahead async requests throttling
Tags: javascript
Published: 2019-06-28 14:57:33

As everybody else have some legacy code (who does not have it?), and yesterday we faced with problem.

Our internal app have search panel where users could write and get related results. But search was written with typeahead and without any throttling. So it's triggered full text search on backend side on every input change which leads to DB connection pool exhaustion.

We didn't found any ready to use solutions, so we added following fix:

```javascript
$input.typeahead(
  {
    ...
  },
  {
		...
    async: true
    source: (query, syncResults, asyncResults) ->
      href = self.href
      # Added getAsyncResults call to throttle requests:
      getAsyncResults(
        () ->
          $.ajax(
            url: href
            data:
              query: query
            dataType: 'json'
          ).success(
            (data, textStatus, jqXHR) ->
              asyncResults(data)
          )
      )
  })
```

where getAsyncResults defined before typeahead init:

```javascript
# throttle is lodash function
getAsyncResults = _.throttle(((fn) ->
    fn()
  ), 300,
  { ... })
```


Would be happy if someone find this simple solution helpfull.
What are your favorite developer tools?
Tags: discuss, tools, macos, linux
Published: 2019-06-28 14:49:47

---
title: What are your favorite developer tools?
published: true
description: I'm getting a new laptop - what should I install?
tags: discuss, tools, macos, linux
---


Happy Friday!

We're getting new laptops at work, which means I have a good opportunity to re-evaluate my development setup. What lesser-known tools should I check out?
Connect to Azure Data Warehouse from Azure Databricks
Tags: azure, databricks, keyvault, adw
Published: 2019-06-28 14:43:51

## Create a secret scope
A secret scope will allow you to use Azure KeyVault to download all secret information to connect to Azure Data Warehouse, e.g.: username/password, etc. In our example, this will be the whole connection string.

Navigate to https://{region}.azuredatabricks.net/?o={object_id}#secrets/createScope

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

Grab the DNS and Resource ID from your Azure KeyVault Properties

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

### Get required secrets from azure keyvault and set Spark configuration

```
blob_storage_url = dbutils.secrets.get(scope = "databricks_scope", key = "blobstorageurl")

blob_storage_key = dbutils.secrets.get(scope = "databricks_scope", key = "blobstoragekey")

adw_connection = dbutils.secrets.get(scope = "databricks_scope", key = "dwconnection")

blob_storage_temp_dir = dbutils.secrets.get(scope = "databricks_scope", key = "blobstoragetempdir")

spark.conf.set(blob_storage_url, blob_storage_key)

```

## Spark driver to SQL DW

The Spark driver connects to SQL DW via JDBC using a username and password. We recommended that you use the connection string provided by Azure portal, which enables Secure Sockets Layer (SSL) encryption for all data sent between the Spark driver and the SQL DW instance through the JDBC connection. To verify that the SSL encryption is enabled, you can search for encrypt=true in the connection string. To allow the Spark driver to reach SQL DW, we recommend that you set Allow access to Azure services to ON on the firewall pane of the SQL DW server through Azure portal. This setting allows communications from all Azure IP addresses and all Azure subnets, which allows Spark drivers to reach the SQL DW instance.

For more info see [here](https://docs.databricks.com/spark/latest/data-sources/azure/sql-data-warehouse.html)


### Load data from a SQL DW query into a Spark DataFrame.

```
df = (spark
      .read
      .format("com.databricks.spark.sqldw")
      .option("url", adw_connection)
      .option("tempDir", blob_storage_temp_dir)
      .option("forwardSparkAzureStorageCredentials", "true")
      .option("query", "select count(*) as counter from my_table")).load()

df.show()
```

That's it! Quick and easy.
How to Make a Button on Dev.to
Tags: meta, productivity, webdev, discuss
Published: 2019-06-28 14:32:54

---
published: true
---

If you've read any of my last few posts you may have noticed that I started including a twitter image at the end. You might not have realized that it was actually a fully functional button.

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

I hadn't seen anyone do this before. Luckily, Dev.to is open source, so it was easy enough to see that the markdown parser permitted a simple image button. I've included an example below.

```
<a href="https://twitter.com/<YOUR_TWITTER_HERE>" rel="some text">
![Foo]
(https://thepracticaldev.s3.amazonaws.com/i/gmrz82bjwhej1f1iqb1e.png)</a>
```

or (as suggested by @Artemix)

```
[![](https://thepracticaldev.s3.amazonaws.com/i/gmrz82bjwhej1f1iqb1e.png)](https://twitter.com/<YOUR_TWITTER_HERE>)
```

That code (with your own twitter URL added) will display a follow button for your twitter in a post. Example below

[![](https://thepracticaldev.s3.amazonaws.com/i/gmrz82bjwhej1f1iqb1e.png)](https://twitter.com/taillogs)
"Too complicated, a library will handle it"
Tags: javascript, discuss, webdev
Published: 2019-06-28 14:18:20

Hello everybody,

I recently got an exercise where I had to make an element resizable as well as draggable. The element should have a handle in each corner allowing the user to resize in all 4 directions.

![](https://thepracticaldev.s3.amazonaws.com/i/j6kudzclcjm6af031ubh.gif)

This turned out to be very difficult for me and even after implementing it, I'm not 100% understanding every calculation that had to be done in order to make it work. I wish I had the option to use a library, but on the other hand it was fun to implement it from scratch.


When was the last time you had a moment of thinking: 

> "Hmm, this seems complicated, surely a library 📚 will handle it" 

when trying to implement certain functionality but then went ahead and implemented it yourself or even proceeded to use that library?
How to Go the Extra Mile When Solving a Coding Challenge 
Tags: technicalinterview, codingchallenge, bobbydavis, coderfoundry
Published: 2019-06-28 14:17:11

---
title: How to Go the Extra Mile When Solving a Coding Challenge 
published: true
description: Learn the solve-talk-show method for impressing hiring managers during technical interviews
tags: technical interview, coding challenge, bobby davis, coder foundry
---

How would you solve this coding challenge?

> Given a list of numbers and a number k, return whether any two numbers from the list add up to k. For example, given [10, 15, 3, 7] and k of 17, return true since 10 + 7 is 17. Bonus can you do this in one pass

Watch [Bobby Davis](https://coderfoundry.com) not just solve the coding challenge, but provide you with a strategy of presenting your process. Do this during a technical interview and you'll win your next Software Developer job.

{% youtube ne5zmy_8oFA %}
What have you built for work sponsored hack days?
Tags: productivity, showdev, discuss
Published: 2019-06-28 14:09:16

A holiday weekend is almost upon us, and since folks like to use them for PTO, it looks like we're going to have a slow day over here on July 5th. 

Not as many people around, means less deployments, means less fires for my DevOps team to put out.

We're looking at turning the day into a hack day to build something fun and/or useful for our department. We have a few ideas of what those project(s) might be, but I'm curious what y'all have worked on and built for work sponsored hack days. 

Might provide a bit of inspiration!
Let's create a Personal Website with Github and Medium or Dev.to Account.
Tags: showdev, opensource, webdev
Published: 2019-06-28 13:40:50

I have created a simple personal website maker with Github, Dev.to or Medium. Simple configuration. All it needs is your username on Github and Dev/Medium. 

{% github PJijin/Personal-Website %}


The website consists of Github repository portfolio and blog posts from Dev.to or Medium, About Us Section, Basic Profile information. 

Hit ⭐️ if you like the project 😍, Feel free to open issues 🎉

Github: https://github.com/PJijin/Personal-Website

Demo: https://personal-website.pjijin1.now.sh/


Follow On Twitter: https://twitter.com/PJijin



### Usage

1 Clone the Repository

```
 git clone https://github.com/PJijin/Personal-Website.git
```

2 Run this command to install dependencies

```
 npm install
```

3 Open src/config.js and then enter your social media account username, name, title.

```
const config = {
	name: 'Jijin',
	title: "Hi I'm Jijin 👋🏻",
	blog: 'Dev', // Dev.to or Medium (Make blank if you don't need the blog)

	// Social media profile username
	github: '', // [REQUIRED] Github Username
	twitter: '', // Twitter Username
	stackoverflow: '', // Eg: 3211944
	medium: '', // without @ symbol
	instagram: '',
	dev: 'pjijin',
	youtube: '', // Channel ID
	linkedin: ''
};


```

4 Customize about us page from src/components/About/about.js

5 Run

```
npm run start
```
restarting ....
Tags: javascript, beginners, codenewbie
Published: 2019-06-28 13:36:27

I'm going to start working through the freecodecamp.org program again. I logged in for the first time today and notice that I've completed 236 of 1409 challenges. I felt like 236 was a lot, but when I consider that is less than 20% of the course, not quite as complete as I thought.  Only 2 projects of the 30, and 0 certifications....  if I look at the actual course work, I have previously completed, HTML, most of Basic CSS, a couple Responsive Web Design Projects, Basic Javascript, a few of the Basic Algorithm (this is where I struggle the most), most of Bootstrap, jQuery. How much of this do I remember? Not a ton. The HTML stuff is pretty easy, the basics of JS are there, but ask me to complete a simple project. Not sure I could do it. 

A while back I found @aspittel's content. Following her has given me inspiration to pick this back up. 

I want to start 100 days of code, my official start date will be 7/1/19.  If anyone is interested in joining me along  the way, let me know.  I may keep posting here, might move to a personal blog, dunno yet.

The question of the moment, can I reset my progress over at FCC?
incrementing the repeted values
Tags: replit, node
Published: 2019-06-28 13:35:36

my code 

 let arr = [1,2,5,4,2,5, 4];

const fun = ()=>{
let newArr= [];  
let el = [];
let result = 0 
let i = 0;

while(arr.length > 0  ){ 
 el = arr.splice(i,1);
  el = el[0]; 
  console.log(el)
  
  if (!newArr.includes(el)){
    newArr.push(el);
  }
  else if(newArr.includes(el)){
    while( newArr.includes( el)){
      ++ el;
   } 
   newArr.push(el);
 } 
}

  result = newArr.reduce((el, acc)=>{
  return el+acc
});
return result ;
}
fun(arr)
Unboxing Bit
Tags: microsoft, bit, developer, unboxing
Published: 2019-06-28 13:10:13

---
title: Unboxing Bit
published: true
description: Jim got his grubby hands on a Bit Box. Watch as he unboxes all the goodness...
tags: microsoft,bit,developer,unboxing
---

Jim got his grubby hands on a Bit Box. Watch as he unboxes all the goodness...

Microsoft Learn: [docs.com/Learn](https://microsoft.com/learn/?WT.mc_id=devto-blog-jabenn)
Microsoft Docs: [docs.microsoft.com](https://docs.microsoft.com/?WT.mc_id=devto-blog-jabenn)

If you get sent a Bit, don't forget to tweet a picture and tag [@msdevuk](https://twitter.com/msdevuk)!