teleren/devto huggingface dataset:
JS Proxies
Tags: javascript, proxies
Published: 2019-03-12 13:12:22

---
title: JS Proxies
published: true
description: Example use case for js proxies
tags: javascript,proxies
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gfjkwr31muewf3gy6fx5.png
---

# You might be using proxies without knowing it

If you write an application in Vuejs or from what I can tell, React was using proxies before.  Proxies are like giving your objects (only objects) super powers.  Let me describe what you can do with an example.

# Dyn

In a previous post, I talk about [my take on dynamodb](https://dev.to/kyleparisi/my-take-on-dynamodb-3nc4).

> Every time I look at the Dynamodb SDK docs, I think 'man this is an over engineered hot mess'.

The API is not intuitive and requires googling every time.  Every operation requires a js object to be sent to Dynamodb's API.  It made me wonder if I could mask the js object with a js proxy.  I think it provides for a cleaner and more memorable interface.  The idea started with a single signature.

```
create[table] = {}
```

Could I create a dynamodb record with that as simple interface?


```js
const create = new Proxy(
  {},
  {
    get: function(target, name) {
      return target[name];
    },
    set: function(obj, prop, value) {
      const params = {
        TableName: prop,
        Item: value
      };
      obj.promise = docClient.put(params).promise();
    }
  }
);
```

Hopefully you can see the above generates the parameters required for dynamodb's docClient (so I don't have to look them up).  It also stores the promise in the object (`create.promise`) if you need to know when it's done creating the object.

It worked.  So I made more operations into a library I called, Dyn:

{% github kyleparisi/dyn %}

# Gotchas

Proxies are very cool but there are 2 things that caught me off guard.  Firstly, the root object gives you nothing.  In the above example I can't proxy the `create` key to anything.  Secondly, you can't nest properties as a single proxy definition.

![Proxy design](https://thepracticaldev.s3.amazonaws.com/i/tuoxz83gnwdaoxn9s09u.png)
Not displayed Cdr.co icon in my Coder IDE. Why is this?
Tags: help
Published: 2019-03-12 13:49:51

---
title: Not displayed Cdr.co icon in my Coder IDE. Why is this?
published: true
description: 
tags: #help
---
I want develop web application with Coder.
But, my workspace not displayed Cdr.co icon.
Why is this?

 ![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/6mopo2urbtvlx0tf278e.png)

https://coder.com/docs/cdr

By the way, I created an account with github authentication.
Probably a free plan. (I did not know how to check my current plan.)
Synchronize SQL database time stamps?
Published: 2019-03-12 13:30:47

---
title: Synchronize SQL database time stamps?
published: true
description: 
tags: 
---

Hi All,

I've got several SQL databases from machines logging sunlight data that I'd like to synchronize for solar power studies.  One example is:

mysql> select ComputerTime, Pac, IntSolIrr from SMA where ComputerTime >= (unix_timestamp(now())-(60*10)) order by ComputerTime;
+--------------+------+-----------+
| ComputerTime | Pac  | IntSolIrr |
+--------------+------+-----------+
|   1552395307 | 3738 |       557 |
|   1552395366 | 3869 |       583 |
|   1552395425 | 3813 |       578 |
|   1552395487 | 3874 |       586 |
|   1552395546 | 3853 |       587 |
|   1552395607 | 3917 |       598 |
|   1552395666 | 3998 |       611 |
|   1552395728 | 4054 |       621 |
|   1552395785 | 4114 |       633 |
|   1552395846 | 4149 |       634 |
+--------------+------+-----------+
10 rows in set (0.84 sec)

While another nearby one is:

MariaDB [Weather]> select Epoch,WF$UDP$obs_sky$obs$SolarRadiation_Wpm2 from WeatherFlow where Epoch >= (unix_timestamp(now())-(60*10)) order by Epoch;
+------------+----------------------------------------+
| Epoch      | WF$UDP$obs_sky$obs$SolarRadiation_Wpm2 |
+------------+----------------------------------------+
| 1552395304 | 433                                    |
| 1552395364 | 433                                    |
| 1552395424 | 445                                    |
| 1552395484 | 442                                    |
| 1552395544 | 448                                    |
| 1552395604 | 450                                    |
| 1552395664 | 457                                    |
| 1552395724 | 467                                    |
| 1552395784 | 476                                    |
| 1552395844 | 483                                    |
+------------+----------------------------------------+
10 rows in set (0.82 sec)

As you can see, they are logging on one-minute intervals, but can be off from each other by a few seconds.  

Is there an easy way in SQL to get these measurements synchronized?  My brute force approach would probably be to look for the closest one-minute timestamp by subtracting and then ordering by delta and taking the last one, but for one-minute intervals over several year that's going to take a long time...  8*}

Alternately, I can read them into separate arrays and do the math outside SQL, but if there's an easy way to say "to the closest Epoch/60" or something, that might be easier...

Many thanks in advance for any pointers to real programming techniques as eventually I'll have a dozen or more datasets to sync up...
My team's git workflow
Tags: git, github, workflow, productivity
Published: 2019-03-12 05:59:19

---
title: My team's git workflow
published: true
description: describing the git workflow we follow on the frontend team at PayPal
tags: git, github, workflow, productivity
---

Most teams will have a git(or any source control) workflow that they follow. Detailing the workflow that we follow in my team at PayPal. We have a team of 8 engineers working on multiple apps at the same. Over time we have created this process detailed below:

### Development Process

1. We have 3 main branches `develop`, `release` and `master`.  All of them are protected such that no one can directly push commits to these branches. The code has to be added only through PR's.

![branches](https://thepracticaldev.s3.amazonaws.com/i/qszky26bugv5qr7a9vrs.png)

2. `develop` is our working branch and everyone creates a new branch from `develop` and then creates a PR to it once they are done. 
_On a side note, we follow the [commitizen](https://github.com/commitizen/cz-cli) of writing commit messages. This helps to automate changelogs._
3. We have a CI pipeline that runs the code against `tests`, `eslint` etc. Every PR is reviewed by a couple of engineers.
4. Once PR is approved and passed the CI its merged. We use the `Squash and Merge` option.
_We then `delete` the feature branch._
5. Once the PR is merged we build and deploy the code to a staging environment to be tested. This is where we can do manual testing and end to end testing.

### Release Process
We generally release at the end of every sprint(bi-weekly).
1. When testing is done, we will create a PR from the `develop` branch to the `release` branch. _We also tag this PR with a `release-candidate` tag. This helps to in case we need to go back and see what was exactly released in case of an issue._
2. On this PR, since we are using `commitizen` we generate the changelog using [standard-version](https://www.npmjs.com/package/standard-version). We keep all the changes over time within the `CHANGELOG.md`.
3. We then create a build and deploy. Sanity testing is one last time here.
4. Then we use the build to deploy to production.

### Patch Fixes
1. Development happens from the `develop` branch, in case we need to fix an issue a new branch is cut from `release`.
2. Changes are made, reviewed and tested. Then the PR is merged to `release`.
3. Then the build and deploy process takes place.
4. As a follow-up, we also merge the same code into `develop` to keep both branches in sync.

One thing to add here, everyone in the team has to write access to the main repo. They are free to fork the repo if they choose to. We prefer that all branches be pushed to the main repo so it's easy for anyone to contribute to an existing branch. Once any feature branch is merged, we `delete` it.

Hope this helps any other team looking to get a git workflow going. Curious to see what other teams/companies follow. :thumbsup:
The Well-Balanced Developer
Tags: career, programming, story, experience
Published: 2019-03-12 12:27:49

---
title: The Well-Balanced Developer
published: true
tags: career, programming, story, experience
---

Some developers are worth more than others. The bigger impact you can make on the organization, the higher is your worth. To make a significant impact on the organization, the developer must keep 5 essential skills in balance:

- Technical skills
- Mentoring skills
- Process Organization skills
- Business skills
- Communication skills

[Continue reading...](https://sizovs.net/2019/03/09/the-well-balanced-developer/)
Sass Media Basic
Tags: scss, sass, css
Published: 2019-03-12 12:21:31

---
title: Sass Media Basic
published: true
description: Sass scss Media Basic
tags: scss,sass,css
---

![](https://github.com/Alicannklc/sass-media-basic/raw/master/ezgif-2-df3a00336c.gif)


Key         | Value
----------- | -----------
xs-phone    |320px
phone       | 480px
tablet      | 768px
tablet-md   | 1024px
widescreen  | 1200px
widescreen-x| 1440px
widescreen-xl| 1920px


Min Width

```scss
 // min-width >=
  .row {
  width: 100%;
  height: 60px;
  position: relative;
  transition: all .2s ease-out;
  z-index: 8;
  @include media('>=Key') {
    margin: 0px;
    color: wheat;
  }
}
```

output Css
```css
.row {
  width: 100%;
  height: 60px;
  position: relative;
  transition: all .2s ease-out;
  z-index: 8; }
  @media (min-width: key) {
    .row {
      margin: 0px;
      color: wheat; }
       }
```
Max Width
```scss
// max-width <=
  .row {
  width: 100%;
  height: 60px;
  position: relative;
  transition: all .2s ease-out;
  z-index: 8;
  @include media('<=Key') {
    margin: 0px;
    color: wheat;
  }
}
```
output Css
```css
.row {
  width: 100%;
  height: 60px;
  position: relative;
  transition: all .2s ease-out;
  z-index: 8; }
  @media (max-width: key) {
    .row {
      margin: 0px;
      color: wheat; }
       }
```
Use
```scss
// Min >=
// Max <=
  @include media('>=Key or px')
```
[Github](https://github.com/Alicannklc/sass-media-basic)

[include-media](https://include-media.com/)
A Simple Script to Automate Instagram Unfollowing
Tags: python, selenium, automation, instagram
Published: 2019-03-12 12:01:09

---
title: A Simple Script to Automate Instagram Unfollowing 
published: true
description: A Python script designed to unfollow users who you follow but they don't follow you back. Works with Selenium, without using Instagram API.
tags: python, selenium, automation, instagram
---

Hello everyone. I have coded a simple Python script to automate Unfollowing process on Instagram. Please go to my project via following GitHub link;


{% github ozanyurtsever/instagram_unfollower %}


<h2>Instagram Unfollower</h2>
A Python script designed to unfollow users who you follow but they don't follow you back. Works with Selenium, without using Instagram API.

<h2>How to Use it ?</h2>
You will run the program with main.py file, just open the code and change the username and password variables with your account's infos. It's best to have InstaUnfollower.py and main.py in the same directories.

<h2>Requirements</h2>
Python 3.X on your device
Python version of Selenium should be installed ( pip install selenium )
Geckodriver should be installed ( https://github.com/mozilla/geckodriver/releases )
geckodriver executable file should have been added on the PATH ( adding it on the PATH differs according to your OS)
Firefox Browser should be installed.
DigiFutura Recognised as the Top AI Development Company by ManiFest
Tags: ai, appdevelopment, webdev, blockchain
Published: 2019-03-12 11:34:21

---
title: DigiFutura Recognised as the Top AI Development Company by ManiFest
published: true
description: Great artificial intelligence can diversify your company in a competitive market. As the world becomes increasingly digital, investing in an AI developer can help your business stand out from the rest. The Manifest a leading Business Guide which gathers and verify the hard data, expert insights, and actionable advice that need to build brand and grow business has mentioned DigiFutura, in the list of Top 100 Artificial Intelligence AI Developers

tags: Ai, App development, web development,blockchain
---
Build Angular 9|8|7 Nested Form using FormArray API with Reactive Forms
Tags: angular, angular987, formarrayapi, reactiveforms
Published: 2020-01-31 19:23:19

---
title: Build Angular 9|8|7 Nested Form using FormArray API with Reactive Forms
published: true
tags: Angular, Angular 9|8|7, FormArray API, Reactive Forms
canonical_url: https://www.positronx.io/build-nested-form-using-angular-7-formarray/
---

The post [Build Angular 7 Nested Form using FormArray API with Reactive Forms](https://www.positronx.io/build-nested-form-using-angular-7-formarray/) appeared first on [positronX.io](https://www.positronx.io).

Sometimes a user needs the additional form fields to insert the dynamic data. Angular 7’s FormArray API allows creating nested form fields.In this tutorial, we will learn about how to build the nested forms using Angular 7 FormArray API with Reactive Forms. If you are new to Reactive Forms, please refer to [Full Angular 7 Reactive Forms & Form Validation Tutorial](https://dev.to/singhdigamber/full-angular-7-reactive-forms--form-validation-tutorial-3d41-temp-slug-6554853).

#### Step by step Explanation

1. What is Nested Form in Angular?
2. Setting Up Reactive Form
3. Setting Up Nested Form layout using HTML & FormArrayName  
Directive
4. Angular Nested Form Demo

[Click here to read more](https://www.positronx.io/build-nested-form-using-angular-7-formarray/)
What will be the Output? | JavaScript
Tags: javascript, question
Published: 2019-03-12 11:00:51

---
title: What will be the Output? | JavaScript
published: true
description: JavaScript Question
tags: JavaScript, Question
cover_image: https://www.startuptalks.in/wp-content/uploads/2016/02/javscript-1.png
---

### I have a program and that is a little bit insane. 

This is the program and I wanted to know how many of you already know this concept.


```javascript

    var boy = {
            name:"Natasha",
            birthday : {
                date : 1,
                month : 'April',                    
            }	
        }

    var girl = { ...boy } ;  // copying object

    boy.name = 'Nitish' ;  
    boy.birthday.date = 31 ;
    boy.birthday.month = "December" ;

   console.log(boy) ;

   console.log(girl);  

```

These types of question are usually asked in the interview.


## `Comment you answer`

For more question like this follow me
Changing job - How often is too often?
Tags: discuss, career, beginners
Published: 2019-03-12 10:05:20

---
title: Changing job - How often is too often?
published: true
description: Is changing job frequently a problem or is it just the norm in this day and age?
tags: discuss, career, beginner
cover_image: https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_1280.jpg
---

Let me add some context to this post.

I will soon be starting my 4th role in the 4 years that I have been working as a Software Engineer. I believe that my reasons for leaving each position are valid and, so far, have not regretted any of the decisions that I have made. 

That being said, I am aware I have changed role much more often than anyone else I know. Taking that a step further, during a recent interview I was asked about why I have been in so many different roles during my short career. So it is obviously something that interviewers are picking up on.

On the other hand, after talking to various people I know in tech, they all say the same sort of things. All centering around "it's normal nowadays to change role quite frequently". But, what I ask how long they have been in their role. The answer is always 4+ years or even, that they have worked in a single role for their whole career.

That brings me to my questions.

- How often do you think is too often to be changing job?
- How often have you changed job and what effect do you think it has had on your career?
- If you have interviewed potential candidates who have changed role frequently, did it effect your perception of them, whether positive or negative?
- Finally does our perception of how we view jobs depend on our age?

Let me know your opinions in the comments!
This single image will explain to you why AI projects are much simpler than you thought
Tags: ai
Published: 2019-03-12 10:00:47

---
title: This single image will explain to you why AI projects are much simpler than you thought
published: true
description: AI projects are a pipeline of a few building blocks
tags: #AI
---

AI projects are a pipeline of a few Lego blocks. Take an image recognition project, for example. a massive amount of pixels is reduced by some classification model into a single label (this is a 'bus'). Then, some code base starts on that label, to produce some action in order. Then a
A simple react date picker component
Tags: todayilearned, react
Published: 2019-03-12 09:53:53

---
title: A simple react date picker component
published: true
description: A react date picker in about 100 lines of code
tags: #todayilearned, #react
canonical_url: https://ajsharp.com/a-simple-react-date-picker-component/
---

None of the existing react date picker components quite fit my requirements (mostly too bloated with too many dependencies), so I decided to see if I could quickly hack one together. This took a couple of hours, but should meet my needs. Most importantly, it's tiny (~100 LOC) and free of the complexity of many of the existing solutions.

{% codesandbox ypnwjron0z %}

* * *

*Cross-posted from [ajsharp.com/a-simple-react-date-picker-component/](https://ajsharp.com/a-simple-react-date-picker-component).*
Building context-aware NodeJS bots using Servo
Tags: ai, chatbots, node, javascript
Published: 2019-03-12 09:33:38

---
title: Building context-aware NodeJS bots using Servo
published: true
description: 
tags: AI, CHATBOTS, NODEJS, javascript
---


Hi all, check out the bot framework we wrote, called Servo:

And hey, please make sure you star it on Github... {% github https://github.com/servo-ai/servo-platform %}


For a short tutorial, go here:

https://medium.com/datadriveninvestor/building-context-aware-stateful-bots-using-servo-a2dc3f557469
Document legacy code with characterization tests
Tags: tests, documentation, legacycode
Published: 2019-04-07 13:02:18

---
title: Document legacy code with characterization tests
published: true
tags: tests, documentation, legacy code
canonical_url: http://crossplatform.io/document-legacy-code-with-characterization-tests/
---

We’ve been assigned work on legacy code. The maintainer is no longer around and we have no clue how the system should behave. What’s the safest way to go about it?

First we need to learn what the code we’re about to change does. After we make our changes, we compare the resulting state against the initial one to verify that we introduced only our intended changes.

We can get a snapshot of the initial system behaviour using characterization tests. Characterization tests help reverse engineer specifications and are a trustworthy source on system behaviour.

Here are the steps to adding a characterization test to a legacy codebase.

![🤷](https://s.w.org/images/core/emoji/11.2.0/72x72/1f937.png) **Formulate a hypothesis –** We choose a unit or behaviour we want to investigate and add a test to exercise it.

![🙅](https://s.w.org/images/core/emoji/11.2.0/72x72/1f645.png) **Assert it –** We purposely write a failing assertion and let the test output tell us what the correct output / behaviour is.

![🙋](https://s.w.org/images/core/emoji/11.2.0/72x72/1f64b.png) **Get a clear picture of the system –** The test retraces our steps and it’s replayable. Any future change we’ll make will be compared to this snapshot so we can be sure we did not introduce defects.

Characterization tests serve as documentation for other folks that need to interact with the code and minimise the time it take to share expertise.

They’re also entertaining to implement – the process is somewhat like detective work, where we investigate different hypotheses to understand what the code actually does.

Characterization tests are great to implement in legacy codebases from the first moments when we’re still learning about the code and they’ll provide value even later on because they sustain refactoring efforts without introducing defects.
VSCode Trick: Reset the Sidebar and Terminal Pane Size
Tags: vscode
Published: 2019-03-12 09:21:42

Have you ever resized sidebar and terminal like this?
![Imgur](http://i.imgur.com/1LG1xM9.png)

After that, you either did not care or tried to manually resize it back, right? But did you ever feel you forgot actual size or did not have the satisfaction?
![Imgur](https://i.imgur.com/OTAA2sU.gif)

**Just double click the borders of the pane you want to resize.**
![Imgur](https://i.imgur.com/ST3UCaD.gif)

Same applies to extension or any other activity, where you want to see the full contents.
![Imgur](https://i.imgur.com/bp1ECVY.gif)

That's it! It is now resized back to appropriate size based on the contents of the sidebar and viewport size. 

Peace!
Frontend kit gulpjs
Tags: bootstrap4, bulmacss, materializecss, semanticui
Published: 2019-03-12 09:10:18

---
title: Frontend kit gulpjs
published: true
description: Frontend kit gulpjs
tags: bootstrap4, bulma-css, materialize-css, semantic-ui

---


## Prerequisites
- You can get Node at [nodejs.org](https://nodejs.org), then install gulp using `npm install gulp-cli -g`

## Getting started
2. Clone this repo
3. Run `npm install`
4. Run `gulp watch`
5. Look at `index.html` 
6. Add any custom styles into `scss/main.scss`. 




# Frontend Kit Gulp

Bootstrap
[Bootstrap](https://github.com/Alicannklc/frontend-kit-gulp/releases/tag/Frontend-Kit-Bootstrap)
Bootstrap Document
[Bootstrap Document](https://getbootstrap.com/docs/4.1/getting-started/introduction/)

Bulma css
[Bulma](https://github.com/Alicannklc/frontend-kit-gulp/releases/tag/Frontend-Kit-Bulma)
Bulma css Document
[Bulma css Document](https://bulma.io/documentation/)

Materialize css
[Materialize](https://github.com/Alicannklc/frontend-kit-gulp/releases/tag/Frontend-Kit-materialize)
Materialize css Document
[Materialize css Document](https://semantic-ui.com/introduction/getting-started.html)

Semantic-ui
[Semantic-ui](https://github.com/Alicannklc/frontend-kit-gulp/releases/tag/Frontend-Kit-semantic-ui)
Semantic-ui Document
[Semantic-ui Document](https://semantic-ui.com/introduction/getting-started.html)

Milligram
[milligram](https://github.com/Alicannklc/frontend-kit-gulp/releases/tag/Frontend-Kit-milligram)
Milligram css Document
[Milligram Document](https://milligram.io/#getting-started)


Happy Coding
vue-instagram Basic feed
Tags: vueinstagram, instagramfeed
Published: 2019-03-12 08:42:04

---
title: vue-instagram Basic feed
published: true
description: vue-instagram Basic feed
tags: vue-instagram,instagram Feed
---

# vue-instagram

Fetch instagram feed via [`GET /users/self`]

## Demo

[Codepen](https://codepen.io/alicannklc/pen/oVLMqw)

## Installation

### Install via CDN
```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-instagram"></script>

<script>
  Vue.use(VueInstagram.default)
</script>
```

### Install via NPM
```sh
$ npm install vue-instagram --save
```


## Props
|Props|Description|Type|Required|
|-----|-----------|----|--------|
|token|Instagram's access token|String|true|
|count|Numbers of feed to fetch|Number|true
|tags|Filter profile's feed by hastag|Array|false
|mediaType|Filter profile's feed by media type: image or video|String|false



[Npmjs Url](https://www.npmjs.com/package/vue-instagram)