teleren/devto huggingface dataset:
Day 63 : The Upgrade
Tags: hiphop, code, coding, lifelongdev
Published: 2020-01-03 22:17:45

_liner notes_:
- Professional : Did some crossover work that is both personal and professional. Been building a site that will be a showcase of slides for presentations I'll be giving. This way the audience will be able to see my slides and interact with code snippets just in case they can't see the projection. There will be some real-time interaction so when I go through my slides, the audience's slides will also change and I have closed captions goodness happening. I want to give the audience the Upgraded experience! haha Got quite a bit done and hooked up to the database. I'm using Sapper / Svelte and of course Firebase. haha Looking to get it "done" if not tonight, by this weekend.

- Personal : Besides working on my work / side project, I'm going to be finishing up this week's radio show.


![Colorfully stripped mountains for Old Paria, Utah](https://thepracticaldev.s3.amazonaws.com/i/fqk943qzz7spj5ptg518.png)


This weekend is about the radio show, finishing up some side projects and preparing for my first trip as a JavaScript Developer Advocate next week! Pretty excited. Back to work and laundry. haha

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube DqROS_ub6Q4 %}
Hard Thinking vs Soft Thinking
Tags: todayilearned
Published: 2020-01-03 21:22:45

I recently had a conversation with a classmate about how thinking can be broadly separated into hard thinking and soft thinking. We agreed that programing is an excellent method of improve one's hard thinking skills. Programing forces you to tell your code exactly what to do. Any deviation in code results in different result; or a different means and arriving at the same result - this can be more or less efficient.

Programing forces one to be logical. One must consider what one want and how to achieve it; however, soft thinking does have its place in programming as well. Pseudo code is an example of soft thinking's utility. When you face a roadblock, it may be helpful to step back and think about what you are trying to accomplish in general terms. Ambiguity can be the catalyst for a hard course of action; it can also help locate problems worth solving.

While we agreed hard thinking is more prevalent in programing, I would not discount soft thinking's importance in problem solving.
Code Challenge #3 | Edit a blog post | Vuepress
Tags: challenge
Published: 2020-01-03 22:11:15

**Challenge**

Edit a blog post!

[SOLVE CHALLENGE on Code Sandbox](https://codesandbox.io/s/tgc-challenge-01-l5n6l?fontsize=14&hidenavigation=1&theme=dark)

You can send your solutions and request any help by reaching us via twitter to [@thatgoodcompany](https://twitter.com/thatgoodcompany) or via email to [contact@thatgoodcompany.com](mailto:contact@thatgoodcompany.com).
Code Challenge #2 | Implement a dark theme | Tailwind + NextJS
Tags: challenge, javascript, css
Published: 2020-01-03 22:08:11

# Challenge 

Can you implement a dark theme to this [landing page](https://codesandbox.io/s/tgc-challenge-03-44f2s)?



You can send your solutions and request any help by reaching us via twitter to [@thatgoodcompany](https://twitter.com/thatgoodcompany) or via email to [contact@thatgoodcompany.com](mailto:contact@thatgoodcompany.com).
Twitter Blocker Bot
Tags: twitter, bot
Published: 2020-01-03 21:52:07

Recently, someone on twitter suggested a twitter bot that helps block a user. The idea is that most times we block users later, but may not be able to remember exactly why we blocked them later. The @TweepBlock is bot here to solve that tiny problem.


How It works
Comment on the user's post and mention @TweepBlocker. If you've authorized the bot before, it'll block the user for you and reply when it's done.

If you haven't authorized the bot before, it replies with a link for you to authenticate. Once authentication is done, it blocks the user.

You can view a list of users you've blocked with the bot by visiting https://twitter-please-block.herokuapp.com/user/<username> where <username> should be replaced with your twitter username.

The source code can be found here https://github.com/djunehor/twitter-blocker in case you need to see the inner workings and maybe suggest an improvement.

As a side feature: the bot keeps a log of tweets that caused the block. So even if the user deletes the tweet, you can still dig it up
So i made my Text Detector app public
Tags: textdetector, firebasemlkit, ocr, android
Published: 2020-01-03 21:37:07

---
title: So i made my Text Detector app public
published: true
description: Text Detector
tags: textdetector, firebasemlkit, ocr, android
cover_image: https://thepracticaldev.s3.amazonaws.com/i/447m4zf58hygjgrvre8w.png
---
I will be converting it to MVVM(Model View View-Mode) Architecture soon but for now y'all can fork it https://github.com/AndreKelvin/Text-Detector
Adding Dark Mode Support to Next.js, and Expo Projects
Tags: beginners, javascript, react, reactnative
Published: 2020-01-03 21:33:30

👋 Quick tutorial today! Here I'll show you how to setup your universal web & mobile app to use the client device's native color scheme! You can also use this same approach to setup other awesome features like [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context) and [Expo Action Sheets](https://github.com/expo/react-native-action-sheet)! 💙

## Tutorial

- First setup your [Expo or Next.js app to be universal](https://docs.expo.io/versions/latest/guides/using-nextjs).
- Install the universal Expo package [react-native-appearance](https://github.com/expo/react-native-appearance#readme): `yarn add react-native-appearance`.
- [Web] Add the Appearance [React Context provider](https://reactjs.org/docs/context.html) to the root of your Next.js app by creating `pages/_app.js`
```tsx
import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';

export default ({ Component, pageProps }) => {
    return (  
      <AppearanceProvider>
        <Component {...pageProps} />
      </AppearanceProvider>
    )
}
```
- [Mobile] Add the Appearance provider to the root of your Expo app in your `./App.js`:
```tsx
import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';

export default function App() {
    return (  
      <AppearanceProvider>
        {/* ... */}
      </AppearanceProvider>
    )
}
```
- Now you can use the `useColorScheme` hook anywhere in your Expo + Next.js app!
```tsx
import { useColorScheme } from 'react-native-appearance';

function App() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';
  return (<Text style={{ color: isDark ? 'white' : 'black' }}>Hey 👋</Text>)
}
``` 


**That's it!** I use the same approach in my personal portfolio (Demo Image):

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eqii5iieri9bkqit8k04.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/j46ys1to3o4dr1615gam.png)


### React Navigation

If your Expo app is using React Navigation (v4) then you'll want to wrap the navigation like this:

```tsx
import * as React from 'react';
import { AppearanceProvider } from 'react-native-appearance';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// Can be any navigator
const AppNavigator = createStackNavigator(/* Your routes */)

function ContextNavigator(props) {
  return (
    <AppearanceProvider>
      <AppNavigator {...props} />
    </AppearanceProvider>
  );
}
// Hoist the routes
ContextNavigator.router = AppNavigator.router;

// Export the full navigator
export default createAppContainer(ContextNavigator);
```

## Thanks for reading!

Please let me know if you found any problems! Also if you found this helpful, be sure to share it (possibly by printing the article out and handing it out around town 😄) and of course, **smash** that random unicorn button! 🦄
Git jokes, giv em here!
Tags: discuss, jokes, git
Published: 2020-01-03 21:27:22

---
title: Git jokes, giv em here!
published: true
description: 
tags: discuss, jokes, git
---

It occurred to me that there is good material in git for jokes.

So I’ve decided to git good and commit to pushing this thread until it becomes the base for my repository of bad puns.

So share with me your stash of unstaged jokes will you? 

I promise I won’t be cherry-picky!
2020 reasons to be grateful
Tags: mindfulness, selfimprovement, motivation, growth
Published: 2020-01-03 20:59:04

---
title: 2020 reasons to be grateful
published: true
description: be mindful and show gratitude to become great
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nq1fsgpp9wdj0yfllmhc.jpg
tags: #mindfulness, #selfimprovement, #motivation, #growth
---

###I love my job
[I like the place I work at](https://dev.to/dvddpl/how-long-have-you-worked-at-the-same-company-448b), the people I work with and the projects I work on. 

Going back to work after a vacation or every Monday is never a struggle to face with doomed despair 

![despair at work](https://media.giphy.com/media/60yTQLK9O7XlS/giphy.gif)

of course, having time for myself and my family, to travel and do everything I like is awesome, but **I also like to build things and solving problems with code**. 

So yes, I am really grateful that 16 years ago - almost by chance, after a sabbatical year - I started this career.

And I am grateful that I have to face with the [first world problem of being annoyed by recruiters](https://dev.to/dvddpl/wtf-is-wrong-with-recruiters-14gk) - and not have to worry that my skill and my profession is outdated or not hype anymore.

###I love my family
I am grateful for the family I built in these 18 years with my partner - we changed 7 flats and 4 countries together and we have 2 amazing boys.

And I am so grateful that the time of sleepless nights and diapers is over while looking with some thrills at their upcoming prepuberty...

###I love change
I am grateful for **all the chances** I got in the past years, for the courage that I found when making big decisions ( quitting a safe job, traveling on the other side of the world, starting a new career, relocate to another country), and for all the **interesting and inspiring people that I met** and I have the opportunity to meet thanks to my job and my passions (traveling, climbing, and slacklining)

## Be great but be grateful

And ...  that´s it... did you really think I was going to write 2020 reasons? I wanted to at least write 20 but they are too many - not that I´d have problems finding them,  it would be just too personal, and too boring for you.
I just like the slightly clickbaity title.
![Ha ha!](https://media.giphy.com/media/l0HlO4vdchLBZNxYc/giphy.gif)

What are you 2 or 20 reasons to start this new year with some gratitude?

----
Photo by [Debby Hudson](https://unsplash.com/photos/VIr-KKzL2eg) on Unsplash (edited with quote by me)
Make your own Gatsby starter (template)
Tags: gatsby, react, template, jamstack
Published: 2020-01-03 20:54:24

---
title: Make your own Gatsby starter (template)
published: true
description: This post provides information on how to create your own Gatsby template and post it back to the Gatsby repo so it will be live on their website. 
tags: Gatsby, React, Template, JAMstack
---
![Gatsby](https://thepracticaldev.s3.amazonaws.com/i/pafx0vehf6rujk9ibz4h.png)

I was recently looking to create a landing page. I have been investigating a couple of JAMstack (Javascript, APIs, Markup) static site generators (Hugo, Gatsby). There are a few others I just didn't dive into (Next.js, Nuxt, etc). Gatsby seemed interesting to me because it is based on React and I'm familiar with that.  

Gatsby provides many `Starters` which are templates for websites. I was looking for a template since my design skills leave much to be desired. I wasn't able to find one that was specifically a landing page for a product. I decided to try to make one and share my experiences. 


### Steps

*Install the new Gatsby project:* 
 - All you need is the quickstart guide to generate a project: https://www.gatsbyjs.org/docs/quick-start/ 


*Customize your site:* Here you can integrate any plugins. Change the design. Use a component library etc. 
 - Plugins I added: 
   - Mailchimp - as a way to track interest in the product (signups). 
   - Material UI - I'm not great at design so I can use all the help I can get. 
   - Google analytics - track the traffic the website is getting. 
 - I updated the layout to have a typical product landing page look. With the Product, Benefits, Features and Plans. I also included a few Call-to-action buttons for the Mailchimp signup.  


Once you have your template at a point you like it post it to Github.

You will need to have the template hosted somewhere. It can be anywhere, Github pages, AWS, etc. I posted mine on [netlify.com](https://netlify.com) since they have a great free tier and integrates with Github making it super easy to deploy the application. 


Here is my landing page on netlify: https://hopeful-ptolemy-cd840b.netlify.com/

*Publish your template to Gatsby*

This will require you to make a PR to Gatsby's repository. You can see their instruction on how to do that here: https://www.gatsbyjs.org/contributing/submit-to-starter-library/

*TL;DR:*
You just need to add an entry in their YAML file. Follow the structure of other "starters" listed in the file. You don't need to fork the repository, you can just edit the file from Github: https://github.com/gatsbyjs/gatsby/blob/master/docs/starters.yml

They prefer commits to have this title:
```
chore(starters): add my-starter-name-here
```

Once your PR is approved your template will be live on their website. That's it! I hope some folks will add some more "starters" from this post.


Kind of cool to see my templates on gatsbyjs.org. You can find my template here: https://www.gatsbyjs.org/starters/tonydiaz/gatsby-landing-page-starter/


I'm happy to see people who are enjoying it:
![Twitter post](https://thepracticaldev.s3.amazonaws.com/i/1qo0phcw53udw4lj3vbo.png)
Top 7 VSCode Extensions I use
Tags: vscode, webdev
Published: 2020-01-03 20:47:42

I am JavaScript Developer. VScode is usually text editor, but I like it so much, so I work on it. I installed two version of it, stable and insider version too.
You can check it https://code.visualstudio.com/

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fvhxh5hv5u1od5ycnnvq.png)

I use the usual dark theme, so I don’t have any theme on vscode. I use “vscode-icons” for folders icons.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/il29xabf0q3viaqb8qpr.png)

For make the code pretty I use “Prettier- Code formatter”

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/n14pxb495wi9lg7ueaz9.png)

When I work with html, I use “Live Server”

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7xq94b3p66y5op2p6a0o.png)

As a javascript developer I love “ESLint” so much. This help me to write better code.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zu2q2zofh80uzv749csu.png)

I use “ES7 React/Redux/GraphQL/React-Native snippets” for helping with created easy snippets

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ovvy6w05z3zjqcdjt8ia.png)

Bracket is an issue, so I use “Bracket Pair Colorizer” to detect it easily.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/suj0qi1s3pose5o46qce.png)

Sometimes I feel so issue with tag so I use “Highlight Matching Tag” this helps a lot.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/54r9su5fqqmgsad0avzi.png)


###What do you use for your work ?

You can see the graphical version here
{% instagram B63uX_dAu29 %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/top-7-vscode-extensions-i-use/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !
REEEEEEEEEEEEEEEEEEEEEEE
Tags: showdev, contributorswanted, opensource, github
Published: 2020-01-03 20:41:27

I did it... I seriously did it. A couple months ago, I had the stupidest idea, to make a GitHub repository and name it REEEEEEEEEEEE. But its a lot more than that. The plan was to remake my batch code in every coding language possible, and let people contribute to it. It all started out with this code:

```
@echo off
SET /P X="r"<NUL
:loop
SET /P X="e"<NUL
goto loop
```
In case you don't know what this does, it just makes a loop of REEEEEEEEEEEEEEEE in a .bat file. Wait, but you might not know what REEEEEEEEEEEEEEEE even is? Lets go back a little for me to tell you about it.
![Alt text of image](https://www.thewrap.com/wp-content/uploads/2016/09/1200.jpg)
This person is called _pepe the frog_.
Its an internet meme that was made in 2005 but blew up in 2008, and was everywhere. Now lets take a look at the definition of REEEEEEEEEEEEEEEE.

"REEEEEEE" is an onomatopoeic expression of intense rage or frustration typically associated with the Angry Pepe character and used by those who frequent the /r9k/ board on 4chan. The expression is often associated with the Autistic Screeching meme, however it is intended to represent the unique croak produced by several species of frogs when agitated. Additionally, the expression has been combined with the word repost to call out duplicate posts on Reddit, Imgur and other sites.

Now I don't know about you, but I personally use REEE in my texts and social media. And, so did my friends. So I wanted to make something that would make my friends laugh. And I made this. 

If you know any coding languages, (wait this is a coding website) then conciser taking a look at the repository, and if you feel like it, contribute!
{% github reeeeeeeeeeeeeeeeee3eeeeeeeeee3eeee3EEe/reeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee %}

This is also the longest thread I have ever made, so please show me some love and like the post, or star the github repo.
Why don't we take in DDD to interview coding test.
Published: 2020-01-03 20:29:55

I always feels the code of interview tests is not readable.
The shorten variable names, all logic packed in one method, etc. They are forbidden in real life coding but is it really okay in interview?

Watch example from leetcode.
https://leetcode.com/problems/longest-substring-without-repeating-characters/

The question is like this.

```
Given a string, find the length of the longest substring without repeating characters.

Example 1:

Input: "abcabcbb"
Output: 3 
Explanation: The answer is "abc", with the length of 3. 
```


And the example answer is like this.


```python
def lengthOfLongestSubstring(self, s):
    str_list = []
    max_length = 0
    for x in s:
        if x in str_list:
            str_list = str_list[str_list.index(x)+1:]
        str_list.append(x)    
        max_length = max(max_length, len(str_list))
    return max_length
```

Yeah, it's a short method and not difficult to understand but not perfect.
If you take in DDD and Value Object, it can be more readable.
Like this.


```python
class Character : 
    def __init__(self , c:str) : 
        self.c = c
    
    def getValue(self) -> str : 
        return self.c
        
    def same(self , c) : 
        return self.c == c.c

class SubString : 
    def __init__(self) : 
        self.queue = []
        self.memo = {}
    
    def add(self, c:Character) :
        self.queue.append(c)
        self.memo[c.getValue()] = True
        
    def pop(self) -> Character : 
        c = self.queue.pop(0)
        self.memo[c.getValue()] = False
        return c
    
    def popUntil(self, c:Character) :
        popped = self.pop()
        while not popped.same(c) : 
            popped = self.pop()
    
    def contains(self, c:Character) : 
        return self.memo.get(c.getValue()) or False
    
    def length(self) : 
        return len(self.queue)
        
        
class Solution:
    def lengthOfLongestSubstring(self, s: str) -> int:
        subString = SubString()
        maxLength = 0
        for c in s : 
            character = Character(c)
            if subString.contains(character) : 
                subString.popUntil(character)
            subString.add(character)
            maxLength = max(maxLength , subString.length())
        return maxLength
```

wow it got longer than previous one.
However it's easier to understand the coder thought, is it?
Yeah, I know that time is limited in interview but I think the most important thing is to convey your thinking process to people, then try to take in DDD and you can express your thought more easily.
Semantic HTML Basics In 5 Minutes
Tags: webdev, html, codequality, beginners
Published: 2020-01-03 20:09:48

---
title: Semantic HTML Basics In 5 Minutes
published: true
description: A short introduction to Semantic HTML and why it matters.
tags: webdev, html, codequality, beginners
series: Ultralearning 2020 - Semantic HTML
---

Semantic HTML tags are tags that have a meaning. If you're using only `<div>` and `<span>` tags, then the HTML you write isn't "semantic".

For example, when you want to show a title, you will most likely choose the headings `<h1>`, `<h2>`, `<h3>`... And it is a good thing. You are showing that the text in your heading tag is... a heading!
The non-semantic way to reach the same styling would be to use a `<span>` tag with CSS.

Using tags like `<header>`, `<footer>` and `<section>` allows you to express the intent behind the usage of a tag in a web page. This helps:
1. Increase maintainability, as other developers (and yourself) will understand your thought process behind the creation of the page.
2. Improve SEO, as search engines will be able to understand your content more easily.

In this video I talk about the difference between the article and section tags, and show two examples showcasing the `<header>`, `<footer>`, `<time>`, `<address>`, `<main>`, `<aside>` tags (and others).

{% youtube ibKcjVoz3f4 %}
Misleading ColdFusion QueryAddColumn Error Message
Tags: coldfusion, errormessage, bug, cfml
Published: 2020-01-03 20:08:55

While generating a ColdFusion query using `QueryNew`, I added a new column using `QueryAddColumn` and encountered a misleading error message.

> *The value of parameter 3, which is currently varchar, must be a interface java.util.List value.*

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lv8ip3on2im951nsk9i0.png)

The last time I checked, `varchar` was considered a valid "java.util.list value"... so what's the problem?  In Adobe ColdFusion 8 or 9, I believe that the `array` parameter was optional. (I could be wrong.) If you omit the 4th parameter, the error message indicates that there's a problem with parameter 3 instead of the missing 4th parameter.  I tested the same code using Lucee 4.5/5 and the new column is added without any error.  (I also tested Railo 4 & the error returned was *"Can't cast String [varchar] to a value of type [Array]"*.)

While a wrong error message is not a show-stopping bug, it doesn't provide any helpful assistance to determine what the actual problem is.  Thankfully the online documentation (https://cfdocs.org/queryaddcolumn) highlights the `array` parameter as "required" (even though it wasn't for Lucee.)

## Test it here

https://www.trycf.com/gist/bc948b141eea337a1927a311e6b500e9

## Source Code

{% gist https://gist.github.com/JamoCA/bc948b141eea337a1927a311e6b500e9 %}

## Follow-up 

**20190103:** I've reported it to Adobe.  It's bug #[CF-4206471](https://tracker.adobe.com/#/view/CF-4206471)