teleren/devto huggingface dataset:
Client Side Shopping Cart
Tags: showdev, webdev, javascript, html
Published: 2020-10-29 20:08:26

---
title: Client Side Shopping Cart
published: true
date: 2020-10-29 19:15:57 UTC
tags: ["showdev", "webdev", "javascript", "html"]
canonical_url: https://www.joshkasuboski.com/posts/client-side-cart-1/
---

I have my beer can working as a buy button, but what if you want to add products to a cart first.

## But Why

If you're trying to sell things easily (and cheaply) you can connect Stripe directly to a product page. You can see an example of this from the [stripe beer money](https://www.joshkasuboski.com/posts/stripe-beer-money/) article.

The main downside is that a customer would have to buy one thing at a time. We can add a cart, but still don't want to require a server.

## Creating a Cart

For a cart, we just need to keep track of items added and how many of each. We can store this information in [localstorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). This means if a user comes back to the page, their cart will still be there.

I tested this out with a sample store page. You can see the code at [kasuboski/client-side-cart-example](https://github.com/kasuboski/client-side-cart-example).

[![example store](https://www.joshkasuboski.com/posts/client-side-cart-1/example-store.png)](example-store.png)

It's basically a single `index.html` with `javascript`. It looks for products by finding `buttons` with `data` attributes. These attributes specify the product id, description and price.

When a user clicks the button, the item is added to the cart. This just loads the cart from `localstorage` updates the item quantity and saves it back.

```javascript
  function addToCart(data) {
    var cart = getCart()
    var prevQuantity = cart[data.id] ? cart[data.id].quantity : 0;
    cart[data.id] = {
      quantity: prevQuantity + 1,
      data,
    }

    localStorage.setItem('cart', JSON.stringify(cart));
    
    populateCart();
  }
```

The `populateCart` function sets up the cart area every time. There isn't anything fancy here… it just deletes all of the cart elements and recreates based on what's in `localstorage`.

## Next Steps 🦶

This works as a generic cart… but you can't buy anything. I'm going to make an example store to show buying items using Stripe.

Each item will need a Stripe Price and then when you Checkout it will call the Stripe redirect. Eventually, I want to make it easier to integrate as well. Maybe making this an actual library.
How do you measure engineering performance and process healthiness?
Tags: discuss, metrics, management
Published: 2020-10-29 19:07:59

Hey, folks!

The State of DevOps lists 2 metrics for Software Development: Deploy Frequency (Throughput), and Lead Time for Change. They are great for measuring the expected outcome of an Engineering Team.

I've seen managers attaching it to OKRs or used as the area KPIs. They are excellent indicators of performance for companies.

However, as an Engineering Manager, I don't see they're so useful for daily activities. They provide a high-level overview, but little visibility on what's going on in daily activities.

Managers usually need a more deep analysis of the process to improve the Lead Time and Deploy Frequency themselves.

For that task, I would go break Lead Time into smaller steps of the work, such as the Time from Commit to Open a Pull Request (assuming the company is doing code review), Time to Merge (from Opening to merging a Pull Request), and so on.

How do you track process healthiness and effectiveness in your company?
Next 10 Released
Tags: react, webdev, javascript, nextjs
Published: 2020-10-27 16:47:49

# Next.js 10 Has Been Released

Around 2 hours ago on [the Next.js blog](https://nextjs.org/blog) [Next.js 10 was announced](https://nextjs.org/blog/next-10#built-in-image-component-and-automatic-image-optimization).

## Features

* A `next/image` component for image optimization
* Internationalized routing
* Next.js Analytics
* Next.js Commerce (A starter kit for ecommerce sites)
* React 17 Support
* Importing CSS From Third Party Components
* Automatic `href` resolution (`next/link`)
* `@next/codemod` CLI improvements
* Blocking Fallback for `getStaticPaths`

### Image Optimization

```javascript

import Image from "next/image";

<Image src="myImage.png" height="400" width="300" />
// instead of <img src="myImage.png" height="400" width="300" />
```

This lazy loads the image and makes `width` and `height` work with responsive layouts.

### Next.js Analytics

Go to [nextjs.org/analytics](https://nextjs.org/analytics) to learn how to enable it.

### React 17 Support

The new JSX compiler is automatically used, you just have to run this command:
```
$ npm install next@latest react@latest react-dom@latest
```

### Importing CSS From Third Party Components
You no longer have to import the CSS for third party components like this:
```jsx
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
```
You can just import the component.
AzureFunBytes - Episode 19 - Combos! @Azure and @LightstepHQ with @austinlparker
Published: 2020-10-29 19:02:29

This week I am joined by Developer Advocate [Austin Parker]() of [Lightstep!](https://lightstep.com/)  We'll discuss observability and monitoring.  We take a look at some application infrastructure and figure out how we can ensure it's always reliable for our users.

AzureFunBytes! - Byte-sized content with a live Twitch show!

{% youtube FdsGYs__Kmg %}

Learn about Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes

Join me, ask questions, and learn about Azure!

[Microsoft Learn: Azure Fundamentals](https://docs.microsoft.com/en-us/learn/paths/azure-fundamentals/?WT.mc_id=blog-devto-jagord)
[Tutorial: Prepare an application for Azure Kubernetes Service (AKS)](https://cda.ms/1Pm)
[Azure Monitor overview](https://cda.ms/1Pn)
[Microsoft Azure: $200 Free Credit](https://azure.microsoft.com/en-us/free/?WT.mc_id=devto-blog-jagord)
[k8s initializer](https://app.getambassador.io/initializer/)
[Austin Parker on Twitter](https://twitter.com/austinlparker) 
[LightStep](https://lightstep.com/)
London Meetup Wrap up 29/Oct/2020
Tags: apacheflink, cloud, hybridcloud, apachenifi
Published: 2020-10-29 18:43:49

https://www.slideshare.net/bunkertor/cloudera-streaming-with-flink-oct-29-2020-meetup-london

https://www.youtube.com/watch?v=6w_psqkFwiI
Wagtail Admin+netlify
Tags: wagtail, netlify, admin, python
Published: 2020-10-29 18:34:30

Netlify API Doc
https://open-api.netlify.com/

this are the three api endpoint we need
https://api.netlify.com/api/v1/sites/{site_id}/deploys
https://api.netlify.com/api/v1/sites/{site_id}/deploys/{deploy_id}
https://api.netlify.com/api/v1/deploys/{deploy_id}/cancel

### Netlify Class
```
class Netlify(object):
    def __init__(
        self, netlify_site_name, netlify_api_key, netlify_site_id, netlify_webhook_id
    ):
...

    def start_job(self):
        url = f"https://api.netlify.com/build_hooks/{self.webhook_id}"
        requests.post(url)
        return self.list_jobs()[0]["id"]

    def stop_job(self, deploy_id):
        url = f"{self.base_url}/deploys/{deploy_id}/cancel"
        self.make_request(url, "POST")

    def get_job(self, deploy_id):
        url = f"{self.base_url}/sites/{self.site_id}/deploys/{deploy_id}"
        return self.make_request(url, action="GET")

    def list_jobs(self):
        url = f"{self.base_url}/sites/{self.site_id}/deploys"
        return self.make_request(url=url, action="GET")

```
###Wagtail admin view
```
amplify = Amplify(
        aws_access_key_id=settings.AMPLIFY_AWS_ACCESS_KEY_ID,
        aws_secret_access_key=settings.AMPLIFY_AWS_SECRET_ACCESS_KEY,
        app_id=settings.AMPLIFY_APP_ID,
        branch_name=settings.AMPLIFY_BRANCH,
    )

def netlify_jobs(request):

    job_id = request.GET.get("jobid", "")
    if job_id:
        active_job = netlify.get_job(job_id)

    jobs = netlify.list_jobs()
   ....
   render template

def start_build(request):
    jobid = netlify.start_job()
    ....


def stop_build(request, job_id):
    netlify.stop_job(job_id)
    ....
```
How to customize the ion-menu-button in Ionic 5
Tags: ionic, angular, css, html
Published: 2020-10-29 18:34:08

---
title: How to customize the ion-menu-button in Ionic 5
published: true
description: 
tags: ionic,angular,css,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vfqr89svziboiqg8mehh.png
---

As a quick introduction, the `ion-menu-button` is a component that works together with the neat `ion-menu`. That means that once added, the `ion-menu-button` can open the `ion-menu` automatically 🤓. Therefore, we don't need to worry about anything since Ionic will handle the click event internally for us.

The thing is that sometimes you will have the requirement to show a different icon. Luckily for us, this can be achieved with the help of the `ion-icon` component.

As many of you might know, this component has the ability to render any of the icons found on the [Ionicons](https://ionicons.com/) library and custom assets like a local image and even better, an **SVG**.

```html
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button>
      <ion-icon src="./assets/img/custom-menu.svg"></ion-icon>
    </ion-menu-button>
  </ion-buttons>
  <ion-title></ion-title>
</ion-toolbar>
```

To define a custom asset for our `ion-icon` is as easy as just passing the path of our file in the `src` property.

Since SVG's are just files based on the XML format, let's first create it by opening the command line and running the instruction below:

```bash
touch ./src/assets/img/custom-menu.svg
```

Next, let's open our newly created `custom-menu.svg`. You can do this manually using your file explorer, or if you're using VSCode... 😎

```bash
code ./src/assets/img/custom-menu.svg
```

Now copy and paste the XML below into the `custom-menu.svg`.

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
  <defs>
    <style>
      .cls-1 {
        fill: currentColor;
      }
    </style>
  </defs>
  <g transform="translate(-23 -44)">
    <rect class="cls-1" width="22" height="1.8" rx="2" transform="translate(23 44)"/>
    <rect class="cls-1" width="15" height="1.8" rx="2" transform="translate(23 52)"/>
    <rect class="cls-1" width="22" height="1.8" rx="2" transform="translate(23 60)"/>
  </g>
</svg>
```

The cool part is that using this technique it's possible to customize the theme by just adding the `color` attribute in the `ion-menu-button`.

```html
<!-- Dark color -->
<ion-icon color="dark" src="./assets/img/custom-menu.svg"></ion-icon>
```

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

```html
<!-- Secondary color -->
<ion-icon color="secondary" src="./assets/img/custom-menu.svg"></ion-icon>
```

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

```html
<!-- Tertiary color -->
<ion-icon color="tertiary" src="./assets/img/custom-menu.svg"></ion-icon>
```

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

Demo:

{% stackblitz ionic-5-custom-ion-menu-button view=preview %}

That's it! As always, I hope you've learned something new today.

Hasta la próxima!
Schedule Tasks Using GitHub Actions
Tags: github, devops, linux, bash
Published: 2020-10-29 18:34:00

GitHub Actions can do a lot of things and can be triggered by different methods. Typically, you want a workflow to be executed on a push or a pull-request or an issue. 

So, Where does scheduling a task fit in? 
+ For Tracking good health of your software, you can perform scheduled testing. 
+ Publishing the **Nightly Build** of your library, framework or software. 

Scheduling doesn't require a change to be made into code. It will keep running on the unchanged or changed code on scheduled time. Scheduling a GitHub Workflow is done using **cron**. For those who don't know what cron is,

>The software utility **cron** also known as a **cron job** is a time-based job scheduler in Unix-like computer operating systems. 

Here is an example of scheduling a task. 
``` yml
# Give the workflow a name. 
name: Nightly Build

# Trigger Workflow every midnight UTC

on:
  schedule:
    - cron: '0 0 * * *'  
  workflow_dispatch: 
#workflow_dispatch helps run workflow anytime with a single click. 

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  build:
    name: Scheduling
    # make sure to run this action in Linux env (say ubuntu)
    runs-on: ubuntu-latest
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Write all the steps you want to schedule
```

For creating nightly build use [create-release](https://github.com/actions/create-release) action with the above workflow. Make sure to use a dynamic naming format while creating tags & to set `prerelease: true`. Use the YYYYMMDD date format in the tag

Defining a cron schedule is a tougher task than one might expect. [crontab.guru](https://crontab.guru/) is a website which converts cron schedule into human-readable format. eg. `0 0 * * *` means midnight according to UTC.
A programming language to make concurrent programs easy to write
Tags: opensource, computerscience, rust, productivity
Published: 2020-10-29 18:26:10

Alan is a general purpose programming language that is barely "Turing Incomplete". This tradeoff allows Alan to make many developer errors difficult or impossible. It also allows the VM find and exploit opportunities for parallelization across the computing resources available without using threads, channels, locks, futures, etc.

Why a new programming language?

We dream of a day in which the same program/backend can run on a single core or across many machines in the cloud without any operational complexity (extra deployment configuration or maintenance), extra code (frameworks or vendor APIs) or constraints (delayed execution, limited runtime, no persistent connections, etc). We created a new programming language to see if we could have a compiled language with a simplified bytecode, wrt to traditional languages which allow arbitrary computation that is not guaranteed to halt, that could be automatically parallelized across many cores and machines in the cloud by a VM/runtime (written in Rust 🦀) based on the size and shape of the data.

Please let us know what you find most interesting about the language and help us find bugs! My friend and I are working full time on this and we are looking for people interested in contributing to it too.

https://github.com/alantech/alan
Redis CLI: Installation & Data manipulation
Tags: redis, devops, caching
Published: 2020-10-29 18:13:46

In this youtube video, we walk though: 

- how to install redis on linux system and other OSs.
- How to create, read, update, and manipulate data on a redis database.


[![Redis CLI - Installation & Data manipulation](https://i9.ytimg.com/vi/jVJPQ33-1eI/maxresdefault.jpg?time=1603994400000&sqp=CKCG7PwF&rs=AOn4CLDmHCgnOLQubmOR6lwerzjs0A_8ng)](https://youtu.be/jVJPQ33-1eI "Redis CLI - Installation & Data manipulation")

Stay tuned for part 2. I'll update this post when I publish it.
Enrolling Students - Building SaaS #64
Tags: python, django, saas
Published: 2020-10-29 18:09:41

{% youtube h0eEg3gkkYw %}

In this episode, we worked on a view to enroll students into a grade level for the school year.  I added all the context data and used Tailwind to design the form layout to pick from a list of available grade levels.  We added a variety of unit tests to prove the correctness.

The enrollment page needed three pieces of data in the context to complete the form.  We added the `student`, `school_year`, and `grade_levels` data to the context and wrote tests to show the data in there.  We also protected that data from any erroneous access by another user.

When the data was set, we worked on the template for the form.  I set the header to make the enrollment action clear and created the radio input selectors to show the different grade level options.  We cleaned up the design and user experience by including some Tailwind CSS classes which made the radio inputs much easier to select.

At the end of the stream, we wrote the happy path test for the POST request to prove that the enrollment record exists after submission.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/building-saas/enrolling-students/).
What is HTML and what are tags in HTML?

Tags: html
Published: 2020-10-29 18:04:29

HTML is a text markup language that stands for Hyper Text Markup Language. It is a programming language used in the creation of websites, in order for this language to work, it must be compiled by browsers such as chrome, firefox, safari, edge, opera. In this article, we will take a look at the details and usage areas of the HTML language, we wish you all good reading. Read continues..
https://sirnode.com/what-is-html-and-what-are-tags-in-html
Three Ways Retailers Can Harmonize Brick-and-Mortar and Digital Operations
Tags: security, ecommerce, covid19
Published: 2020-10-29 18:03:18

Retailers in the COVID-19 era have been forced to integrate their digital operations with their brick-and-mortar stores as a means of survival.
[Read more...](https://auth0.com/blog/three-ways-retailers-can-harmonize-brick-and-mortar-and-digital-operations/?utm_source=content_synd&utm_medium=sc&utm_campaign=digital_operations)
Complete list of markdown emojis for your blog posts and README's
Tags: devto, writing, blogging, learning
Published: 2020-10-29 17:44:59

For every single DEV.to blog post or README.md I've written, I always have this [page](https://gist.github.com/rxaviers/7360908) on standby as the ultimate Markdown emoji reference :raised_hands:

{% gist https://gist.github.com/rxaviers/7360908.js %}
My First Hacktoberfest!
Tags: hacktoberfest
Published: 2020-10-29 17:23:18

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qvanvxemgx79vzw3nx23.png)
### How did I knew about it?
I was participating in this web development bootcamp and the teachers told us about it! I'm a strong believer in open source and felt I had to participate. (:

### Background
I am very new to developing in general, in fact it was my first ever experience using GitHub in a team. I hope to keep contributing to projects.

### Contributions
Since I am just learning how to be a dev, my PullRequests have all been to this "final project" thing, so I didn't really help a real project, just an educational one.
I already have one in mind for future contributions, though, a translating project of the Ruby on Rails doc to portuguese.
If you know the language, I guess you can also check it here:
https://github.com/campuscode/rails-guides-pt-BR

### Reflections
I was actually learning how to use Git and GitHub and it happened to be during the Hacktoberfest, but it just made it even more exciting to work harder on the project we were making. I hope I can keep it up. (:
Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-29 17:32:23

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

<!--
### [Intro Heading]
 If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
I am excited to share my rewards for participating in Hacktoberfest 2020 


![Hacktoberfest swags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4cpi63gzc5bjzrk64wz.jpg)

<!--
### Background

 Are you brand new to open source? What about coding in general? Tell us about how you got here →

<!--
### Progress

 Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

<!--
### Contributions

 This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->

<!--
### Reflections
 Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Participating in this annual event was a great experience and showed me how to contribute to the great opensource projects and for sure I will join the event again.

Happy Hacking
Re-Imagining SF Symbols Into Xcode
Tags: swiftui, swift, ios, sfsymbols
Published: 2020-10-29 17:23:24

Ever since Apple introduced, SF Symbols life has been so easy for developers. Particularly, for those who do not a have a design team to back them up.

The pros of using SF Symbols has been documented well over the last year. There is no need to manage assets and the app size remains same irrespective of the number of symbols used. Seems like an all rosy path.

But we have one good old problem. It can even be attributed to muscle memory. To copy the symbol's name to Xcode, we end up pressing *Cmd + C*, most of the time. And Xcode stops compiling when our code looks like this.

![Copying symbol instead of its name](https://dev-to-uploads.s3.amazonaws.com/i/q4d7n3ox42e2du62gq4z.png)
*Its quite hard to rewire ourselves, only when working with SF Symbols app.*


After successfully copying the symbol's name, we modify the symbol to make is more suited for our app. Every time we add modifiers, we hope Xcode helps us with auto completion or we remember the modifiers exactly and type them correctly, so that the live preview remains live.

Then there will be times, when we might want to play around with multiple symbols, after applying your desired modifiers. So, we go the SF Symbols app, search or browse for the symbol, copy the symbol's name, paste it into Xcode and again, hope that we did nothing to break the live preview.

Don't you think this entire workflow needs some improvement? Here comes [Swimbols](https://apps.apple.com/app/id1525226399#?platform=ipad).

![Swimbols in action](https://dev-to-uploads.s3.amazonaws.com/i/5w4px7ku0q1cn64x68z2.png)
*Swimbols - A swifty way to add SF Symbols into Xcode.*

Swimbols helps you overcome the pain points explained above and improve your workflow, there by giving you a productivity boost.

Here's how your workflow will look like with Swimbols.

*Browse through the categories or search for a symbol, select one and start applying modifiers. The preview is live. Just swipe left to delete any modifier. Tap the edit button to re-order modifiers. Whenever you want to change the symbol, just select it. All your modifiers are applied and you can see changes without any delay*.

Does it sound better than the workflow you experience everyday? [Check it out](https://apps.apple.com/app/id1525226399#?platform=ipad) for yourselves and let us know what you think. Swimbols for Mac is coming alongside macOS 11.

The roadmap for Swimbols is [here](https://github.com/imthath-m/Swimbols/issues) and you can suggest features or post issues. [Follow us](https://twitter.com/intent/follow?screen_name=skydevz) on Twitter for updates about Swimbols and other exciting apps.

Happy Coding!
Array.every()
Tags: javascript, codenewbie, beginners, webdev
Published: 2020-10-29 17:22:28

Check if all the elements in the array are greater than `0` using `.every()`.

```js
const arr = [1, 2, -1, 4, -5];

const allGreaterThanZero = arr.every(number => number > 0);
console.log(allGreaterThanZero); // false
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**