teleren/devto huggingface dataset:
Using AWS CodePipeline to deploy on different environments
Tags: aws, cloud, cicd, tutorial
Published: 2023-06-05 06:56:24

AWS CodePipline is a service used to release and deploy changes to different environments in a visualize way, It’s used to orchestrate your deployment from AWS CodeCommit till deploying these changes using AWS CodeDeploy.

In this article we will demonstrate how to use AWS CodePipeline to orchestrate the deployment to dev environments and make use of the manual approval process to deploy on prod environments.

I built a high-level design to have visual on how this will work


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

Deployment steps

1- go to AWS CodePipeline service through AWS console and create pipeline


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

2- Enter the below settings for the pipeline


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

3- I used AWS CodeCommit as a source with a sample nodejs code uploaded & press next


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

4- Create a stage for deployment with the below configuration & create the pipeline


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

5- Add Another stage for the production environment after the first deployment stage with the below action and these will contain two action groups ( manual approval & deploy to production environment )


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


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


You can create and define SNS topic for sending notification in case of any pending approvals.


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

the deploy to production environment will look like the above screenshot.

6- Since AWS CodeCommit is integrated with the pipeline, any modification in the branch defined in the AWS CodeCommit configuration will trigger the pipeline


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



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


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

So it’s good way to release the code in testing environment first then an approval process before releasing it into production environment.
Exciting News for Front-End Developers!
Published: 2023-06-05 06:50:36

---
title: Exciting News for Front-End Developers!
published: true
---

## Description

Are you a front-end developer looking for free and hassle-free options to deploy your stunning websites? Look no further! I’ve got you covered with a list of fantastic free front-end deployment websites. Here are some platforms that can help showcase your talent to the world:

## Free Front-End Deployment Platforms

1️⃣ **GitHub Pages**: With GitHub Pages, you can effortlessly host your static websites directly from your GitHub repository. It’s simple, reliable, and provides seamless integration with version control.

2️⃣ **Netlify**: Netlify offers an intuitive and powerful platform for deploying static websites. Enjoy features like continuous deployment, custom domain support, SSL certificates, and much more.

3️⃣ **Vercel**: If you’re looking for lightning-fast deployments with built-in serverless functions, Vercel is the way to go. It’s ideal for React, Next.js, and other modern frameworks, providing a superb developer experience.

4️⃣ **Surge**: Surge makes it incredibly easy to publish your front-end projects within seconds. Just run a simple command, and your website will be live on a unique Surge domain. No setup is required!

5️⃣ **Firebase Hosting**: Firebase Hosting offers fast and secure hosting for your static and dynamic content. It integrates seamlessly with other Firebase services, providing a comprehensive development ecosystem.

6️⃣ **GitLab Pages**: GitLab Pages allows you to deploy your static websites using GitLab’s powerful CI/CD capabilities. Take advantage of their robust infrastructure and version control system.

These platforms offer free plans that can cater to your front-end deployment needs. Whether you’re working on personal projects, portfolio websites, or client demos, these options will ensure your creations are easily accessible to the world.

Remember, showcasing your front-end skills is crucial for attracting potential employers or clients. So, deploy your websites effortlessly and focus on what you do best: crafting exceptional user experiences!

Feel free to share any additional free front-end deployment platforms that you find valuable in the comments below. Let’s help each other thrive in the world of front-end development! 🌟

Make sure to check out the original article on [Medium](https://medium.com/@ghousahmed/exciting-news-for-front-end-developers-7a0902a8e353) for more details.
Create a Scroll Back To Top Button Using HTML
Published: 2023-06-05 06:45:12

Hey Guys , In Today's Blog We are going to see How to create an Create a Scroll **[Back To Top Button](https://www.codewithrandom.com/2022/10/13/scroll-back-to-top-button/)** Using HTML & JAVASCRIPT. For that the respective sources codes were given below along with the respective preview of output section. So you can make use of that.

Now The Project is going to create and for that we are first adding an HTML Code.

## HTML CODE:
```
<div class="container text-center py-5" style="height:1000px">
  <h3>Back to top method</h3>
  <h5 class="text-muted">
    only using bootstrap classes - support ltr & rtl
  </h5>
</div>
<button class="btn btn-sm btn-primary rounded-circle position-fixed bottom-0 end-0 translate-middle d-none" onclick="scrollToTop()" id="back-to-up">
  <i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>
```
Here We have used Bootstrap Html codes in which we would see it in every div class names. Simply we have to go for bootstrap CDN and copy the link and paste it inside head tag. Now we can add containers using these links.

We just adding an heading and a sub-heading with h3 and h5 tags. Then we are adding an button with the classes and setting an onclick function.

Lastly we are adding arrow for going to top using I tag.

So this is what for HTML , Now We are skipping the CSS part as we have used bootstrap , So now we go for an Java script to make it to move from bottom to top.

## JAVASCRIPT CODE:
```
window.onscroll = () => {
  toggleTopButton();
}
function scrollToTop(){
  window.scrollTo({top: 0, behavior: 'smooth'});
}

function toggleTopButton() {
  if (document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20) {
    document.getElementById('back-to-up').classList.remove('d-none');
  } else {
    document.getElementById('back-to-up').classList.add('d-none');
  }
}
```
First , We are setting on scroll to toggleTopButton using arrow function. It means it provides an toggle between the checked and unchecked states.

Then we are creating an function with name scrollToTop() and setting the top to zero and the webpage scroll be haviour to smooth.

Again the function mentioned in on scroll is called here and comparing the scroll to 20 which needs to be greater and then with help of get element we are getting the specific element and setting it to remove using class list property. Else We are setting it to add.

Now we have completed our Java Script part and Hence we came for the end of project. But Just make sure to use the preview given below.

Now We have Successfully created our **[Back To Top Button](https://www.codewithrandom.com/2022/10/13/scroll-back-to-top-button/)** Using HTML & JAVASCRIPT. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE- Suleiman Al-othman

WRITTEN BY- Ragunathan
100 Days of Java: Day 3 Scheduler
Tags: java, beginners, programming, 100daysofcode
Published: 2023-06-05 06:27:23

Welcome to Day 3 of the **100 Days Java**! Today, we'll be exploring a Java code snippet that demonstrates how we can schedule a task to execute periodically using ScheduledExecutorService. Here is the code that implements scheduling:

```java
import java.time.LocalTime;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

public class Day003 {

    private final ScheduledExecutorService scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();

    public static void main(String[] args) throws InterruptedException {
        var day003 = new Day003();
        day003.printCurrentTimeEvery2Seconds();
        Thread.sleep(15_000);
        day003.stopPrinting();
    }

    public void printCurrentTimeEvery2Seconds() {
        Runnable task = () -> System.out.println(LocalTime.now());
        scheduledExecutorService.scheduleAtFixedRate(task, 0, 2, TimeUnit.SECONDS);
    }

    public void stopPrinting() {
        scheduledExecutorService.shutdown();
    }

}
```

To begin, we import necessary classes from the Java standard libraries, including **LocalTime** for time-related operations, and **Executors** and **ScheduledExecutorService** for task scheduling.

Next, we define a class called Day003. This class contains a **ScheduledExecutorService** object called **_scheduledExecutorService_**, which is responsible for scheduling and executing tasks.

Moving on to the main method, which is the entry point of our program. Inside this method, we create an instance of the Day003 class named day003.

We then call the **_printCurrentTimeEvery2Seconds_** method on our day003 object. This method schedules a task to print the current time every 2 seconds. The task is defined using a lambda expression, which simply prints the current time using **LocalTime.now()**.

After scheduling the task, we introduce a delay using **Thread.sleep(15_000)** to allow the task to run for 15 seconds.

Finally, we call the **_stopPrinting_** method on our day003 object to stop the execution of the scheduled task.

Let's summarize what this code does. When we run this program, it will start printing the current time every 2 seconds using LocalTime.now(). This is achieved by scheduling a task with the **ScheduledExecutorService** to execute at a fixed rate of every 2 seconds. The task is stopped after running for 15 seconds.

This code snippet showcases how to use **ScheduledExecutorService** to schedule and execute tasks at specified intervals. It is a powerful feature that can be utilized for various timed operations and background tasks in your Java applications.

That's it for Day 3! Stay tuned for the next code snippet and explanation tomorrow. Happy coding!

Code credits: https://github.com/hbelmiro
Nervogen Pro – Pain Relief Reviews, Benefits, Price And Results?
Tags: webdev, javascript, beginners, programming
Published: 2023-06-05 06:10:47

[Nervogen Pro](https://www.outlookindia.com/outlook-spotlight/-alert-2022-nervogen-pro-reviews-price-side-effects-and-complaints-news-240657) the easy way cope a problem pain in your lower back; but, it shouldn't be a demanding routine. Require to take it slowly. It is even better if the pain sensation is so 
severe a person can take a rest fist prior to starting with any kind of strenuous activity like pastime. When you think that you can start to do an exercise, it is advised to do for a short period.
[https://www.outlookindia.com/outlook-spotlight/-alert-2022-nervogen-pro-reviews-price-side-effects-and-complaints-news-240657](https://www.outlookindia.com/outlook-spotlight/-alert-2022-nervogen-pro-reviews-price-side-effects-and-complaints-news-240657)
https://www.youtube.com/watch?v=IQaPGfoDoMw   
https://soundcloud.com/nervogen-pro/nervogenproinfo 
https://medium.com/@nervogenprofact/nervogen-pro-pain-relief-benefits-results-price-does-it-work-201e1dbb1ed3 
https://lexcliq.com/nervogen-pro-pain-relief-results-ingredients-price-and-benefits/   
https://colab.research.google.com/drive/1ciE2wP7-mfFevdh3girBX04oMoo3JGYz 
https://sites.google.com/view/nervogenpro-2022/ 
https://groups.google.com/g/nervogen-pro-pills/c/TJPqEArkEng 
https://nervogenproprice.blogspot.com/2022/12/nervogenpro.html 
https://nervogenprofact.wixsite.com/nervogenproprice 
https://www.tumblr.com/blog/nervogenprofact 
https://caramellaapp.com/nervogenprobuys/dUsw_RVl5/nervogen-pro  
https://nervogenprobuys.mystrikingly.com/ 
https://nervogenprofact.contently.com/ 
https://www.click.in/mumbai/nervogen-pro-pain-relief-reviews-benefits-price-c75-v51041850 
https://warengo.com/stories/268352-nervogen-pro-pain-relief-results-ingredients-price-and-benefits 
https://promosimple.com/ps/24760/nervogen-pro  
https://hashnode.com/@nervogenproinfo 
https://www.sympla.com.br/produtor/nervogenproprice
https://nervogenprobenefits.company.site/
https://infogram.com/nervogen-pro-1h7z2l8rd3r3g6o
https://nervogen-pro-info.webflow.io/
https://linktr.ee/nervogenprofact
https://jobs.blognone.com/company/nervogen-pro/job/nervogen-pro-pain-8lJV
https://www.yepdesk.com/nervogen-pro1/private/63vrvk40e5
https://fixr.co/event/nervogen-pro-pain-relief-reviews-benefits-tickets-865070570  
https://www.sportsblog.com/udsakhyna/nervogen-pro-pain-relief-results-ingredients-price-benefits/
Learning more about Web Design as a teacher than I did as a student.
Tags: webdev, beginners, productivity
Published: 2023-06-05 05:54:13

**I didn't know!**

No one told me there was a basic formula for design! And it doesn't matter where the design exists! Home Page, print, still rgb flyer, video, etc. If you're trying to relay a visually enthralling message, you must follow four simple bullet points: Structure, Spacing, Rhythm, and Contrast. 

However, Structure is first because all others follow with ease when something is well-organized. I think I've always been focused on Contrast and Rhythm first. Walking everything "backwards" which makes sense to me now. I've learned that by deliberately placing Structure first, a beauty will emerge that can be the foundation for stronger design.
Why does my Laravel app on GitHub Code Spaces redirect to localhost for login, and how can I change it?
Published: 2023-06-05 05:25:16

When accessing my code space, it is initially running on the URL https://raokamranshauket-musical-sniffle-7q6wrp46xpgcgwx-80.preview.app.github.dev/. However, when I click on the login link, it redirects to http://localhost/login, which is not accessible.

I would like to permanently change my route to https://raokamranshauket-musical-sniffle-7q6wrp46xpgcgwx-80.preview.app.github.dev/login so that it works accurately.

I change the APP_URL in .env and config/app.php but nothing works.

I would appreciate any assistance in achieving this.
Customize react-simple-keyboard layout
Tags: react, typescript, npm
Published: 2023-06-05 04:35:54


{%github hodgef/react-simple-keyboard %}

react-simple-keyboard has a nice default layout but I needed to create a custom version for our usage.

For doing that, I needed to define my own layout and add a switching function to change a layout by clicking shift, numbers, symbols keys.
The code is below.

[custom keyboard]

https://codesandbox.io/s/festive-matsumoto-bn3kbv?file=/src/components/CustomKeyboard.tsx


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

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

[numbers]
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnmtx05i80skph2zhqht.png)
What's your workflow like as a freelance developer?
Tags: freelance, productivity, frontend, career
Published: 2023-06-05 04:26:41

After getting laid off from my job as a front-end developer, I really want to get into freelancing but I can't really find a lot of YouTube videos that share the process from start to finish. I'm always curious to know what other people's workflows are like. 

From onboarding clients to getting started on the project to handing it over or deploying, what does your whole process look like? What tools and resources do you use? 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxnty2rke57n6vs50l8u.gif)
Introducing the remarkable "Brutopia" bootstrap theme, a captivating blend of readability and neo-brutalist design principles..
Tags: bootstrap, css, webdev
Published: 2023-06-05 03:50:34


![Screenshots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lnp5618fdrwxw0xtx4h.gif)

[Github](https://github.com/rajnandan1/brutopia) [Preview](https://rajnandan1.github.io/brutopia/dist/index.html)

Brutopia embodies the essence of simplicity and raw aesthetic, drawing inspiration from the bold and unapologetic style of neo-brutalism while prioritizing exceptional readability.

Every element of Brutopia has been carefully crafted to ensure optimal legibility and ease of navigation, ensuring that your content takes center stage.

The deliberate use of minimalistic typography, generous whitespace, and striking color contrasts creates a visually engaging experience that captivates your visitors' attention. Embrace the unique charm of neo-brutalism while prioritizing readability with Brutopia and redefine the way your audience engages with your website.
100 Days Coding Challenge - Day 16: FreeCodeCamp JavaScript Algorithms and Data Structures & PHP
Tags: javascript, programming, php, 100daysofcode
Published: 2023-06-05 03:34:56

## Day 16

Today I do the Basic Algorithm Scripting in fcc, soon I will starat with the projects

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

And I was learning PHP sintaxis with html, for the project that I talked yesterday, and I have to learn very good SQL too


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/taxhuy335y0okllp7o0h.png)
error by wrong protobuf version
Published: 2023-06-05 03:27:00

File "/home/xxxx/.local/lib/python3.8/site-packages/google/protobuf/descriptor.py", line 755, in _new_
_message.Message._CheckCalledFromGeneratedFile()
TypeError: Descriptors cannot not be created directly.
If this call came from a _pb2.py file, your generated code is out of date and must be regenerated with protoc >= 3.19.0.
If you cannot immediately regenerate your protos, some other possible workarounds are:
1. Downgrade the protobuf package to 3.20.x or lower.
2. Set PROTOCOL_BUFFERS_PYTHON_IMPLEMENTATION=python (but this will use pure-Python parsing and will be much slower).

刨根问底
https://github.com/protocolbuffers/protobuf/issues/10048
https://github.com/protocolbuffers/upb/blob/3c76a26b3666cb74d7e8850cd0b0923bc4621f86/python/message.c#L1971

    def __new__(cls, name, index, number,
                type=None,  # pylint: disable=redefined-builtin
                options=None, serialized_options=None, create_key=None):
      _message.Message._CheckCalledFromGeneratedFile()
      # There is no way we can build a complete EnumValueDescriptor with the
      # given parameters (the name of the Enum is not known, for example).
      # Fortunately generated files just pass it to the EnumDescriptor()
      # constructor, which will ignore it, so returning None is good enough.
      return None


  # pylint: disable=protected-access
  _message = api_implementation._c_module
  # TODO(jieluo): Remove this import after fix api_implementation
  if _message is None:
    from google.protobuf.pyext import _message
  _USE_C_DESCRIPTORS = True


https://github.com/protocolbuffers/protobuf/blob/ad677f3215de203695ade78a25f79fa61010f770/python/google/protobuf/internal/api_implementation.py#L53

if _implementation_type == 'upb':
  try:
    # pylint: disable=g-import-not-at-top
    from google._upb import _message
    _c_module = _message
    del _message


https://protobuf.dev/news/2022-05-06/#python-updates
upb

bool PyUpb_InitMessage(PyObject* m) {
  if (!PyUpb_CPythonBits_Init(&cpython_bits)) return false;
  PyObject* message_meta_type = PyUpb_MessageMeta_CreateType();

  PyUpb_ModuleState* state = PyUpb_ModuleState_GetFromModule(m);
  state->cmessage_type = PyUpb_AddClass(m, &PyUpb_Message_Spec);
  state->message_meta_type = (PyTypeObject*)message_meta_type;

PyTypeObject* PyUpb_AddClass(PyObject* m, PyType_Spec* spec) {
  PyObject* type = PyType_FromSpec(spec);
  const char* name = PyUpb_GetClassName(spec);
  if (PyModule_AddObject(m, name, type) < 0) {
    Py_XDECREF(type);
    return NULL;
  }
  return (PyTypeObject*)type;
}
PyModule_AddObject
A Twitter Bot for Personalized Replies to Your Followings and Targeted Keywords!
Tags: twitter, node, javascript, openai
Published: 2023-06-05 03:16:25

Just built another Twitter bot for my client.

This bot replies to tweets posted by the people client followed && also searches for tweets containing specific keywords that comes under the client niche and replies to them. Reply were generated using gpt 3.5 turbo.

Screen Recording of the working bot in practice (The one i sent to my client): 

[https://drive.google.com/file/d/1C8XnzaSemB3TsUraJOLLUiwoua-Q7UvY/view
](drive.google.com/file/d/1C8XnzaSemB3TsUraJOLLUiwoua-Q7UvY/view
)

If you want to automate your tasks too, <a href="mailto:sojinsamuel2001@gmail.com?subject=Sojin%20I%20want%20to%20automate%20my%20business&amp;body=Yes%20I%26%2339%3Bm%20curious%20how%20it%20works%20if%20we%20can%20build%20out%20more%20automation%20for%20my%20twitter%20growth">I am open to new Twitter bot ideas</a>.