teleren/devto huggingface dataset:
Vanilla change detection with Proxies in Javascript
Tags: javascript, proxy, usetheplatform, webdev
Published: 2019-05-24 16:12:11

---
title: Vanilla change detection with Proxies in Javascript
published: true
description: Let's see how you can use Proxies to implement a quick and simple way to update a view based on changing state.
tags: #javascript, #proxy, #usetheplatform, #webdev
---

In a smaller project with just a little interactivity you may want to keep up with a bit of state. If you have worked with Redux, MobX, NGRX or any other state management library your first inclination may be to use what you are familiar with. Let's be cheap and look to the platform and see what tools we can use to get this done without a library.

## Proxies
Proxies are somewhat a new concept in Javascript. Proxies simply provide a way to enhance an object, some examples are listeners, dynamic properties and validation. Quick example.

```js

const person = { firstName: "Luke", lastName: "Skywalker" };


const personHandler = {
  set: function(obj, prop, value) {
   console.log(`${prop} changed from ${obj[prop]} to ${value}`);
   obj[prop] = value;
   return true;
  }
};


const personProxy = new Proxy(person, personHandler);

personProxy.firstName = "Not Luke";
// console.logs "firstName changed from Luke to Not Luke";

```

In just 10 lines of code we have implemented a simple proxy that logs the changes of an object. 

## One small step
Let's take this a step further. Say we want to keep up with a list of notes. These notes will need to be rendered on the page. We need a simple way to update the notes array and those changes be reflected to the page without thinking. If we think about it the data is the source of truth and the rendering is a side effect. That being said let's create a Proxy factory that will take in an object to observe and an array of functions to run when the object changes.

```js
export const observer = (obj, ...listeners) => {
  return new Proxy(obj, {
    set: function(obj, prop, value) {
      listeners.forEach(fn => fn({...obj, [prop]: value}, obj));
      obj[prop] = value;
      return true;
    }
  })
}

```

What is this :point_up:?
This is a factory function that will create proxies and run some functions when it changes. How do I use this?

```js
const notesObserver = observer(
 { notes: [{ text: "Do something." }] }, 
 renderNotes,
 logChanges
);

function renderNotes(notes) {
  // render notes here...
}

function logChanges(notes, oldNotes) {
  console.log(notes, oldNotes);
}
```

Below is a working example. As the web platform grows things will only get more exciting! Think of all the cool things that could be done with Proxies. Would love to hear thoughts and ideas!

Here is an example of the notes app working with Proxies.

{% stackblitz render-proxy view=preview %}
Who is hiring? (As of May 2019)
Tags: whoishiring
Published: 2019-05-24 16:01:49

---
title: Who is hiring? (As of May 2019)
published: true
description: Members of the dev.to community sharing open job opportunities at their companies.
tags: whoishiring
---

This is our monthly thread where community members share openings at their companies.

Here a few ground rules:

- Please only post if you are personally part of the hiring company (no recruiting firms)
- Please provide brief background on what your company does
- Only one post per company (you can list multiple openings in the post)

Consider using this template:

```
Company Name | Job Title | Location | Remote or Onsite | (optional) Salary Range | Sponsor visa?

About the company — background, size, etc (1-3 sentences)

About the role(s) — languages, requirements, etc (1-3 sentences)

Do you sponsor visas?

How to Apply — email or application link
```

---

We also wanted to share some quick careers-related notes from our fantastic Sustaining Sponsors.

### Digital Ocean

> At **DigitalOcean**, we're simplifying cloud infrastructure for developers. Here you'll get to work with some of the smartest and most interesting people around; solving unique and complex technical challenges on a scale matched by few companies. If you get excited about stretching yourself in new ways, developing yourself to your fullest potential, with amazingly supportive friends and colleagues; [we want to talk to you](https://www.digitalocean.com/company/careers/?utm_source=devto&utm_medium=display&utm_campaign=Devto_2018_Brand)!


### GoCD

> **GoCD** is a free and open source CI/CD tool by ThoughtWorks. You can model your complex workflows, deploy to popular cloud environments such as Kubernetes, and visualize your end-to-end workflows — [download and use for free](https://www.gocd.org/download/).  While we don't have any open positions, there are many ways to [contribute to the community](https://www.gocd.org/contribute/).

### Frontend Masters

> **[Frontend Masters](https://frontendmasters.com/?utm_source=devto&utm_medium=devtowebsite&utm_campaign=devtosponsor
)** is not currently hiring, but is a great way to ramp up your JavaScript, Node & front-end engineering skills for your next position!  [Check it out](https://frontendmasters.com/?utm_source=devto&utm_medium=devtowebsite&utm_campaign=devtosponsor
).
How to conditionally upload Lambda artifact to s3 with Terraform?
Tags: help, lambda, terraform, discuss
Published: 2019-05-24 15:44:57

---
title: How to conditionally upload Lambda artifact to s3 with Terraform?
published: true
tags: help, lambda, terraform, discuss
---

I have 2 projects on Gitlab. One with terraform to provision infrastructure, another with Lambda code. Lambda is configured to be deployed from S3 bucket.

In terraform I have a dummy zip file uploaded to s3. I had to give any ZIP otherwise Terraform complained during apply.

I use a separate project to keep Lambda code, which has separate build pipeline and deploy to the same s3 bucket. It should overwrite the dummy ZIP on deploy.

The problem is that whenever Terraform executes the real ZIP is overwritten with the dummy one again, so I need to deploy the real ZIP from another project again.

I don't want to keep function code together with Terraform project.
I also don't want my Terraform build to always trigger another project build (containing function source code), because most often Lambda does not change but other resources are modified in Terraform configuration.

I thought about having another Lambda triggered when ZIP is uploaded to S3 which would verify if it is a real or dummy one. 
In case of dummy one it would trigger another project deployment using Gitlab API.

Is there any easy solution to my problem?
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-05-24 15:12:43

---
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
---

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

Happy Friday!

![](https://media.giphy.com/media/26BRBxVOurb0jmlJ6/giphy.gif)
Bug: SQL Stored Procedure Returning -1 in Entity Framework
Tags: sql, storedprocedures, entityframework, bug
Published: 2019-05-24 14:59:39

---
title: Bug: SQL Stored Procedure Returning -1 in Entity Framework
published: true
description: I go into the details of a bug with Entity Framework that I had to tackle last week to get a SQL Stored Procedure working correctly.
tags: SQL, Stored Procedures, Entity Framework, Bug
---

Occasionally I like to write about bugs I've run into recently and how I went about solving them. Not only will this hopefully help someone else fix the same bug faster, it also solidifies the solution in my mind and gives me a point of reference if I ever come across it again. So without further adieu, let's take a look at this bug!

![Ladybug](https://media.mnn.com/assets/images/2017/05/lady-bug-on-leaf.jpg.653x0_q80_crop-smart.jpg)

Once connected, Visual Studio's Entity Framework typically makes the process of adding new Stored Procedures as simple as adding new tables to the model. Unfortunately, when a Stored Procedure is returning a [complex type](https://docs.microsoft.com/en-us/ef/ef6/modeling/designer/data-types/complex-types) such as a set of data from a dynamic query or temporary table, Entity Framework will only return metadata about columns in its result set and execute none of the logic. This is due to the <i>[SET FMTONLY ON](https://docs.microsoft.com/en-us/sql/t-sql/statements/set-fmtonly-transact-sql?view=sql-server-2017)</i> SQL command that Entity Framework uses before executing these special stored procedures in order to protect the data from potentially dangerous changes.

Fortunately once you are aware of this mechanism of data preservation, the fix found [here](https://stackoverflow.com/questions/32140774/getting-data-from-stored-procedure-with-entity-framework) from user  "gotmilk13531" is actually quite simple. Altering the Stored Procedure with <i>SET FMTONLY OFF;</i> directly after the ALTER PROCEDURE AS or BEGIN statement as shown below:

    ALTER     PROCEDURE [dbo].[se_GetSystemBOM_JF]
        @systemid int
    AS
    SET NOCOUNT ON
    SET FMTONLY OFF;

    IF EXISTS(
        SELECT * FROM tempdb.dbo.sysobjects o

or

    ALTER PROCEDURE dbo.SearchProducts
      @SearchTerm VARCHAR(max)
    AS
    BEGIN
        SET FMTONLY OFF;
        DECLARE @query VARCHAR(max)
        SET @query = 'SELECT * FROM dbo.Products WHERE Name LIKE ''%' + @SearchTerm + '%'''
        EXEC(@query)
    END

Once you've altered the Stored Procedure, load your database edmx and open the EF Model Browser. You must delete your Stored Procedure from within Complex Types, Function Imports, and Stored Procedures / Functions, then Save and I usually reload EF at this point. Next add your Stored Procedure to EF with the typical Update Model from Database method, then Save and close EF. Finally, be sure to go back and alter your Stored Procedure again to remove the <i>SET FMTONLY OFF;</i>.

---

I hope this quick fix helps someone else out of a similar sticky situation to mine, in a little less time than it took me to resolve it! Thanks for reading and I'll see you all next week.
The Goldilocks Problem: Project Sizes
Tags: discuss, help
Published: 2019-05-24 14:49:07

---
title: The Goldilocks Problem: Project Sizes
published: true
description: How big should your projects be?
tags: discuss, help
---


As someone who is trying to get a job, I'm constantly thinking of little apps I could make to enhance my skills and my portfolio. Because of this, I also try and weed out ideas that are too "big". They're something I want to do, and to accomplish someday, but I'm not sure if it's worthwhile to do so early in my journey. The other problem, is that I've started to run out of "small" projects. I find myself doing somewhat of the same things, and don't feel that they are noteworthy enough make posts on so I feel like I'm stagnating.

I can't find that "just right" size of project for me to tackle. Something bigger then a small standalone app, but not something as huge as involving a database and user accounts. What are everyone's thoughts about this?
DEV Summer Style
Tags: devshop, meta
Published: 2019-05-24 14:21:56

---
title: DEV Summer Style
published: true
description: 
tags: devshop, meta
cover_image: https://thepracticaldev.s3.amazonaws.com/i/13t6mo3pcmdprgja71uf.png
---

Whether you're hitting the beach, heading to a conference, or just planning on taking it easy this summer, we have new DEV gear for you! 

## **[Fanny Packs](https://shop.dev.to/collections/fanny-packs)**

![DEV Fanny Packs](https://thepracticaldev.s3.amazonaws.com/i/kc609sw39k0fbgu437wp.jpg)
These come in 2 different color combinations, and both have the same inner rainbow pocket. They are perfect for walking around and looking like a totally awesome nerd. High quality zippers, and made in the USA.

## **[Beach Towel](https://shop.dev.to/collections/collection-2/products/towel)**


![Beach Towel](https://thepracticaldev.s3.amazonaws.com/i/8hhazznp4clyyjmcmop5.png) <figcaption> Dog approved </figcaption>

You probably shouldn't bring your computer to the beach, but with this DEV towel you can still show off your DEV `<style>` 😉

## **[Vintage Hat](https://shop.dev.to/collections/new-arrivals/products/vintage-dev-hat-1)**

![Vintage Hat](https://thepracticaldev.s3.amazonaws.com/i/wod998822wc7rrmvovuc.jpg)
Stay cool all summer in this vintage denim style hat.

Check out all of the merch in the [DEV shop](https://shop.dev.to)!

Have an idea for something you want to see in the shop? Let me know in the comments. My DMs are also open if you want to reach out directly about anything shop related.

Happy coding!
Bitcoin Exchange Script Development
Tags: bitcoin, exchangescript, phpscript, tradingscript
Published: 2019-05-24 14:12:08

---
title: Bitcoin Exchange Script Development
published: true
description: Here is a detailed explanation about Bitdeal - Leading Bitcoin Exchange Script Provider
tags: bitcoin,exchangescript,phpscript,tradingscript
---
##Bitcoin Exchange or Trading 
The process of exchanging or trading  bitcoins in online between users of cryptocurrency is termed as Bitcoin exchange or trading . As cryptocurrency are digital asssets , it cannot be touched or felt , but provides large amount of profits to the users by the process of trading .

The main aspects that needed for bitcoin trading are

1. Seller 
2.  Buyer 
3 . Medium that interconnects seller and buyer for the process of exchange . 

The medium through which the exchange occurs is called as  "Cryptocurrency Exchanges".

The cryptocurrency exchange website script is the backbone of every cryptocurrency exchanges . These website scripts are the one that holds all the functionalities and attributes that makes the exchanges works well . 

##Bitdeal -  Bitcoin Exchange Script Provider 

The cryptocurrency exchange website script is not so easy to build and it requires a skilled professional to make it work well . If you are techie , you can create bitcoin exchange scripts on your own .
On the other hand , you can contact cryptocurrency exchange development companies to get scripts to start your online exchange business.

Bitdeal , the best cryptocurrency exchange script development company who can help you with unique exchange scripts. They have 150 + experts who can develope and deploy the best readymade exchange website scripts for your business. 

The exchange development  services that Bitdeal provides involves :

1 . Cryptocurrency Exchange Script / Software .
2 . Bitcoin Exchange Script / Software .
3 . Decentralized Exchange Script .
4 . Centralized Exchnage Script .
5 . Readymade Exchange Script .

[**To get a free demo for your cryptocurrency exchange script , contact Bitdeal"s experts  team now !!!***]( https://www.bitdeal.net/)
How to store private keys securely in AWS S3 for use with Elastic Beanstalk
Tags: aws, s3, elasticbeanstalk, devops
Published: 2019-05-24 14:09:30

---
title: How to store private keys securely in AWS S3 for use with Elastic Beanstalk
published: true
description: 
tags: #aws, #s3, #elasticbeanstalk, #devops
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hnkuw6dnbdk24u0uwtqs.png
---

The private keys that you use in a project should not be compromised with the source code. The best option is to configure Elastic Beanstalk to download the file from AWS S3 during the deploy of the application.

The following example shows an Elastic Beanstalk's [configuration file](https://docs.aws.amazon.com/en_en/elasticbeanstalk/latest/dg/ebextensions.html) getting a private key file from an S3 bucket.


```bash
# .ebextensions/serverkey.config
Resources:
  AWSEBAutoScalingGroup:
    Metadata:
      AWS::CloudFormation::Authentication:
        S3Auth:
          type: "s3"
          buckets: ["elasticbeanstalk-region-account-id"]
          roleName: 
            "Fn::GetOptionSetting": 
              Namespace: "aws:autoscaling:launchconfiguration"
              OptionName: "IamInstanceProfile"
              DefaultValue: "aws-elasticbeanstalk-ec2-role"
files:
  # Private key
  "/etc/pki/tls/certs/server.key":
    mode: "000400"
    owner: webapp
    group: webapp
    authentication: "S3Auth"
    source: https://s3.amazonaws.com/elasticbeanstalk-region-account-id/server.key
```

The instance profile "aws-elasticbeanstalk-ec2-role" must have permission to read the key object from the specified bucket. Look [here](https://docs.aws.amazon.com/en_en/elasticbeanstalk/latest/dg/iam-instanceprofile.html#iam-instanceprofile-addperms) to see how to do it.


You made set the url with an environment variable like this:

```bash
source: { "Fn::Join" : ["", ["https://s3.amazonaws.com/elasticbeanstalk-region-account-id/", {"Fn::GetOptionSetting": {"Namespace": "aws:elasticbeanstalk:application:environment", "OptionName": "APP_ENV"}}, ".key"]]}
```

Hope you have a good day!
Bouncy Ball Loader
Tags: codepen, design, ui, showdev
Published: 2019-05-24 13:35:53

---
title: Bouncy Ball Loader
published: true
tags: codepen, design, ui, showdev
---

<p>Another day, another practise. I tried to make a little bit satisfying bouncy ball loader.</p>

<p>I just made it simple. I didn't use any frameworks or something. I am not sure about the browser compatibility though.</p>

<p>There are still many things that I still have to learn about front end programming.</p>

{% codepen https://codepen.io/takaneichinose/pen/vwRLMJ %}
Why Angular is Best For Web App Development?
Tags: angular, webdev, html
Published: 2019-05-24 13:26:40

---
title: Why Angular is Best For Web App Development?
published: True
description: AngularJS has picked up a great deal of footing since it was dispatch by Google. It is an open source web application which spins around HyperText Markup language (HTML), Cascading Style Sheet (CSS) and JS (JavaScript).
tags: #Angular, #webdev, #html, #bestofdev
---

<img src="https://thepracticaldev.s3.amazonaws.com/i/awha1i54pdr3szj3lx9x.png" alt="Why angular is best">

Why Angular is Better For Web Application Development? In this computerized period, the market is seeing the regularly expanding interest for web engineers. There are a great many sites on the web, and the numbers are rising each day. Numerous stages are accessible in the market for web improvement. Picking the correct one with the capacity to show a utilitarian and an easy to understand is extreme. AngularJS has picked up a great deal of footing since it was dispatch by Google. It is an open source web application which spins around HyperText Markup language (HTML), Cascading Style Sheet (CSS) and JS (JavaScript).

**Why Angular is Better For Web Development?**

**What is AngularJS?**
Distributed by Google in 2009 AngularJS has turned out to be a standout amongst the most prominent JavaScript structures till now. To be valid, it doesn't bring any principal new and progressive answers for designers and developers. In any case, regardless it stays top best framework. Things being what they are, the reason? It is straightforward in light of the fact that it is anything but difficult to utilize, it gives high improvement to the entire advancement procedure and structure of JavaScript code. As it were, it contains everything engineers require while building dynamic single page application.

The basic role of AngularJS is to rearrange front-end advancement. Named as the following enormous thing, AngularJS accompanies a few systems and modules for planners just as designers. Here are a couple of motivations to pick AngularJS:


**Created by Google**
Precise is created and kept up by specialists at Google. In this way, engineers can rest guaranteed that they would deal with a steady code base. It likewise gives them a phenomenal chance to gain from confirmed open source specialists. On the off chance that any issues emerge, experts and network individuals give the arrangement.

**Utilizations MVC Architecture**
AngularJS utilizes Model View Controller (MVC) engineering for web application advancement. Actualizing MVC is straightforward. 

Read the full article here: https://www.decipherzone.com/blog-detail/Why-Angular-is-Better-For-Web-Application-Development--
Simplified Redux w/ a Dash of Vanilla
Tags: redux, javascript, backtobasics, webdev
Published: 2019-05-24 12:11:39

---
title: Simplified Redux w/ a Dash of Vanilla
published: true
description: A follow-up to a recent post about learning the basics of Redux
tags: #Redux #JavaScript #BackToBasics #WebDev
---
I was gratified by the response my post got yesterday entitled <a href="https://dev.to/edlinkiii/i-just-didn-t-get-redux-3804" target="_blank"><em>I Just Didn't Get Redux!</em></a> So I decided to do a follow-up including a link to <a href="https://codepen.io/edlinkiii/pen/YbaNao" target="_blank">a new Pen</a> that used the <em>exact</em> same Redux code, but I gave it a UI incorporating some simple HTML and CSS with a little plain old vanilla JavaScript. (I also added the limitation of being between zero and ten.)

It is a super simple implementation (not to mention overkill, using state management for a simple counter), but it's got a little more meat to it than just directly making dispatch calls.

Again, my reason for doing this is that I needed to pull Redux out of the context of React-Redux (which was what I had been learning from the tutorials I was using) so I could understand it, which I was finally able to do.

Also, I want to thank @markerikson for adding a few links to some fantastic resources in the comments of my previous post --> <a href="https://dev.to/markerikson/comment/b3nc" target="_blank">go check those out</a>.