teleren/devto huggingface dataset:
React Datepicker - Calendar, DatePicker, TimerPicker( High Customziable, Reusable)
Tags: react, moment, datepicker, timepicker
Published: 2019-02-23 06:52:16

---
title: React Datepicker - Calendar, DatePicker, TimerPicker( High Customziable, Reusable)
published: true
description: React Datepicker Component
tags: 
 - React
 - moment
 - Datepicker
 - Timepicker
---

Hi, guys
i made a first npm moudle while ago
 
React Datepicker
https://github.com/y0c/react-datepicker
Feature
  • RangeDatePicker 
  • TimePicker  
  • DatePicker 
  • Customize Theme 
  • interalization 
 
i would appreciate your feadback or star
The easier blogging system.
Tags: beginners, github, blogging
Published: 2019-02-23 05:30:42


If you need [less](https://itsjzt.github.io/blog/embracing-less) blogging system that don't focus on features that can increase your readership but let you to focus on writing posts intsead of handling configs.

[Github Pages] is just that, make a repo named `<your-github-username>.github.io` and enable github pages in setting and you're good  to go. Write your post in markdown and it will just shown them in their sane markdown styles.

If You don't want to even setup your own git repo but write some posts occasionally [dev.to](https://twitter.com/bendhalpern/status/1097997291158290432) might be the place.

You can read more about how to setup [github pages](https://pages.github.com/)
ELI5: Why use a function declaration, expression, or an IIFE in JavaScript?
Tags: javascript, explainlikeimfive, help, requestforpost
Published: 2019-02-23 05:10:10

---
title: ELI5: Why use a function declaration, expression, or an IIFE in JavaScript?
published: true
description: 
tags: #javascript,#explainlikeimfive,#help,#requestforpost
---

I have seen functions in JavaScript declared in different ways. I have been trying to look up why, but answers that I have found only seem to state the difference between them but not the advantages of each.

**My question for DEV users is _why_ use one style over the other?** What are the benefits over a classic function declaration? What are some code examples that show this?

Consider the examples below.

## Function Declaration
To me, this is the "standard" way to define a function.

My understanding is that a function declaration is hoisted, so it can be called before the function is defined. I expect a function to behave that way, so this is my preferred way to create a function.
```
function calculateAverage() {
  ...
}
```

## Function Expression
A function expression assigns the function to a variable.

My understanding of a function expression is that it will not be hoisted so it can only be executed after it is defined, but I'm unsure of why that would be useful.
```
const calculateAverage1 = function calculateAverage() {
  ...
}
```

I have also seen this done with an arrow function.
```
const calculateAverage1 = () => {
  ...
}
```

## Immediately Invoked Function Expression (IIFE)
An IIFE will run as soon as it is defined.

This one, I'm not too sure on. Why put that code in a function? It allows the creation of a scope, but I'm not sure when that would be useful.
```
(function () {
    ...
})();
```

Thanks!
fitPlant needs contributors
Tags: opensource, ios, swift
Published: 2019-02-22 23:33:24

---
title: fitPlant needs contributors
published: true
description: A fitness app where you are able to grow artificial plants and track your exercise progress in a simple and fun way. 

tags: open source, ios, swift
---

![fitPlant Overview](https://thepracticaldev.s3.amazonaws.com/i/osgdqskucg0oui8dk6s7.png)

My name is Kris and I had an awesome idea that I would love to come true. My idea is an app where you can track your workouts and have fun with that.

You will add your workouts to your app and based on your workout activity you will grow a plant. Once your plant is fully grown you will be able to grow other plants and place them all inside your artificial garden. This concept is inspired by [Forest](https://www.forestapp.cc/).

This should keep people motivated to work out and to log their workouts since they want to have a beautiful garden and obviously get all the health benefits by working out.

There is a lot of things to be done still and we need developers and designers to make this awesome idea come true.

If you want to contribute to this open source app and get creative then go check out the [GitHub page](https://github.com/KrisKodira/fitPlant) for this app.
Incognito mode in chrome
Tags: productivity, chrome, tip, privacy
Published: 2019-02-22 16:10:54

The least we can to do when browsing using chrome is use incognito mode. So here is way to always open chrome in incognito mode use this argument for the application shortcut.

`--incognito`

Open the properties of application shortcut and change as below

![](https://thepracticaldev.s3.amazonaws.com/i/y88s30ivz1oe930rb1u3.PNG)

Here is what incognito mode does and what most people think is just the opposite. So incognito just makes sure that data like the history and the cookie are deleted when you close that window. It does not hide what you are browsing from the ISP or the software's that is  running in your OS like the key logger or the antivirus etc.,

Happy browsing! Somewhat incognito 👽😜

-Photo by Braydon Anderson on Unsplash
You may need Laziness in your Javascript
Tags: javascript, enumerable, iteration, node
Published: 2020-06-25 22:34:22

---
title: You may need Laziness in your Javascript
published: true
date: 2019-02-22 22:47:31 UTC
tags: javascript,enumerable,iteration,nodejs
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/1240/1*y1iHc6IWc-ZjNVQgvTLCxQ.jpeg)](https://itnext.io/you-may-need-laziness-in-your-javascript-f03e8a2d4629?source=rss-ea85e17e7579------2)

Maybe some times you have overused the Array methods map, reduce, filter, find, etc. and that could make out applications to use more…

[Continue reading on ITNEXT »](https://itnext.io/you-may-need-laziness-in-your-javascript-f03e8a2d4629?source=rss-ea85e17e7579------2)
How Agile Teams Grow Toxic! Episode 2 | Hiring Talent
Tags: agile, personal, career
Published: 2019-02-22 21:34:02

---
title: How Agile Teams Grow Toxic! Episode 2 | Hiring Talent
published: true
description: How do you handle interviewing at a company that may be hiding its values?
tags: #agile #personal #career
---

Thinking of joining a software team and wondering what you're getting yourself into?

I spoke in [my last video](https://www.youtube.com/watch?v=Bg-RepBrzOE&t=0s&list=PL32pD389V8xtck2HrQfWn13bW0vWThiqK&index=2) about how the motivating core value of the founders of the company you're joining impacts culture.

So how do you handle interviewing at a company that may be hiding its values?

We're going to look mostly today at a concept called "mirroring" from the psychology community.

Essentially this is the phenomenon where people like someone who reflects their values and attitude back at them.

Because companies will tend to hire people who do a better job mirroring their values and approach to work, the pressure is high to cast yourself differently during the interview than your core beliefs.

Visit my YouTube channel to watch the entire 25 minute video.

# [📺 Watch the full video on YouTube](https://www.youtube.com/watch?v=tP3lmm8FX08&t=0s&list=PL32pD389V8xtck2HrQfWn13bW0vWThiqK&index=3)

Or listen as a podcast:
[🎧 Soundcloud](https://soundcloud.com/jayme-edwards-media/how-agile-teams-grow-toxic-ep-2-hiring-talent)

Related videos:
* [📺 Software Project Stories](https://bit.ly/2XdlZGy)
* [📺 How Agile Teams Grow Toxic! Ep 1. Founder Values](https://bit.ly/2VcC1i6)
* [📺 What REALLY Gets Software Developers Promoted?](https://bit.ly/2IvVQzm)
* [📺 Creative Software Development - Explosive Growth By Letting Go](https://bit.ly/2IDlgeK)
* [📺 The Secret Of Scrum Nobody Talks About](https://bit.ly/2E30krX)<hr />[🔔 Subscribe for over 100 videos on healthy software development](https://YouTube.com/c/JaymeEdwardsmedia?sub_confirmation=1)
How to iterate over objects using array methods
Tags: beginners, javascript, webdev
Published: 2019-02-22 21:16:01

---
title: How to iterate over objects using array methods
published: true
description: Use array methods to iterate over objects
tags: #beginner #javascript #webdev
---

Arrays are so freaking handy!  They are a great way to store data and they have some really amazing “array methods” like `.forEach()` and `.map()` (and more) that allow us to easily iterate over an array. Sweet!

```javascript
const sampleArray = [“I”, “love”, “technology”];

sampleArray.forEach( (word) => {
	console.log(word);
});
 
// I
// love
// technology
```

Objects are super too, in my humble opinion. With key/value pairs we only need a key name and we can get the associated value.

```javascript
const sampleObject = {
 	word1: "Always",
	word2: "and",
	word3: "forever"
};

// We can use either dot- or bracket-notation to access values:

console.log(sampleObject.word1);    // Always

console.log(sampleObject['word3']);    // Forever
```

Boom!

What seems *less* awesome, though, is that array methods like `.forEach()`, `.map()`, etc… don’t work on objects.  Noooooo! 

[Insert sad-face here]

But don’t despair!  There *is* a way to use array methods to easily iterate over objects, using the `Object.keys()` method.  Let me explain:

**What's Object.keys( ), you say?**

`Object.keys()` is a [built in Javascript method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) that takes any object as a parameter, and returns an array of that object’s keys.

For example:
```javascript
console.log(Object.keys(sampleObject));

//  [“word1”, “word2”, “word3”] 
```

Right on!

So as a workaround, we can use the returned array of keys to iterate over our object using an array method such as `.forEach()`. Sick!

Let me show you:

```javascript
// here we now have an array of sampleObject’s keys
const arrayOfKeys = Object.keys(sampleObject);  

// we can use the key to call up each piece of Object data 
arrayOfKeys.forEach( key => console.log( sampleObject[key] ); 

// Always
// and
// forever
```

WHAAAAAT?!  Beautiful!  \*wipes away a single tear\*

Now you know how to easily iterate over an Object using at least one array method. Please use your new powers responsibly!

![I love technology](https://media.giphy.com/media/116wwYf3ajIvrG/giphy.gif)


- For more information on array methods see the [MDN webdocs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype#Methods).

- To learn about some of the best array methods out there, check out [this handy article](https://dev.to/frugencefidel/10-javascript-array-methods-you-should-know-4lk3).

Many thanks to Wes Bos for pointing this out in his [React for Beginners course](https://reactforbeginners.com/). It's a really great course.
Hamcrest - make your test assertion more declarative
Tags: hamcrest, assert, assertthat
Published: 2019-02-22 05:15:45

---
title: Hamcrest - make your test assertion more declarative
published: true
description: How to make your tests more readable with Hamcrest assertion library
tags: hamcrest, assert, assertThat
---
[Hamcrest](http://hamcrest.org/) framework was first introduced in Java world, later implemented in other languages (ex. PHP, Python, Ruby) with some exceptions depending on language scopes. It provides a wide range of [matcher](https://github.com/hamcrest/hamcrest-php#available-matchers) objects which make test assertion more meaningful and easier to understand.

I am going to use Hamcrest's [PHP](https://github.com/hamcrest/hamcrest-php) implementation.

Here is a starter example.

#### Installation
Hamcrest-php can be installed using [composer](https://packagist.org/?query=hamcrest-php)
 
```php
// first thing first, install hamcrest-php and include it, your vendor location may vary.

require __DIR__ . '/vendor/autoload.php';
```
#### Quick use case - `assertThat`
Here is a simple example of `assertThat` matcher.

```php
$result = true;
$expected = true;

assertThat($result, equalTo($expected));
```

#### Give a nice optional description
You can give it a nice description about the assertion.

```php
assertThat("Result should be true", $result, equalTo($expected));
```

#### Add a decorator/sugar - `is`
Hamcrest also provides `is` decorator/sugar to make it super declarative!

```php
assertThat("Result should be true", $result, is(equalTo($expected)));
```

#### Asserting negation - `not`
Sometimes we need to test negativity, hamcrest cover this with `not` matcher.

```php
$expected = true;
assertThat("Result should not be false", $result, is(not(equalTo($expected))));
```

When it fails the assertion it shows error message like this
```php
Hamcrest\AssertionError with message 'Result should be true
Expected: <false>
     but: was <true>'
```

Feel free to checkout other [matchers](https://github.com/hamcrest/hamcrest-php#available-matchers) or hamcrest in other supported languages!
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-02-22 18:58:52

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

It's Friday!!!!

Looking back on the week, what was something you're proud of?

All wins count -- big or small!

Examples of 'wins' include:

- Getting to all your meetings on time
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄 🎉
Listen to the god damn warnings.
Tags: python, elasticsearch, django
Published: 2019-02-22 17:44:41

---
title: Listen to the god damn warnings.
published: true
description: Save yourself some time.
tags: Python, Elasticsearch, Django
---

(Most) Developers are not silly people, they know what they are doing. So when you (I) are using an open source project and there's a warning that appears, listen to it.

A couple of weeks back I was trying to integrate Elasticsearch into a Django project of mine. Setting up on my local machine was fine as I was using `django-elasticsearch-dsl` which does all the heavy lifting for you.

Deploying onto my server was a different story...

I had 800,000 objects that I wanted to keep in sync with Django and Elasticsearch, locally this was fine but on my AWS t3.medium server it wouldn't work.

Firstly, the server would become unresponsive when trying to sync - too much RAM usage so I used the `queryset_pagination` argument to paginate my objects for syncing (Instead of syncing all the objects in one go, it would sync them in bunches).

🎉It's syncing!


30 minutes pass and it's time to check and guess what? There are only around 400,000 objects. Only half of the objects synced! This didn't happen on my local machine which had a copy of the same database, how could this be happening?

Next, I thought Elasticsearch was using up too much RAM and so I separated Django and Elasticsearch onto different servers.

⏳Time to sync again.

500,000 - An extra 100,000 objects but not the 800,000 that I needed. This time I spent more time than I care to admit rummaging through documentation, GitHub issues and source code trying to understand how everything worked.

I tried out different people's forks of `django-elasticsearch-dsl` but even that didn't help.

and then I saw it...

`Pagination may yield inconsistent results with an unordered object_list`

This was a warning message that was constantly being displayed as I was syncing but for *some* reason I ignored it. 

Put simply, the `queryset_pagination` argument which was helping me save RAM (and was required to sync on the server) was the issue. `django-elasticsearch-dsl` was putting all of the objects into bunches to be synced *but* there was no order, so some objects were being synced more than once and some were being ignored.

All I had to do was fork the repo and add one line of code: `.order_by("id")`

Finally, all was good in the world again 🎈
So you hate those whiteboard interviews, huh?
Tags: whiteboard, interview, programming, jobs
Published: 2019-02-22 17:10:39

---
title: So you hate those whiteboard interviews, huh?
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dj0t18o4hoztuc8yhsot.jpg 
published: true
description: Canditates for programming 
tags: #whiteboard #interview #programming #jobs
---
A lot of people have started to learn to code. If you got to social networks hashtags related to coding are a rising trend. The site Hackernoon even has an [article on the subject](https://hackernoon.com/is-learning-to-code-what-everybody-will-do-in-2019-daf751c03981).
The catch here is that everyone can learn to code, but that doesn't necessarily make them a good or even proper developer.
A lot of programmers on the market are able to build stuff with some cookbook recipes and then surf the Web (i.e. Stackoverflow) until it's no longer a broken piece of software.
Employers need to assess if you're the real deal or not. So you can prove your worth with decent activity on an open source side project, past project experience where your old boss can recommend your work, being a certified professional. But maybe you don't have the time (or luck) to have none of these things.
When all else fails, accept the challenge and show them what you've got. Think of it as public speaking mixed with a training session where you are the trainer.
If you think anyone can learn something, than you have to stand out from the rest.
#Knowing how to move the pieces of a chess game doesn't make you a good player.#
Triggering shake animations in react-pose
Tags: javascript, react, pose, animation
Published: 2019-02-22 16:55:15

---
title: Triggering shake animations in react-pose
published: true
description: How to trigger a stateless shake animation using react-pose
tags: javascript,react,pose,animation
---

<img src="https://media.giphy.com/media/x2cXeTHrzvlYc/giphy.gif" title="But shakin' it's all I know!" alt="Shakin' it" />

I couldn't find a good how-to for this so thought I'd write one. I'm working on a game and [react-pose](https://popmotion.io/pose/) has been awesome for creating smooth animations between different component states. But what if I want to animate a component that isn't changing state?

[Vanilla pose](https://popmotion.io/pose/api/dom-pose/) supports this [natively](https://popmotion.io/pose/api/dom-pose/#poser-usage-animate), as this aligns closely with the way it's architected: `poser.set('nameOfPose')`. On the flipside, `react-pose` is built around transitioning between _states_, e.g. `left` or `right`. So how do I trigger this animation without changing its state or position?

The answer lies in a few key fundamentals:

### 1. [applyAtStart/applyAtEnd](https://popmotion.io/pose/api/react-config/#config-options-poses-applyatstart/applyatend)

> `applyAtStart` and `applyAtEnd` accept style properties to apply either at the start or end of an animation.

Provides an internal memory for the pose allowing for temporary movement. In the case of this `shake` animation, this lets us move the element from its initial `x` position to start the animation then return it to that same position afterward.

### 2. [poseKey](https://popmotion.io/pose/api/posed/#posed-props-posekey)

> If `poseKey` changes, it’ll force the posed component to transition to the current pose, even if it hasn’t changed.

The trigger needed to fire the animation; it can be any state variable as long as it's updated when you want the animation to occur.

### 3. [spring](https://popmotion.io/pose/api/react-config/#config-options-poses-transition-transition-definitions-spring)

The transition that does the actual shaking: once moved from its resting position the spring [oscillates](https://en.wikipedia.org/wiki/Simple_harmonic_motion) back and forth.

Putting all of this together:

{% codesandbox 2zk9onk7wy %}

On each button click the `guesses` count will decrement, triggering the `poseKey` update to force the `shake` pose (even though it's already in that pose). This shifts it to the left and back, but due to the spring it will shake a bit before coming to a stop.

And there you have it! Hopefully someone may find this useful rather than digging through the docs a bit. Stay tuned for the game I'm making that will be using this!
We need to integrate a chat solution in our app. What do you recommend?
Tags: chat, help, discuss
Published: 2019-02-22 15:27:54

---
title: We need to integrate a chat solution in our app. What do you recommend?
published: true
description: We're looking for a chat solution for our app
tags: chat, help, discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2qxnh3qeyq95deokvzfw.jpg
---

We are looking for a chat solution for our app. We are currently evaluating the following products:

* [Chat SDK](https://chatsdk.co/)
* [Twilio Chat](https://www.twilio.com/chat)
* [Sendbird](https://sendbird.com/)
* [Chatkit](https://pusher.com/chatkit)

Do you have any experience with these frameworks that you can share with us? Would you recommend any others? I'll be extending this post with our experience and findings

**Update**

If you want to know how the story ended up take a look at this post {% link https://dev.to/playtomic/playtomic-s-chat-solution-with-firebase-realtime-db-e8p %}

---

Cover image by [Miguel Á. Padriñán](https://www.pexels.com/@padrinan?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from [Pexels](https://www.pexels.com/photo/two-white-message-balloons-1111368/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)
Starting with a new cloud platform GCP
Tags: cloud, architecture
Published: 2019-02-22 13:55:35

---
title: Starting with a new cloud platform GCP
published: true
tags: cloud,architecture
---
I started learning GCP after spending 4+ years with AWS.
The main constructs of the cloud or any infrastructure are always going to be the same. What's important is to understand the differences which allow you to build something more powerful in an easier way than what you have achieved on the earlier cloud. I was glad to have found this course - [Google Cloud Platform Fundamentals for AWS Professionals](https://www.coursera.org/learn/gcp-fundamentals-aws)

It gives a comparison of Google Cloud capabilities and makes it super easy to understand for someone who has knowledge of AWS's terminology and concepts.

In fact, such a course also helps in strengthening your AWS understanding. Now you are able to get a new perspective of the cloud that you know. It also talks about portability solution. 

Cloud has proliferated so much that most of us have had some form of cloud experience. With Gen Y, they know cloud from very early on with their pictures, messages, documents and even college assignments stored there!

Every major cloud provider should have a starter documentation for developers who have some cloud experience.

After this course, I was able to continue hands on with additional GCP courses and POCs in qwiklabs.

Quick tips:
1. Make your own notes for every course/tutorial you study
2. Hands On: Don't skip the hands-on exercises assuming you know
3. Visit the course again after 2 weeks after skimming through your notes
4. Refer the main documentaion of GCP/AWS for latest version and details where needed
5. Plan a exercise/small solution to develop once the course is complete