teleren/devto huggingface dataset:
Learning to Succeed Through 96 Failures
Tags: architecture, beginners, motivation
Published: 2019-09-26 00:15:13

I have no idea how many different hobbyist projects I've started and abandoned over the course of my life. Let's just take an average guess and say I've worked on 3 side projects each year since 1987 when I started programming for fun. 

That'd put the number at 96 which sounds a whole lot more precise than saying 100 so let's go with that. 

I started these projects with interest, objectives, excitement, and I loved them, then... for whatever reason I didn't. Sure I would occasionally complete projects, but more often than not, I abandoned them for something new.  Sometimes I'd lose interest, sometimes life interrupted me and derailed my momentum, sometimes I'd run out of new things to learn or really wanted to try something new. Sometimes I grew frustrated with the code I have woven, and many more times I realized that I bit off far more than I could chew.

Here I am, over 30 years after starting this journey, I can tell you with absolute confidence that every one of these projects was worth pursuing - and worth abandoning in the proper season.

Why? Because each project taught me how to succeed and how not to fail. 

---

Each project taught me how the architectural choices I made early on resulted in frustration or heightened productivity.

Each project let me try a new library, technique, or tackle a new problem and learn from it, and each next project gave me an opportunity to keep using what worked and abandoned what didn't.

Each project brought its own unique challenges and constraints for me to think through and work around, and each next project taught me how to plan around these factors.

Each project showed me new and unexpected bugs, helping me understand how - and why - code fails, and each next project taught me how to [make those types of defects impossible](https://dev.to/integerman/making-defects-impossible-16c).

In short, each side project was a safety net that allowed me to try something new and succeed or fail at it - without bringing down a production server or causing a user to get a fatal error or encounter corrupt data.

---

Trying things in private gave me the skills, tools, and experience I needed to succeed in public. It gave me the wisdom I needed to avoid things that didn't work with production code. It gave me the patience I needed to work with the same types of production code every day without introducing unnecessary change. It gave me the wide range of tools available to introduce drastic and proper change when it **was** needed.

Probably most critically, it gave me the knowledge of how to build an application from scratch. Most people don't get that type of experience on a regular basis at work, so how can you possibly get good at it other than by trying and trying again?

Keep trying, and don't be afraid to fail 96 times or more.

---

*Photo by Daniel Watson on Unsplash*
Styling a React component using CSS Modules - Card Component
Tags: react, javascript, webdev, tutorial
Published: 2019-10-03 16:37:48

---
title: Styling a React component using CSS Modules - Card Component
published: true
tags: ['react', 'javascript', 'webdev', 'tutorial']
canonical_url: https://learnwithparam.com/videos/styling-react-component-using-css-modules/
series: 'Small steps on React'
description: Lets learn to re-write styles using CSS Modules for our card component. Also learn how CSS Modules work and helpful for styling react components.
---

{% youtube vx9XocUEgOY %}
Simple and Quick Guide to Install and Manage Elgg Project
Published: 2019-09-27 16:55:02

---
title: Simple and Quick Guide to Install and Manage Elgg Project
published: true
tags: 
canonical_url: https://thecodersblog.com/simple-and-quick-guide-to-install-and-manage-elgg-project/
---

Elgg is a PHP based open-source software used for social networking in individuals and organizations. It has all the component needed to create an online social environment such as blogging, microblogging, file sharing, networking, group and number of other feature.

Let’s dive into the setup process.

#### Step 1. Install Composer

https://getcomposer.org/download/

#### Step 2. Intall Elgg as a Composer Project

```
composer self-update
composer global require fxp/composer-asset-plugin
composer create-project elgg/starter-project:dev-master ./path/to/my/project
cd ./path/to/my/project
composer install

## go to your browser and install Elgg via the installation interface

```

#### Step 3. Setup version controls

```
cd ./path/to/my/project
git init
git add .
git commit -a -m 'Initial commit'
git remote add origin <git repository url>
git push -u origin master

```

#### Step 3. Install plugins

Install plugins as composer depencies. This assumes that a plugin has been registered on https://packagist.org/

```
composer install hypejunction/hypefeed
composer install hypejunction/hypeinteractions
# whatever else you need

```

#### Step 4. Commit

Make sure `composer.lock` is not ignored in `.gitignore`

```
git add .
git commit -a -m 'Add new plugins'
git push origin master

```

#### Step 5. Deploy to production

###### Initial Deploy

```
cd ./path/to/www

# you can also use git clone
git init
git remote add origin <git repository url>
git pull origin master

composer install

```

#### Subsequent Deploys

```
cd ./path/to/www
git pull origin master

# never run composer update in production
composer install

```

#### Working on plugin repositories during project development

It happens often that you want to make pull requests or update your plugins while you are working on a project. What I do is require plugins with –prefer-source flag.

```
composer require hypejunction/hypefeed --prefer-source

# make some changes
cd hypeFeed
git checkout master
git commit -a -m 'Changes made'
git push origin master

```

##### References:

1.  Image: Unsplash
2. Elgg officail Guide.
Recommend a science fiction
Tags: watercooler
Published: 2019-09-25 23:41:37

---
title: Recommend a science fiction
published: true
description: Recommend a science fiction
tags: [watercooler]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/obuyto6ilprjh25zg3ph.jpg
---

I'm a fan of Terry Pratchett and Douglas Adams. To be fair, I can't say I read all the "classic". I'm open to recommendations.

> cover image: "The history of science fiction" by [Ward Shelley](http://www.wardshelley.com/).
#10DaysofCode - AKA #100DaysofCode for people with focus, drive and commitment issues.
Tags: javascript, webdev, vue
Published: 2019-09-25 23:31:44

# Excuse me?

Well 100 days is terrifying, don't you think? I did. That's why I invented a new Twitter hashtag (or maybe it existed all along but who cares).

It's called #10DaysofCode - AKA #100DaysofCode for people with focus, drive, commitment [etc.] issues. Isn't it marvellous?

> Feel free to join me, by the way - I'd be happy to follow along with your 10-day journey if 100 is too big and scary for you as well!

# Okay, and?

Well, I'll probably be writing about my *other* (smaller and less ambitious) **musical project** during my measly 10 days of code.

Said project is going to be about Beethoven... and [his] Sonatas.

So if you like those things, or if you enjoyed the last article, then there's a chance you'd be interested in my Twitter feed - for the next 10 days, at least (I always follow back!)...

> If you unfollow me after the 10 days is up, I won't hold it against you... much.

# More articles like the last one, please?

Stay tuned for the next one is all I can say.

It will more likely than not be about this *second* musical project of mine and I intend to put as much time and effort into it as I did the last article, if not more.

Especially considering that it was so well received (thank you!).

# And now for some reassurance

Please don't be worried that your feed is going to become clogged up with low-quality posts like this from me -

__I really want to reserve my dev.to profile for longer, funnier, more interesting, more well-researched and well-thought-out articles (like the last one)__.

For everything else, there's ~~Mastercard~~ Twitter.

https://twitter.com/susDissonance
Learn about JavaScript Functions
Tags: javascript, beginners
Published: 2019-09-25 22:35:11

<h1>What are functions? </h1>
Basically a set of codes in blocks that are reusable, and tells your application to perform a specific task once we call the function name. 

Let us create one:
First create an HTML document to display what we create. In the head of your html document.
<code>
(<head>

    <title>Website</title>
    <script src="script.js" defer></script>
</head>
 Then create a button in the body of the document
"button onclick = "clickMe()"
<body>
 <button onclick="clickMe()"> CLICK HERE</button>
 <div id ="click">
 
 </div>
</body>)

</code>

Save this as index.html

Then we create the function in another file. Let us call that script.js

//basic function that allows you to click on a button and then display text when we click on the button
<code>
function clickMe(){
    me = document.getElementById('click')
    me.innerHTML = "SEE ME HERE"
    
<code>} </code>
</code>
Save the file. Once you click on the button the text should appear.
How valuable do you think a Master's Degree in Information Technology Management can be? 📒📝
Tags: discuss, watercooler, management, career
Published: 2019-09-25 22:23:20

Today I embark on a possible fork in the road of continuing my education with a 2-year Graduate degree in this area. I would have the flexibility of online courses and in addition to the Degree, there are concentrations that pair with it below: 

-    Cyber Security
-    Online Learning Innovation and Design
-    Organizational Leadership and Change Management
-    Project Management
-    Strategic Digital Information Marketing
-    Strategic Innovation and Change Management

I will admit that development is hardly my strong suite or passion, at the moment. That could change in the future but I have always skewed more towards the sysadmin/business process side of things.

Curious what some of you have to say about the topic.

 Chris
How can I use refs to set callbacks on a FlatList?
Tags: reactnative
Published: 2019-09-25 21:57:15

[StackOverflow Post](https://stackoverflow.com/questions/58106958/how-can-i-use-refs-to-set-callbacks-on-a-flatlist)

I'm trying to use `refs` to set the `onEndReached` prop of my FlatList imperatively. Is there a way to do that? 

I've modified an example from the PR that adds `setNativeProps` that toggles the color from black to white on an interval, but can't get `onEndReached` or `onScroll` to be called. 

Can anyone help me understand what I'm doing wrong?

```javascript
export default class Testing extends React.Component {
  componentDidMount() {
    let tick = 0
    this.list.setNativeProps({
      onEndReached: info => {
        // NEVER CALLED 😢
        console.log('L231 on Scroll info ===', info)
      },

      onScroll: info => {
        // NEVER CALLED 😢
        console.log('L250 info ===', info)
      },

      // Background DOES flash red on load... 🤔 
      style: { backgroundColor: 'red' }
    })
    setInterval(() => {
      this.list.setNativeProps({
        onEndReached: info => {
          console.log('L231 on Scroll info ===', info)
        },

        // Background DOES toggle black and white... 🤔 
        style: { backgroundColor: tick++ & 2 ? 'white' : 'black' }
      })
    }, 1000)
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          ref={component => (this.list = component)}
          style={{ backgroundColor: 'black' }}
          data={[{ key: 'a' }, { key: 'b' }]}
          renderItem={({ item }) => <Text>{item.key}</Text>}
        />
      </View>
    )
  }
}
```
React snapshot tests - discussion
Tags: discuss, react, javascript, testing
Published: 2019-09-25 21:33:26

Recently i spent some time looking more into snapshot tests, and wondering on usefulness of full rendered ones.

If we use shallow renderer, subcomponents will stay as is and won't be replaced with their rendered version, in full renderer they will. 

This means that any change in subcomponent will break parent component test and snapshot needs to be recreated. In system still in development, this can happen quite often. These snapshots are also much larger, therefore harder to review. 

So I am interested to hear others opinion on them, how and how much are you using them and how useful do you find them?
There Are Two Types of Software Developers...
Tags: jokes, javascript, types
Published: 2019-09-25 21:30:35

---
title: There Are Two Types of Software Developers...
published: true
description: 
tags: jokes, javascript, types
---

There are two types of software developers.

But I mix up which is which because I write JavaScript.

[Twitter reaction](https://twitter.com/hashim_warren/status/1176622576019419138)
React-iOS-PWA-prompt – Native style prompts for Add to Homescreen on iOS
Tags: pwa, ios, react, javascript
Published: 2019-09-25 21:12:23

Hi there,

I launched this project this weekend just gone. The rationale behind this is to provide a simple way to add native looking PWA prompts for iOS. 

I would appreciate any interest in the project and feel free to make any suggestions. 

Next up is adding a customisable delay to the prompt based on the number of page visits, as is the behaviour on Android. 

https://github.com/chrisdancee/react-ios-pwa-prompt
https://www.npmjs.com/package/react-ios-pwa-prompt
Keeping a forked git repository updated using git cli
Tags: github, opensource, git, gitcli
Published: 2019-09-25 20:31:24

 **As** an intermediate using git i experienced similar issues you might be experiencing now not knowing how to get latest changes from a git repository.
Work with different teams at the hng internship i really couldn’t keep count of how many PR(pull Request) i had to close because of conflicts i had when making a pull request. So i just thought of putting out something that could be of help to you.
Why is keeping your repository synced important?
When working with a team different people make contributions either on a daily basis depending on the team.So it important you get latest changes before you push or even make a PR if that isn’t done there is no **``Escape Route``** for conflicts when making a PR.

*get your PC ready !!!*.
**STEP 1:**
- Fork the Git repository

**STEP 2 :**
- create a new folder on your PC
- Right click on the created folder and do a git bash here or if you have a text editor like VScode,open up the folder in your text editor and use the terminal.

**STEP 3:**
- copy the repository URL
- on your terminal do a `git clone <repository URL>`

**STEP 4:**
- checkout to a new branch `git checkout -b <branch name>`
N:b: This branch is where you would be making your changes to before you push.

*Creating Upstream*
**STEP 5:**
- `git remote add upstream 
 <https://github.com/original_owner/original_repository.git>`
N:b: get the URL from the original repository
**STEP 6:**
To get latest updates from any of the branch 
- do a `git checkout <branch name>`
- `git pull upstream <branch name>`
N:b: branch name here is the branch name of on the original repository you want to pull changes from.

**STEP 7:**
- `git checkout <branch name>`
N:b: checkout to the branch you are working on

**STEP 8:**
- then `git merge <branch name>`
N:b:branch name here is the branch you pulled to,Also if you are using a text editor like VScode if there are any conflict you would get notified.

**AT LAST:**

**STEP 9:**
- `git push -u origin HEAD`
N:b: using HEAD you dont have to type the branch.it pushes directly to the branch you are one.

CONGRATULATION YOU JUST AVOIDED CONFLICTS….
Kindly hit the like button and follow if you found this helpful thanks.
Add Dark Mode support to your Nuxt app
Tags: webdev, design, vue, nuxt
Published: 2019-09-25 20:11:51

We're refactoring our in-house CRM in Vue as a Nuxt app, and since it's 2019, I wanted to support Dark Mode across the entire application with as little effort as possible.

Dark Mode is widely supported in Safari, Firefox, and Chrome by now, and a lot can be done on any web app with [just CSS and CSS variables](https://webkit.org/blog/8840/dark-mode-support-in-webkit/). 90%+ of my Dark Mode styling is just done in CSS, as it should be.

But if you're using a framework like Vue, you're probably controlling some styles of your components directly with props instead of just relying on CSS classes, like so:


```vue
/* Normal button for light mode */
<sui-button primary icon="plus">New entity</sui-button>

/* Inverted button for dark mode */
<sui-button primary inverted icon="plus">New entity</sui-button>
```

I'm using [Semantic UI](https://semantic-ui-vue.github.io/#/elements/button) for my buttons which is… fine for now. If I pass `inverted="true"` (shortened to simply `inverted` here), I get my Dark Mode-friendly button.

To turn that boolean into a globally accessible variable in my Nuxt app, a Vuex store seems like the right decision:


```js
/* store/const.js */
export const state = () => ({
  darkMode: false
});
export const mutations = {
  setDarkMode: state => {
    state.darkMode = true;
  },
  unsetDarkMode: state => {
    state.darkMode = false;
  }
};
export const actions = {
  setDarkMode: ({ commit }) => commit("setDarkMode"),
  unsetDarkMode: ({ commit, state }) => state.darkMode && commit("unsetDarkMode")
};
```

Assuming you have some Dark Mode media query styles set up, checking for Dark Mode and listening to changes is something we can do in our layout file:


```vue
/* layouts/default.vue */
<template>
 <nuxt />
</template>
<script>
export default {
  components: {
    AdminNav
  },
  data() {
    return {
      mql: window.matchMedia('(prefers-color-scheme: dark)')
    }
  },
  created() {
    this.darkMode(this.mql)
    this.mql.addListener(this.darkMode)
  },
  beforeDestroy() {
    this.mql.removeListener(this.darkMode)
  },
  methods: {
    darkMode: function(e) {
      if (e.matches) {
        return this.$store.dispatch('const/setDarkMode')
      }
      return this.$store.dispatch('const/unsetDarkMode')
    }
  }
}
</script>

```

Finally, fetching the boolean in any component that needs it is just a computed property away:


```vue
/* components/myComponent.vue */
<template>
  <sui-button primary inverted="darkMode" icon="plus">New entity</sui-button>
</template>

<script>
export default {
  computed: {
    darkMode() {
      return this.$store.state.const.darkMode
    }
  }
};
</script>
```

Now I get that nice inverted button flavor when using Dark Mode. Yum 😋.
Local Aliases in Bash
Tags: bash, linux, tutorial
Published: 2019-09-25 19:58:40

---
title: Local Aliases in Bash
published: true
description: Just a little snippet with explanation, as to how to implement local bash aliases, when you don't want those aliases polluting the global Bash scope.
tags: #bash #linux #tutorial
---

**Quick story**

Recently, I started learning Rust. So I was running a lot of `cargo check` and `cargo run` and `cargo build` commands. I wanted to shorten that to `ccheck` and `crun` and stuff like that.

Except, commands like that already exist on my machine. I never need them in the Rust project, so I would like to reassing those commands to just these little aliases.

**Why this article exists**

There's no way to setup a "local alias" command. If alias is defined in my bash profile, it will be used everywhere. So I created a little hack that works for me, and will probably work for you

**Solution**

So, the way to do that, is through Bash functions. In the bash function we can check in which directory we currently are, and take action accordingly.

```bash
function ccheck(){
    if [[ $PWD == "/home/daniel/rust-projects/" ]]; then
        # if you are in this folder, execute this command
        cargo check;
        # return stops the function, and it won't reach the ccheck call later in this function
        return;
    fi
    ccheck;
}
```

But the problem that you face immediately, is that the later `ccheck`, the "actual one", is going to Halt your bash session, because it will be stuck in recursion.

To stop that from happening you just have to prepend `command ` before the command that you want to execute. That way, you won't call the function, but the actual command.

```bash
function ccheck(){
    # stuff...

    command ccheck;
}
```

**Now what?**

A better way of comparing a directory is against a regex. But since our little directory is not that complicated (or `cargo` runs anywhere in the project, hehe), we can replace regex with simple wildcard comparison

```bash
if [[ $PWD == *"rust-projects"* ]]; then
    # ...
fi
```

This will make this alias work anywhere within that directory.

Hope that helped you :)
Checking item by reference of object
Tags: react, javascript
Published: 2019-09-25 19:45:19

---
title: Checking item by reference of object
published: true
description:  
tags: #react #javascript
---

Today, I realized that I dont need to use a id property in a object to check what item I want changing in a array...
I just pass the reference of object, and when I did a strict comparation... 😱 

```javascript
this.state.list.map(x => {
   // checking item by ref
   if (x === item) {
      return { ...item, count: (item.count || 0) + 1 };
   }
   return x;
})
```
It works!!!

I don`t known if it is bad to performance, but I think it is easy to code.

What do you think about this approach?

See on CodeSandbox

{% codesandbox qk2gk %}