teleren/devto huggingface dataset:
Why are you actually using variables?
Tags: discuss, refactoring
Published: 2018-08-26 09:01:39

---
title: Why are you actually using variables?
published: true
description: discussing about reasons you might be using and when you should use variables
tags: discuss, refactoring
---

When to use variables? It feels natural to instantiate a variable when needed, but we usually don't think of the reason behind it. I am presenting 4 most prevalent reasons:
 * Readability
 * Abstraction
 * Performance
 * Maintainability

I know this subject is a little sensitive but, in order for us to be able to create good coding standards we need to understand the reason behind it. 

If you don't agree with any of the answers in this video, you think I missed some more important ones or you have some suggestions to better exemplify them **please** do comment down below.

{% youtube ks6aXEC79ZM %}

Shout out to {% user jhotterbeekx %} for suggesting we use an IDE for presentation, I really like the way it turned out (What do you guys think?)
Simple Drop Down Menu with Jquery and CSS
Tags: javascript, css, hmtl, webdev
Published: 2018-08-26 06:03:05

---
title: Simple Drop Down Menu with Jquery and CSS
published: true
description: Simple Drop Down Menu with Jquery and CSS
tags: #javascript #css #hmtl #webdev
---

Post Link : <a href="https://www.skptricks.com/2018/03/simple-drop-down-menu-with-jquery-and-css.html" > Simple Drop Down Menu with Jquery and CSS </a>


Today, we are going to discuss how to create jQuery dropdown menu design. Here we have designed simple drop down menu with CSS, HTML and jQuery. We have tried our best to make this example as simple as possible.
So, when user perform click event on "My Setting" div box, Then it will list out the drop down menu just below it. we are handling on click event with the help of jquery.


<img src="https://3.bp.blogspot.com/-f8y1Z_yOJbw/WqQCKQCY6_I/AAAAAAAABZQ/JzRKIvoo1dY14N2P6Z2cm0nnhehti9STACLcBGAs/s400/1.gif" />


<a href="https://www.skptricks.com/2018/03/simple-drop-down-menu-with-jquery-and-css.html" > <b> Download Source Code </b> </a>
Add TinyMCE editor in PHP or HTML
Tags: javascript, jquery, programming, webdev
Published: 2018-08-26 06:00:44

---
title: Add TinyMCE editor in PHP or HTML
published: true
description: Add TinyMCE editor in PHP or HTML 
tags: #javascript #jquery #programming #webdev
---

Post Link : <a href="https://www.skptricks.com/2018/03/add-tinymce-editor-in-php-or-html.html" > Add TinyMCE editor in PHP or HTML </a>

Today, We are going to discuss how to Integrate TinyMCE editor with php or html. TinyMCE editor is web based WYSIWYG editor which enables you to convert HTML textarea field to an editor. The TinyMCE editor is converting the formatted text into HTML. Basically it helps to display formatted HTML code. Here we have given simple example how to add TinyMCE editot in php or html file.

<img src="https://4.bp.blogspot.com/-p6w6fDevsFU/Wqn-kg-1JrI/AAAAAAAABaE/zDX5Y2YJ8ZweOPeP9AC0HGwsiyXSH2VlgCLcBGAs/s640/editor.jpg" />

<a href="https://www.skptricks.com/2018/03/add-tinymce-editor-in-php-or-html.html" > <b> Download Source Code </b> </a>
Display Online/Offline Connection Status In JavaScript Using Offline.Js
Tags: jquery, javascript, webdev, programming
Published: 2018-08-26 05:57:32

---
title: Display Online/Offline Connection Status In JavaScript Using Offline.Js
published: true
description: Display Online/Offline Connection Status In JavaScript Using Offline.Js
tags: #jquery #javascript #webdev #programming
---

Post Link : <a href="https://www.skptricks.com/2018/03/display-online-offline-connection-status-using-javascript.html" > Display Online/Offline Connection Status In JavaScript Using Offline.Js </a>

In this tutorial we are going to learn how to display offline/online connection status in Javascript using Offline.js. Offline.js is a library to automatically alert your users when they've lost internet connectivity, like Gmail,Facebook.

<img src="https://4.bp.blogspot.com/-WR6yvMApZzA/Wq0Wd6CdSDI/AAAAAAAABak/krT5GaApeAAKonVA2lLzFuWxq79_A4FtQCLcBGAs/s400/1.gif" />

The best part is that it captures AJAX requests which were made while the connection was down, and remakes them when it's back up, so your app reacts perfectly.

{% youtube QEE3uZcGgEg %}

<a href="https://www.skptricks.com/2018/03/display-online-offline-connection-status-using-javascript.html" > <b> Download Source Code </b> </a>
Collapsible Comments on Dev.to
Tags: showdev, javascript
Published: 2018-08-26 04:37:57

---
title: Collapsible Comments on Dev.to
published: true
description: Chrome Extension that adds reddit-like collapsibility to dev.to comments
tags: showdev, javascript
---

>Note from the Future
>It's 2021, and dev.to has this feature now!

Hey everyone! First time posting here!

I love dev.to, but as an avid redditor, the lack of collapsible comments always kind of bothered me-- I mean, it's a feature that should totally exist. There's even a [GitHub Issue](https://github.com/thepracticaldev/dev.to/issues/173) for it.

So, I decided to finish a side-project for once. The result, a chrome extension that adds this very feature to dev.to. 

Installation is a bit of a challenge as I'm pretty new to this making extensions thing, hopefully someone will be able to help me out with that.

Repo link: https://github.com/sad-pixel/dev-to-comment-collapser

## Installation Instructions
1. Download the zip file or clone the repo
2. Go to `chrome://extensions`
3. Enable the developer mode toggle
4. Click "Load Unpacked"
5. Browse to the folder where the source files are located
6. Done

In case the buttons don't show up, refreshing the page should fix the issue. This is caused due to the way dev.to loads new pages.

Hopefully this will be of some help to someone!
Batteries for Phalcon PHP framework
Tags: php, phalcon, middlware, showdev
Published: 2018-08-26 03:02:00

---
title: Batteries for Phalcon PHP framework 
published: true
description: 
tags: php, phalcon, middlware, showdev
---

So you use phalconphp and like the speed and simplicity of it but miss some cool things and neat ways to do something? I did too. So I ended up writing a thin plug and play wrapper for phalcon that does basically many of the things you wished were in phalcon already.

{% github adhocore/phalcon-ext %}


Ignite your phalcon app with this multipurpose library. It is a collection of extensions/adapters/middlewares and utilities to make development with phalcon fun, elegant and easy. You can also build cool console interfaces and schedule tasks like a pro :)


## What's included

- powerful dynamic di resolver
- common middlewares (cache, auth, cors, throttle ...) for the web and console 
- a well architected middlware pattern common for both micro+mvc app
- extra logging utilities
- mailer on top of swiftmailer
- easy to use validation: the same way we all did in laravel before and loved it
- thin twig bridge so you can use twig template natively alongside volt
- neat, powerful argv parser for cli and task scheduler
- jwt auth for APIs (as middleware) if you like
- query logger with full control of traces

Besides, It has fully covered test cases, complete documentation and illustrative examples for many usecases. And not to mention it gracefully mediates the parity of doing things in mvc or micro mode presenting you one consistent common approach.

Scrutinizer score: 10/10

Thanks for reading, please try out and give some feedbacks. Any contribution would be received with thanks.

Happy hacking. :)

/Ahc
React JS Custom Component Animation
Tags: react, javascript
Published: 2018-08-26 01:40:30

---
title: React JS Custom Component Animation
published: true
description: Custom component doesn't render animation after setting state
tags: react,javascript
---

I have a ReactJS component that looks like this:

```javascript
import React from 'react';

class Circle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            percent: null
        };
    }    

    componentDidMount() {
        const url = "base url here" + this.props.endpoint;
        fetch(url)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        percent: result.percent
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error: error
                    });
                }
            )
    }

    render() {
        return (
            <div className={"col-md-" + this.props.size + " progress-circles"} data-animate-on-scroll="on">
                <div className="progress-circle" data-circle-percent={"" + this.state.percent + ""} data-circle-text="">
                <h4>{this.props.title}</h4>
                    <svg className="progress-svg">
                        <circle r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                        <circle className="bar" r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                    </svg>
                </div>
            </div>
        );
    }
}

export default Circle;
```

So far, this works like a total charm. The only problem is that there's an animation associated with this element that fills in the progress-circle and it doesn't occur after I've set the value from the `componentDidMount` function. The animation **does** occur if I set the value via props from the parent component. Am I missing something? I'm new to React so it could be something simple. Thanks in advance!
Fresno Free Code Camp - Deploy your first website!
Published: 2018-08-26 00:25:29

---
title: Fresno Free Code Camp - Deploy your first website!
published: true
description: 
tags: 
---

If you are in the Fresno area, feel free to stop on by for our monthly meetup! We had some questions regarding deployment of websites, so we will be going over deployment practices and procedures. Meetup: https://www.meetup.com/Free-Code-Camp-Fresno/events/253497545/

Date: Saturday, September 1, 2018
Time: 1-3 PM
Place: Root Access Hackerspace
1476 North Van Ness AVe · Fresno, CA

We will be going over how to deploy via two cloud based services and a common linux based self hosted service.
How do you ensure knowledge transfer in your company?
Tags: programming, softwareengineering, bestpractice, discuss
Published: 2018-08-25 22:19:23

---
title: How do you ensure knowledge transfer in your company?
published: true
description: 
tags: #programming #softwareengineering #bestpractice #discussion
---

Well, the title says it all. How do you ensure knowledge transfer in your company? How does collegue A know, what collegues B, C and D have been up to? And how can collegue A use the other collegues' insights, and source codes if need be? 

Do you have a centralized collection of documents? A Forum, a Wiki?

I would be interested to know some established best practices of your workplace.
I think I will leave my job, give me a advice.
Tags: career, help, discuss
Published: 2018-08-25 03:54:33

---
title: I think I will leave my job, give me a advice.
published: true
description: Give your thoughts and for a young man.
tags: career, help, discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kb070egqy37d9zlmud2d.jpg
---
Hi, Give your thoughts for an young man:

 Over the past months I got slowly involved in a huge project...and as the time pass, I'm getting more and more stressed(seriously) with daily work(for number of reasons).
 I was pretty happy before, the kind of person that smiles at monday 8am, but now, I wake-up already stressed, thinking about another day of work 😟.
 I love my career, but I'm getting sad as each day passes, feeling that a I can't handle this current situation anymore for healthy reasons.

 I was wondering if anyone have faced a similar situation and if has something to say about it,
let's talk 😶

- 

**Update**:
Hey all, it's been a while since this post, so let me tell you what happen:

I thought for about one week and decide to left my job, Was a hard but necessary decision, I had to work for one more month before I leave...

I took a time to relax and think about what I really wanted...After that I start to looking for remote work and found a very nice company, we did a few interviews and it's been two weeks since I've started, so far, I'm super happy and excited!

For those who are in similar situation: take a time to yourself and think what you really want, ask yourself if you happy...And if anyone wants to have a conversation, hit with a message.
I wondered how async module works, so I made some functions and hosted on npm
Tags: javascript, node, async
Published: 2018-08-24 08:54:26

---
title: I wondered how async module works, so I made some functions and hosted on npm
published: true
description: This is a small library to implement async collections/control-flow functions
tags: javascript,node.js,async
---

Since I have been in node.js development, I used caolan's async module very often. They provide best collections to boost productivity in development for APIs.

One day I was like wondering on my desk that how this `async.auto()` or `async.parallel()` works so flawlessly. Also I was curious and wanted to know how would be picture behind this like function compositions, callback implementation and handling iteration for series control flow.

I started trying to implement few of them, though didn't accomplished more sophisticated approach like caolan's. I did refactoring and maintained only few of them and limited to mainstream/common control flow methods.

Tested all of it, though need more use cases to find issues but still it's working when I made it out of a litte sandbox.

Motivation - Curious about async and wanted to take out more from beautiful callbacks.
Github - https://github.com/meetzaveri/elite-set-of-async-utilities 
 NPM - https://www.npmjs.com/package/vanilla-async

Feedback appreciated much more !
A One-Webpage, Printable Resume
Tags: css, html, git
Published: 2018-09-01 19:59:06

---
title: A One-Webpage, Printable Resume
published: true
tags: css,html,git
canonical_url: http://www.gonsie.com/blorg/cthulu-resume.html
---

I’ve had my resume as single, printable webpage for over 5 years ([initial git commit](https://github.com/gonsie/gonsie.github.io/commit/c3b13b29035b6692d324b36d9e42ebf0db780361) in 2012). Since all of the styling and content is self contained, it is very easy to used.

I’ve made a template of the resume available [on GitHub](https://github.com/gonsie/Cthulu-Resume). It is based on [this one page CSS tricks resume](https://css-tricks.com/one-page-resume-site/) which was originally developed by [Chris Coyier](http://github.com/chriscoyier).

## Why HTML and CSS

I’m a firm believer in the separation of style and content. Here, resume content is separated from the style that is applied (as with all well-structured HTML and CSS pages). While I do think that GUI tools are more useful for viusal design, CSS does allow the expression of visual design through programatic means. Unlike LaTeX, which hides much of the fine-grained layout control, CSS is a fully featured layout controller. Even better, it understands the difference of the media by which the content is presented, allowing this resume template to take advantage of non-printing items.

One basic improvement for this project would be to refactor the CSS and abstract some concepts. This would make it easier to change the fonts and overall proportions (rather than messing with strict pixel values).

## Usefullness in Teaching Git

I use the template as an easy way to teach git to students. After a basic introduction to git concepts and command, I have the students fork the template repo and create resumes of their own. Each student can add as litte or as much information, and they can play around with the HTML formatting. Indeed, this has the added bonus of getting them on GitHub and using GitHub pages.
Name your favorite jargon for internet or developer-related phenomena
Tags: discuss, jargon, developers
Published: 2018-08-24 23:09:26

---
title: Name your favorite jargon for internet or developer-related phenomena
published: true
description: Did you hear about Gatekeeping or Bikeshedding? Share with us your favorite jargon words.
tags: [discuss, jargon, developers] 
---


I have two examples on my mind

## Gatekeeping

> When someone takes it upon themselves to decide who does or does not have access or rights to a community or identity.
> -- urbandictionary

It relates to me when people start to judge newcomers in the programming, like "Are you dumb, you don't know what monadic tensor is? Duh...".

## Bikeshedding

> Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bicycle shed while the house is not finished.
> -- urbandictionary

Especially it relates to me when people start to argue about semicolon in the JavaScript. It doesn't matter just use Prettier.

Share your's.
Demystifying `devDependencies` and `dependencies`
Tags: webdev, opensource, npm, node
Published: 2018-08-24 22:12:11

---
title: Demystifying `devDependencies` and `dependencies`
published: true
description: Don't take my word for it. Maybe you should. But there is a big difference between devDependencies and dependencies.
cover_image: https://user-images.githubusercontent.com/182661/44610213-338ddb80-a7c9-11e8-9a66-d4d376f3fa0b.jpg
tags: webdev, opensource, npm, node
---

If you aren't familiar, `devDependencies` and `dependencies` are two properties that are added to `package.json` when a package is installed as a development dependency or a production dependency, respectively.

In the npm ecosystem packages are installed and consumed by requiring or importing them in files, or run in the command-line as binaries. When an application is fed into a module bundler, like Webpack or Rollup, all required dependencies are pulled together and bundled (as the name suggests). You should ensure that these packages are present in `dependencies`, as they're needed at runtime.

Development dependencies, or `devDependencies` are packages that are consumed by requiring them in files or run as binaries, during the development phase. These are packages that are only necessary during development and not necessary for the production build. Some examples of packages that would only be required during development are babel plugins and presets, test runners and linter packages.

Alternatively, there is a dependency that is necessary in both production and development. In this case, it can be added to `dependencies`, since `dependencies` are available in both production and development.

I hope this explanation helps with you in deciding whether to `--save-dev` or `--save` that package, next time.
I used to work with vessel tracking data. Ask Me Anything!
Tags: ama, maritime, ais, government
Published: 2018-08-24 20:18:57

---
title: I used to work with vessel tracking data. Ask Me Anything!
published: true
description: Ships send out automated messages to let each other know where they are.  I used to work on shore-side systems for streaming and archiving this data.  AMA!
tags: ama, maritime, ais, government
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xhklv3kjutiop08jzc0a.jpg
---

Ships, buoys, Search-and-Rescue (SAR) aircraft, and shore-side base stations send out automated messages to let each other know where they are.  Knowing where things are is useful when you want to avoid running into them :)  They do this over VHF frequencies using a [protocol called AIS](https://en.wikipedia.org/wiki/Automatic_identification_system).  It was based on a similar protocol used by airplaines, [called ADS-B](https://en.wikipedia.org/wiki/Automatic_dependent_surveillance_%E2%80%93_broadcast).

For about 7.5 years as a government contractor, I worked on shore-side systems for streaming and hosting this data.  This also involved web apps for querying and analyzing the data, monitoring the health of the system itself, and providing certain users the ability to broadcast text messages to vessels.

Ask me anything!

*Cover image: Painting of the 5-passenger Ever Charming in the Elbe River near Hamburg, by Heinz G Klug.  [Source](https://thecruisepeople.wordpress.com/2012/09/17/once-only-cargo-passenger-voyage-from-north-europe-to-los-angeles-via-suez-in-nsb-freighter-cruises-ever-charming/).*
Do we live near each other?
Tags: discuss
Published: 2018-08-24 18:43:22

---
title: Do we live near each other? 
published: true
description: Do you have developers who live near you, that you interact with on here? Let's find out.
tags: discuss
cover_image: https://i1.wp.com/www.wornthrough.com/blog/wp-content/uploads/2012/10/jam_home.png
---
 So I'm curious if any of us live near each other. It would be cool to see if we do.

I'm always interested in meeting new people with similar interested not just online, but in person. Let's grab a coffee or lunch, and talk code!

Add your city/state/country in the comments and lets sync up!


Phoenix AZ, usa.
Integrate Custom Elements into React app
Tags: javascript, react, customelements, webdev
Published: 2018-08-24 17:33:17

---
title: Integrate Custom Elements into React app
published: true
description: Web Components in React with support in all popular browsers, including IE 11
tags: javascript, react, CustomElements, WebDevelopment
---

*Web Components in React with support in all popular browsers, including IE 11*

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/h5n8ys1mfoy2ktvkv579.jpeg)

If you are interested in Custom Elements, check this out.


https://codeburst.io/integrate-custom-elements-into-react-app-ef38eba12905

Integration example is here.

{% github shystruk/create-react-redux-app-structure %}

If you have some experience working with Custom Elements I will appreciate your thoughts and feedbacks 👍
Golang & Angular Series - Part 2: Developing and Securing Angular Apps
Tags: go, angular, javascript
Published: 2018-08-24 17:03:04

---
title: Golang & Angular Series - Part 2: Developing and Securing Angular Apps
published: true
description: A series that will show you how to develop modern applications with Golang and Angular.
tags: #golang #angular #javascript
canonical_url: https://auth0.com/blog/developing-golang-and-angular-apps-part-2-angular-front-end/
---

In this series, you will learn how to build modern applications with Golang and Angular. In [Part 1 - The Backend - Developing and Securing Golang APIs](https://auth0.com/blog/developing-golang-and-angular-apps-part-1-backend-api/), you learned how to build a secure backend API with Golang to support a to-do list application. Now, in the second part, you will use Angular to develop the front-end of the to-do list app. 

[Read on 🚀](https://auth0.com/blog/developing-golang-and-angular-apps-part-2-angular-front-end/?utm_source=dev&utm_medium=sc&utm_campaign=stack_golang_angular)

![Golang & Angular Series - Part 2: Developing and Securing Angular Apps](https://thepracticaldev.s3.amazonaws.com/i/n6a7hcksgcla1yh8d55j.png)