teleren/devto huggingface dataset:
Official Website is Live 🎉 - Built with TailwindCSS and AlpineJS and lots of 💗
Tags: css, design, beginners, webdev
Published: 2020-05-26 19:20:12

This is the official website of Justify Agency, built with lots of patience, design work and 💖

Repo: [GitHub Public](https://github.com/justifyagencyhq/Official-Website)

Watch the Video: 
{% youtube u_IXJnnJZ-Q %}

Visit it here: [Click here](https://justifyagency.com)

## Technologies Used
 - [TailwindCSS](https://tailwindcss.com): We love this framework a lot, and we are absolutely not going away from it. It's fast, scalable, easy-to-use. We used it,
 at first it looks like that it's too heavy but after compilation, our CSS Size is only 3KB 🤯
 - [AlpineJS](https://github.com/alpinejs/alpine): We don't like to play with DOM Selectors anymore, even for simpler things + We are using VueJS every day, so it's a deal-deal
 - [Parcel](https://parceljs.org/)**: It's Simple, that's it
 - [IonIcons](https://ionicons.com/): This is completely biased, our cat loves it so 😍
 - [Netlify](https://www.netlify.com/): It's simple, with Free SSL + Auto-Deployment. We can roll-back easily and we're also using built-in form collector.
 - [Sal.js](https://mciastek.github.io/sal/): Lightweight scroll animation library (Zero Dependencies) and it's just super minimal.
 - [GitHub](https://github.com): It's free for teams now so 🥳
 - [Favicons](https://www.favicon-generator.org/) - It worked for us, and provided us the zip file of different sizes
 
 
 
## Page Speed Insights
 
### Desktop
 ![Desktop Score](https://imagehost.imageupload.net/2020/05/26/image750914807bb710e1.png)
 
### Mobile
 ![Mobile Score](https://imagehost.imageupload.net/2020/05/26/image9a5c2c8e388861e6.png)
 

### Some Credits:
 [FreePik](https://freepik.com) - Thanks for Illustrations


We are ready for the Launch!
Follow us on [Twitter](https://twitter.com/justifyagencyhq)
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-05-26 19:19:04

---
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. Seamless Productivity, Collaboration — and Etiquette, 

Milu approaches the topic of Git with a refreshing focus on etiquette — essentially, the practices that will make your team's experience of debugging, merging, and committing/managing PRs smoother.

{% link https://dev.to/milu_franz/git-explained-proper-team-etiquette-1od %}  

### 2. Philosopher cap, on!

Bastien gets philosophical on the color of a browser page. Is it white, transparent, or something more complex? In this post, we are guided through the notion of a canvas and why they are important for browser viewport comprehension.
{% link https://dev.to/bcalou/what-is-the-color-of-a-blank-page-49og %}  

### 3. Deep breaths

Some learnings from the ever-evolving experience of a productive and ambitious engineer, friend, family member, and dog-lover. Thanks, Ali!

{% link https://dev.to/aspittel/what-productivity-looks-like-to-me-5dk5 %} 

### 4. On Fuego 🔥
Fayaz shares his (admittedly) opinionated list of go-to tools and resources for developers that are free as in free! 

{% link https://dev.to/fayazara/this-free-tools-for-developers-are-45p3 %}

### 5. Class is in Session

Those coming from Object-Oriented Programming likely don't need a review of JavaScript classes, Samantha explains. The rest of us do! {% link https://dev.to/samanthaming/classes-in-javascript-30n8 %}

### 6. Deno 101 for JS Newbies

Maximous explains Deno through a lens friendly to those who are new to JavaScript, talking about the drawbacks of Node.js, how Deno came to be, and why Node.js is likely still better for devs getting started. 

{% link https://dev.to/maximousblk/deno-for-javascript-beginners-4dnf %}

### 7. Your Biggest Supporter is a Stranger

In this post Carl-W shares their experience seeking out — and getting comfortable with — remote work. This post is a great read for newer devs currently faced with the remote-first world we are living in, whether it's due to pandemic-necessity or enthusiasm about working on a distributed team! 

{% link https://dev.to/ugglr/junior-developers-checklist-for-landing-a-remote-job-2ldb %}

_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!_
#onedayprojects: Four projects for web developers to start today (video)
Tags: webdev, beginners, career, techtalks
Published: 2020-05-26 19:07:42

Four projects that you can get started on today, specifically designed to help you learn crucial skills and concepts in web development! #onedayproject

{% youtube vWF8UhYTR2o %}

Resources mentioned:

- ["How to Become a Really Good Game Developer In Under a Year" - Miziziziz](https://www.youtube.com/watch?v=5-iST0a69cI)

---

🐦 Follow Bytesized Code on Twitter  https://twitter.com/bytesizedcode  

🐦 Follow your host Kristian on Twitter  https://twitter.com/signalnerve  

---

💛 BYTESIZED CODE is building a developer community for everyone! We publish weekly programming tutorials and guides, and also produce the unique online conference Byteconf, where developers around the world learn in a live-streamed, 100% free dev conference. Join our community! https://www.bytesized.xyz
Testing a request with Cypress
Tags: webdev, testing, cypress, javascript
Published: 2020-05-26 18:58:59

Well, we need to test API. With Cypress we can do it easily. But before we start we need to dance.

### Dance with a tambourine

There is one flaw in Cypress. Cypress can track XMLHttpRequests only. Requests with `fetch` type are invisible to Cypress. We cannot intercept or stub them. But there are some [recipes](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window-fetch#readme) how to solve this small flaw. Let's use one of them - "removes window.fetch method and replaces it with a polyfill based on XMLHttpRequest". Go to the `cypress/support` directory and download the [polifil](https://unpkg.com/unfetch/dist/unfetch.umd.js). Now create a "hooks.js" file.

```javascript
enableFetchWorkaround();

function enableFetchWorkaround() {
  let polyfill;

  before(() => {
    cy.readFile("./cypress/support/unfetch.umd.js").then(content => {
      polyfill = content;
    })
  });

  Cypress.on("window:before:load", win => {
    delete win.fetch;
    win.eval(polyfill);
    win.fetch = win.unfetch;
  });
}
```

And add `import "./hooks"` to the index.js file.

### Requests Testing

In order to test a request, we need to send the one

```javascript
cy.request("/posts").as("postsFetch");
```

or we need to wait until the request is sent.

```javascript
cy.route({method: "GET", url: "/posts"}).as("postsFetch");

cy.visit("/posts");

cy.wait("@postsFetch")
```

Time to test what we have.

```javascript
it("has the right status code", () => {
  cy.get("@postsFetch")
    .its("status")
    .should("equal", 200);
});

it("has the right content-type", () => {
  cy.get("@postsFetch")
    .its("headers")
    .its("content-type")
    .should("include", "application/json");
});

it("has the right number of items", () => {
  cy.get("@postsFetch")
    .its("responseBody")
    .should("have.length", 20);
});

it("has the right item structure", () => {
  cy.get("@postsFetch")
    .its("responseBody")
    .each(item => {
      expect(item).to.have.all.keys("id", "title", "createdAt");    
    });
});
```
Dev Journal 5/26/2020: rails new Who Dis
Tags: devjournal, rails, ruby
Published: 2020-05-26 18:50:32

---
title: "Dev Journal 5/26/2020: rails new Who Dis"
published: true
description: I started a new project to make a dynamic, Rails-powered menu/assistant for our bar at home.  And I got the domain name palo.bar for $2!
tags: devjournal, rails, ruby
canonical_url: https://www.assertnotmagic.com/devjournal/2020/05/26/dev-journal/
---

I started a new project yesterday, because I *definitely* have enough spare time and energy for that (maybe).  I was just tootling around the internet checking out available domain names, and I found out that `palo.bar` was available *and on SALE for $2!*

![Ariana Grande singing 'I want it.  I got it.'](https://media.giphy.com/media/1X4FZo98u4xgdqkcL2/200.gif)

So now I'm diving back into Rails to make a dynamic, online bar menu for our home bar!  Here are the major use-cases.

1. People come over to our house (eventually, stupid virus).  I ask if they want a drink.  They say, "Sure, what do you have?"  Instead of pausing awkwardly, trying to figure out how to succinctly list everything I have or guess what they'll like, I hand them a QR code for `palo.bar`.  They go there, browse through the mobile-friendly, helpful, and intuitive UI, and select a cocktail based on the ingredients I have in stock and the things I know how to make.

2. I learn a new cocktail, so I add it to the list with some metadata that help people discover it.

3. I head to the store, and I'm not sure what I have and what I'm out of.  My helpful `palo.bar` bartender's assistant alerts me to the fact that I'm out of limes again.  *And,* if I was to get a bottle of Campari, I could add 4 new cocktails to the menu!  Thanks, Automated Bartender's E-ssistant (or, ABE)!

I know that there are mobile apps out there that provide some of this functionality for me.  But I want to build it the way I like it.  And, come on!  `palo.bar`?  It makes me so happy.

Necessary?  No.  *Cool?*  I hope so.  :)  So here's where I'm at after Day 1.

## Progress

1. Project created.  
2. Critical functions and domain-specific objects identified.
3. `Ingredient` model created.
4. Views and controller for `Ingredients` underway in a very rough form.

## Next steps

- Get a rough home page in place.
- Deploy to Heroku as soon as I can.
- Finish up views and controller for `Ingredients`.  Make sure everything works as expected.
- Start on the `Recipe` stuff.
- Create the home page based on a quick and smooth user interaction.
- Styles.  Mobile-first.  After everything works on the back end.
- Take a look at next features, including more intelligence for ABE, user profiles, etc.

But most importantly:

**Stay on track.**  Do not drop this side project.  Find the energy to push on and keep going after the baby goes to sleep.  Resist Netflix and Libby and the Switch.  They are the *enemies* of total seamless web-driven bar victory!

Anyways, I think these journals should help keep me going and knowing what I need to do next.  Stay tuned!  And I'm always open to friendly advice!
🔥Contentfull: Unauthorized monthly debit from my card
Tags: security, content, contentfull, jamstack
Published: 2020-05-26 18:50:28

Unauthorized monthly debit from my card.
I already wrote them earlier that I don't use the Contentfull services. 

I deleted my account, but why are payments still being debited from my card? Why aren't they do anything? #Contentfull Delete my billing information from your database!
Speakers Wanted: WomenTech Global Conference 2020 (Virtual)
Tags: eventsinyourcity, wecoded, techtalks, inclusion
Published: 2020-05-26 18:49:44

We have a few slots left in our Eastern Time/Pacific time zone program and are looking for technical talks and workshops on June 11th.

Let us know if you have given recently a tech talk and we'd be happy to consider it either via https://www.womentech.net/form/apply-to-speak or PM https://twitter.com/WomenTechNet or https://www.linkedin.com/in/annaradulovski/
SQL vs NoSQL vs both options for Web projects?
Tags: discuss, database, sql
Published: 2020-05-26 18:47:43

---
title: SQL vs NoSQL vs both options for Web projects? 
published: true
description: 
tags: #discuss #database #sql
---

### I have a question involving the choice of database technology in a specific case. 

SQL vs NoSQL is a common discussion about what Database suits better for developing web projects, and we already have a lot of articles explaining the differences, advantages/disadvantages of each type of Database like the articles below. 

{% link https://dev.to/pankajythakare/database-sql-or-nosql-30pg %}
{% link https://dev.to/trevoirwilliams/relational-sql-vs-non-relational-nosql-databases-hi5 %}

So, in the last years, I have seen people choosing NoSQL by default, just considering the scalability as the main precaution to use that type of Databases, but they disregard all the complexity to use an unstructured schema or disregard the other use cases that NoSQL is built for like support large teams with a lot of services (and the team choice NoSQL having only 5 members).

Recently, I saw an architecture diagram for a web project using both technologies in this [link](https://github.com/donnemartin/system-design-primer) and I really liked to see both technologies being used to get the best of the two worlds.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c3sshpnybp9f3iuas4up.jpg)

My question is, is really necessary to use NoSQL as default choice only considering scalability issues rather than use SQL or a Hybrid Solution?
Aerospike JDBC driver: SQL DDL compliance
Tags: aerospike, java, sql, jdbc
Published: 2020-05-26 18:37:09

#Introduction
My previous [post](https://dev.to/alexradzin/introduction-to-the-aerospike-jdbc-driver-51m4) has introduced to reader the Aerospike JDBC driver. This post explains one of its feature - DDL.

#DDL - data definition language
Typical relational database requires schema definition. DDL commands can create schemas, tables, indexes etc. Aerospike is a schemaless database. Namespace cannot be created dynamically: it must be configured using configuration file. Aerospike set (similar to table in a relational database) should not be created explicitly: it is created automatically when data is being written.

Secondary indices exist in Aerospike as well as relational databases and can be created and dropped dynamically. Aerospike JDBC driver supports commands CREATE INDEX and DROP INDEX. 

Relational database "knows" type of indexed field, so it should not be mentioned in "CREATE INDEX" statement. Aerospike is schemaless DB, so the index type is defined when index is being created:

```sql
CREATE STRING INDEX INDEX1 ON MYTABLE (SOME_FIELD)
```

Generally syntax of create index statement looks like

```sql
CREATE <type> INDEX <index_name> ON <set_name> (<bin_name>)
```

The following index types are supported: 
- `STRING`
- `NUMERIC`
- `GEO2DSPHERE`
- `STRING MAPKEYS`
- `STRING MAPVALUES`
- `NUMERIC LIST`

Dropping index is simpler:

```sql
DROP INDEX <set_name>.<bin_name>
```

For example: 

```sql
DROP INDEX MYTABLE.INDEX1
```

#Project home
The project is available in [GitHub](https://github.com/alexradzin/aerospike-jdbc-driver/).

#What's next
Next article of this series will explain the SQL DML compliance.

#Previous
[Introduction to the Aerospike JDBC driver](https://dev.to/alexradzin/introduction-to-the-aerospike-jdbc-driver-51m4)
🛑 7 Demo Websites Which You Can Use To Perform API Testing?
Tags: testing, tutorial, webdev, beginners
Published: 2020-05-26 17:59:53

In this video of 30 Days of API Testing Challenge, I am going to discuss 7 Demo Websites for API Testing.

[![30 Days of API Testing](https://i.imgur.com/OrgJqnS.png)](https://youtu.be/B5gMi1jPUnE "30 Days of API Testing")


🚀Link 
- https://reqres.in/
- https://httpbin.org/
- http://dummy.restapiexample.com/
- https://jsonplaceholder.typicode.com/
- https://fakerestapi.azurewebsites.net/
- https://www.programmableweb.com/apis/directory
- https://developers.google.com/maps/documentation
- https://developer.github.com/v3/repos/

### For Random User 
- https://randomuser.me


🚀 Day 26 Task:  Show API testing demo, I have modified it to Demo Sites for API Testing.

🚀 Thread:  https://scrolltest.com/api/day26

🚀 All Task List: https://scrolltest.com/api/task

🚀 Watch Full Playlist : https://apitesting.co/30days

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Web Monetization in Vue App using plugin
Tags: gftwhackathon, vue, webmonetization, webdev
Published: 2020-05-26 17:50:55

In this article I will be explaining how we can use plugins in Vue to extend the Web Monetization functionality to our Vue App.

Plugins are the most simple and easy way to add global features to our app. They can be used to extend additional capabilities like routing, immutable stores, analytics and DOM manipulations.

So let's try implementing Web Monetization using plugins in your Vue App.

## Steps
* Create a Web Monetization plugin.

```javascript
// file: web-monetization.js

export default {
  install(Vue) {
    Vue.proptype.$webMonetizaton = this;
    Vue.webMonetizaton = this;

    if (typeof window !== "undefined") {
      window.$webMonetizaton = this;
    }
  },
  enableWebMonetization() {
    if (!document.monetized) {
      const monetizationTag = document.createElement("meta");
      monetizationTag.name = "monetization";
      monetizationTag.content = "payment_pointer";
      document.head.appendChild(monetizationTag);
    }
  },

  disableWebMonetization() {
    const removeMonetizationTag = document.querySelector(
      'meta[name="monetization"]'
    );
    removeMonetizationTag.remove();
  },

  webMonetizationEvents() {
    document.monetization.addEventListener("monetizationstart", currentState);
  },

  currentState(event) {
    //console.log(event);
  }
};
``` 

* Register your plugin with your Vue App.

```javascript
import Vue from "vue";
import { WebMonetizationPlugin } from "./web-monetization.js";

Vue.use(WebMonetizationPlugin);
```

* Use plugin in your app.

```javascript
//to enable web monetization
this.$webMonetizaton.enableWebMonetization();

// to disable web monetization
this.$webMonetizaton.disableWebMonetization();
```

##Link to code

You can find the code [here](https://github.com/Jasmin2895/web-monetized-video/tree/master/vue-plugin-web-monetization)

##Resources
[Web Monetization Doc](https://webmonetization.org/docs/getting-started)
[Vue js Plugins](https://vuejs.org/v2/guide/plugins.html)
What’s your alternative solution? Challenge #51
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-05-26 17:44:43

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Find the maximum number in a jagged array of numbers or array of numbers

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge46a

var ar = [2, 4, 10, [12, 4, [100, 99], 4], [3, 2, 99], 0];

var max = findMax(ar);
println("Max  = ", max);

// Use recursion to find the maximum numeric value in an array of arrays
function findMax(ar)
{
    var max = -Infinity;

    // Cycle through all the elements of the array
    for(var i = 0; i < ar.length; i++)
    {
        var el = ar[i];

        // If an element is of type array then invoke the same function
        // to find out the maximum element of that subarray
        if ( Array.isArray(el) )
        {
            el = findMax( el );
        }

        if ( el > max )
        {
            max = el;
        }
    }

    return max;
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
Remote dev checklist
Tags: discuss, webdev, productivity
Published: 2020-05-26 17:42:18

Hello fellow devs, considering lots of you work **remote** nowadays, what guidelines do you follow to make this more enjoyable ❓

### Here's what I try to do:
- **have a nice setup** - it's important that you enjoy your space  since you will spend so much time in here. If you want to check out mine I posted it [here](https://dev.to/alexandrudanpop/comment/p83f)

{% comment p83f %}

- **use good hardware and technical setup** 💻. Even though I don't like having many things on my desk, apart from the Dell XPS 15, what makes my life better is this pair of [NC headphones](https://www.amazon.com/Bose-QuietComfort-Wireless-Headphones-Cancelling/dp/B0756CYWWD). They are important for **deep focus** -blocking out the fan noise from the laptop or the outdoor noise as I sometimes work with the windows open

- **have a schedule & be organized** - I use the same 9-5/6 hours that I would use if I would go to a regular office

- **interact, share ideas, try to help others** - I have conferance calls daily with teammates to help on job topics. Online communities are also great - [Dev](https://dev.to/alexandrudanpop), [Twitter](https://twitter.com/alexandrudanpop) - this is the best time to get you social in the online space

- **deliver awesome work** - now it's the right moment to be productive and really focus on what you need to achieve. Being remote also saves a lot of time that can be invested into sharpening some of our skills or enjoying some hobbies 🌟
Genetic Programming With Javascript React JS
Tags: machinelearning, react, javascript, geneticprogramming
Published: 2020-05-26 17:10:10

For the purposes of learning, i implemented a genetic programming algorithm using syntactic trees to discover mathematical functions that represent the learning of input and output data. 

See this example, XOR operator:

[N,x1,x2,Result]
[1,0,0,0],
[2,0,1,1],
[3,1,0,1],
[4,1,1,0],
[5,0,0,0],
[6,0,1,1],
[7,1,0,1],
[8,1,1,0],
[9,0,0,0],
[10,0,1,1],
[11,1,0,1],
[12,1,1,0]

Training with the first 4 registers, the tree found the following function:
((x2-x1) ** (((70-0) * (x1+2))+(Math.tan(x2) * x1)))

The tree:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eomwo3ttcxan7xj0y7x3.png)

Replacing values:
((0-0) ** (((70-0) * (0+2))+(Math.tan(0) * 0))) = 0
((0-1) ** (((70-0) * (1+2))+(Math.tan(0) * 1))) = 1
((1-0) ** (((70-0) * (0+2))+(Math.tan(1) * 0))) = 1
((1-1) ** (((70-0) * (1+2))+(Math.tan(1) * 1))) = 0

Graphic: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pq4cowicpwlvycnghztg.png)

We can configure genetic programming with a larger population and different types of mutation to explore better tree generation and faster data approximation.

If you also like genetic programming, you can download the code and implement a better solution.

A online example is here:
https://linuxever-2b066.web.app/

The code is available for download on github:
https://github.com/rennorodrigo/pgeneticareactjs