teleren/devto huggingface dataset:
How to add a Sold Out snippet or badge on a particular product using Woocommerce?
Tags: wordpress, woocommerce, php
Published: 2020-11-13 17:11:08

This article is based on the description of how it would help solve a problem that I have encountered before related to the task ✍️ that @[Chris Bongers](@dailydevtips) left in **Hashnode Bootcamp-II** ⛺.

If you are setting up a Wordpress site with Woocommerce, notice when any product inventory is out of stock, there is nothing on the item catalog page to help you determine the product's stock availability.

For the customer it is annoying to click every product to see the stock availability.

To deal with that, there are 2 options that can help you :

## ✅ Function in PHP 

In the * functions.php * file normally found in the Theme folder, insert the following code at the end of the file:


```php
add_action ('woocommerce_after_shop_loop_item_title', 'talbiconsept_wc_template_loop_stock', 10);

function talbiconsept_wc_template_loop_stock () {
    product $ global;
    if ($ product-> stock management () && (int) $ product-> get_stock_quantity () <1)
    echo '<p class = "stock out of stock">' .__ ('Sold out!'). '</p>';
}
``` 

## ✅ Add a plugin 

In Wordpress Admin Desktop, go to the Plugins tab and look for "*Out of Stock Badge for WooCommerce*":


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605201657715/40YPt4Re1.png)

Then go to plugin settings and set text label, font size, font color, and background color:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605201897944/XNuDmFuH5.png)

And that is! 😎

### Other articles that you might like...

* [Redis - Instalación y Configuración](https://juanc4milo.dev/redis-instalacion-y-configuracion)
* [AWS S3 Batch Operations](https://juanc4milo.dev/aws-s3-batch-operations)
* [AWS S3 Inventory](https://juanc4milo.dev/inventario-aws-s3)
* [Qué ofrece y cómo se configura AWS Elasticache?](https://juanc4milo.dev/aws-elasticache)
* [Qué ofrece y cómo se configura Elasticache en AWS?](https://juanc4milo.dev/aws-elasticache)
*  [How to use Redis with Spring in Java](https://juanc4milo.dev/redis-with-spring-in-java)
* [How to send an email with AWS SES and track events with Configuration Sets?](https://juanc4milo.dev/send-email-with-aws-and-track-events)
* [How to receive emails in a S3 bucket with AWS SES?](https://juanc4milo.dev/receive-emails-in-s3-with-aws-ses)

**Do you like it?** You can [buy me a beer](https://buymeacoffee.com/juanc4milo) if you want.

> _Originally published at [juanc4milo.dev](https://juanc4milo.dev)_
A Problem with JJWT With Java 11 (9+)
Tags: java, spring, jwt, todayilearned
Published: 2020-11-13 17:10:20

Originally posted on my [blog](https://pradipta.github.io/jaxb-with-java-11/)

I was implementing Spring Security for a service I am working on for work. The project is based on Java 11 and the Spring Boot Framework.
Usign the JWT token, I was supposed to extract user details and roles. The JWT is signed using a secret key with has been stored in properties encoded in base 64.
```Java
Jwts.parser().setSigningKey(appProperties.getAuth().getTokenSecret()).parseClaimsJws(authToken);
```
The above code is used to validate the JWT's authenticity.

The `setSigningKey(...)` method looks like:
```java
    public JwtParser setSigningKey(String base64EncodedKeyBytes) {
        Assert.hasText(base64EncodedKeyBytes, "signing key cannot be null or empty.");
        this.keyBytes = TextCodec.BASE64.decode(base64EncodedKeyBytes);
        return this;
    }
```

This method throws an error when it tries to decode the encoded key.
Logs:
```
java.lang.ClassNotFoundException: javax.xml.bind.DatatypeConverter
	at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:606) ~[na:na]
	at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:168) ~[na:na]
	at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522) ~[na:na]
	at io.jsonwebtoken.impl.Base64Codec.decode(Base64Codec.java:26) ~[jjwt-0.5.jar:0.5]
	at io.jsonwebtoken.impl.DefaultJwtParser.setSigningKey(DefaultJwtParser.java:71) ~[jjwt-0.5.jar:0.5]
```

However, the same Library was being used on other projects I/my team had worked on written in Java 8. There, the decode method calls an api from `jaxb`, but I obserrved that on the Java 11 project, it wasn't the case. Even with exact same version of `jjwt`.

The problem lies with JJWT with Java 11 (or any after Java 8).

The `jaxb` APIs are considered to be Java EE APIs. The API is completely removed from the Java 11 SDK. With the introduction of modules since Java 9, the `java.se` module is available on the default classpath, and it doesn't include Java EE APIs.

To fix the same, you can pass `--add-modules java.xml.bind` as a command line argument.
A better fix is to add the `jaxb` API as a Maven/Gradle dependancy.

```maven
<!-- Runtime, com.sun.xml.bind module -->
<dependency>
    <groupId>org.glassfish.jaxb</groupId>
    <artifactId>jaxb-runtime</artifactId>
    <version>{version}</version>
</dependency>
```
```
compile group: 'javax.xml.bind', name: 'jaxb-api', version: '{version}'
```
This makes `jaxb` APIs available in the classpath and the above problem gets fixed.

Sources:
<li><a href="https://stackoverflow.com/questions/43574426/java-how-to-resolve-java-lang-noclassdeffounderror-javax-xml-bind-jaxbexceptio">Link 1 | StackOverflow</a></li>
<li><a href="https://www.programmersought.com/article/57492225148/">Link 2 | ProgrammerSought Blog</a></li>
<li><a href="https://github.com/jwtk/jjwt/issues/317">Link 3 | GitHub</a></li>
Building a Shopify App - Day2
Tags: webdev, laravel, shopify
Published: 2020-11-13 17:00:59

Alright, let's kick off Day 2 of the side project.

### Few Thoughts
- I have decided to keep it non-embedded app initially. It just makes development easier 🤷🏻‍♂️
- Decided not to go with TypeScript for now 

### Day 2 progress
- **AppLayout** component, including Toast component which displays if there is a **flash** error returned from backend.
```react
import React, { useState, useEffect } from 'react';
import { usePage } from '@inertiajs/inertia-react';
import { AppProvider, Frame, Toast } from '@shopify/polaris';
import translations from '@shopify/polaris/locales/en.json';

export const AppLayout = ({ children }) => {
    const { flash } = usePage().props;

    const [toastActive, setToastActive] = useState(false);

    useEffect(() => {
        if (flash.message) {
            setToastActive(true);
        }
    }, [flash.message]);

    const toastMarkup = toastActive ? (
        <Toast
            content={flash.message}
            onDismiss={() => setToastActive(false)}
        />
    ) : null;

    return (
        <AppProvider i18n={translations}>
            <Frame>
                {children}
                {toastMarkup}
            </Frame>
        </AppProvider>
    );
};

```
- **Dashboard** component
```react
import React from 'react';
import { Card, Layout, Page } from '@shopify/polaris';

import { AppLayout } from '@/Shared/Layouts/AppLayout';

export default function Show() {
    return (
        <AppLayout>
            <Page>
                <Layout>
                    <Layout.Section>
                        <Card sectioned>Dashboard</Card>
                    </Layout.Section>
                </Layout>
            </Page>
        </AppLayout>
    );
}
```
- Learned more about [HandleInertiaRequests](https://inertiajs.com/shared-data) middleware in **Inertia.js** Laravel adapter. We used to do this inside a ServiceProvider before.
- Registered a [ScriptTag](https://shopify.dev/docs/admin-api/rest/reference/online-store/scripttag). Just needed to provide a URL and **laravel-shopify** package took care of rest
- Returned JavaScript from Controller method. Going to write a separate ( short ) article about this. [Link](https://dev.to/zubairmohsin33/return-javascript-from-laravel-controller-method-2c1c)

### Time spent
1 Hour

--------------------------------------------------------------
Signing off 😴

P.S.

I tweet about Laravel, Shopify and React stuff. If any of this is your thing, you can [follow me](https://twitter.com/Zubairmohsin33) on Twitter.
Useful tools for analyzing Webpack builds
Tags: javascript, tutorial, webpack
Published: 2020-11-18 15:05:55

---
title: Useful tools for analyzing  Webpack builds
published: true
date: 2020-11-13 15:53:00 UTC
tags: javascript, tutorial, webpack
canonical_url: https://web-crunch.com/posts/useful-tools-for-analyzing-webpack-builds
---

{% youtube aIM8TYc2t54 %}

This is a very quick walk-through of a few free tools you can use to analyze your Webpack build in real-time.

[Webpack](https://webpack.js.org/) is becoming an industry standard for web development asset bundling.

Under the complicated hood of the tool, we developers tend to want to know more about file size and dependencies as project scales. Things can get out of hand if you're not too careful.

File size in particular is one I'm constantly aware of for the fact that it usually means your app/website will respond slower for end users if files reach a certain size. Tools exist to help you gain more background as to why the sizes increase.

Much of the inspiration for this walk-through comes from an [article I found previously](https://blog.saeloun.com/2020/08/04/how-to-investigate-your-build-size-in-webpack.html). Hat tip to Prateek Choudhary for the great article!

Gaining this knowledge will help you better understand ways to circumvent a large bundle size should you need to.

Tools used in this guide are:

- [Webpack vizualizer](https://github.com/chrisbateman/webpack-visualizer)
- [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- [Bundle Phobia](https://bundlephobia.com/)
Unscript Rookie's Hackathon, An Exclusive hackathon for Second Year Students.
Published: 2020-11-13 16:29:41

We the ACM CRCE and CSI CRCE present to you Fr. CONCEICAO RODRIGUES MEMORIAL HACKATHON, 2k20; 24 hours "NATIONAL LEVEL HACKATHON". This hackathon is EXCLUSIVELY FOR ALL THE STUDENTS OF SECOND YEAR OF ENGINEERING. 
A Hackathon is a grand opportunity for all those young minds to test their limits and beat the upcoming challenges. It is a hands-on experience on a live, real-time project. Winning a hackathon boosts the value of your resume. So don't miss the opportunity of participation.
¦ PROBLEM STATEMENT DOMAINS: ¦
 - > Web Development 
 - > Android App Development 
¦ PRIZES: ¦
 ₹10,000 for Winners 
 ₹5,000 for Runner-ups
All the participants will be provided with the CERTIFICATE OF PARTICIPATION. 
Mentors will be available to provide appropriate guidance and solve all the difficulties faced by the participants. 
Registration Fees: ₹ 0 (FREE)
¦ REGISTRATION LINK PROVIDED BELOW: ¦
https://seunscript2k20.web.app/
DATE : 21-22 November 2020
TIME : 9 am onwards
HURRY UP!!! Don't let the sands flow down your fists
GET THE MOST OUT OF IT. 
-----------------------------------------------------------------------------------------------
NOTE:
1) The event is exclusively for the Second Year Engineering students only 
2) Not more than 4 members and not less than 2 members per team are allowed. 
3) Mentoring sessions will be conducted on Webex video meeting app. 
4) All the notices during the event will be sent via Discord channels.
🚀10 Trending projects on GitHub for web developers - 13th November 2020
Tags: react, webdev, javascript, typescript
Published: 2020-11-13 16:00:30

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.

### 1. Aleph.js

The React Framework in Deno.

{% github alephjs/aleph.js %}

---

### 2. Sortable

Create and reorder lists with drag-and-drop. For use with modern browsers and touch devices

{% github SortableJS/sortablejs %}

---

### 3. Rollup Plugins

The one-stop shop for official Rollup plugins 

{% github rollup/plugins %}

---

### 4. Animate on scroll library

Animate on scroll library

{% github michalsnik/aos %}

---

### 5. eslint-plugin-import

This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor.

{% github benmosher/eslint-plugin-import %}

---

### 6. Azure SDK for JavaScript

This repository is for active development of the Azure SDK for JavaScript (NodeJS & Browser).

{% github Azure/azure-sdk-for-js %}

---

### 7. react-data-grid

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

{% github adazzle/react-data-grid %}

---

### 8. eDEX-UI

A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support. 

{% github GitSquared/edex-ui %}

---

### 9. VitePress

Vite & Vue powered static site generator

{% github vuejs/vitepress %}

---

### 10. OWASP Juice Shop

OWASP Juice Shop is probably the most modern and sophisticated insecure web application! It can be used in security trainings, awareness demos, CTFs and as a guinea pig for security tools! Juice Shop encompasses vulnerabilities from the entire OWASP Top Ten along with many other security flaws found in real-world applications!

{% github bkimminich/juice-shop %}

---

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.
PHP Innovations Award - Aug 2020
Tags: php, elephpant
Published: 2020-11-13 15:59:26

---
title: PHP Innovations Award - Aug 2020
published: true
description: 
tags: php, elePHPant
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/znde8ekf9h088z95sg7y.jpg
---
My #elePHPant has arrived 🤗
Thanks to Icontem and Manuel Lemos.

Reason: https://lnkd.in/ebDrEzS

![elePHPant](https://dev-to-uploads.s3.amazonaws.com/i/znde8ekf9h088z95sg7y.jpg)
![Certificate](https://dev-to-uploads.s3.amazonaws.com/i/xjh77074m8shkf45d32r.png)
HACKTOBER FEST 2020
Tags: opensource, webdev, devops, techtalks
Published: 2020-11-13 15:53:50

Hey folks, I know its already been 2 weeks since the end of Hacktober fest. Just wanted to share my experience with you all.
Firstly this is my first time i am contributing towards open source and felt so satisfied in contributing towards open source.
Secondly i also organized Hacktoberfest virtual meetup at my college and all most everyone actively participated in it, which means more satisfaction...hehe...lol.
I will be remained focused in continuing and building a career in web development.
Let's build for Ruby and Rails developers - Part 14
Tags: ruby, rails, jobs, showdev
Published: 2020-11-18 15:04:51

---
title: Let's build for Ruby and Rails developers - Part 14
published: true
date: 2020-11-13 15:39:00 UTC
tags: ruby, rails, jobs, showdev
canonical_url: https://web-crunch.com/posts/let-s-build-for-ruby-and-rails-developers-part-14
---

{% youtube TXDoieL4M6M %}

### Building the new job form preview page

In part 14, I continue our long journey with a dynamic form built with Vue.js on the front-end and Ruby on Rails on the back end. We're about halfway done having previously worked on the new job form details page on parts 12 - 13.

The end goal with the new job form is to allow employers/contractors to publish a job with ease. They'll be able to visit [railsdevs.com](http://railsdevs.com), click on "Post a job", enter details, preview those details, and purchase the job listing.

Behind the scenes, I plan on creating a new account for that employer if it doesn't already exist and kicking off some emails about their account and job. We'll get to those extra details later on but for the sake of this video, the goal is to show a realistic preview of the job listing before the purchase.

Thanks to our new store pattern with [Vue.js](https://vuejs.org) I'm able to easily show job data in step 2 of our multi-step form. We'll pipe this data through and display it.

In the next part, we'll start to code the last and final step of the job form and introduce our billing portion of the project. I plan on using Stripe primarily for billing. We could use something like [PayPal](https://paypal.com) or [Braintree](https://www.braintreepayments.com/) as well but to get something shipped sooner or later I think Stripe is a good first issue to tackle. Stay tuned!

[View the complete series so far](https://web-crunch.com/collections/lets-build-for-ruby-and-rails-developers)


### I need your help!

Help me spread about [railsdevs.com](http://railsdevs.com) by sharing this series with your friends or subscribing to receive updates as more things progress with the build.
Laravel Breeze - Minimal & Simple Authentication Scaffolding
Tags: laravel, php, tutorial
Published: 2020-11-13 15:37:48



Laravel Breeze is the official package from the Laravel team that can be utilized to make a simple authentication, much the same as it was utilized to be in the Laravel UI package. There's no implementation to utilize Livewire, Inertia, or whatever else.

{% youtube 75ZigCGvR-4 %}

Laravel Breeze is controlled by Blade and Tailwind. It publishes authentication controllers and views to your application that can be effectively redone dependent on your own application's necessities. 

## Installation
Run the following composer command to install this package:

```
composer require laravel/breeze --dev
```

After installation, run the following command to publish Breeze scaffolding:

```
php artisan breeze:install
```

The next step is to run `npm install && npm run dev` to build assets of your Laravel application. 

Once done, you can migrate the database by running `php artisan migrate` which will create necessary tables for authentication such as `users`, `password_resets`, and so on in the application’s database.

Now it is ready, try the application in your browser.

**Reference**
- [Laravel Breeze](https://qirolab.com/posts/what-is-laravel-breeze-how-to-install-it-in-the-laravel-application-1605355096)
Javascript library for cli app
Tags: javascript, node, cli
Published: 2020-11-13 15:22:11

Hey guys, are you making cli apps in JavaScript? I have three important libraries for you.

### 1) commander.js
You can make your own commands with this library.

### 2) inquirer.js
You can take input like true/false, check box, text, password in terminal.

### 3) chalk.js
People feel cool when they show colorful text in terminal. Chalk.js makes text colorful in terminal.
about my experience with Hacktoberfest 
Tags: hacktoberfest
Published: 2020-11-13 09:00:20




### who am I ? and why i participated ? 

 My name is Syrine Hammami , I am a Computer Science engineering student from Tunisia. 
I participated in Hacktoberfest because i wanted to improve my programming skills and learn new things. 

### Background

I am new to open source coding and the hacktoberfest helped me learn more about it . I have some basic knowledge in python , css, Js as a computer science student but i would love to learn more in the future that's why when i heard about hacktoberfest on social media (facebook) i decided to join. 

### Progress

At first it was a little hard for me as i was new in the open source coding but then thanks to the detailed video tutorial and the help of the community i was able to finish it. 

### Contributions

My contribution was to a "learn python" project , i added more lessons that didn't exist already . I chose this project to help other people learn python and make it easier for them . Because i believe that one should always give back to the community.

### Reflections
Hacktoberfest was an amazing experience and i learned a lot thanks to it , i am glad that i participated and i will surely participate next year too. If you are reading this and having participated in the hacktoberfest this year i highly recommend you do it next year .. and i promise you won't regret it !
Converting Image to base64
Tags: image, base64, javascript, html
Published: 2020-11-13 15:19:08

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/convertendo-imagem-para-base64-837fe5e52b3a)

Let’s create a tool with JavaScript that converts image to base64 and does the opposite, transforming base64 into an image.

## Code

First we will create the interface, we will do something simple, using only HTML.

```html
<input type="file"><br>
<textarea></textarea>
<img width="100" alt="Prévia da imagem...">
<button type="button">Download</button>
```

Here we have a file type input, we will receive the image upload, we also have a textarea that will be where the base64 image will be, we also have an img tag where the image preview will be and finally a download button to download the image.

Now let’s start the JavaScript part.

```javascript
document.getElementsByTagName("input")[0].addEventListener("change", previewFile);
document.getElementsByTagName("textarea")[0].addEventListener("input", previewText);
document.getElementsByTagName("button")[0].addEventListener("click", downloadFile);

let preview = document.querySelector('img');

function previewFile(event) {
  let reader = new FileReader();
  let file = event.target.files[0];

  reader.readAsDataURL(file);
  reader.onloadend = () => {
    preview.src = reader.result;
    document.getElementsByTagName("textarea")[0].value = reader.result;
  };
}
```

First we have the addition of events for the `input`, `textarea` and `button`, then we have a `preview` variable and finally we have the `previewFile` function, in this function we use the `FileReader` to help us work with the image loading, after the image has been loaded (`onloadend`) added in the preview and the base64 code added in the `textarea`.

```javascript
function previewText(event) {
  let file = event.target.value.replace(/^data:image\/[a-z]+;base64,/, "");
  preview.src = `data:image/png;base64,${file}`;
}

function downloadFile() {
  let nameFile = "Image.png";
  var a = document.createElement("a");
  a.href = preview.src;
  a.download = nameFile;
  a.click();
}
```

We now have two more functions:

* **previewText** = Here we take the text received in the `textarea` and add the `preview`, thus converting `base64` to image.
* **DownloadFile** = Here we download the image that is appearing in the `preview`.

ready as simple as that.

## Demo

See the complete project working below.

{% codepen https://codepen.io/WalterNascimento/pen/RwRGZPN %}

## Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

{% youtube IYAY84qzsDA %}

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊
Release @nxtend/ionic-angular 1.0.0
Tags: ionic, angular, nx, webdev
Published: 2020-11-13 15:17:45

---
published: true
title: 'Release @nxtend/ionic-angular 1.0.0'
cover_image:
description:
tags: ionic, angular, nx, webdev
series:
canonical_url: https://nxtend.dev/blog/ionic-angular-1.0.0
---

Earlier this year I released the Nxtend Ionic React plugin for Nx. From the beginning I intended to support all of the frameworks that Ionic officially supports, and today, Ionic Angular support has been added to Nx with the Nxtend Ionic Angular plugin.

[Ionic](https://ionicframework.com) combined with [Capacitor](https://capacitorjs.com/) enables developers to build high quality cross platform applications with web technology. [Nx](https://nx.dev) offers extensible tooling for monorepos, which can be a powerful combination with Ionic. Using Nx, large applications can be broken down into smaller libraries that are more maintainable and faster to test and build by using Nx's `affected` commands. Large organizations may have multiple applications that could benefit from sharing code, and Nx makes that easy as well.

To start developing cross platform application with Ionic Angular in an Nx workspace, visit the official [Getting Started](https://nxtend.dev/docs/ionic-angular/getting-started) guide.