teleren/devto huggingface dataset:
How Strapi triggers Nuxt static site generation for S3 bucket
Tags: strapi, nuxt, github, webhook
Published: 2021-04-26 15:10:56

I have been working on ecommerce website, we just suppose to build the website as operational.


## I choose Strapi and Nuxt, Algolia for search engine

**Strapi** is headless CMS, open-source, provides the large-scale of APIs without hard-coding.
**Nuxt** is SSR vue.js based framework, useful for pre-rendered pages for ecommerce.
**Algolia** is client-side search engine, very impressive tool to make high traffic in business.



## The infrastructure I use

1. Source repositories on _Github_
2. Strapi on AWS _EC2_ instance
3. Nuxt on AWS _S3_ bucket



## The things I need

The static website should be generated again when 

1. The developer commit the code updates.
2. The author upload own product.


## How did I tweak the problems

I solved all problems with GitHub Actions, it is the great tool for CI/CD.

**> SSG : The developer commit the code updates.**

It involves several steps:

- Specify when the github action should be trigger
- Configure AWS Credentials
- Create ENV files
- Cache Packages
- Install Packages
- Generate Static Pages
- Deploy website on S3 bucket
- Cloudfront Invalidation

{% gist https://gist.github.com/jacob-liu-g/4cb29f238a06e3d6e05fe713d142b9ad %}


**> SSG: The author upload own product.**

**This is the tricky,** I was stuck on this for couple of days.
There should be something to trigger S3 updates from Strapi,
I had researched the solutions and found that Netlify is the best solution because it provides build hook for CI/CD.
However, I wanted to take the challenge and decided not to use Netlify. 

_How can I achieve the same behavior without Netlify, keep S3 bucket?_

**1. Make the custom node app for webhook**

After a while, I noticed that Github has REST APIs to control resources. I can dispatches APIs to certain repository.
```
https://api.github.com/repos/{ORG_NAME}/{REPO_NAME}/dispatches
```
This is the key.
In this node app, we just set headers to call github APIs.
I named the event as _ssg_.

```
const postData = Buffer.from(
  JSON.stringify({
    event_type: "ssg",
  })
);
```

```
headers: {
    Authorization: "token *****************",
    Accept: "application/vnd.github.everest-preview+json",
    "Content-Type": "application/json",
    "Content-Length": Buffer.byteLength(postData),
    "User-Agent": "nodejs request",
  },
```

Finally, upload nodejs app on EC2 instance. Here is the completed code.

{% gist https://gist.github.com/jacob-liu-g/bfb5aebf68dcda56da34834ef821f6b4 %}

**2. Configure CI/CD script**

Configure script to listen dispatch events from node app.
Github action listens the nodejs app request and regenerate the static website, deploy updates on S3.
```
name: CI/CD
on:
  repository_dispatch:
    types: ssg
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
```

**3. Register webhook in Strapi dashboard**

Register webhook on EC2 in Strapi dashboard

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfgixyzmizbh2p1d19wq.png)
 

That's all, long journey. Thanks for joining me. :)
Figlet4s 0.3.0 released
Tags: scala
Published: 2021-04-26 15:10:20

I've just released version v0.3.0 of my first open source library, written in Scala, and FP-oriented: Figlet4s (https://github.com/ColOfAbRiX/figlet4s)

Figlet4s is a library to create ASCII-art banners, in pure Scala, open source, with integrated fonts, minimal dependencies, extensive error reporting and support for effects including Cats' IO. It also includes direct support for Java.

New features include:
* Support for zipped font files
* Internal fonts can organised in directories
* Added Commodore64 fonts
* Few bugfixes
Azure AD Privileged Identity Management
Tags: azure, security, azuread
Published: 2021-04-26 15:06:42

What is PIM?
Privileged Identity Management (PIM) is a service in Azure Active Directory that enables you to manage, control, and monitor access to important resources in your organization. These resources include resources in Azure AD, Azure, and other Microsoft Online Services such as Microsoft 365 or Microsoft Intune. 

Why should you adopt this solution?
If you want to minimize the number of people who have access to secure information or resources because that reduces the chance of a malicious actor getting that access, or an authorized user inadvertently impacting a sensitive resource. However, users still need to carry out privileged operations in Azure AD, Azure, Microsoft 365, or SaaS apps. Organizations can give users just-in-time privileged access to Azure resources and Azure AD. There is a need for oversight for what those users are doing with their administrator privileges.

Now let's deploy PIM-
To deploy PIM first we need to enable Access management for Azure resources. To enable the same we will go to Azure AD> Properties and will enable Access management.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj7c03774wxz8lpt7exc.png)

Now let's assign an Application Administrator role to John Duo user. To do so first we will find an Application Administrator in the roles section.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btb8rcj2d2oii6cnzbz1.png)
 
Now to add members we will click on add assignments and will select user.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rf0vxheydevwm0lvvz9s.png)

By default, the assignment type is Eligible which means we need to activate the assignment whenever require. 
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt03so91zbnmhenboxle.png)

Now John Duo needs to go to PIM and click on my roles. He can see eligible and active roles. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi2smwihphd499y1ffrt.png)

Now user can see the resources and resources group he is given access to.

Let's understand some functionalities-
Pending requests-
It displays users' pending requests to activate eligible role assignments.

Approve requests-
Displays a list of requests to activate eligible roles by users in your directory that you are designated to approve.

Review access-
Lists active access reviews you are assigned to complete, whether you're reviewing access for yourself or someone else.

Azure AD roles-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugdbjpdlp159tgokffbn.png)

Here the administrator can see a log and analysis of roles he has assigned to others.

Hopefully, you get a brief idea about Azure AD PIM. Please hit follow to stay updated about such writeups.
The Powers of AJAX
Tags: ajax, html, javascript
Published: 2021-04-26 14:48:40

> Ajax is a set of web development techniques using many web 
technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. (Wikipedia)

AJAX is very useful for building single page apps. 
It's also very powerful because you can submit forms and send requests, without reloading the page!

### How to use AJAX
AJAX is very simple to use. 
* Just create an index.html file, and insert this code in a `<script>` tag. 
* Create another file named `ajax_is_awesome.php`. Write whatever you want in that file!
* View your website!
```js
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       document.getElementById("demo").innerHTML = ajax.responseText;
    }
};
ajax.open("GET", "ajax_is_awesome.php", true);
ajax.send();
```
Explained
**`var ajax`** - Creates a new variable for the class **`XMLHttpRequest`**
**`XMLHttpRequest`** - XMLHttpRequest is an API in the form of an object whose methods transfer data between a web browser and a web server.  (Wikipedia)
**`onreadystatechange`** - When the file has loaded
**`this.readyState == 4 && this.status == 200`** - If the document's status isn't 404, 500, etc. Must be 200
**`ajax.open("GET", "index.php", true);`** - Opens the ajax file. Using GET this time. 
**`ajax.send();`** - Sends the request

### How to use AJAX in jQuery
Remember to include the `<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>` line in your code
```js
$("#someform").submit(function(e) {
    e.preventDefault();
    var form = $(this);
    var url = form.attr('action');
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), 
           success: function(data) {          
            document.getElementById("demo").innerHTML = data; 
           }
      });
});
```

See? AJAX is cool! Implement it, and you won't have redirects when submitting forms, or doing very simple things, such as checking for new notifications every few seconds. 

[Example of a single page documentation I made using AJAX](https://manuthecoder.github.io/docjs/docs/)

[pls star it on github if you like this!](https://github.com/manuthecoder/docjs)
ExoPlayer : Getting Started
Published: 2021-09-07 05:30:35

---
title: ExoPlayer : Getting Started
published: true
date: 2021-04-26 14:46:57 UTC
tags: 
canonical_url: 
---

Exoplayer is a Powerfull MediaPlayer Library that is developed by Google and better than the MediaPlayer API.

It has many advantages over MediaPlayer API.

It is used by many video platform applications like Youtube, Netflix, etc.

**First thing first: Add Dependency**

```groovy
implementation 'com.google.android.exoplayer:exoplayer:2.13.3'

```

**Add Player to UI**

```xml
<com.google.android.exoplayer2.ui.PlayerView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:id="@+id/videoPlayer"/>

```

for now we are using default controller and player, we can customize as per requirement, we will create our custom controller in future posts.

**Initialize Player**

Declare a video player global variable

```kotlin
private var mPlayer: SimpleExoPlayer? = null

```

Initialize ExoPlayer object

```kotlin
mPlayer = SimpleExoPlayer.Builder(this).build()

```

Create A MediaItem : mediaItem is used to give source of video to play, here videoUrl is the Uri of the video.

```kotlin
val mediaItem = MediaItem.Builder()
    .setUri(videoUrl)
    .build()

```

set mediaItem to player

```kotlin
mPlayer?.setMediaItem(mediaItem)
mPlayer?.playWhenReady = true
binding.videoPlayer.player = mPlayer
mPlayer?.prepare()

```

**playWhenReady** : It starts video playback when video is ready to play

**binding.videoPlayer._player_ \= mPlayer** : Attack player to UI

**mPlayer?.prepare()** : It will start preparing player to stating playing the video

**Free up resources**

```kotlin
override fun onDestroy() {
    mPlayer?.release()
    mPlayer = null
    super.onDestroy()
}

```

**mPlayer?.release()** : This will release the memory taken by the player

Check out the source code on GitHub

[Source Code](https://github.com/yogeshpaliyal/YP-Video-Player/tree/type/basic)

The post [ExoPlayer : Getting Started](https://techpaliyal.com/exoplayer-getting-started/) appeared first on [TechPaliyal](https://techpaliyal.com).
Let Me Introduce to You My Portfolio Website
Tags: portfolio, website
Published: 2021-04-26 14:45:59

## **Hello Everyone, **

I have finally **completed** the built of my **portfolio website**

## **Features**

1.  Static Landing Page with CSS,HTML and JavaScript Custom Animation
2.  Blog Posts
3.  Custom Management System (WordPress Clone) with SEO Manager
4.  Project Demo and more 

Here is the Link: https://apluswebmaker.com
Five C# Features You Might Not Know
Tags: dotnet, csharp, devrel
Published: 2021-04-26 14:43:31

A quick tour about five C# features that even experienced developers might not know: from variable scopes to the top-level statements and others.

[Read more...](https://auth0.com/blog/five-csharp-features-you-dont-know/?utm_source=content_synd&utm_medium=sc&utm_campaign=csharp-feat)
How to create a gradient drop shadow
Tags: html, css, beginners, webdev
Published: 2021-04-26 14:42:07

***Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create a gradient drop shadow***

###Common Query###
1. How to create a gradient drop shadow
2. How to an awesome drop shadow
3. How to create a drop shadow

**See Also :-** <a href="https://blog.stackfindover.com/how-to-create-a-animated-button/">How to create a animated button</a>

###How to create gradient drop shadow step by step###
First, we need to create two files index.html and style.css then we need to do code for it.

###Step:#1###
Add below code inside index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to create gradient shadow css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="box">
      <h1>Stackfindover</h1>
    </div>
  </body>
</html>
```

###Step:#2###
Then we need to add code for style.css which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: #f2f4f6;
}
.box {
  position: relative;
  width: 320px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top left, #0400ff, #ff3d00);
  border-radius: 10px;
}
h1 {
  color: #fff;
}
.box:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  transform: translateY(20px) scale(0.95);
  filter: blur(20px);
  opacity: 0.7;
  transition: opacity 0.3s;
}
.box:hover:before {
  opacity: 1;
}
```
###How to create gradient drop shadow video output:###
{% youtube qAq5GNGmuFc %}

###How to create gradient drop shadow Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/PopwQJX %}
One door closes, another opens
Tags: webdev, bootcamp, react, fullstack
Published: 2021-04-26 14:32:44

>Clique.  A proof-of-concept chat application that somehow reminds you of being a goth kid in 8th grade.

As I wearily type these words, it's the final day of my 12-week software engineering bootcamp journey with General Assembly.  It's been an amazing ride and I have a lot to say about my experience, but I'll save that for another post.

My capstone project (which is admittedly still a work-in-progress), is a full stack MERN chat-room application called **Clique.**

**TL;DR** It was a rough ride and this app is not quite finished.  
---
When charged with the task of building a full-stack app with the technologies of our choosing, I chose the MERN stack because it was relatively familiar and I _hoped_ that would allow me more time to build out some fun and interesting UI features.  

It turns out it's hard to build something you don't know how to build _(yet)._

Ideally, what I would like to do with Clique is visualize users and chat spaces in a fun, yet simple way.  Users log in to the application and are given a token or widget that represents them to move around in the space.  Users can join chat channels by dragging their token into channel slots, almost like sitting down at a table with friends to chat.  I have many more 'game-ish' features planned for the app, but will save those for a later post.  

I learned a lot about development while building this app, but the biggest thing I learned was about project planning and how to scope your project realistically.

That's all for now.  It's presentation time...
CI Demon, a tool to monitor your builds/deployments from your desktop
Tags: github, circleci, macos
Published: 2021-04-26 14:28:00

Here is a little tool I created to solve one of problems. I have worked in different companies as a software tech lead. In the projects where I worked, keeping track of the status of the software was tricky. 

![CI Demon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inmjtkokggemb82c4dzi.jpg)

Once you have decent amount of team members and your software starts to mature, keeping track of what is broken becomes vital. You want to quickly get notified when a branch might be in a broken state or when a deployment fails.

Previously I had been using [CCMenu](https://github.com/erikdoe/ccmenu), it adds a small icon on your macOS status bar that turns red whenever there is a broken branch. However, it came with a lot of limitations, it was a super simple tool, despite the complexity of the task it tries to solve. Therefore I came up with [CI Demon](https://apps.apple.com/de/app/ci-demon/id1560355863?mt=12), it basically takes the same idea as CCMenu (to put the status of your CI in your desktop) but expands it by offering a more complete solution.

It not only shows the status of your main project branch, but also all the branches (or even PRs), it shows additional info, like on which step the build failed. It integrates with each service API so it provides more detailed information. It can trigger a rebuild. You can also quickly share a failing branch directly from the app, and the list goes on.

People who use it, are super happy with it, it is a fairly niche tool, but I know it solves a problem; observability. Having a dedicated tool for the job will always trump integration with other tools (like slack messages, which quickly get lost).

[Give it a try](https://apps.apple.com/de/app/ci-demon/id1560355863?mt=12)! I promise you won't be disappointed.
Create notifications in minutes with Amazon SNS and Python
Tags: aws, cloudcomputing, sns, notifications
Published: 2021-06-14 07:30:53

---
title: Create notifications in minutes with Amazon SNS and Python
published: true
date: 2021-04-26 14:23:15 UTC
tags: aws,cloudcomputing,sns,notifications
canonical_url: https://medium.com/analytics-vidhya/create-notifications-in-minutes-with-amazon-sns-and-python-6576961db40c
---

[![](https://cdn-images-1.medium.com/max/2600/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)](https://medium.com/analytics-vidhya/create-notifications-in-minutes-with-amazon-sns-and-python-6576961db40c?source=rss-6a5fd2acfac------2)

Learn how to use Amazon SNS to create email and phone notifications with Python.

[Continue reading on Analytics Vidhya »](https://medium.com/analytics-vidhya/create-notifications-in-minutes-with-amazon-sns-and-python-6576961db40c?source=rss-6a5fd2acfac------2)
10 Bootstrap Search
Tags: bootstrap, javascript, webdev, html
Published: 2021-04-26 14:20:57

A stunning collection of Search templates built with the newest Bootstrap 5. Practical examples and usage in real projects.

If you want to learn more about the construction of the Search and get to know the basic and advanced usage of this component - read [📄 Search documentation](https://mdbootstrap.com/docs/standard/forms/search/) 


___________

## Intro half page

[![Intro half page](https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img1.webp)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2909390?view=side)

----

## Intro colorful background

[![Intro colorful background](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img2.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2909424?view=side)

----

## Intro light card

[![Intro light card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img3.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2909474?view=side)

----

## Intro dark card

[![Intro dark card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img4.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2912504?view=side)

----

## Intro color of the year

[![Intro color of the year](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img5.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2912619?view=side)

----

## Intro gradient input

[![Intro gradient input](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img6.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2912933?view=side)

----

## Intro vertical image

[![Intro vertical image](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img7.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2909118?view=side)

----

## Intro with glass card

[![Intro with glass card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img8.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2909145?view=side)

----

## Intro full page

[![Intro full page](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img9.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2909292?view=side)

----

## Intro gradient card

[![Intro gradient card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/forms/search/examples/assets/img10.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2913069?view=side)
What JS Concept should I explain?
Tags: javascript, codenewbie, beginners
Published: 2021-04-26 14:19:26

I've learned a lot from the DEV community and I would love to give back. For this reason I have created this Series.

If you want an explanation of any JS concept, you've come to the right place! Comment what you want to learn about and I will try to respond to every request with a new post in this Series.

Please don't be misled by the word "concept". I will try to do anything JS related, but no libraries!

Happy Learning!
How to generate html with Python
Tags: python, html
Published: 2021-04-26 14:15:48

---
title: How to generate html with Python
published: true
description: 
tags: python, html
//cover_image: https://direct_url_to_image.jpg
---

I guess we all find out that sending html "over the wire" is faster than using javascript to create components from json data.

Javascript takes longer to be parsed by the browser than html.

First:
```
pip install htmgem
```

Here is a simple html boilerplate created with htmgem:

```py

from htmgem.tags import *


html_string = \
html({'lang':'en'}, [
    head([
        meta({'charset':'UTF-8'}),
        meta({'name':'viewport', 'content':'width=device-width, initial-scale=1.0'}),
        link({'rel':'stylesheet', 'href':'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css'}), 
        script({'src':'https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js', 'defer':None})
    ]),

    body([
        h1("Interesting title"),

        p("""

            A very long paragraph

        """),

        ul({"class": "somediv"}, [
            (li, "item1"),
            (li, "item2"),
            (li, {"id": "myid", "class":"important"}, "item3"),
        ])
    ])
])

```

All tags are just functions which receive either html/custom attributes either children/text (`<a attrs>children</a>`).

Add a pinch of AlpineJs for interactivity and you are set.

Checkout the repo [here](https://github.com/ClimenteA/htmgem)