teleren/devto huggingface dataset:
Productivity Pixel - Inspiration
Published: 2020-02-09 00:45:51

I like to work when inspired, but how to be inspired? Here are a few tips to find inspiration.

## 1 - Keep a good headspace

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

It goes without saying: if you don’t feel good, inspiration is less likely to come. Nurture your optimism and self-esteem to invite inspiration. 

## 2 - Don’t pressure yourself

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

Though I find inspiration to be a great way to be productive, no need to pressure yourself, it will prevent you from maintaining that good headspace!

## 3 - Do something related

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

To provoke inspiration, do something related to the task you need inspiration for. Some housekeeping tasks, small bug fixes, anything. Inspiration might pay you a visit.

## 4 - Develop your skills

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

Work mastery invites inspiration. Keep your skills sharp and keep learning, and inspiration will follow.

---

You can also find these pixels on my Instagram: https://instagram.com/valentinprgnd. I will publish Pixels every Monday, Wednesday, and Friday about career development in tech, code, mental health and health for developers. Follow me for more tips @valentinprngd and check out my podcast https://rebased.whatdafox.com.
Another Angle To Understand Global State With React: Next.js
Tags: nextjs, react
Published: 2020-03-21 20:19:25

---
title: Another Angle To Understand Global State With React: Next.js
published: true
date: 2020-02-09 00:00:00 UTC
tags: nextjs, react
canonical_url: https://stephencharlesweiss.comblog/2020-02-28/react-global-state-with-next/
---

Recently, I was playing around with [Next.js](https://nextjs.org/) (simply referred to as Next from here on) to see how a framework might make building React applications simpler.

When I got to the `_app.js` page a light bulb went off. The page illustrates _how_ React applications manage global state.

First, let’s understand the problem we’re trying to solve: If you refresh a page running a React application, all of the state is blown away.

That means that React applications need to provide the appearance of navigating to different pages, updating the URL, creating a history, etc. _without_ actually loading a brand new page. (Coincidentally, this helped me understand why a good router is so important.)

Now, coming back to Next, let’s examine the `_app.js` component. This is provided by default by Next, but can be [overridden with a custom file as needed](https://nextjs.org/docs/advanced-features/custom-app).

That’s what I’m doing here:

```javascript
function MyApp({ Component, pageProps }) {
  return (
    <>
      <p>I'm on every page!</p>
      <Component {...pageProps} />
    </>
  )
}

export default MyApp
```

Yeah, it’s not much. I’m simply adding a paragraph tag _before_ every `<Component>` is rendered.

The `<Component>` is the `page` that’s loaded. `pageProps` are any props passed along to the `Component` - it’s an empty object if not using `getInitialProps`.<sup><a href="#foototes">1</a></sup>

The effect, however, is that when we navigate between pages, the state that exists in `MyApp` persists - _it_ is not being rerendered.

To see this, here’s an example:

![React reload](https://media.giphy.com/media/gfkM9D5o7pjHUTjhdC/giphy.gif)

Notice in the video that the `<p>` doesn’t change or get reloaded even though the page contents change?

If we were to put our state management, global styles, etc. at this level then, they can be loaded once and persist even while different pages are loaded underneath.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#footnotes)Footnotes

- <sup>1</sup> [`.getInitialProps`](https://nextjs.org/docs/api-reference/data-fetching/getInitialProps) is part of the Next API to asynchronously fetch data and then feed it to `props`. The big catch on using it is that it will disable [Automatic Static Optimization](https://nextjs.org/docs/advanced-features/automatic-static-optimization).
Autoload classes in PHP
Tags: php, autoload
Published: 2020-02-02 18:39:02

Here's a new problem to solve, How would you include classes without having to write include 'path-to-class-file' on top of the file for every class file- that needs to be included? 

Using spl_autoloader_register function.

Here's the directory structure

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

So what do we write in the autoloader.inc.php file?

```
<?php


spl_autoload_register('autoLoader');

function autoLoader($className){
    $path  = "classes/";
    $extension = ".class.php";
    $fullPath  = $path.$className.$extension;

    if(!file_exists($fullPath)){
        return false;

    }

    include_once $fullPath;
}


?>
```

Now we can easily include the autoloader file in the index.php file which then will give access to any class file we have in the classes directory.

Here's whats in the index.php file

```
<?php
  <?php 
include 'includes/autoloader.inc.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <?php
      
      $tesla = new Car("Modelx","black","2019");

      echo $tesla->getName();
      echo  "<br>";
      echo $tesla->getbodyColor();
      echo  "<br>";
      echo $tesla->getYear();

       $tesla->setName("ModelY");  
       echo  "<br>"; 
       echo  "<br>"; 
       echo $tesla->getName();  
       echo "<br>" ;
        echo Car::$NoOfTyres;
        Car::setNoOfTyres(6);
        echo "<br>";
        echo Car::$NoOfTyres;

    ?>
</body>
</html>
?>
``` 
You will get the out put as follows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k17odwimi5z5voc6c9y6.png)
How to Use JavaScript Functions - Crash Course [Video]
Tags: javascript, functions, tutorial, beginners
Published: 2020-02-08 23:03:08

Functions are another necessary part of programming in JavaScript. When building programs in JavaScript, you should use functions to organize your program into smaller, executable pieces of code that are responsible for specific actions. With your functions defined, you can call them from anywhere in your program with arguments that can influence the result.

{% youtube x7Um3T59SIY %}

In this video, we learn how to declare JavaScript functions with a name and arguments, call a function with parameters, and return a result. We also learn how to define functions on objects as methods and access the properties of the object within the function.


Along the way, we explore the DRY and Single Responsibility (SRP) principles for keeping our code clean and easy to reason about. By the end of this tutorial, you should have a strong understanding of how to use functions in JavaScript to build better programs.


My LinkedIn profile: https://www.LinkedIn.com/in/LincolnWDaniel
My website: http://www.LincolnWDaniel.com
1Liner Blog: https://www.1Liner.dev
Open Sourcing My Large React and Firebase ToDo App
Tags: opensource, todo, react, firebase
Published: 2020-02-08 23:00:15

---
title: Open Sourcing My Large React and Firebase ToDo App
published: true
description: Come play with my project
tags: #opensource #todo #react #firebase
---

I am releasing my baby, <a href='https://carpemeavisio.com/'>Carpe Mea Visio</a>, to the world. I have spent countless hours working on this project in order to help me get a job. I now have a job and am releasing this project to the world to see what kind of monster you can create.

This is a project with lots of awesome things! It includes:
<ul>
<li>Firebase Functions, Firestore, Extensions, and Hosting</li>
<li>React Hooks and Code Splitting</li>
<li>React Router</li>
<li>HTML5 Image Resizing (client-side image resizing is the best)</li>
</ul>

Please check it out and let me know what you think. I would like to highlight how I organized and called the Firebase Functions.

<a href='https://github.com/andersjr1984/carpe-mea-visio'>I just pushed a reinitialized repo to github for you to check out.</a>

Let me know what you think!
How to get feedback on your Ruby blog posts
Tags: ruby, knowledge, community, discuss
Published: 2020-02-10 12:18:35

---
title: How to get feedback on your Ruby blog posts
published: true
date: 2020-02-08 22:55:07 UTC
tags: ruby,knowledge,community,discuss
canonical_url: https://prathamesh.tech/2020/02/09/how-to-get-feedback-on-your-ruby-blog-posts/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pqqohvtwais4oq77iqlt.jpg
---

You have written a blog post about Ruby or Rails or Hanami or Roda? Great, Congratulations! Now is the time to share it with other Rubyists and get some feedback.

### Rubyflow

You can share it on [**rubyflow.com**](http://www.rubyflow.com/). Rubyflow is aggregator where people post links about articles or gems that they find interesting.

### Reddit

Reddit is great place to share the blog article and get some feedback. You can post your article to **[r/ruby](https://www.reddit.com/r/ruby)** or [**/r/rubyonrails/**](https://www.reddit.com/r/rubyonrails/) (for Rails specific articles)

### dev.to

**[dev.to](https://dev.to/)** is my favourite place these days to find interesting articles about various languages and libraries. You can [write an article](https://dev.to/new) itself on dev.to platform or [connect your blog to it](https://dev.to/settings/publishing-from-rss) so that you can cross post your existing blog article on it. Don't forget to add proper tags to the article such as `#ruby`

### lobste.rs

You can post your article to [lobste.rs](https://lobste.rs/t/ruby) as well which is community to share programming links and discuss them. But you need an invitation to join it.

### Linkedin

If you have a Linkedin account you can post your article to ruby related groups on Linkedin. One of the popular group is related to [Ruby on Rails](https://www.linkedin.com/groups/22413/).

### Twitter

Last but not the least, you can post your article on Twitter with proper hashtags.

-----

Where do you post your Ruby articles? Do you have any other community or platform for sharing the articles and getting feedback? Let me know in comments or on [Twitter](https://twitter.com/_cha1tanya).
Smarter Vue Watchers
Published: 2020-10-27 21:39:49

---
title: Smarter Vue Watchers
published: true
date: 2020-02-08 22:41:00 UTC
tags: 
canonical_url: https://dberri.com/smarter-vue-watchers
---

In some Vue projects, you might need to load data from an API as soon as the component is instantiated and load new data once a value or property of the component is changed. For example, when you use a search input field. I've done that several times, and always used the following pattern:

```javascript
// Inside a Vue component
created() {
  this.search()
},
watch: {
  searchInput() {
    this.search()
  }
}
```

And that's ok, it works well. But then I found a simpler, more elegant way to do the same thing:

```javascript
// Inside a Vue component
watch: {
  searchInput: {
    handler: 'search',
    immediate: true
  }
}
```

This code can replace the previous one entirely. That works because a _watcher_ can receive an object, instead of a function, and this object contains a **handler** , which is the method to be executed when the _watcher_ is notified, and the property **immediate**, which ensures that this method is also executed as soon as the component is in the lifecycle hook `created`.

This tip was extracted from a video of a talk by Chris Fritz, one of the members of Vue.js' _core team_. Here's the video:

{% youtube 7lpemgMhi0k %}
Morning Routine Analysis!
Tags: watercooler, productivity
Published: 2020-02-08 22:00:15

So when trying to figure this week's post topic, I went back to last week's post and had an epiphany. Lately I've been getting more into Data Science and Machine Learning..... so why not take the comments about everyone's morning routine and extract some data! Well... there was only 22 people who responded but, hey! It's still data! Not a big enough sample size to make any real conjectures, but still was fun to look at the data.

## Data! 
- Kids/Animals (Care): This category was for anyone who cared for a pet or child. There weren't many responses dealing with children, so I decided to lump this as a "care for".
- Coffee/Tea: Anyone who needed to start off the day with some coffee or tea
- Exercise/Stretching: Exercising and stretching was commonly together, so also lumped these two together
- Yoga/Meditate: Same as above but less hardcore
- Study: Bit of studying in the morning is always good!
- Shower: Gotta get clean. I was surprised to see 3 respondents saying they took cold showers!
- Read/Podcast/Music: Anyone who did any reading/listening at home/on commute
- Work Prep/Todo: Prepping today's todo was pretty common!
- Eat: Most important meal of the day
- Emails/Blogs/Messaging: Anyone checking their emails, blogs, messaging, and/or social media
- Other: This includes anything that I couldn't find a good classification for

With a total number of 22 respondents, here's the data!

![Donut Chart](https://dev-to-uploads.s3.amazonaws.com/i/4io3vb01fcnlrypx92qi.png)

![Bar Chart](https://dev-to-uploads.s3.amazonaws.com/i/s9edqz5hq4offaey9hnk.png)

## Summary

Overall it's interesting! Of course there is not enough data to make any conclusions. If anything it's interesting to see what people wrote. Coffee/Tea and Showering seem to have come out on top! I wonder if there is any bias? Maybe reading another person's comment effects how one responds?

I would love to do more surveys/data collection in the future! Still a beginner in the world of data science.

If you have any advice, please let me know down below!
Rendering markdown from Flask
Tags: python, webdev, flask, 100daysofcode
Published: 2020-02-08 21:56:41

> This post was originally posted on https://rudra.dev/posts/rendering-markdown-from-flask

In this post I am going to plug about a cool trick(probably useless) that I discovered geeking around the internet.

I was building a tiny [microservice](https://github.com/solitudenote/gitkeeper) which would let the client side application securely authenticate with GitHub. After writing the only required API, I wanted to render the *README.md* file on the index page.

So I planned to convert markdown to html and serve the resultant string everytime we hit the index.

### __Let's go hacking__

*Required packages*
```bash
pip3 install Flask markdown
```

*app.py*
```python
import markdown
from flask import Flask
import markdown.extensions.fenced_code

app = Flask(__name__)


@app.route("/")
def index():
    readme_file = open("README.md", "r")
    md_template_string = markdown.markdown(
        readme_file.read(), extensions=["fenced_code"]
    )

    return md_template_string


if __name__ == "__main__":
    app.run()
```

In the above snippet we are using [Flask](https://flask.palletsprojects.com)(my current favorite) as the web framework, [Python-Markdown](https://github.com/Python-Markdown/markdown) to convert markdown files to HTML, and [fenced_code](https://python-markdown.github.io/extensions/fenced_code_blocks/) extension to support code blocks.

And it looked something like this

![render markdown](https://dev-to-uploads.s3.amazonaws.com/i/03v8qdvenghr2l2m4rt8.png)

### __Not quite there yet!__

Well even though [Richard Stallman](https://en.wikipedia.org/wiki/Richard_Stallman) remains my hero, fortunately I do not share his [taste](https://stallman.org/) on web design. So without over-engineering our little snippet I thought of adding syntax highlighting with [pygments](https://pygments.org/) and [CodeHilite](https://python-markdown.github.io/extensions/code_hilite/) extension.

Let's generate css for syntax highlighting using pygments

```python
from pygments.formatters import HtmlFormatter

formatter = HtmlFormatter(style="emacs",full=True,cssclass="codehilite")
css_string = formatter.get_style_defs()
```

ow we need to append the css_string to the markdown converted HTML string.

```python
md_css_string = "<style>" + css_string + "</style>"
md_template = md_css_string + md_template_string
return md_template
```

> Alternatively we can use [pygments-css](https://github.com/richleland/pygments-css) repository to get pre-generated CSS files.

Let's see how the final version looks!

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

*Much better if you ask me!*

### __Gimme the code!__

Here is the full source code running on Glitch.

{% glitch silken-football no-files %}

Feel free to remix and play around. Adios!
Free access to Pluralsight this weekend (2/7-2/9 2020)
Tags: beginners, tutorial, webdev, free
Published: 2020-02-08 21:45:36

Pluralsight is offering free access to all of their courses this weekend! This is a great opportunity to browse multiple courses to see which ones you like, or dive deep into a course and try to learn as much as you can. Comment below with what programming language or topic you are going to learn more about this weekend!


Here is the link: https://www.pluralsight.com/offer/2020/february-free-weekend
What Did You Learn From Pair Programming
Tags: discuss, pairprogramming, bootcamp, wecoded
Published: 2020-02-08 21:43:25

I am three weeks into my coding bootcamp and I was taught about pair programming on day one.

As per Wikipedia, pair programming is
> an agile software development technique in which two programmers work together at one workstation. One, the driver, writes code while the other, the observer or navigator, reviews each line of code as it is typed in. The two programmers switch roles frequently,

but I think it is much more: it's a learning tool.

It is no surprise if I say that you learn from partners who are better than you. But you can also learn a huge amount from partners who are maybe a bit less confident.

You learn about the __person__.
There's something quite intimate in this, you practically learn how the other person's brain works. It is fascinating to see someone else's brain in action and to compare all the different approaches they would take to the same challenge.

You learn to __express yourself__.
You get better with your tech words, which is really important, instead of pointing and calling things thingies like I used to. _"You need to move that thingy over there."_
Expressions like _declaring variables_ and _passing arguments_ and _invoking functions_ and _it's out of its scope_ etc. come naturally after only a little while.

![Pair Programming](https://media.giphy.com/media/nE5FitGTYa5Xi/giphy.gif)

You learn to __listen__ and to __explain__. You learn __patience__.

You learn about different personalities and how to work with them. You learn __to be humble__ but also __to be adamant__ dependent on what you need to be.

You learn about __yourself__.

What is your experience in pair programming?
WTF is Ecma International and ECMAScript
Tags: ecma, slimcoder, javascript
Published: 2020-02-08 20:56:25

---
title: WTF is Ecma International and ECMAScript
published: true
description: 
tags: ecma,slimcoder,js
---

**What is Ecma International?** 
Ecma International is an industry association founded in 1961 and dedicated to the standardization of Information and Communication Technology (ICT) and Consumer Electronics (CE).


**What is ECMAScript ?**
ECMAScript is a scripting-language specification standardized by Ecma International. 

**JavaScript follows ECMAScript standard**

This year ES11 (ECMAScript 2020) is released with some cool features. 

Link of Documentations from ECMAScript 2015 AKA ES6 to ECMAScript 2020 AKA ES11 is given below.

ES6 : http://es6-features.org

ES7 to ES11 : https://dev.to/carlillo/es2016-features-with-simple-examples-3ifc

Here is roadmap of ECMAScript Standards and how it works behind the scenes : https://accedia.com/blog/posts/accedia-blog/2019/08/29/ecmascript-release-roadmap

Here is all different types ECMA Standards (JS follows ECMAScript standard) : https://www.ecma-international.org/publications/standards/Stnindex.htm
How to find followers for your Twitter Profile and engage with them?
Tags: career, productivity
Published: 2020-02-08 20:50:42

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Twitter is a very popular social network that lets us communicate with the world private and publicly.

Getting a Twitter account off the ground isn't too difficult. It's probably one of the easier ones to find followers and engage them with.

All we have to do is one thing, *follow the people that you want to talk to and read your stuff.*

That's it. There's nothing else to it. Many people will follow back, especially ones that have a lower follower count.

People with high follower count already have too much activity going on in their account, so they'll likely miss your follow.

However, the rest will likely follow back.

Without followers, your account is a ghost town. No one will look at your message since they don't see your stuff.

However, it's still a good idea to post something so it's not completely empty. That makes people more compelled to follow.

Once you have around 100 followers, then you'll get some reactions to your posts.

Then you can start posting more an engage more with people.

Organic followers should also come as you have more followers and more people retweeting your messages.

Most people retweeting your stuff will also be followers since they can read your stuff directly from their feed.

Once you have some followers, you can slow down on the follow for follow strategy.

I have used this strategy to go from 3 followers to 5000 in less than 6 months and there's more activity than ever in my profile.