teleren/devto huggingface dataset:
Easily scale applications without giving up control & ownership
Tags: blockchain, javascript, opensource, microservices
Published: 2020-04-15 23:14:18

## Scaling really sucks
Scaling applications can be hassle & cost to those building applications and starting businesses.

There's always the option to invest in your own servers, or purchase usage of remote servers like Digital Ocean, but these usually require significant costs just to get started. **Plus, how do you even know if a new project will take off and find a user base to justify the costs?** 

Avoiding these upfront costs so that entrepreneur-developers can build more projects, quicker and easier **is the reason products like Firebase exist.** And they do solve this problem, but **unfortunately that comes at the cost of revoking certain elements of control and ownership over your applications.** 

Some would say that centralized products like Firebase are required to solve the scalability issue, but I beg to differ.

## Decentralization to the rescue? 

Enter modular development frameworks that are able to be decentralized using blockchain tech. Frameworks like this, such as the [MESG Framework]((https://mesg.com/get-started/?utm_source=devto&utm_medium=blog&utm_campaign=scale_ownership)), keep the ownership of applications and components in the developers' hands (secured via blockchain), while only paying per application execution. 

With this particular framework, **you can run application locally, in your own distributed network, or on a public distributed network** where you can outsource processing at a per-execution rate. It's all in your hands.

So, not only can you save by only paying for what you use, but also you can also make money by sharing customizable components like services and processes. And a blockchain ensuring payments go directly to the creator. 

**There are new players in town,** utilizing many different technologies to bring a better development and business building experience. And I'm all on board for that. 

You can play around with the open-source MESG Framework [right here](https://mesg.com/get-started/?utm_source=devto&utm_medium=blog&utm_campaign=scale_ownership).
Coding challenge for kids and parents
Tags: challenge, javascript, codingwithkids
Published: 2020-04-15 23:09:00

Coding challenge for kids and parents: Draw a car 🚗 with code using only basic shapes.

## Rules:

- Use [codeguppy.com](https://codeguppy.com) editor. It is FREE p5.js based environment.

- Use basic shapes and colors (see image below)

- Share your program.

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


## Why this is great?

Drawing with code is one of the easiest and most engaging ways to introduce kids to text based coding. An absolute beginner can start writing real JavaScript programs (that draw nice pictures) in only couple of hours.

As a parent you can do this challenge together with your kids.


## Can I see an example?

Below is an example of a simple car drawn using codeguppy.com editor. This example is part of a future book about this topic.

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

Feel free to ask any question you may have.

Happy coding!
Introducing "Anabel": A personal website/resume template
Tags: webdev, tailwindcss, html, css
Published: 2020-04-15 22:31:40

Yesterday, I came up with the idea to build a personal website for my sister's birthday.  Because her birthday is today, I, being the nice sister I am, woke up early to cram in a few hours of work into the project I named after her:

[Anabel Personal Website Template](https://github.com/klickers/anabel)

It's built on purple because she loves purple.

![Anabel homepage](https://raw.githubusercontent.com/klickers/anabel/master/dist/anabel.PNG)

The website is built on TailwindCSS.  The template colors and fonts can easily be changed from the variables in the `src/before.css` file:
```
:root {
    
    /* Display & Body */
    --font-display: "Baloo Paaji 2";
    --font-body: "Lato";
    --color-display: theme(colors.gray.700);  /* color of display fonts */
    --color-body: theme(colors.purple.100);  /* body background color */
    
    ...etc.
}
```
## Usage
It's very easy to work with.  After downloading the repository, `cd` to the root folder and run:
```
npm install
npm start
```

Hot module replacement begins.  Edit any of the files within `src/`, then navigate to http://localhost:1234 to view the result.s

(The repository also contains a build within the `dist/` folder.  Just load the compiled `dist/before.css` file into any webpage you'd like.)


# Card Components
The template contains two basic types of card components:

![Anabel page component](https://raw.githubusercontent.com/klickers/anabel/master/dist/anabel2.PNG)

The first is a card-within-the-card style component, best used for the Employment History and Education sections of a resume.

The second is a list style component, best used for card categories like Skills, Hobbies, Languages, etc.


# Conclusion

This project was fun to build, and I enjoyed it (almost!) every step of the way.  Next, I plan to create a Routify (Svelte) template based on Anabel to make creating a multi-page Anabel website easier.

That's it for today!  I hope you enjoyed reading this post as much as I enjoyed creating [Anabel](https://github.com/klickers/anabel).  Leave comments below to let me know what you think, or alert me to any errors in the code.  ;)
How we implemented MySQL types in our Versioned Database
Tags: git, sql, database
Published: 2020-04-15 22:23:04

[Dolt](https://github.com/liquidata-inc/dolt) is a SQL database with built-in Git versioning, branching, and distribution semantics that makes collaborating on and distributing data effortless.

One of our goals is to be a drop-in replacement for workflows that already take advantage of MySQL, and thus we've had to model our product after many of the features that make MySQL so ubiquitous. One of those is the type system.

If you're interested in our journey towards implementing MySQL's types, [then head here to check it out!](https://www.dolthub.com/blog/2020-04-15-how-dolt-types-work/)
Day 117 : Ain't No Sunshine
Tags: hiphop, code, coding, lifelongdev
Published: 2020-04-15 22:18:09

_liner notes_:
- Professional : Can't believe it Wednesday! Had an early morning meeting where we had a new team member go through a tutorial I rewrote so that it could be completed successfully quicker. Good news is that she was able to get through it pretty quickly! She said everything was pretty straight-forward and easy to follow. She did bring up some really great points from the perspective of a new person. I'm really liking having people go through these tutorials and demos and giving feedback. Cleaned up and refactored my other demo and shared it with the team I made it for. Looking forward to seeing where they want to take it. Sat in on a talk prep session where a team member practiced their presentation coming up. Picked up some really good tips I can incorporate when I give talks. Went through some reviews on my pull requests and responded.

- Personal : Last night, I used pen and paper to layout how I want a future Web Component to look and function. It's basically the about page that lists the technology used in the project, updates to the project, and some of my info with a link to my main site. I want to make it a Web Component because I'll be using it in a lot of upcoming projects and if I change one thing, I don't want to have to go back and change all the others. Going to be using <fieldset> tag. I've been looking through all the different HTML tags and seeing what's available. For my current project, I am using <details> quite a bit.

![A waterfall in a forest](https://dev-to-uploads.s3.amazonaws.com/i/1i2c3sy5hhgmxrs6ah4z.png)

Ain't no sunshine! Been cloudy and gloomy all day. haha Just want to go to sleep. Going to see if I can get more done on the Web Component.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube CICIOJqEb5c %}
Totoro is magic
Tags: challenge, css, anime
Published: 2020-04-15 22:05:39

Inspired by Myiazaki's Totoro in dusting off my CSS skills, I ended up with [this interactive animation](https://codepen.io/ruggero/pen/BaojYqB) in pure CSS.
I've learned that is actually possible to manage *states* also in CSS, through the *:target* property, without a single line of js.

It was a very funny exercise for me, so I propose a #CartoonCSSchallenge:

*Pick a frame from your favorite anime or cartoon and enrich it with some good CSS sauce* 🍄*, create some magic!* 🧙‍♂️🦄


{% codepen https://codepen.io/ruggero/pen/BaojYqB %}
Zendesk Developer Webinar Alert
Tags: webdev, beginners
Published: 2020-04-15 21:12:47

Hi 👋🏻Krishna here from Zendesk Developers. I’m super excited to announce our upcoming webinar on **April 29th** - brought to you by developers, for developers. 

Our webinar will focus on new Sunshine features that will help you manage customer data and integrate messaging and chatbots to scale customer support.We'll cover all the developer releases from Zendesk Relater 2020, plus live coding demos and Q&A with product experts. You won't want to miss it!

[Sign up today!](https://www.zendesk.com/support/webinars/?D2C=2247050&partnerref=dev_to&utm_source=external&utm_medium=organic&utm_campaign=webinar)

The Zendesk platform consists of two core products - Zendesk Sunshine and Sunshine Conversations. [Zendesk Sunshine](https://www.zendesk.com/platform/) is an open and flexible CRM platform that connects all your customer data for complete context. [Sunshine Conversations](https://smooch.io/?utm_source=zendesk.com&utm_medium=referral&utm_campaign=conversations-url) is our new messaging platform that lets you unify messages from every channel and build interactive experiences for [conversational business](https://www.zendesk.com/blog/conversational-business/).
Recorder for Playwright Tests
Tags: playwright, recorder, testing, testautomation
Published: 2020-04-15 20:53:08

You probably know about Puppeteer for coding headless browser tests on Chrome. It was started by Google engineers and was open-sourced on GitHub. 

Playwright is a Microsoft-backed open source project that takes the Puppeteer code and modifies it into a cross-browser version. The code will diverge more over time, but today, it is very similar to Puppeteer.

Testim.io (a company I work for) recently announced the availability of a free recorder to help you create Playwright tests faster. The recorder can be used as often as you like to create functional and E2E GUI tests. 

To get started go to [testim.io/playwright-recorder](testim.io/playwright-recorder) and enter your URL to test. It will require that you install a Chrome extension (the first time) to record the tests. Then go to your web application, click through a user scenario and when you are finished, simply return to the playwright-recorder to get your code.

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

While you are there, you can also see how Testim captures the same test. You can replay the test or edit the test in the Testim codeless tab and the changes will update the playwright code in real-time. 

Again this is free. You don't even have to give your email to use the recorder. 

While you are there, sign up for a free account to test up to 1000 test runs per month. Testim.io.
How to Convert SVGs to PNGs
Tags: todayilearned, django, books, python
Published: 2020-04-15 20:24:11

The interior artwork of Two Scoops of Django was hand-drawn, scanned, and embellished using Inkscape. The native format of Inkscape is SVG, and it also generates `pdf_tex` files for use within the custom LaTeX build we've used for years.

For the forthcoming [Two Scoops of Django 3.x](https://www.feldroy.com/products/two-scoops-of-django-3-x) we're moving off LaTeX to one powered by [Bookdown](https://bookdown.org/). While Bookdown uses LaTeX to render PDFs, it uses other engines to render other formats. To accommodate those engines, we need to convert the existing SVG images to PNG format. Here's what I figured out:

# Step 1: Install `librsvg`

``` bash
# On Mac
brew install librsvg

# On Windows using Chocolaty
choco install rsvg-convert
```

_If you want me to include your favorite package manager, supply the command in the comments and I'll add it!_

# Step 2: Convert Images

``` bash
# from within the tsd3.x/images directory
rsvg-convert ../tsd1.11/images/themepark.svg -o themepark.png -b white
```

## About the Arguments:

`-o` is short for `--output`. If that's not included the `rsvg-convert` returns an error that says `Multiple SVG files are only allowed for PDF and (E)PS output.`

`-b` is short for `--background`. For the Two Scoops of Django SVGs, not including that means the background is a very dark gray.

# Result

Here's our primary test file for exploring converting SVG to PNG. Original art by @audreyfeldroy.

![Icecreamlandia, the Official Theme Park of Two Scoops of Django. Original artwork by @audreyfeldroy](https://dev-to-uploads.s3.amazonaws.com/i/5nfrriggahl9yodm2dhg.png)
Securing Single Page Applications with Refresh Token Rotation
Tags: tokens, oauth2
Published: 2020-04-15 20:15:31

---
title: Securing Single Page Applications with Refresh Token Rotation
published: true
description: How Auth0 helps you securely maintain user sessions and engagement in the era of ITP
tags: #tokens #oauth2
canonical_url: https://auth0.com/blog/securing-single-page-applications-with-refresh-token-rotation/
---
TL;DR
The ability to maintain seamless experiences for end-users in Single Page Applications (SPAs) is often business-critical and can have an enormous impact on revenue.
New browser privacy controls adversely impact the user experience in SPAs by preventing access to third-party cookies, which are used for silent authentication.
Auth0 now offers an alternative--Refresh Token Rotation--that provides a secure method for using refresh tokens in SPAs while providing end-users with seamless access to resources without the disruption in UX caused by browser privacy technology like ITP.

[Read on 📖](https://auth0.com/blog/securing-single-page-applications-with-refresh-token-rotation/?utm_source=dev&utm_medium=sc&utm_campaign=refresh_tokens)
Summary and Next Steps
Published: 2020-04-15 20:10:49

In this tutorial, we started at the language basics of PHP and MySQL before diving into five detailed examples that culminated in building various parts of an online shopping system. We covered lots of topics such as web interface creation, server side validation and database initialisation. I believe you are now ready to put everything together and have a go at developing something on your own!

## Next steps
I suggest you take everything we learned and put it into practice by making your own shopping website from new. You could expand your knowledge into mobile app development, continue learning backend development (PHP and MySQL) or focus on making responsive frontend website designs. If you want some examples of what to create a project on, here are some of my suggestions that will get you thinking in terms web development in PHP and databases:
* Computer store ordering system
* Personalised wedding cake ordering system
* Supermarket item tracking system
* Worldwide springs tourist driven information sharing and rating system
* Cultural exchange programme chat forum
* Music album metadata cataloguing and dicussion site


## The End
You've reached the end of my PHP and MySQL development tutorial. I hope you learned a lot!

Here's a song I thought sounded like saying 'you've reached the end of a tutorial, but it's also the beginning of many future web projects':
{% youtube AKQ7v3S9atM %}
Pure CSS Watch
Tags: codepen, css, showdev, cssart
Published: 2020-04-15 19:50:33

<p>One of my first ventures into CSS art a few years back.  Since I didn't use any kind of JavaScript it doesn't sync to the actual time.  Not sure if there's a way to do that without any kind of JavaScript code.</p>

{% codepen https://codepen.io/tecknerd/pen/QWWRpKY %}
Education in my Plague Bunker
Tags: mit, tools, shell
Published: 2020-04-15 19:39:14

---
title: Education in my Plague Bunker
published: true
description: self-education while furloughed from work
tags: MIT, tools, shell
---

I got "furloughed" (and isn't that an appalling word? I prefer "given an extended paid holiday") from work because of OMG TEH DETHLURGI. I've previously - recently, even - gone several weeks without working, the most recent being the last seven weeks of 2019 when I was between jobs. Then I deliberately took the time off, and filled it with things like theatres and galleries and short holidays away from home. But for this period of several weeks when I won't have any work to keep me occupied I knew that I would go spare from boredom if I didn't find stuff to fill the time, and my usual distractions are unavailable. I could just passively consume media - there's plenty of opera available online for example, and I could just go on a Netflix binge - but that's just not me, I'd still get bored after a while.

So I decided to send myself back to school. I found interesting lecture series online covering all sorts of subjects, and made myself a schedule. I have kinda-sorta stuck to it. Most of the things I've been educating myself about aren't of interest to readers of this blog, but one in particular most certainly is. The [MIT Missing Semester](https://missing.csail.mit.edu/) looks at first glance to be really very basic stuff that any professional developer with my 25 years of experience really shouldn't need. However, I expected that there would be some nuggets of gold hidden in there. I've only watched the first two lectures so far, and discovered two marvellous tools.

[`tldr`](https://github.com/tldr-pages/tldr) provides brief examples of common invocations of complex tools. I can see myself using it most for `ffmpeg`.

Even more usefully, [`fzf`](https://github.com/junegunn/fzf), the fuzzy finder, integrates with your shell to make `C-r` (for searching your command history) even more useful.

Check them both out, I'm sure you won't regret it.
E5 - Extra Steps
Tags: tutorial, php
Published: 2020-04-15 19:30:31

Here I have provided some additional steps for you to try based on what we learned from Example 5. My next post will be a sample solution of these steps, although you will gain the most by creating a solution for yourself.

1. Add a CSS stylesheet and link it to the other pages.
2. Make the `edit_cart.php` script redirect back to the index page when add to cart is clicked from the index page, but redirect to the cart page otherwise. Add a link on the index page to go to the cart page, without adding a product.
3. Add a page header with links to the products and cart pages. Put it in a separate file and use PHP `include()` function to add it to the product and cart pages.
4. Make the header show the total number of items in the cart on any page.
5. Add a Product table to your database to store additional product details such as description and price. (See [Example 1 - Getting data from database](https://dev.to/herobank110/example-1-getting-data-from-database-516f))
6. Make the Cart table `ProductID` field a foreign key to reference the primary key in the Product table.
7. Output the product details of all products in the database on the products page (`index.php`).
8. Add images of each product on the products page. You can either save them in the database or store image files with filenames of each associated product ID.
9. Add payment input fields (eg card number, expiry date) to the checkout page and show them in the invoice.
10. Validate the payment input to cancel the order if it is invalid. Send an error message in this case.
11. Extract the email related code in the on_checkout.php file to a function and the same for the database saving code.
12. In the on_checkout.php script, if the cart is empty, invalidate the purchase and return to the cart page.
13. Change the invoice email to use an HTML content type. This will require additional email headers to be added.

Parent topic: [Example 5](https://dev.to/herobank110/exercise-5-shopping-facility-443n)
E5 - Email the Receipt
Tags: php, tutorial
Published: 2020-04-15 19:24:37

Once an order is confirmed, online shops commonly send an email receipt. First you must have email setup on your XAMPP installation, if not refer to [Setting up email dispatch from a local server](https://dev.to/herobank110/additional-setup-43ko#email-dispatch). If you haven't already, check out the previous tutorial stage where we [saved orders in a database](https://dev.to/herobank110/e5-save-order-in-database-159m).

Open the file `cart.php` for editing in the following steps:

1.&nbsp;Replace your checkout link with a `form` element. Set the action to "on_checkout.php" and the method to post.
```php
<form action="on_checkout.php" method="post"> </form>
```

2.&nbsp;Add label and input elements inside the form for an email address field.
```php
<div> <label>Email Address:</label> <input name="email"> </div>
```

3.&nbsp;Add a button to ‘checkout’ or submit the form.
```php
<button>Checkout</button>
```

4.&nbsp;Test the new cart page by submitting an order. The result of the form is no different to the link from before, as nothing is being done with the customer’s email yet.

Open `on_checkout.php` for editing in the following steps:

5.&nbsp;Assign the submitted email address to a variable, underneath the database querying and above where the cart cookie is made to expire.
```php
$emailAddress = $_POST["email"];
```

6.&nbsp;Create variables for the email subject and headers. The subject will be the content sent as the subject and the headers will just have the email address you are sending from.
```php
$emailSubject = "Invoice of your order from Neat Treats";
$emailHeaders = "From: neattreats.sender@gmail.com\r\n";
```

7.&nbsp;Create a variable for the email body.
```php
$emailBody = "Thanks for your order! We hope you enjoy it a lot.\n";
```

8.&nbsp;Add a list of the products that were ordered to the email body using a foreach loop on the cart variable that was already created in this script when it was being saved into the database.
```php
$emailBody .= "Products:\n";
foreach($cart as $productID => $quantity)
    $emailBody .= "Product #$productID x$quantity\n";
```

9.&nbsp;Use the `mail()` function to send the invoice email to the customer.
```php
mail($emailAddress, $emailSubject, $emailBody, $emailHeaders);
```

10.&nbsp;Test out the updated checkout script by entering your personal email address. It will send you an email with the products you just ordered.

Parent topic: [Example 5](https://dev.to/herobank110/exercise-5-shopping-facility-443n)