teleren/devto huggingface dataset:
Performpal a service object library for Javascript/NodeJS
Tags: node, react, express, serviceobjects
Published: 2018-11-17 19:18:28

---
title: Performpal a service object library for Javascript/NodeJS
published: true
description: Today I published Performpal a JS library based on Trailblazer operations
tags: nodejs,react,express,service-objects
---

This week I've published [Performpal](https://github.com/lucas-aragno/performpal) a service object library for JavaScript.


This library is inspired by the principles of clean code architecture and [Trailblazer](http://trailblazer.to).

Operations are a nice and clean way to abstract out all the business logic from other layers of your application. This useful specially for backend apps in which we often end up having business logic on the controller/model layer.

With performpal we can create an Operation for each "use case" of our application and perform each step necessary in order in a react-ish way:

For example:

```js
const { Operation } = require('performpal')
const pug = require('pug')
const emailService = require('../emailService')
const registeredUserEmail = pug.compileFile('../templates/users/register')


class SendEmail extends Operation {
  constructor () {
    super()
    this.steps = [
      this.createEmailBody,
      this.sendEmail
    ]

    this.failures = [
      this.handleSubmitEmailError
    ]
  }

  // on constructor handle this, like react does with this.state

  createEmailBody ({params, options}) {
    let { email } = params
    options['emailBody'] = registeredUserEmail({email})
  }


  sendEmail ({params, options}) {
    const { emailBody } = options
    const { email } = params
    return emailService.send({ email, emailBody })
  }

  handleSubmitEmailError ({params}) {
    const { email } = params
    throw new Error(`Error sending email to ${email}`)
  }
}

module.exports = SendEmail

```

Operations are framework agnostic so you can use them wherever you want.

This is how an express route would look like:

```javascript
const SendEmail = require('../operations/SendEmail')

app.post('/sendEmail', async (req) => {
  try {
    let { email } = req.body
    let result = await (new SendEmail()).run({params: {email}})
    res.send(200).json({result})
  } catch (error) {
    res.send(500).json({error})
  }
})
```

This way our route will be just and HTTP endpoint for our app that only cares about getting the request, taking the parameters, dispatching the operation and communicate the result.


You can also use Operation to write up GraphQL resolvers, Callbacks or anything you want.


This pattern has helped me a lot to keep things clean on big applications so I decided to move it over a library, feedback is welcomed!
Development pattern (generator) vs dynamical programming
Tags: discuss, bestpractice
Published: 2018-11-17 18:45:30

---
title: Development pattern (generator) vs dynamical programming
published: true
description: 
tags: discussion, bestPractice
---

What do you prefer and why? 

I lean to development pattern. First I establish development structure (objects and directories) and then create a code generator, which will generate code for the established structure. 

The benefit, once you get to understand the pattern you can easily detect problems (bugs) also others devs will take less time to debug. 

The disadvantage is your code is duplicated by the generator.

The other way is dynamical programming. Your code is very dynamical, challenging, every feature is differently implemented.

The benefit, you learn a lot by "experimenting", you build your knowledge.

The disadvantage is your code legacy...
Snacks@console Intuitive browser-based SQL Console
Tags: showdev, opensource, javascript, php
Published: 2018-11-17 18:04:10

---
title: Snacks@console Intuitive browser-based SQL Console
published: true
description: browser-based console to run and save SQL queries.
tags: #showdev #opensource #javascript #php
cover_image: https://thepracticaldev.s3.amazonaws.com/i/p4zr07dz7cl1j7y4hy0v.jpg
---

Hey, folks

Recently I kept myself busy creating an opensource project called "Snacks Project". Which is an intuitive database toolkit to make the database management process faster and happier.

Today, I'm going to share with you the first module of this project. Which is a browser-based console to run and save SQL queries.

{% github mazentouati/snacks-console %}


## Features

- currently the console supports the following commands:
( Select, Update, Delete, Insert, Use `database`)
- bookmark favorite queries
- built-in terminal commands
- neat table representation for select queries

## Usage guideline

Snacks@console is a PHP based application. Before you use it, you have to make sure that your system is ready to run PHP applications. All web server such as [Laragon](https://laragon.org/) (recommended) or [XAMPP](https://www.apachefriends.org) provide all the requirement to run a PHP based application in one package.

After you setup your webserver. Open the command line inside the web server's root directory, usally `www`, and follow along the installation process

### through composer
I recommend installing this package through [composer](http://getcomposer.org/) :

```bash
composer create-project mazentouati/snacks-console "_folder_name"
```

*Note: make sure that your web server enables the RewriteEngine.*

then access your `"_folder_name"` folder via your browser and the initial setup will popup to set your database credentials, then redirect you to the console interface.

## Future

I plan to enhance the current experience as the current version is somehow a prototype to study the users feed backs and suggestion. Though, i'm going to add the following features :

#### Extended command support
Theoretically, it can execute any SQL command but I plan to make the experience of DDL ( data definition language ) like `Create` or `Alter` more accessible by supporting interactive inserting in the console.

#### Add syntax highlight
Additionally, I plan to add syntax highlight for the SQL commands

#### Enhance the manipulation of the fetched data
Currently, the data shown when using `select` command isn't interactive. I plan to make the table re-sizable, the cells clickable ( shows full column's data when click ) and whatever required to make it more interactive.

## Documentation
Unfortunately, I'm overwhelmed by Snacks project and it's sub-projects. I'll incrementally add the documentation, tests for both the source code and the application.

I'm really thrilled to hear your suggestions and thoughts.

peace.
Understanding Javascript Callback Function
Tags: javascript, web, es6, programming
Published: 2018-11-17 17:24:26

---
title: Understanding Javascript Callback Function
published: true 
description: Understanding Javascript Callback Function
tags: #javascript #web #es6 #programming
---

Post Link : <a href="https://www.skptricks.com/2018/11/understanding-javascript-callback-function.html" >Understanding Javascript Callback Function </a>

This tutorial explains basic implementation of javascript callback function and it's working in real time scenarios. Simply you can say a callback is a function that is to be executed after another function has finished executing, for that reason we called it as a ‘call back’.

Understanding Javascript Callback Function 


What is Callback Functions ?
When a function simply accepts another function as an argument, this contained function is known as a callback function. callback functions is a core functional programming concept, and you can find them in most JavaScript code. Example :- setInterval


Why do we need Callbacks ?
Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution.
JavaScript Callback Functions can be used synchronously or asynchronously.

Lets see the below example and understand the execution flow of javascript.
function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();


 <a href="https://www.skptricks.com/2018/11/understanding-javascript-callback-function.html" >Understanding Javascript Callback Function </a>

<img src="https://3.bp.blogspot.com/-nOAH00N3evQ/W_BMXldORAI/AAAAAAAACJc/8tx17uHRyBg0U3ZBuKolo-GTIH4fYr_8ACLcBGAs/s400/callback.png" />

<a href="https://www.skptricks.com/2018/11/understanding-javascript-callback-function.html" > Read more.... </a>
I made a chrome extension called "Twitter Go".
Tags: chromeextension, javascript, node, opensource
Published: 2018-11-17 14:58:40

---
title: I made a chrome extension called "Twitter Go".
published: true
description: A chrome extension that displays latest 20 tweets from my twitter timeline whenever I open a new tab.
tags: #chromeextension #javascript #nodejs #opensource
---
![Twitter Go](https://thepracticaldev.s3.amazonaws.com/i/e17tz15oi1vnrm71i230.png)
After a long tiring day at the office just when you step out for home, you find that it's been raining cats and dogs for the last 1 hour. Did that ring a bell to you? I have been in such disconnected situations from the outer world many times. To avoid such happenings and be connected with the world, I built a Chrome Extension which shows the latest 20 tweets from my Twitter feed every time I open a new tab. Sounds cool eh? Now let's get to the coding part of it. So after I got this idea, I was looking for tutorials on chrome extension. And I found this [playlist](https://www.youtube.com/watch?v=hkOTAmmuv_4&list=PLRqwX-V7Uu6bL9VOMT65ahNEri9uqLWfS) by [Shiffman](https://shiffman.net/) very useful. Initially, I built a dummy extension with mock data to get the front-end part done. Now comes the tricky part. To get tweets from my Twitter timeline, I had to set up an app with my Twitter account on the Twitter developer community. For this also I followed this [Twitter bot tutorial](https://www.youtube.com/watch?v=RF5_MPSNAtU&list=PLRqwX-V7Uu6atTSxoRiVnSuOn6JHnq2yV) by [Shiffman](https://shiffman.net/) again. After getting my Twitter credentials to access my Twitter feed, now I had to make an HTTP request to the Twitter APIs with my credentials. To take care of all the headaches in accessing my Twitter, I used this [Twit](https://github.com/ttezel/twit) library used by Shiffman in the Twitter bot tutorial. So after plugging Twit with my credentials and setting it up with the extension for real data, and when I tried it on browser Twit failed to retrieve the data, but it was able to retrieve it when I ran it on my node js server. So after a bit of digging, I found that [Twitter APIs don't support WebApps](https://stackoverflow.com/questions/35879943/twitter-api-authorization-fails-cors-preflight-in-browser) :(. A quick workaround I did was, I set up an API for my Twitter feed on my node js server which I made for another toy project. So to get this extension done, I had to set up an API in the back-end to retrieve the tweets from Twitter and access the API in the extension to display the tweets.

Here is the [Github link](https://github.com/hariharan-dev/twitter-go-extension) to extension.
What device to get for learning?
Tags: discuss, beginners
Published: 2018-11-17 14:04:11

---
title: What device to get for learning?
published: true
description: Should I get a Kindle (text materials only) or iPad Mini (video & audio)?
tags: discuss, beginners
---

I'd like to get a device specifically for learning. I already have a laptop and a smartphone, but I feel my  laptop is too large & phone too small to comfortably read on the sofa in my downtime, on the bus, etc.

Initially I was leaning towards Kindle Paperwhite because it is simple, has no distraction, does not require daily charging, and the e-ink screen would provide enjoyable reading experience (less eye strain = longer learning time!). 

But I realize these days learning materials seem to be dominated by (or at least equal parts) video and audio. Not to mention conference talks & slides and podcasts which are, while not strictly learning materials, provide important insights that help in learning. So I'm now torn between a Kindle or an iPad Mini.

What is your experience with this? 

Do you think learning from text materials (ie. materials I can access from a Kindle) would suffice or would I be better off with an iPad? My main focus is learning frontend development and basic computer science, although I'd also be using it to learn about non-tech materials.

Thanks!

PS. I'm getting either of those secondhand and I've found some items within my price range, so price is not a factor in this discussion.
Passing array to function in c programming
Tags: arrays, cprogramming, arraystofunction, functions
Published: 2018-11-17 13:46:24

---
title: Passing array to function in c programming
published: true
description: 
tags: arrays, c programming, arrays to function, functions
---
[Arrays]('https://www.itachay.com/2018/10/arrays-in-c-programming.html') are a very important concept in c programming. Everyone knows why [arrays]('https://www.itachay.com/2018/10/arrays-in-c-programming.html') are used and how to use it. And everyone also knows about different [types of arrays in c programming]('https://www.itachay.com/2018/11/types-of-arrays-in-c-programming.html').
1. [Linear Arrays]('https://www.itachay.com/2018/10/arrays-in-c-programming.html')
2. [Multidimensiona Arrays]('https://www.itachay.com/2018/11/two-dimensional-arrays-in-c.html')

But I have seen that new student who is learning c programming language are very confused how arrays pass to the [functions]('https://www.itachay.com/2018/08/function-in-c.html'). So today I'm here to tell you how we can pass an array to function in c programming.

Let's start,

Suppose we have an integer array of size 5.

**int arr[5]={3,4,5,6,7};**

and have a function print which can accept an array of integer. So we write something new in the prototype.

void print(int arr[]){  
    int i;

    for(i=0;i<5;i++){
        printf("%d ",arr[i]);
    }
}

We can send our array from our main function to the function we write. Just by passing the name of the array. 

**print(arr);** 

Because array name is the address of the first element in the array and we just need the address of the first element and we can iterate other by just increasing the index.

Also, read [pointers in c]('https://www.itachay.com/2018/10/pointers-in-c-programming.html').
Share your first dev job story
Tags: jobs, showdev
Published: 2018-11-17 13:44:32

---
title: Share your first dev job story
published: true
description: Developers sharing encouraging stories of how they got their first job
tags: jobs, showdev
---

Hi DEVs, I'm participating in the crazy #24hrstartup challenge today - https://24hrstartup.com/hrishi-mittal

I'm building https://firstdevjobs.com - a place for developers to share stories about how you got your first job as a developer. I want to encourage new developers looking for their first job.

Please check out my project and share your stories!

Thank you!
Understand React render better
Tags: react, frontend, perfomance, devtool
Published: 2018-11-17 13:22:45

---
title: Understand React render better
published: true
description: Developer tool to answer the question. Why did the rendering happen?
tags: react, frontend, perfomance, devtool
---

To answer the question. **Why did the rendering happen?**

<img width="564" alt="example" src="https://user-images.githubusercontent.com/15855766/47255109-5e687900-d474-11e8-86b1-38d732483959.png">

## Advantages

+ used directly for one component, therefore it works very fast

+ for all versions of React from 0.13.0 to 16.0.0 

+ zero dependencies

## Install

```
npm install clear-render --save-dev
```

You can set globally, to be used in all their projects without having to install each.
  
## Usage 
Wrap the component for which you want to watch. And yet!
```javascript
import clearRender from 'clear-render';

@clearRender
class SimpleComponent extends React.Component {

    ...

}
```
or
```javascript
import clearRender from 'clear-render';
import OriginalSimpleComponent from './SimpleComponent';

const SimpleComponent = clearRender(OriginalSimpleComponent);

...

<SimpleComponent {...props} />
```

## Usage for CodePen and JSBin as UMD module
in html area
```javascript
<script src="https://unpkg.com/clear-render@latest/build/umd/index.js"></script>
```
in js area use `clearRender` from global scope
```javascript
@clearRender
class SimpleComponent extends React.Component {

    ...

}
```
Service workers considered harmful
Tags: pwa, javascript
Published: 2018-11-17 19:13:20

---
title: Service workers considered harmful
published: true
tags: pwa, javascript
canonical_url: https://larsgraubner.com/service-workers-considered-harmful/
---

Service workers are an exciting new technology which allows to intercept network traffic. Cool stuff like saving content for offline usage and advanced caching is possible. They are as powerful as they are dangerous.

There are a lot of things that can go wrong. Users might not get the new version of a page anymore. The only way to recover from this is removing the local service worker, which persists over page reloads and browser sessions. Unfortunately this is not as easy as clearing the browser cache and common users are stuck with a bad version of it.

## Hard to grasp

And this Problem is not limited to novices, even experienced developers happen to run into those problems. This technology is quite new and it’s not that easy to understand what’s going on (although not impossible). Therefore different abstractions come up such as [Service Worker Precache](https://github.com/GoogleChromeLabs/sw-precache) from Google. Abstractions make complex code easy to use, but does not help understanding it’s implications. This is dangerous.

{% twitter 954146978564395008 %}

Recently the [Create React App](https://github.com/facebook/create-react-app) maintainers made the usage of service workers in v2 opt-in instead of enabled by default which it previously was. I think this is a step into the right direction as it should only be used if you considered and reviewed it carefully. Kent C. Dodds, who is a renowned person in the React ecosystem, had serious problems with a service worker which prevented users from seeing the buy button on the updated page. This is the worst case that can happen.

{% twitter 1053241715153227777 %}

## Evaluate

Don’t get me wrong: Service workers are an awesome piece of technology and incredibly useful for progressive web apps and other use cases. But you have to be more than careful when implementing them.

I decided to remove the [gatsby-plugin-offline](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline) from this site for the reasons stated above. It’s as easy as throwing a single line into the Gatsby.js config to enable it, but comes at the cost of trusting others to not make any mistakes which is unlikely. The amount of effort to dig into it and struggles which can occur do not satisfy the benefits for this site.

Decide for yourself and the requirements of your project if it’s really necessary to have a service worker and behave accordingly.
How Classes Work In JavaScript
Tags: react, reactnative, android, javascript
Published: 2018-11-17 05:52:50

---
title: How Classes Work In JavaScript
published: true
description: How Classes Work In JavaScript
tags: #react #reactnative #android #javascript
---

Post Link : <a href="https://www.skptricks.com/2018/11/how-classes-work-in-javascript.html" >How Classes Work In JavaScript </a>

This tutorial explains how to use class in Javascript. Like C++, java, php etc programming language, we can create class in javascript with very easy steps. A JavaScript class is a type of function. Classes are declared with the class keyword.
Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations. we will  discuss all one by one.

<a href="https://www.skptricks.com/2018/11/how-classes-work-in-javascript.html" >How Classes Work In JavaScript </a>


<img src="https://3.bp.blogspot.com/-En3V5XLthLw/W-wtZe6_KiI/AAAAAAAACJQ/GJ2gPhUjcR8aVaHDyzrY4n4XhNhlq3ccACLcBGAs/s400/class.png" />

<a href="https://www.skptricks.com/2018/11/how-classes-work-in-javascript.html" >Read More... </a>
Do I Have What It Takes To Be A Computer Programmer?
Tags: programming, beginners, discuss
Published: 2018-11-17 04:43:25

---
title: Do I Have What It Takes To Be A Computer Programmer?
published: true
description: An explanation of what it takes to be a computer programmer.
tags: programming,beginners,discuss
canonical_url: https://goingundercoder.com/2018/02/21/do-i-have-what-it-takes-to-be-a-computer-programmer/
---

<img src="https://thepracticaldev.s3.amazonaws.com/i/3zegy9nkrucyxj1k62yj.jpg" alt="programmer header" />
Do I have what it takes to be a computer programmer? I get this question completely too often when mentoring college students studying computer science or related majors for programmers. This question usually comes from these students after leaving their first advanced algorithms class dazed and confused. It's easy to become disheartened when attempting the rigor of a computer science degree that will likely over-teach the advanced concepts only a computer scientist can appreciate, but these topics barely scratch the surface of what a computer programmer will need to "have what it takes".

What I try to communicate to those I'm mentoring is that memorizing all of the terms related to object-oriented programming is not what anyone considering a career in computer programming should use as the base their career decisions. Sure, you will absolutely need to have a well-rounded understanding of these concepts, but as I tell anyone with doubts on their programming abilities, what you can learn is not the same as your ability to learn.

The one rule I have found with programming that rings true no matter which business sector you are coding for is that the only constant is CHANGE. I can hear every developer yelling "constants don't change". I can not count how many times I have had a team lead or development manager ask me if I could research and implement a new technology or process that no one at the company has utilized. Most of the time it requires some cutting-edge technology that has very little (if any) documentation for reference.

Since change is constant, then what does that mean to those contemplating a career as a programmer? My experience and personal opinion are that understanding the semantics of whichever programming language you are using is important as a programmer, but the most valuable attribute is the ability to thrive and drive to immerse yourself in change. What I have found that undoubtedly separated those programmers who remain complacent in their programming and those who 'have what it takes to succeed' is volunteering for the change that is imminently coming.

If you would like to learn other skills and traits of being the type of computer programmer that created awesome software like Google, Facebook or Dropbox, I recommend reading <a href="https://amzn.to/2v5jQAb" target="_blank" rel="noopener">The Effective Engineer: How to Leverage Your Efforts In Software Engineering to Make a Disproportionate and Meaningful Impact</a> by Edmond Lau. For more articles like this, visit https://goingundercoder.com/blog.
User Retention Problem -- Vlog 11.15.2018 -- Benjamin Spak
Tags: vlog, codelife, 301daysofcode, spakmedia
Published: 2018-11-17 02:44:43

---
title: User Retention Problem -- Vlog 11.15.2018 -- Benjamin Spak
published: true
description: 🖊️ Kicking around ideas & doing research about how to grow Spak.co and Spak Media.
tags: #Vlog, #CodeLife, #301DaysOfCode, #SpakMedia
---

[![](https://thepracticaldev.s3.amazonaws.com/i/g312xu6xhx1fkhs869rc.png)](https://youtu.be/JtjfNzys3SU)

⚠️ Question of the Day:
Would you participate in an online - weekend-long - hackathon?
[https://twitter.com/benjaminspak/status/1063051333647982593](https://twitter.com/benjaminspak/status/1063051333647982593)