teleren/devto huggingface dataset:
🦾 Avoid domain name expiration with GH Actions , issues & RapidAPI 🎫
Tags: api, githubaction, cloud, rapidapi
Published: 2022-05-03 07:29:41

## ❔ About

We are managing a website dedicated to domain names management (see [`DOMAINE.NC`](https://www.domaine.nc/)).

Some months ago we faced a incident due to domain name expiration.
The impact on the business is pretty simple 👇

> your domain is simply disappearing from the web (no more ads nor transaction revenue, no more service, SLA impacts, potential penalties,...) 😱

At that time I said myself... then to my team that we absolutely had to

> _create something that would help anyone avoid that incident so **noone should see anymore that kind of service outage**_

## 💡 The Pitch

> **_"We need to get a solution that warns us before domain name expiration by sending a pluggable event/notification."_**

## 🧰 Our toolbox

Previously we had created an API to interact with _domain names in New-Caledonia_.

It is available under various flavours : 

- As a public docker image : [`optnc/domaine-nc-api`](https://hub.docker.com/r/optnc/domaine-nc-api)
- On our [marketplace on RapidAPI](https://rapidapi.com/opt-nc-opt-nc-default/api/domaine-nc/)

So thanks to this, we wanted to apply  [“dogfooding”](https://deviq.com/practices/dogfooding) practice.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sortd28o7fg049rie0w.png)
 
We will 

> create a ready to use cloud based solution so we could monitor our own domains.

## 🛎️ Deliver a ready to use solution

I was still remembering of "2021 GitHub Actions Hackathon on DEV" :

{% embed https://dev.to/devteam/join-us-for-the-2021-github-actions-hackathon-on-dev-4hn4 %}

Github actions are **an efficient way to get the Job done** and take advantage of all GH (ready to use) integrations around issues.

So...

> we would create a **public GH Action** that would do the monitoring for us... making it possible to **automate backoffice tasks** (Power Automate, Zapier or IFTTT) : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r0p7o29y0leoaa1g2jq.png)

☝️ **The GH action is relying on the API delivered through RapidAPI, so the only thing you have to do is bring your own [RapidAPI key](https://docs.rapidapi.com/v2.0/docs/keys) so you can store it as a secret on your GH repo**

## 🎬 Live demo

Enjoy the demo of the solution and how to customize it :

{% youtube x4GhCnyJ_DY %}

## 📜 Source code

Find below GH Action source code :

{% embed https://github.com/opt-nc/domaine-nc-action %}

... and finally the [Action on the Marketplace](https://github.com/marketplace/actions/get-your-nc-domain-validity-metadata).



## 🔖 Related contents

Previous related POST : 

{% embed https://dev.to/optnc/domainenc-the-fun-docker-way-and-screenshots-contest-17o8 %}

API on [RapidAPI marketplace](https://rapidapi.com/opt-nc-opt-nc-default/api/domaine-nc/) :

[
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbndfi3zvwqr3j3hm6f1.png)](https://rapidapi.com/opt-nc-opt-nc-default/api/domaine-nc/)
Looking back into one year of AWS Community builder program.
Tags: aws, webdev, devops, cloud
Published: 2022-05-03 07:27:18

Hi! It is almost a year I have joined the [AWS Community Builders program](https://aws.amazon.com/developer/community/community-builders/) as a Community builder in the Front-End Web & Mobile Community. In this post, I will explain the the reason I choose to be part of this active community and the advantages of it. 

I consider myself a live long learner and joining a [AWS Community Builders program](https://aws.amazon.com/developer/community/community-builders/) helps me to stay focused and leverage the advantages offered to grow and help others. Before joining the community last summer I set forward a path for myself for my first year as a Community Builder. 

For the first year I focused on my growth as a community builder, constantly engaging with my fellow community builders to push myself to learn and grow, resulting in achieving all three AWS associate level certifications ([AWS Certified Solutions Architect– Associate](https://aws.amazon.com/certification/certified-solutions-architect-associate/), [ AWS Certified Developer - Associate](https://aws.amazon.com/certification/certified-developer-associate/), [AWS Certified SysOps Administrator - Associate](https://aws.amazon.com/certification/certified-sysops-admin-associate/)) and Hashicorp Terraform Associate certificate. This gave me a good exposure to a wide-range of AWS services and their best practices, which I could leverage during my internship at Jetsweat, for my pet-project or my full-time Job. All thanks, to  active family and highly engaged of programmers, managers and developers that will help push your limits to learn more and be better, smarter day by day. For this year my aim is for the AWS professional certifications.

As a Graduate Teaching Assistant in Northeastern University teaching the concepts of web development and cloud technologies. I conducted around multiple (~20 labs) related to web development, cloud and DevOps. Now, as I work full time as a SRE, I am planning to publish more post such as this to share my learning and take active part in Conferences, Events, and Workshops.
An Underrated Gem by @juliencrn
Tags: react, javascript, npm, typescript
Published: 2022-05-03 07:04:38

## [useHooks-ts](https://usehooks-ts.com/)
React hook library, ready to use, written in Typescript.

- Came across this amazing library which does the heavy lifting for me and is also great for managing those micro interactions. Its something which I needed but didn't knew until I started using it.

### Some useful hooks:
- `useUpdateEffect()`: Just modified version of useEffect that is skipping the first render.
- `useDebounce()`: Hook helps to limit that the component is re-rendered too many times.
- `useEffectOnce()`: Just modified version of useEffect that's executed only one time, at the mounting time.
- `useWindowSize()`: Easily retrieve window dimensions with this React Hook which also works onResize.

*Checkout other at https://usehooks-ts.com or https://www.npmjs.com/package/usehooks-ts*

---

Shoutout to [juliencrn](https://github.com/juliencrn) & all the other contributors. Thanks!

---

*Please comment down such underrated gems which you use in your projects.*
Reduce Docker-compose File length with the YAML Merge Key <<
Tags: docker
Published: 2022-05-03 06:57:01

If you are writing a docker-compose file, it can happen to have the same part of the configuration of each container repeated over and over the file.

Let's take this example.

```yaml
version: '3.7'

services:
  web:
    restart: always
    image: web
    environment:
    - ENVIRONMENT_NAME=local_dev
    - USING_DOCKER_COMPOSE=true
    - DJANGO_SETTINGS_MODULE=sms_mailer.settings
    - DJANGO_CONFIGURATION=Local
    - DJANGO_SECRET_KEY
    - DJANGO_ALLOWED_HOSTS
    - DJANGO_CORS_ORIGIN_WHITELIST
    build:
      context: ./
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    command: /code/run_web.sh

  task_runner:
    restart: always
    image: task_runner
    environment:
    - ENVIRONMENT_NAME=local_dev
    - USING_DOCKER_COMPOSE=true
    - DJANGO_SETTINGS_MODULE=sms_mailer.settings
    - DJANGO_CONFIGURATION=Local
    - DJANGO_SECRET_KEY
    - DJANGO_ALLOWED_HOSTS
    - DJANGO_CORS_ORIGIN_WHITELIST
    build:
      context: ./
      dockerfile: Dockerfile
    ports:
      - "5000:5000"
    command: /code/task_runner.sh   
```

We have this part of the code repeated two times in the docker-compose file.

```yaml
environment:
    - ENVIRONMENT_NAME=local_dev
    - USING_DOCKER_COMPOSE=true
    - DJANGO_SETTINGS_MODULE=sms_mailer.settings
    - DJANGO_CONFIGURATION=Local
    - DJANGO_SECRET_KEY
    - DJANGO_ALLOWED_HOSTS
    - DJANGO_CORS_ORIGIN_WHITELIST
  build:
    context: ./
    dockerfile: Dockerfile
```

Let's use the `<<` YAML keyword to make this file a little bit short. 

```yaml
version: '3.7'

x-web-environment:
  &web-environment
  environment:
    - ENVIRONMENT_NAME=local_dev
    - USING_DOCKER_COMPOSE=true
    - DJANGO_SETTINGS_MODULE=sms_mailer.settings
    - DJANGO_CONFIGURATION=Local
    - DJANGO_SECRET_KEY
    - DJANGO_ALLOWED_HOSTS
    - DJANGO_CORS_ORIGIN_WHITELIST
  build:
    context: ./
    dockerfile: Dockerfile

services:
  web:
    <<: *web-environment
    restart: always
    image: web
    ports:
      - "8000:8000"
    command: /code/run_web.sh

  task_runner:
    <<: *web-environment
    restart: always
    image: task_runner
    ports:
      - "8001:8001"
    command: /code/run_task_runner.sh
```

And we've just optimized the `Docker Compose` file.🤟‍

*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
Appwrite Application deployment on Heroku/Vercel.
Tags: appwritehack, appwrite
Published: 2022-05-03 06:52:55

## On local server
Creating a docker image and running it on local server and then calling the API. This seems to be working.

## On Deployment (for everyone)
How to get started with deploying it to global audience. Is it like everyone has to run docker image of Appwrite, probably not. Then how?
Job Aid: Developing an A/B Testing Roadmap
Tags: javascript, webdev, beginners, programming
Published: 2022-05-03 06:35:23

There are several key activities for creating an organizational A/B test strategy:
• define your customer profile
• define your organizational testing goals
• create your initial hypotheses
• document and learn

Using A/B testing, your organization can conduct a real-time comparison between two functional versions of a product, in order to test which version performs better. While the precise approach will vary from organization to organization, the basic process includes six key phases to ensure a robust A/B testing experience.

**Phases and activities of A/B testing**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijlbjde5j168y5krhnw2.png)
Rules for Simplifying Big O Notations
Tags: javascript, webdev, codenewbie, programming
Published: 2022-05-03 06:15:48

Big O Notation is the language we use for talking about how long an algorithm takes to run. It calculates how efficient is the way we solved the problem. 

Check out the basics of Big O Notation here - [Learn to Code - Big O Notation](https://dev.to/aryakris/learn-to-code-big-o-notation-21pf)

To help us simplify the Big O Notation expressions we follow a set of rules. 

1. Arithmetic Operations are constant. For example your computer takes almost same time calculating 2+2 and 20,465+2.

2. Variable assignments are also constant. Like incase of arithmetic operations your computer takes the same amount of time to to assign the value to a variable be it x = 3 or x= 509.

3. Accessing  elements in an array by index, or object by key is constant. 

4. In a loop, the complexity is the length of the loop times the complexity of whatever that happens inside the loop. For instance if we have nested loops, we are going to have `n^2` runtime. 

Let's look at an example code - 

```
function logAtLeast5(n){
for(var i=1, i<=math.max(5,n), (i++)
console.log(i);
}
}
```
Here  we have a loop and this loop is going to go from one to either five or end, whichever one is larger.
What happens as 'n' grows larger so as and continues to grow and grow and grow towards infinity? The big O of this is` O(n) `because as 'n' grows the number of operations grows in proportion with 'n'. In a graph we can see a general trajectory for O(n).
How to integrate self hosted tinyMCE6 with Vue3+Laravel9
Tags: vue, laravel, tinymce
Published: 2022-05-03 06:05:59

## 1. Install tinyMCE using composer
```
composer require tinymce/tinymce
```

## 2. Install tinymce-vue using npm
```
npm install  "@tinymce/tinymce-vue@^4"
```

Don't worry about the number 4. Version 3 of tinymce-vue package is for vue 2 and version 4 of tinymce-vue package is for vue 3. Weird? Yeah. But nobody can go back in time.

again

> **tinymce-vue 4** for **vue 3**
> **tinymce-vue 3** for **vue 2**

## 3. Add a Laravel Mix task to copy TinyMCE to the public files when Mix is run

```
mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');
```

## 4. Run Laravel Mix
```
npm run watch
```

## 5. Done

Now you can use the editor in any .vue file like this

```
<script setup>
import Editor from '@tinymce/tinymce-vue';
</script>

<template>
<Editor
    api-key="no-api-key"
    tinymce-script-src="/js/tinymce/tinymce.js"
    :init="{
        plugins: 'lists link image table code help wordcount',
      	menubar: false,
      	skin: 'oxide-dark',
        content_css: 'dark',
      	branding: false
    }"
/>
```

## dev.to's code block is so ugly.
Serendipity Theme v2.0
Tags: vscode, uiweekly, uiux, color
Published: 2022-05-03 05:39:41

Hello everyone, I have been working for a while on Serendipity Theme and I have been porting it to other platforms too with help of my friend Fabi and other contributors.

Now on V2 some big changes have taken place, like the whole color palette, contrast, new icons and such.

------------------
Three versions:
--

- Morning
- Sunset
- Night

-----------------

This is the Marketplace:
---
V2
- https://marketplace.visualstudio.com/items?itemName=wicked-labs.wvsc-serendipity

V1 is also available for those that liked it more.
- https://marketplace.visualstudio.com/items?itemName=wicked-labs.old-serendipity
---

The official site.
- https://serendipitytheme.com/
---

Github
- https://github.com/serendipity-theme
---


There's almost 15K users by no pull request whatsoever. 

Feel free to make tour version along the guidelines on the repo and enjoy the theme itself.

Hope you all like it and have a good day!

/mike
Which commit broke the build? Using Git Bisect
Tags: git
Published: 2023-01-06 03:01:58

---
title: Which commit broke the build? Using Git Bisect
published: true
date: 2022-05-03 05:15:55 UTC
tags: Git
canonical_url: https://brandonrozek.com/blog/git-bisect-broken-builds/
---

Lets imagine a scenario where in the latest merge a test starts failing. Lets say these tests are saved in `test.sh`. Instead of having to test each individual commit in the merge, to see where the test fails, luckily`git bisect` narrows it down in a more efficient way!

To use:

```
git bisect start [good] [bad]
git bisect run test.sh

```

Where `[good]` and `[bad]` are replaced with their respective commit hashes.

Under the hood, Git will run a binary search between the good and bad nodes in the commit tree.

As a reminder, don’t forget to make `test.sh` an executable. Starting in Git 2.36 it will provide a warning, but earlier versions will perform the search anyways even with it all failing.

Read more: [https://git-scm.com/docs/git-bisect](https://git-scm.com/docs/git-bisect)
Pull Nginx image and run the container
Published: 2022-05-03 05:09:54

Written with [Cameron Gibson](https://github.com/cgcamcam) 

## Versions
OS: MacOS (intel chip)
Docker version: 20.10.12  

## Official image of Nginx
Nginx distribute its official Docker image on Docker Hub.
https://hub.docker.com/_/nginx

## How to
1. Pull Nginx Docker image
2. Run the container

## 1. Pull Nginx Docker image
① Pull the latest of Nginx Docker image
```shell
docker pull nginx
```
② Confirm you successfully pulled the image
```
docker images
```
![Image Pulled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f1v2w11dnvqy8krlzhs.png)

## 2. Run the container
① Run the container
Listen Port: 3000, Forward to: 80
```shell
docker run -p 3000:80 nginx
```
② Confirm you successfully run the container
Access to http://localhost:3000/

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

## Thank you
I hope this helps.
Thank you for reading.
for beginners OpenCV python(#1 - install)
Tags: python, opencv
Published: 2022-05-03 04:46:44

## Install OpenCV in your OS
`please install on your virtual environment`

- terminal
```
pip install opencv-python
```
![install screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zresm5ukotb8bclcg3ru.png)

if you want to check your opencv version, run it
```
pip list

```
![list screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdb12xzvmhst1yph0ku3.png)

- source code
```python
import cv2 as cv
```
**if no error message, successfully installed**.  

---
>### tip ###

if you want to check your opencv version fastly. 
- source code
```python
print(cv.__version__)
```
How testing help us improve our code
Tags: discuss, beginners, programming, testing
Published: 2022-05-03 04:41:21



### What is Unit Testing

Unit testing basically works by layers most known as components. Testing each component to verify if it works as expected, this units are tested during development of an application. 

There are some advantages of unit testing: 

- Help us reducing bugs on early stages of development
- Allows us to improve code
- Integrates all at once

### How it works

The unit testing lifecycle starts with writing the function that creates a new test. 

After that we need to understand and check the code from repository if necessary we have to make changes. 

Then we execute the unit tests and fix bugs in order to run the unit tests again. 
Finally all the code gets reviewed and the cycle repeats itself.

Learning how to work with testing is an important stage of development, It will help us to improve our code and save time.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7guveyxxuhbpqqski6t.png)
Handling errors in Remix
Tags: react
Published: 2022-05-03 04:36:35

It's always annoying if your application throws unforeseen errors.

In general, it's good advice to build in the most common error catching early on. However, there might be some generic errors you can't always see coming.

Luckily for us, Remix will catch most of these errors and can render them to the closest `ErrorBoundary` box we define.

## Creating a root error boundary

From my perspective, you'll always want to add a root error boundary to your code, this is the topmost level, so if an error is thrown top-level, this one will always be able to catch it.

To create one of these root error boundaries, open up the `root.tsx` file.

According to the docs, it's best to render a full HTML for the root error boundary as it will mount and unmount on the render of this error.
By having access to the `<Meta />, <Links />, and <Script />` tags, it might be able to re-render.

Let's add the following function to this root file:

```js
export function ErrorBoundary({ error }) {
  return (
    <html>
      <head>
        <title>Oh no!</title>
        <Meta />
        <Links />
      </head>
      <body className='m-4'>
        <h1 className='text-2xl'>Something went wrong!</h1>
        <p>{error.message}</p>
        <Scripts />
      </body>
    </html>
  );
}
```

Let's try it out and see what happens; I added this particular error in `app/routes/admin/posts/index.tsx`.

```js
export function loader() {
  throw new Error('I am a failure!');
}
```

And if we now open this page, we get hit by the following error.

![Error boundary in Remix](https://cdn.hashnode.com/res/hashnode/image/upload/v1650692691711/uPMq3rbcc.png)

This is already way better than not throwing a custom error.
The downside is blocking the complete page while our error is only thrown down the line.

## Adding nested error boundaries

And this is where Remix kind of blows my mind. It supports multiple error boundaries!

Remix will start looking for the closest error boundary to render the error when an error is thrown.

We could add an error boundary in the same file we throw it in in our case.

```js
export function ErrorBoundary({ error }) {
  return (
    <div className='bg-red-100 border border-red-300 p-4'>
      <h1 className='text-2xl'>Something went wrong!</h1>
      <p>{error.message}</p>
    </div>
  );
}
```

Now refresh the page and see what happens.

![Nested error boundary](https://cdn.hashnode.com/res/hashnode/image/upload/v1650692826699/5MlYwCOEQ.png)

Wow, the error is only shown in the specific nested route!
The other parts of our application are still working as expected.

You can find this example code on [GitHub](https://github.com/rebelchris/remix-starter/tree/error-handling).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Starting the git course at profy.dev
Tags: webdev, beginners, tutorial, javascript
Published: 2022-05-03 04:25:54

By some good luck I found the above course and this is going to be my account of my doing it, since in its introduction it encourages the student to start blogging about it. 

Of course as a self-taught developer I have used git, but it always seems the most arcane, byzantine experience, heavy with cryptographic forebodings. Which is what it should be, to put off the amateurs, who merely want to do something trivial, right? It should feel thoroughly forbidding - and nerdy. Well it surely succeeds at that! But, as I say, that, according to the IT gods, is no doubt a good thing :) So, on with it.
An easy safety in git
Tags: git, tutorial
Published: 2022-05-03 04:21:34

So, everyone's git right of passage is to nervously try to run a git command and then realize with horror that you just lost your work on your local repo. Then you run to google and try to find out how to reverse what you just did and run some archaic commands to find the lost commits.

With a small amount of foresight, you can just create a new branch called "backup" pointing to your work and reset back to it if necessary.

```
$ git branch -C backup
# mess up your git branch
$ git reset backup --hard
# good to go
```
Day 3 - What are fragments in React?
Tags: react, beginners, webdev, javascript
Published: 2022-05-03 04:23:21

---
title: Day 3 - What are fragments in React?
published: true
date: 2022-05-03 04:15:22 UTC
tags: react,beginner,webdev,javascript
canonical_url: https://blog.sanjaybabu.dev/day-3-fragments-react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pl8z852f9qg2zhtavvl.png
series: 100 days of interview questions
---

As you may already know, A React component can return only 1 node. So if we had multiple elements to return, then we have to simply wrap a `<div>` around them and return a single element like below.

```
render() {
  return (
    <div>
      <LeftItem />
      <RightItem />
    </div>
  );
}

```

This affected the sematic nature of HTML and resulted in react apps having lots of unwanted nested components. So in order to solve this, _Fragments_ was introduced in react v16.2. Fragments are syntax that allows a React component to return multiple elements without wrapping them in an extra DOM node.

Now we instead of adding `<div>` like before, we can use `<React.Fragment>`

```
render() {
  return (
    <React.Fragment>
      <LeftItem />
      <RightItem />
    <React.Fragment>
  );
}

```

Note that there is also a shorthand way to create Fragments. We can simple use empty tags `<>` & `</>` instead of `<React.Fragment>`
Beginner Horoscope Code (Python)
Tags: python, beginners, programming
Published: 2022-05-03 04:03:56

I started this project to try and get comfortable with coding simple things like this. If I master the basics / foundations of coding, then it becomes a great way to progress and become a better programmer / coder. 

I used if and else statements, while starting the code by defining the function. Then I put in the necessary parameter that I thought was an easy thing to accomplish.  


😎 https://github.com/berry1724/Horoscope/blob/main/horoscope.python
 
Here's my code!!!