teleren/devto huggingface dataset:
JAMstack - Open-Source apps
Tags: serverless, opensource, appseed
Published: 2019-05-20 20:46:10

---
title: JAMstack - Open-Source apps
published: true
description: Beautiful JAMstack apps, designed by HTML5 UP, coded in JAMstack
tags: serverless, opensource, appseed
---
Hello coders, 
I'm playing allot with [Jamstack.org](https://jamstack.org/)tools lately: Gatsby, Nuxt, Panini Static Generator, and I decided to build some [Jamstack apps](https://appseed.us/apps/jamstack) and released them as [open-source](https://en.wikipedia.org/wiki/Open_source) projects.

I will not reiterate what is JAMstack, newcomers can read more about this architecture by accessing:
- [Jamstack.org](https://jamstack.org/) 
- [An introduction to the JAMstack](https://medium.freecodecamp.org/an-introduction-to-the-jamstack-the-architecture-of-the-modern-web-c4a0d128d9ca)
- [The JAMstack: It’s Pretty Sweet](https://medium.com/memory-leak/the-jamstack-its-pretty-sweet-e0834e4e6bb7)
- [What is the JAMstack](https://blog.appseed.us/what-is-jamstack/?ref=dev.to)

Now let's jump into some real samples: 

---
- [JAMStack Landed](https://appseed.us/apps/jamstack/html5up-landed) **Designed by HTML5 Up** Tooling: Gulp, SaaS, Hot Reload, JAMstack architecture
![JamStack App Landed coded by AppSeed App Generator](https://static.appseed.us/apps/jamstack-landed/jamstack-landed.jpg)

---
- [JAMStack Big Picture](https://appseed.us/apps/jamstack/html5up-big-picture) **Designed by HTML5 Up** Tooling: Gulp, SaaS, Hot Reload, JAMstack architecture
![JamStack App Fractal coded by AppSeed App Generator](https://static.appseed.us/misc/jamstack-fractal.jpg)

---
- [JAMStack Fractal](https://appseed.us/apps/jamstack/html5up-fractal) **Designed by HTML5 Up** Tooling: Gulp, SaaS, Hot Reload, JAMstack architecture
![JamStack App Big Picture coded by AppSeed App Generator](https://static.appseed.us/misc/jamstack-big-picture.jpg)


The source code for all apps is available on Github. 

Related resources:
- [JAMstack Apps](https://appseed.us/apps/jamstack)
- Other [JAMstack resources](https://blog.appseed.us/tag/jamstack/)

Cheers!
Solving the JS MVM problem natively
Tags: javascript
Published: 2019-05-20 20:21:33

Let me start by saying that I am not a JS master, and I mostly code recreationally. But I have dabbled in other languages, both OO and Structured.

I'm looking for feedback on the core concept of a JS proposal, a pre-proposal so to speak. I'm fully expecting that this will fall flat, but I've found nothing online about it, so here goes nothing.

## The Problem

The major gripe I have with working with JS and HTML is the MVM data-binding issue — how to automagically keep your raw data and the HTML representation of that data in sync.

There's several frameworks out there addressing this issue for something that JS should handle elegantly out of the box, especially considering its age.

So the pre-proposal begins below, and please, let me know if I'm just crazy.

## Pre-Proposal - Link & unlink Keyword

I don't think JS could ever magically convert a data structure into HTML; template engines are more practical and offer a lot of control.

I do think that JS should have a _native way to link properties with primitive values together_, so that they act like 'pass by reference'. To me, most of the MVM pain comes from this. This doesn't address other MVM features, like executing arbitrary code on set/get. That should probably be addressed with something like addEventListener.

## Syntax

What I'm suggesting above would look something like this:

```
let elm = $('#yourElement')[0];
let obj = { 'displayValue': 10 };
let txt = elm.innerText;
let str = 'a string';

link elm.innerText ...(others) obj.displayValue 
link txt ...(others) obj.displayValue 

// Right-most value is assigned to everything preceding it, as normal. Changing any of these linked variables would change all of them.

link obj.displayValue str; // All of the linked values now have str's value.

elm.innerText = 'different string'; // All of the linked values are now this.

unlink txt; // txt is no longer linked and can be changed independently.

```

The link line above behaves exactly like:

```
let a = ['a'];
let b, c, d;

b = c = d = a; // all 4 are now referencing the same data; left-right order matters. Changing any of them changes all of them.

a = {}; // now all 4 are referencing this empty object.

```

While some kind of '=' variant might feel like more appropriate syntax (because it's a kind of assignment), all the elegant ones are taken and under the hood this works very differently anyways.

## Feedback

Let me know what you think of this and if it's worth creating a formal ES proposal. I think this could make MVM much less painful without needing libraries and code overhead.

And if you know any ECMA members, please pass this along :D
On making a simple vendors map for a Oaxaca, Mexico NGO
Tags: maps, javascript, react
Published: 2019-05-20 19:30:47

---
title: On making a simple vendors map for a Oaxaca, Mexico NGO
published: true
description: Quick 
tags: Maps, JavaScript, React
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zei4k58e0dpecu31dq09.jpg
---

Forgive the mini self-pat-on-back post but wanted to share a cool mini project I did. While in Oaxaca, I got to know an organization called [En Amor a La Tierra](https://www.facebook.com/enamoralatierra/) which helps promote, connect, strengthen small businesses focused on sustainable products. Their founder Alonso Islas worked at my coworking space and his team put on a really cool fair at the coworking space where the different entrepreneurs could showcase their products. It was just cool to see products like compostable cutlery made from Avocado pits, local Oaxaca coffee growers, and solar ovens. It's simply exciting to see grassroots work being done to make things more healthy for both people and the environment in Mexico. 

So this fair happened and it made me really curious as to where I could find these products otherwise. Alonso had a really basic list but I really thought a map would serve well for this. I offered to make a map (for free) for Alonso's team and set up Google Sheets as the data source (so they could easily update it without me). 

The code mostly came from other side projects so it really wasn't more than 1-2 hours of work. When Alonso finally loaded all the data in, it finally felt more real/fun/interesting to see actual photos of the organizations and see where they were dispersed around Oaxaca. 

It's satisfying to have skills that can be useful and find people who can use them. Of course getting paid is great too but it's also just satisfying to be helpful for free. Makes all the lonely web development learning feel more worth it. 

http://amortierramapa.surge.sh/
Hyperoop: OOP-style SPA micro-framework.
Tags: frontend, spa, javascript, typescript
Published: 2019-05-20 19:11:52

---
title: Hyperoop: OOP-style SPA micro-framework.
published: true
description: OOP-style state management, Web Components in one.
tags: frontend, SPA, javascript, typescript
---

<h3>Quick start</h3>

<pre>
  git clone https://github.com/HyperOOP/starter myapp
  cd myapp
  npm i
  npm start
</pre>

<h3>More examples</h3>

Look at <a href="https://github.com/hyperoop/hyperoop">Readme</a>
Let's go remote!
Tags: remoteworking, remote, remotejobs
Published: 2019-05-20 19:10:19

---
title: Let's go remote!
published: true
description: It's time for programmers to go remote!
tags: remoteworking, remote, remotejobs
---

I've recently moved to a new position as Full Stack Software Engineer for a cool tech company in Italy, my home country. **I'm super happy with my new job** (a really exciting environment, super cool technology, wonderful colleagues, a solid business, a shiny office full of amenities, 2 days of smartworking per week, etc...) 

While looking for this new job, I took the chance to think about the job market for programmers. **We're very lucky compared to other jobs** and the demand for programmers is hitting an all-time high. But...

But... **There's still something really old in our job**. Most of us are still stuck to a 9-5 (plus commuting) routine.

I spend 2 hours per day commuting. Sometimes, it takes 3 (train delays, strikes, etc...). Let' do a little math.

* 2 hours per day
* 10 hours per week
* 40+ hours per month

It's not only about commuting. It's about what I need for my job. Let's face it: offices are cool, but **I just need a computer and a fast Internet connection** for 100% of my duties. 

If I want to talk to my colleagues I can call, slack, email them whenever I need. **Collaboration over the Internet has never been easier**: I can share documents, presentations, code with just a couple of clicks.

The [Remote Only Manifesto](https://www.remoteonly.org/) should be applied by every "IT" company, **and it's time for us (programmers, devops, IT managers, etc...) to push for this change**.

**I'll try to do my part and from now on**, so, this will be my standard reply to recruiters getting in touch with me on LinkedIn (and elsewhere):

> Hello, $recruiter,
> I'm not actively looking for a job right now, but in the future I will only evaluate 100% remote positions. 

As I said... I love my new job, **but I'm 100% sure my next job will be remote**. 

Share this (and many more articles about remote working) using the hashtag [#letsgoremote](https://twitter.com/hashtag/letsgoremote)

# Let's go remote!

This post originally appeared on [https://coding.napolux.com](https://coding.napolux.com), but was brought to dev.to for your reading pleasure ❤
Keeping elm dependencies current
Tags: elm, npm, dependencies
Published: 2019-05-20 17:52:20

---
title: Keeping elm dependencies current
published: true
description: 
tags: elm, npm, dependencies
---

It can be hard to keep dependencies up to date. Do you check them manually? Set a calendar reminder? Run a script on your CI?

You can certainly create a manual process to automate it, but even then updating those dependencies to the latest version is tedious. Sure it's not that difficult, but it's a distraction and it's easy to put off or skip altogether. So anything that reduces the friction is a welcome change!

I'm very pleased with [dependabot](https://dependabot.com/#how-it-works)'s elm and NPM dependency support.

## The workflow

It's really dead simple. After a few clicks configuring dependabot for your project, it will make pull requests for each outdated elm or NPM dependency.

Here are some of my favorite features of this workflow.
### CI Build Integration

![Pull Requests](https://thepracticaldev.s3.amazonaws.com/i/aof7uddo8afum5lf0grg.png)

* If you have a green checkmark that shows your CI build is passing, then you can **confidently hit the merge button**! 🎉
* In the more rare cases where there's a red checkmark, you can see what the build errors were and manually fix them


### Changelog and Release Notes

Dependabot includes all the changelog entires between the current and latest version in the pull request. This is super handy as you can quickly scan to see what to look out for in each dependency. And since there's a single pull request for each outdated dependency, it makes it really manageable to merge the trivial changes quickly, and then go through the more substantial changes one-at-a-time.


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

If the project doesn't have a changelog, you can see each of the commits with links and commit messages. Plus a quick link that takes you to the diff for the project comparing your current version with the latest.

### Monorepo support

If you have a github repository that includes multiple projects within the same repo, it's easy to set up dependabot to watch the dependencies for each of the repo's projects. It's as simple as telling it which directory to watch, and for which kinds of dependencies (elm, NPM, etc.).

![](https://thepracticaldev.s3.amazonaws.com/i/4p41xidmqa3a20di5a3v.png)

## The bottom line

I love this workflow, and highly recommend it! For your open source elm projects, this is a no-brainer. For private commercial projects, it's only $15/month, so it's worth considering. You might find that it pays for itself in terms of managing NPM security vulnerabilities and improved developer productivity.

Learn more, and get started now at https://dependabot.com/#how-it-works.

## Thanks for reading!

I hope you found this tip helpful! If you want more tips about boosting your productivity in your elm codebase, [check out my weekly elm tips](https://incrementalelm.com/tips).
Polymorphism for Go slices
Tags: go, interfaces, polymorphism
Published: 2019-05-20 17:32:31

---
title: Polymorphism for Go slices
published: true
description: How to use Go polymorphism on slices
tags: golang, interfaces, go, polymorphism
---

![](https://thepracticaldev.s3.amazonaws.com/i/3pmpi3c2hiegs70lcvct.jpg)

Hi devs!

Today I'm going to show you how to implement polymorphism with slices on golang.

Imagine the situation where you want to implement a similar function on different structs. Interfaces are your best friend! For example, the classic function `toString()`

```go
//our interface
type Element interface {
    toString() string
}

//our first struct
type MyCustomStruct1 struct {
    prop1 string
    prop2 string
}

//our second struct
type MyCustomStruct2 struct {
    awesomeProp string
}

//abstract implementation of our interface for MyCustomStruct1
func (m MyCustomStruct1) toString() string {
    return m.prop1 + m.prop2
}

//abstract implementation of our interface for MyCustomStruct2
func (m MyCustomStruct2) toString() string {
    return m.awesomeProp
}

```
At this point, nothing new of interfaces functionallity in golang. Well, now, we could think we can code something like that:


```go

func printElementList(elements []Element) {
    for _, e := range elements {
        fmt.Println(e.toString())
    }

}

//code inside main or another function
ms1 := []MyCustomStruct1{
    MyCustomStruct1{prop1: "foo", prop2:"bar"},
    MyCustomStruct1{prop1: "foo1", prop2:"bar1"},
}


printElementList(ms1)

```

That may work in other languages thinking on common functionality of hierarchy and polymorphism. However, the compiler will throw us that error:

``cannot use ms1 (type []MyCustomStruct1) as type []Element in argument to printElementList``


Ok, how can we aboard that problem? At the beggining I thought a `map[int]Element` could solve the problem, but I don't want to have my slice ordered on a map where I'm not going to use integers.

Well, which is my solution? I surrounded the elements of slice with interfaces just like that:

```go
var elements []interface{Element}

for _, m:= range ms1 {
    elements = append(elements, m)
}

```
And, of course, I changed the declaration of function and the call:

```go
func printElementList(elements []interface{Element}) {
    for _, e := range elements {
        fmt.Println(e.toString())
    }
}

//code inside main or another function
printElementList(elements)


```
At this point, we can use `printElementList` function with an slice of MyCustomStruct2 or another struct that implements Element interface:

```go 
ms2 := []MyCustomStruct2{
     MyCustomStruct2{"foo"},
     MyCustomStruct2{"bar"},
}

var elements2 []interface{Element}

for _, m:= range ms2 {
    elements2 = append(elements2, m)
}

printElementList(elements2)
```

What do you think of that? Is an over complicated implementation?

Here you have the link to full code on play.golang:

https://play.golang.org/p/B88iV16nm4u
Dev.to Career Insights of the Week
Tags: career, productivity, leadership, video
Published: 2019-05-20 16:44:08

---
title: Dev.to Career Insights of the Week
published: true
description: Highlights of the best career advice of the past week on Dev.to
tags: career,productivity,leadership,video
---

In this review, I discuss these questions:

- How important is to **keep things simple** in software development?
- How can **LinkedIn** help you boost your career?
- Is it normal to learn as you go?
- What are the real **pros and cons of a Computer Science degree**?
- What is an effective trick to take leadership in meetings?
- What is the **most important skill** a programmer can learn?

Here are all the articles that I review in this video:

{% link https://dev.to/drm317/keeping-it-simple-2m5a %}

{% link https://dev.to/flippedcoding/things-i-wish-i-knew-before-i-started-web-development-1eb8 %}

{% link https://dev.to/andrewbrown/linkedin-is-for-losers-think-again-from-100k-to-200k-job-opportunities-hacks-included-1a8e %}

{% link https://dev.to/sidewalk/stand-before-the-whiteboard-and-rule-the-world-19e1 %}

{% link https://dev.to/bheberer/thoughts-on-getting-a-computer-science-degree-from-someone-who-s-about-to-graduate-1h8h %}

And finally:

{% link https://dev.to/jamesmh/principle-of-compounding-interest-in-your-career-351l %}

Before you go, follow me on Dev.to and on Twitter so you don't miss my next content.
TIL: JavaScript Objects & Accessing Properties
Tags: todayilearned, explainlikeimfive, javascript, codenewbie
Published: 2019-05-20 17:22:19

Today, I created my very first JavaScript object!

{% twitter 1130507725912387585 %}

```
var myDog = {
  "name": "Cheeto",
  "enemies": "Puppy the cat"
};
```

I was also able to access properties with dot and bracket notation
```
>var nameval = myDog.name; // "Cheeto"
>var enemiesval = myDog.enemies; // "Puppy the cat"
```

```
var nameValue = myDog["Name"]; // Cheeto
var enemiesValue = myDog['enemies']; // Puppy the cat 
```
What is your default documentation process?
Tags: discuss
Published: 2019-05-20 17:19:52

---
title: What is your default documentation process?
published: true
tags: discuss
---

Often when we start a new project we will create a README.md with a brief outline of the project and steps to install. If the project is open source we may include a CONTRIBUTING.md. I feel like there is a lot of stuff that a README.md won't cover.

I'm interested in hearing what you have as your default setup for documentation when you start a new project?
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2019-05-20 16:50:30

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Endless Possibilities!

Ananya shares a few lesser known CSS tricks with the community. Did you know about all of these?!

{% link https://dev.to/ananyaneogi/css-can-do-that-18g7 %}

#2. Keyboard Magic

Tips for anyone looking to speed up their workflow, with the added bonus of impressing your fellow devs.

{% link https://dev.to/borrellidev/impress-your-colleagues-with-these-npm-tricks-3fcb %}

#3. Know When To No

Hüseyin explains why it's important for developers to learn when to say no.

{% link https://dev.to/h_polatyuruk/the-most-important-skill-a-programmer-can-learn-5gpf %}

#4. Orchestrating

Chris kicks off the first part of a series on Kubernetes. In this post, they start with orchestration in general to Minkikube basics to deployment to troubleshooting.

{% link https://dev.to/azure/kubernetes-from-the-beginning-part-i-4ifd %}

#5. No Math?!

When Milecia switched to web development, they discovered a few unexpected things in their day-to-day as a dev. 

{% link https://dev.to/flippedcoding/things-i-wish-i-knew-before-i-started-web-development-1eb8 %}

#6. Guard Your Time

A look at what causes burnout and advice on how to avoid it.

{% link https://dev.to/ronsoak/the-lies-and-lack-of-self-respect-that-lead-to-burnout-5007 %}

#7. Lessons Learned

Tomasz shares the lessons they've learned over the years as a programmer -- from communication to code reviews to demo tips!

{% link https://dev.to/tlakomy/7-years-as-a-developer-lessons-learned-29ic %}


_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
What the Error? ReactJS: Hooks can only be called inside the body of a function component
Tags: beginners, discuss, tutorial, tips
Published: 2019-05-20 16:41:28

---
title: What the Error? ReactJS: Hooks can only be called inside the body of a function component
published: true
description: How to debug and fix the "Hooks can only be called inside the body of a function component" error in ReactJS
tags: beginners,discuss,tutorial,tips
cover_image: https://owenconti.com/static/images/hooks-can-only-be-called-inside-the-body-of-a-function-component.jpg
---

This is the second video in my new series, What the Error? where I debug and resolve common error messages in web frameworks.

This video covers ReactJS's "Hooks can only be called inside the body of a function component".

{% youtube kf8loX8AN-c %}
AWS Quickly Build Architectural Diagrams on Adobe XD
Tags: aws, tutorial, productivity, webdev
Published: 2019-05-20 16:32:43

---
title: AWS Quickly Build Architectural Diagrams on Adobe XD
published: true
description: AWS Free UI Kit on Adobe XD for building architectural diagrams
tags: aws,tutorial,productivity,webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m887oeie9bv4xpta9f42.gif
---

## What I do ?
I'm a UX Engineer at ExamPro. My Background is in 📊 Business Marketing specializing in Customer Experience Design (CXD).  To gain further perceptive on the customer experience, I decided this last year to pick up 👨🏽‍💻 programming skills both in Full Stack and Cloud Computing. 

I am also an avid gamer 🎮  over the last 20 years, which I like to think contributes to knowledge of customer experience. 😋

## Why Use Adobe XD For Building Architects
Adobe XD recently renamed their Symbols functionality to Components adding a new host features such as better responsive dragging and importing en-mass replacement information. 

One of our favourite features of Adobe XD is the ability to share documents with other team-members similar to how you can share🤝 a google doc. So hence, The UX Engineer👩🏼‍🎨 + Stakeholder🕵‍♂ + Cloud Architects🧙‍♂ + Developers👨🏽‍💻 can all have a look and advocate for the User & Business. 

## Why did we build🛠 this on Adobe XD ?
If you have yet to give Adobe XD a try, you should because it is free to use.
 
With both Adobe XD features to sync new file changes and Components feature, it allows us to ship user-centric architect diagrams to clients quickly.

### Step 1 : Quick Search🔍 & Drag The Icon
Type in the icon your searching for & just drop them
![](https://thepracticaldev.s3.amazonaws.com/i/swdumrp84cq0uznkp38m.gif)
### Step 2 : Adding Arrows & Adjusting Them ⚖
![](https://thepracticaldev.s3.amazonaws.com/i/e2fnvg4ymssc6nsz7w2c.gif)
### Step 3 : Quickly Add Text💬
Hold Option/Alt on Mac to clone the text & quickly write them.
![](https://thepracticaldev.s3.amazonaws.com/i/k23gqzprdth9qmiezuk4.gif)
### Step 4 : Resizing Icons👌🏽 
You have to disable responsiveness to resize icons without breaking them.
![](https://thepracticaldev.s3.amazonaws.com/i/4qldujbt1654ars4c5gl.gif)
### Bonus🎁🎁 : Quick Start From Templates
Preset serverless templates with just quick search & drop. More will be added in the future & can also be contributed.
![](https://thepracticaldev.s3.amazonaws.com/i/3exc7b6q1dzsegckt844.gif)

### What's Upcoming💡 & Where to contact me quickly 📞📞 ?
My future post will be building a A/b testing infrastructure on AWS. Add me on[Karan Balaji's LinkedIn](https://www.linkedin.com/in/karanbalaji/)

Download from {% github ExamProCo/aws-xd-ui-kit %}