teleren/devto huggingface dataset:
CSS Illustrations - How to Create a Cloud
Tags: css, webdev, coderarchive
Published: 2020-06-05 14:43:52

Hey everyone! I've been really loving CSS Illustrations lately so I've  started to make video tutorials on some for other people :) 

For the first video we're going to look at how to create a cloud with pure CSS

If you'd like to see more of my videos, [head over to Youtube!](https://www.youtube.com/channel/UCWaB4SBBUCvhYb91fz5Vidg) 

A follow/sub comes a long way to show support! 🙏

Follow and connect with me on:
----------------------------------
🐦 Twitter: https://twitter.com/coderarchive
📚 Github: https://github.com/luvuong-le
💼 LinkedIn: https://www.linkedin.com/in/lu-vuongle/
📷 Instagram: https://www.instagram.com/coderarchive/
📝 Dev.to: https://dev.to/coderarchive
Asking Why to Uncover Assumptions
Tags: career, productivity, learning
Published: 2020-06-05 14:38:48

You can keep reading here or [jump to my blog](https://odone.io/posts/2020-06-05-asking-why-to-uncover-assumptions.html) to get the full experience, including the wonderful pink, blue and white palette.

---


![Handmade sketch displaying 3 stacked tickets each with a bug and the word timezone on the left and an astonished face on the right](https://odone.io/images/tickets.png)

Stop. Consider the task you are doing.

**Why are you working on it? Why is it important? Why?**

Recently, I worked in a project that enabled users to record measurements. We decided to prioritize bugs and rapidly noticed a ton of issues related to timezones. Who would have guessed?!

We jumped in and started moving tickets from to-do to done. We were working fast but there were so many we could never see the finish line. This is when we stopped and asked why.

> Why are timezones important?
> Because we have them in the product.
>
> But why do they really matter?
> Because we are recording the local time of each measurement.
>
> But why do users really really want to have timezones?
> Because they compare measurements taken across timezones.
>
> But why do they do that?
> Because.. Because.. Well, that's a good question!

Turns out, timezones were not *really really* needed. With that in mind, we went back and continued fixing the issues. No! Of course we didn't. We actually spent the next several hours using the developers' favourite key: backspace.

We made a mistake. We started with a solution (i.e. timezones). Asking why allowed us to ladder up to the problem. This is where we uncovered the assumption (i.e. users need to compare across timezones). Finally, we found a cheap way to validate it and discovered the problem was not there in the first place.

Unfortunately, we could not go back and avoid all the costs already incurred in development and maintenance. However, we saved money going forward. And we spared developers from having to deal with timezones in the future.

---

I stumbled upon ["Challenging requirements"](https://vimeo.com/31715562) while writing this post. Thanks [Gojko](https://gojko.net), not only it inspired me to change the structure of this article, you also gave me some great ideas for the future.

---

Get the latest content via email from me personally. Reply with your thoughts. Let's learn from each other. Subscribe to my [PinkLetter](https://odone.io#newsletter)!
Javascript Library for implementing WebMonetization
Tags: webmonetization, gftwhackathon
Published: 2020-06-05 14:38:33

# WebMonetization Helper

Despite the simplicity of the WebMonetization specification for use, I had the idea to implement a Javascript library to facilitate its use on any website, without having dependencies (such as Jquery, among others).

## Code

All code is available under MIT license at: https://github.com/nescampos/webmonetizationhelper

*The methods and functions are explained in the Readme*

![Code](https://dev-to-uploads.s3.amazonaws.com/i/jdl3o3oiad2qu51p5ws5.png)

## Use

For using, just need import the Javascript file (or minified version) and instance class **WebMonetization**

## Bugs or problems

If you found a bug or problem, just create an issue on: https://github.com/nescampos/webmonetizationhelper/issues
ApolloClient - React useSuspenseQuery hook
Tags: graphql, apollo, react, suspense
Published: 2020-06-05 14:30:52

If some of you need hook to collaborate with React Suspense and Apollo Client - I've created one.

According to discussion on [Apollo github](https://github.com/apollographql/apollo-feature-requests/issues/162) - Apollo Client 3 won't have such a hook in first version. Yeah I know, Suspense is still in React experimental phase, but it looks like lot's of society started using it and it becomes an inseparable part of React. That's why I've created one and you can get it from this [npm](https://www.npmjs.com/package/@brainly/use-suspense-query).

For now this hook is out of types, and still this code is not perfect, but it provide error handling and promise managing for `Apollo.query`. We tested it at Brainly on one of our prototype project and works fine. 
Cheers!
Run python nosetests using a watcher for changes on Linux
Tags: python, testing
Published: 2020-06-05 14:24:05


Apparently, this is very specific to linux (at least Ubuntu 18.04) as I tried using the "nose-watch" package and it did not work. Ultimately, I did this:

```bash
sudo -H pip install nose-watcher
nosetests --with-watcher
```

Also, if you plan to run it in another window you will need to reload or open a new shell post install.
Web Monetised Fox-Game
Tags: gftwhackathon, webmonetization, game, coil
Published: 2020-06-05 14:21:52

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built
I built a game called the Fox game, which is a digital pet game. I was doing a [course by Brian Holt](https://frontendmasters.com/courses/front-end-game/) in which I learned how to build a small game with HTML and JS. I applied that knowledge to building the same game with web monetization.

### Submission Category: Creative Catalyst

[Note]: # (Foundational Technology, Creative Catalyst, or Exciting Experiments)


## Demo

{% youtube wWHB78tIVHs %}


## Link to Code
{% github sudo-open/testgame %}
[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)


## How I built it 

[Note]: # (For example, what's the stack? did you run into issues or discover something new along the way? etc!)

Technologies used - HTML, CSS, JavaScript


## Additional Resources/Info 

Discalimer:- All content (images and animations) is licensed under CC-BY-NC-4.0 by Brian Holt and Frontend Masters. My code is under MIT lisence.

I will host the game [on github pages](sudo-open.github.io/testgame)

[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)
AWS - Save Costs with Lambda
Tags: aws, devops, serverless, python
Published: 2020-06-05 13:35:43

When I first started at my current role, AWS was completely new to me. And I mean everything. I'd worked previously dealing with physical servers and now I was just dealing with the CLI and Web Console to interact and manage servers.

One thing that caught me by chance was when I saw the billing every month and wondered why were we paying for development instances, databases, etc. when no one was there to work on them?

Whilst learning more as time went by, I found inspiration and use from previous colleagues works to deal with these unused resources. And that's when I found use and power of AWS Lambda.

I won't go in-depth but keeping things simple, using Crons from CloudWatch Events to trigger Lambdas that shutdown or terminate instances saves money. 

Why is that? Because in most cases, unless you use Lambda a lot, it's free under the [AWS Free Tier](https://aws.amazon.com/free/) and such simple tasks such as deleting EC2 instances run take less than 1 second. Finally, it is automated. 


Here's an example of what is needed to filter and terminate EC2 instances with specific tags:

```
import boto3

EC2_CLIENT = boto3.client('ec2')
EC2_RESOURCE = boto3.resource('ec2')

PROJECTS = ['super', 'special', 'ultra',]
ENV = ['dev']

def get_ec2_instances():
    ec2_instances = EC2_RESOURCE.instances.filter(
        Filters=[
            {
                'Name': 'tag:project',
                'Values': PROJECTS
            },
            {
                'Name': 'tag:env',
                'Values': ENV
            },
        ]
    )

    return [instance.id for instance in ec2_instances]

def delete_ec2_instances(instance_ids):
    if instance_ids:
        EC2_CLIENT.terminate_instances(InstanceIds=instance_ids)

def delete_instances(event=None, conext=None):
    delete_ec2_instances(get_ec2_instances())
```

You can easily use environment variables, add logging and error handling if needed but sometimes keeping it simple is the best.

And if you need to change when instances get terminated, just update your CloudWatch Event.
Wikipedia Scraper in Java
Tags: java, wikipedia, scraper
Published: 2020-06-05 14:15:59

i have created a simple java tool to get data from Wikipedia.

Have a look here on [Github Repo](https://github.com/viralvaghela/Jwiki)

##Example 
```
 Jwiki jwiki = new Jwiki("elon musk"); 
 System.out.println("Title :"+jwiki.getDisplayTitle());
 System.out.println("Text : "+jwiki.getExtractText());  
 System.out.println("Image : "+jwiki.getImageURL()); 
```
Unit test newbie - how a novice writes his first unit tests
Tags: javascript, testing, webdev, beginners
Published: 2020-06-05 14:15:21

I did have to test if that stack overflow code would worked. I made some changes to follow the recommendations of the moment js documentation

```Js
function weekDays(month, year) {
    const endDate = moment.utc().year(year).month(month).endOf('month');

    return Array(endDate.date()).fill(0).map((_, i) => moment.utc().year(year).month(month).date(i + 1))
        .map((day) => ({day, week: day.week()}))
        .filter(({week}, i, arr) => arr.findIndex((info) => info.week === week) === i)
        .map(({day, week}) => ({
            week,
            days: Array(7).fill(0).map((_, i) => moment.utc(day).week(week).startOf('week').add(i, 'day'))
        }));

}
```
Test with Jest Framework
```JavaScript
let testAll = (month, year) => {
    const monthYear = moment().year(year).month(month)
    const firstDay = monthYear.startOf('month');
    // console.log(firstDay)
    const endDay = moment().year(year).month(month).endOf("month");
    const calendar = weekDays(month, year);

    describe("testing calendar", () => {
        it('check if first date is in first week / should be true', () => {
            expect(calendar[0]["days"].filter((day) => day.date() === firstDay.date())[0].format("YYYY-MM-DD") === firstDay.format("YYYY-MM-DD")).toBe(true);
        });

       it('check if end date is in end week / should be true', () => {
            expect(calendar[calendar.length - 1]["days"].filter((day) => day.date() === endDay.date())[0].format("YYYY-MM-DD") === endDay.format("YYYY-MM-DD")).toBe(true);
        });
    });
}
```
Once modified I had to know if it would work, and so the need arise to test the code until 80 years

```Js
let locale = ["en", "es", "fr", "de"]
for (let i in locale){
    moment.locale(`${locale[i]}`)
    for (let y = 2000; y < 2100; y++) {
        for (let m = 0; m <= 11; m++) {
            testAll(m, y)
            console.log(m)
        }
    }
}
```
P.S: I'm not an expert in javascript and it's my first unit test
Pass arguments from command line to main in Flutter/Dart?
Tags: flutter, dart
Published: 2020-06-05 14:03:12

You can add the `--dart-define=` in you `flutter run` command
Like this

```dart
flutter run --dart-define=environment="QA"
```

Now access the variable in the dart file

```dart
const environment =
      String.fromEnvironment('environment', defaultValue: 'Testing');
```

if you are using flavours you can use this command

```dart
 flutter run --flavor core_app -t lib/core_app.dart --dart-define=environment="QA"
```


Thanks
Intelligent Machine Learning Tools with Self-Organizing Maps and Other Unsupervised Methods
Tags: deeplearning, machinelearning, unsupervisedlearning
Published: 2020-06-05 13:37:53

![Better Machine Learning Software with Unsupervised Learning](http://perfectial.com/wp-content/uploads/2020/06/SOM-03-scaled.jpg)

Most tech-oriented blogs have been largely one-sided in their coverage of machine learning, posting articles almost exclusively skewed towards supervised methods.

That’s not exactly unwarranted since supervised models, and particularly neural nets, have been deployed to great success both in business and academia (CNNs, for example, had been integrated into automated emergency braking systems, which helped reduce collisions by 40%), but it might’ve created the impression that there aren’t other ML subsets worth paying attention to, which is not the case.

It’s important to understand that all the algorithms (models, machines – whatever you want to call them) in supervised learning essentially do one thing – function approximation. They learn to map inputs to outputs after being fed tons of labeled data (e.g. being shown repeatedly what the desired outcome should be). They typically work with high-dimensional inputs such as images and massive arrays of numbers which they try to map to a single value (a class or a category) and that’s why the training process is extremely complex and long. And their performance accuracy (especially in the case of deep learning systems) is only as good as the training dataset.

Reinforcement learning is even more prone to sample inefficiency. For example, Facebook’s Go-playing model has to be trained for two weeks (by playing around 20 million games on 2000 GPU processors simultaneously) before it can perform on a close-to-human level. That’s far more than a person could play in a lifetime.

So far, RL has only shown outstanding performances in simulated environments and it’s been impractical for most real-world applications as we can’t, say, have a robot destroy millions of cars before it learns to drive adequately.

It’s becoming clear now that making algorithms smart isn’t about picking the best language for machine learning or adding layers and architectural complexities to the latest neural net models. It’s about ditching entirely the process of training with labeled data.

The post [Intelligent Machine Learning Tools with Self-Organizing Maps and Other Unsupervised Methods] (https://perfectial.com/blog/intelligent-machine-learning-tools/) appeared first on [IT Consulting Company Perfectial](https://perfectial.com/).
Open Source Material UI React Component Builder
Tags: react, materialui, dnd, javascript
Published: 2020-06-05 13:30:42

---
title: Open Source Material UI React Component Builder
published: true
description: Open source react component builder
tags: react, materialui, dnd, javascript
cover_image: https://s3.us-west-1.wasabisys.com/public.sugarkubes/mui_scaffold/demo.gif
---

Hi everyone, 

Today I open sourced part of a nocode web app builder I made. This is just the core drag and drop component builder. I struggled for the past year to get the nocode web app builder off the ground and so am chopping it for parts and open sourcing them to see if there's interest. 

It's on [Product Hunt](https://www.producthunt.com/posts/open-source-react-material-ui-builder) today, if you have a few minutes to vote :)

It works like you'd expect it to if you're familiar with material ui. 

[Live Demo](https://scaffold-iqwznvcybq-uw.a.run.app/)

Drag and drop material ui components on to the page. you can even style them!

![Demo](https://s3.us-west-1.wasabisys.com/public.sugarkubes/mui_scaffold/demo.gif)

Toggle between the elemets, the editor, and a tree view

![Demo](https://s3.us-west-1.wasabisys.com/public.sugarkubes/mui_scaffold/parts.gif)

Click the code tab when you're ready. Your scaffold awaits!

![Demo](https://s3.us-west-1.wasabisys.com/public.sugarkubes/mui_scaffold/code.gif)

Hope this saves a little time for you on your next React/Material UI project!

Hugs, 

AP
Install any package with ZPKG
Tags: linux, productivity
Published: 2020-06-05 13:13:27


There is a really cool (meta) package manager I wrote. Usually you are kind of bound to specific package managers depending on your Linux distribution of choice. With ZPKG you can just use any package manager on any Linux distribution. It is still alpha/beta but already works fairly well. Let's take a look.

Let's take the exemplary use case that you are on Ubuntu Linux and want to do some quick image editing with Gimp. You totally could install that with `apt` or `snap`, for example:

```
apt-get install gimp
```

While that is the "official" way of doing that and apt does a fairly good job, there are still some things I don't like so much.

* You have to use the root user. I personally try to avoid that.
* The package integrates into the system and e.G. creates new users, installs services, configuration files etc. That could be desired, but causes "bloat" on the whole system.
* Ubuntu packages are stable, but sometimes a little outdated (imho) in comparison to other distributions.
* I find apt slow in comparison to e.G. `apk` from alpine. Big packages can take up quite some time.

So what I do in that specific use case of just quickly wanting Gimp to edit an image or so without putting too much weight on my global system installation, is to use ZPKG. Let's takes a look:

```
zpkg add gimp --from alpine:edge --apk gimp
```

Or a shorter less explicit invocation

```
zpkg add -A gimp
```

*Note:*
Make sure you have this directory in your PATH: `$HOME/.local/bin`

And voilà you can type gimp in any terminal in order to use it. Interestingly the whole installation is on your home folder and completely independent from the Linux Distribution or it's libc implementation. So you could do things like share your home folder across multiple Linux Distributions and still use the same programs.

Another thing that I think is pretty nice, is that with zpkg you can also package other packages. Let me explain:

```
$ zpkg package gimp gimp.zpkg  # that is the "gimp" we just installed
Install package locally:
tar -xf gimp.zpkg -C ~/.local 

Install package globally:
tar -xf gimp.zpkg -C /usr/local

```


ZPKG itself is distributed as a zpkg package, so this is how to actually install it:

```
curl -Lf https://github.com/ihucos/zpkg/releases/download/0.2.4/zpkg.zpkg | tar -xJf - -C ~/.local
```

So in other words, with ZPKG you can also create packages, that are completely distribution agnostic.

Of course you can also do stuff like upgrading installed packages, removing them, and so on. Check it out :-)

The implementation details include overlay filesystem, user namespaces, hard links and other interesting topics that I will hopefully follow up on more posts :-)

Here is the website and the GitHub page
http://zpkg.plash.io/
https://github.com/ihucos/zpkg
How to Fix QuickBooks Error Code 80029c4a?
Tags: quickbookspointeofsale, quickbooksdesktopservice, quickbooksenterprisesolutions
Published: 2020-06-05 12:52:29


The immense popularity of the application software QuickBooks has made it renowned all over the world. Business organizations from different countries all over the world prefer QuickBooks over other accounting software. However, the software QuickBooks Enterprise suffers from different error codes and issues. Failing to resolve these errors from the software can lead to a loss. The QuickBooks error code 80029c4a is also an example of a complex error. The best way to resolve the QuickBooks error code 80029c4a is by using the reboot.bat file on the device. However, the process is lengthy and requires a greater number of steps to resolve the error from the device. Hence a user can also take the help of QuickBooks desktop services team to resolve this error code from the device. The common causes of the occurrence of error code 80029c4a are trying to access a damaged file, interference from a third-party software present on the device, improper functioning of the antivirus program, etc. The error code also affects the working of QuickBooks point of sale. Hence it is more damaging than other such error codes. After trying the reboot.bat file the user must restart the system device to ensure complete implementation of changes done.  

Cadda Rim is a creative person who has been writing blogs and articles about QuickBooks Products and Services. He writes about the latest updates regarding Quickbooks point of sale,Quickbooks desktop service and how it can improve the work experience of users. His articles have been published in many popular e-magazines, blogs, and websites.

Source:- https://quick-booksupport.com/how-to-fix-quickbooks-error-code-80029c4a/
🚀10 Trending projects on GitHub for web developers - 5th June 2020
Tags: javascript, github, webdev
Published: 2020-06-05 12:35:42

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

Following on from last week [Responsively App](https://github.com/manojVivek/responsively-app), [Node Best Practices](https://github.com/goldbergyoni/nodebestpractices), [Algorithm Visulaizer](https://github.com/algorithm-visualizer/algorithm-visualizer), [JS Algorithms](https://github.com/trekhleb/javascript-algorithms) and [Real World](https://github.com/gothinkster/realworld) continue to trend well so have been omitted from this post. See last weeks post for more details.

### 1. Snowpack

A faster build system for the modern web.

{% github pikapkg/snowpack %}

---

### 2. HTML5 Boilerplate

A professional front-end template for building fast, robust, and adaptable web apps or sites.

{% github h5bp/html5-boilerplate %}

---

### 3. Air BnB JavaScript Styleguide

JavaScript Style Guide

{% github airbnb/javascript %}

---

### 4. Mostly Adequate guide to Functional JS

{% github MostlyAdequate/mostly-adequate-guide %}


---

### 5. Definitely Typed

The repository for high quality TypeScript type definitions.

{% github DefinitelyTyped/DefinitelyTyped %}

---

### 6. Ant Design

A UI Design Language and React UI library

{% github ant-design/ant-design %}

---

### 7. SWR

React Hooks library for remote data fetching

{% github vercel/swr %}

---

### 8. Solid

A declarative, efficient, and flexible JavaScript library for building user interfaces

{% github ryansolid/solid %}

---

### 9. Machine Learning Systems Design

A booklet on machine learning systems design with exercises

{% github chiphuyen/machine-learning-systems-design %}

---

### 10. Realtime - https://github.com/supabase/realtime

Listen to your to PostgreSQL database in realtime via websockets. Built with Elixir.

{% github supabase/realtime %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.