teleren/devto huggingface dataset:
Do you know the role of a front-end developer in the user's experience? Let's find out
Tags: webdev, frontend, design, ux
Published: 2023-01-19 18:19:45

# I. Introduction

As a front-end developer, my role in user experience design is crucial in ensuring that the final product is visually pleasing, easy to navigate, and provides a seamless experience for the user. In this blog post, I will discuss the responsibilities and importance of a front-end developer in user experience design.

# II. Responsibilities of a Front-end Developer
First and foremost, a front-end developer works closely with designers and developers to ensure that the website or application is responsive, accessible, and user-friendly. I use a variety of tools and technologies such as HTML, CSS, and JavaScript to create responsive and interactive interfaces that adapt to different screen sizes and devices. This is important because it ensures that the website or application is accessible to a wide range of users, regardless of the device they are using.
One of my main responsibilities is to ensure that the website or application is fast and efficient. I optimize images, scripts, and other elements to ensure that the website or application loads quickly and smoothly. This is important because it improves the overall user experience and can lead to higher conversion rates and customer satisfaction.
# III. Importance of a Front-end Developer in User Experience Design
In addition to working on the visual aspects of the website or application, I also work on the functionality. I make sure that the website or application is easy to use and that the user can easily find what they are looking for. This includes creating a clear and intuitive navigation structure, as well as ensuring that the website or application is easy to navigate on different devices.

Another important aspect of my role is to ensure that the website or application is accessible to users with disabilities. This includes implementing features such as alt text for images, high contrast mode, and keyboard navigation. This is important because it ensures that the website or application is inclusive and accessible to all users.

Ultimately, my role as a front-end developer is to put the user first and ensure that their experience is as smooth and enjoyable as possible. I strive to create a website or application that is not only functional but also visually appealing and easy to use. By working closely with designers and developers, I am able to create a website or application that meets the needs of the user and provides a positive experience.

# IV. Conclusion
In conclusion, a front-end developer plays a crucial role in user experience design by creating responsive, accessible, and user-friendly websites and applications. By focusing on the user and ensuring that their experience is smooth and enjoyable, a front-end developer can create websites and applications that are not only functional but also visually appealing and easy to use.

## If you like the post banner i designed desktop and iPhone background using the same style and it's free
{% embed https://store.ahmedsuliman.com/l/Goofy %}
How to automate application of a policy to multiple s3 buckets using Lambda.
Published: 2023-01-19 17:58:54

There are several ways to automate the application of a bucket policy on multiple S3 buckets, including:

1. Using the AWS Command Line Interface (CLI) to apply a policy to multiple buckets at once. This can be done by using the aws s3api put-bucket-policy command along with a script that iterates over a list of bucket names.

2. Using the AWS SDK for your programming language of choice to apply a policy to multiple buckets. This can also be done by iterating over a list of bucket names and using the appropriate SDK method to set the policy on each bucket.

3. Using AWS CloudFormation or AWS Resource Manager to automate the process of creating and configuring S3 buckets, including applying a bucket policy.
 
4. Using AWS Config service to automate remediation of bucket policy to multiple bucket using AWS Lambda function

5. Using AWS Lambda function to automate the process of applying a policy to multiple buckets. You could use Lambda with S3 event trigger, as soon as a new bucket is created, the Lambda function is triggered and apply the policy to newly created bucket.

6. Ultimately, the best approach will depend on your specific use case and the tools and technologies you are already using within your organization.


Here is an example of how you could use an AWS Lambda function to automatically apply a policy to new S3 buckets as they are created:

1. Create an S3 bucket policy in JSON format that defines the permissions you want to apply to all new buckets.
 
2. Create an AWS Lambda function in the language of your choice. In the function's code, you will need to include the AWS SDK for your language, and use the putBucketPolicy method to apply the policy to the new bucket.
 
3. In the AWS Lambda management console, create an S3 event trigger on the s3:CreateBucket event, and specify the Lambda function you created as the target for the trigger.

4. In the Lambda function code, you will need to extract the name of the new bucket from the S3 event object, and then use the putBucketPolicy method to apply the policy to the new bucket.

Here's an example of how the Lambda function code might look like in Python:
`import json
import boto3

s3 = boto3.client('s3')

def lambda_handler(event, context):
    # Extract the name of the new bucket from the event object
    bucket_name = event['Records'][0]['s3']['bucket']['name']
    # Read the policy from a file
    with open('policy.json', 'r') as f:
        policy = json.load(f)
    # Apply the policy to the new bucket
    s3.put_bucket_policy(Bucket=bucket_name, Policy=json.dumps(policy))
`

Note: This is a sample code and you will need to replace the policy.json with your own policy.

This setup ensures that any time a new S3 bucket is created, the Lambda function will automatically be triggered, and it will apply the specified policy to the new bucket.
Kanban vs Gantt Chart - Do You Have to Choose One?
Tags: productivity, management, agile
Published: 2023-01-19 17:58:07

Both Kanban and Gantt charts are tools that initially disrupted the project management field. They introduced new ways of working and organizing your team that promised more efficiency and better results. However, due to the time gap between them, they are more often seen as opposites which one must choose between.

While many believe this to be true, with new project management apps, there is no more need to pick just one. In fact, you can use both of these tools when needed and yield the benefit of having more options within one solution.

Here is what using a [Kanban and Gantt chart](https://teamhood.com/kanban/kanban-gantt-chart/) looks like.

##Using the Kanban Board

If you have the option to use both tools within one solution, you will most likely find out that each have their strong points. In my personal experience, Kanban boards are best for day to day task management and tracking.

Each team can set up their board to represent the specific process and have a good understanding of the progress. This visualization of what is being done is useful for the team as they get a better sense of what is yet to be done. And to the manager as they can understand the teams velocity and estimate the completion of the project a lot easier.

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

##Using the Gantt Chart

The Gantt chart on the other hand will be most useful when applied to project planning and monitoring the overall progress. Set the initial plan in place and measure against that baseline to see how any discrepancies may affect the overall outcome. 


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

## Get the Best of Both Worlds

By combining the usage of the two tools, you will be able to do more in one tool and get a different viewpoints into the data. Have a centralized place for all the project tasks and save time on logistics.
Integrating Next.js app with Google analytics 4
Tags: react, nextjs
Published: 2023-01-19 17:51:09

---
title: Integrating Next.js app with Google analytics 4
published: true
tags: ['react', 'nextjs']
canonical_url: https://sevic.dev/notes/nextjs-google-analytics-4/
---


Google analytics helps get more insights into app usage.

### Prerequisites
- Google analytics product is already set up, tracking ID is needed
- Next.js app should be bootstrapped
- `react-ga4` package is installed

### Analytics initialization

Analytics should be initialized inside `pages/_app.js` file.

```js
import ReactGA from "react-ga4";
// ...
if (isEnvironment("production")) {
  ReactGA.initialize(ANALYTICS_TRACKING_ID);
}
```

### Tracking events (clicks, e.g.)

```js
// ...
export function trackEvent(category, label, action = "click") {
  if (isEnvironment("production")) {
    ReactGA.event({
      action,
      category,
      label,
    });
  }
}

// ...
<Button onClick={() => trackEvent("category", "label")}>
```

### Boilerplate

Here is the [link](https://sevic.dev/nextjs-starter?ref=devto) to the boilerplate I use for the development.
How to customize colors and fonts in WooCommerce store with Avada Theme?
Tags: wordpress, woocommerce, avadatheme
Published: 2023-01-19 17:40:48

After a long time, I returned with a topic for which I did not find helpful information on the web and I ended up finding the answer without help, as always the answer was obvious but I did not see it.

It turns out that I installed WooCommerce on my site so that my clients can pay my fees through it, but when I finished I could see that the shop page was a little different from the rest of my site, for example, the colors of the buttons were inverted, the sources too, etc, etc…
And well, when going to the store page to edit it, it only had a code that is used to make the store page appear, as well as on the Cart and Checkout page.

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

Well let's start!, first you have to go to: Appearance>Global Options

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

Once inside there is a huge menu on one side of the Dashboard, go to the Typography>Heading Typography option


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

We are only interested in:

H3-The font of the product name on the product page

Post title typography - the font of recommended products

H2 -The source of the items you have in the cart and the cart totals

H4- The source of subtotal and total on the cart page and the Checkout page

H3- Billing details and "your order" on the checkout page.

Then in the same menu, they go to the 'Body typography' and practically here it is to configure all the small text.


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

In the same menu, there is the Avada Builder Elements option, personally, I only configured the buttons and you should take into account that as you configure the buttons here, they will be seen on your entire site, not only on the WooCommerce store.


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

Finally, they have to go to the WooCommerce option> General WooCommerce and WooCommerce Style and in both, they can make many customizations within the Store, Cart, and Checkout.


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

And well that's all for today, if you want to see how my WooCommerce Store turned out, you can see it [here.](https://www.shalimmora.com/payments/)

[Lee este post en Español](https://medium.com/@shalimhoms/c%C3%B3mo-personalizar-colores-y-fuentes-en-la-tienda-de-woocommerce-con-avada-theme-44b11c14278b)
JUNIOR FULLSTACK BLOCKCHAIN/WEB3 DEVELOPER
Published: 2023-01-19 17:36:45

		- JUNIOR FULLSTACK BLOCKCHAIN/WEB3 DEVELOPER -


RECENT PROJECTS / WORK EXPERIENCE:

- Studying/Learning Fullstack Blockchain/Web3 Dev skills & Freelancing: mostly small adhoc upwork client projects.
- Volunteering/Contributing at some crypto/blockchain projects & blockchain dev communities.


Now hunting for my first fully remote Fullstack Blockchain/Web3 Dev role.
( junior / intern )


SKILLS / TECH STACKS (currently mostly junior level):

- Solidity, Web3.js, Ethers.js, HardHat, Truffle/Ganache/Mocha, React/Nextjs, nodejs,
- Vyper, Python(AI/ML focused),
- Maybe some Rust eventually too.


NOTE:

I do well as a team leader, good team player, fiercely independent & self-managing.
Great problem solver.
I’ll consider Freelance/Contract or Fulltime opportunities.
My current time-zone is GMT+2. 
Fully remote only.


Renumeration/Payment/Rates/Salary:

Currently I’m happy to start with only $1k+/month.
I’ll also consider unpaid for a short while to pick up experience.


Anything else you’d like to know, you’re welcome to ask me.

Thanks
Jerome


Email: 		dappconsulting@protonmail.com
Website: 	https://dappconsulting.wordpress.com
Github: 	https://github.com/dappconsulting
Telegram: 	https://t.me/SP4CEDR4G0N
Linkedin:	https://www.linkedin.com/in/dappconsulting/
Importance of software engineering processes
Published: 2023-01-19 17:25:39

Software engineering processes are a set of best practices and methodologies that are used to design, develop, and maintain software systems. These processes are important for several reasons, including:

## - Improved quality:
 Software engineering processes help ensure that the final product meets the requirements of the customer and is free of defects. For example, using techniques such as testing and code reviews can help catch errors early in the development process, which can save time and money in the long run.

## - Increased productivity:
 Software engineering processes help teams work more efficiently by providing a clear and structured approach to software development. For example, using an Agile development methodology can help teams deliver software in shorter cycles, which can help increase customer satisfaction and reduce time-to-market.

## - Better collaboration:
 Software engineering processes help teams work together more effectively by providing a common language and set of tools. For example, using a version control system like Git can help teams collaborate on code development and resolve conflicts more easily.

## - Better maintainability:
 Software engineering processes help ensure that the software is easy to maintain and update over time. For example, using good coding practices and design patterns can help make the code more readable, which can make it easier for other developers to understand and work on.

## - Better scalability:
 Software engineering processes help ensure that the software is able to handle increased load and usage over time. For example, using a microservices architecture can help make the software more scalable by breaking it down into smaller, more manageable components.

By following software engineering processes, companies can develop high-quality software products that meet the needs of their customers, are easy to maintain, and can be scaled to meet the demands of a growing user base. It also makes the development process more efficient and less prone to errors, and improves collaboration among team members.

In conclusion, software engineering processes are essential for the successful development and maintenance of software systems. By following best practices and methodologies, companies can ensure that their software products are of high quality, are easy to maintain, and can be scaled to meet the demands of a growing user base.
React: best practices and design patterns
Tags: javascript, react, typescript, webdev
Published: 2023-01-19 15:25:20

React is a popular JavaScript library for building user interfaces, and it's become one of the most widely-used tools for building web and mobile apps.

However, building a large, complex React application can be challenging, especially when it comes to architecture.
There are a number of best practices and design patterns that can help to ensure that your code is **maintainable**, **scalable**, and **easy to understand**.

In this article, we'll take a look at some of the key considerations for building a **well-architected** React application.

1. Use a component-based architecture: React is built around the idea of reusable components, and using a component-based architecture is a natural fit for building React applications. This architecture makes it easy to create reusable, modular code that can be easily tested and maintained.

2. Use a state management library: Managing state can be one of the most challenging aspects of building a React application. Using a state management library like Redux or MobX can help to simplify state management and make it easier to keep your application state consistent and predictable.

3. Divide your application into smaller modules: Dividing your application into smaller modules makes it easier to maintain and scale. By breaking your application into smaller, self-contained modules, you can make it easier to test, debug, and refactor your code.
 
4. Use a routing library: A routing library like React Router can help to manage the different routes within your application. This can make it easier to navigate between different sections of your application and make it more user-friendly.

5. Use a style library: A style library like Styled Components can help to make your application more consistent and maintainable. By using a style library, you can create reusable styles that can be easily shared across different components in your application.

6. Use a linter: A linter can help to enforce best practices for coding style and avoid common mistakes. This can make your code more readable and maintainable.

7. Test your application: Writing tests for your application can help to ensure that it's working correctly and make it easier to catch bugs and errors.

8. Monitor your application's performance: Monitoring your application's performance can help to identify any issues that may be causing it to slow down. This can help you to make performance improvements and keep your application running smoothly.

By following these best practices and design patterns, you'll be well on your way.
Debug AEM com IntelliJ | 🇧🇷
Tags: intellij, tutorial, aem, debug
Published: 2023-01-19 17:21:18

Para debugar no AEM seguimos os seguintes passos:

- Com o AEM desligado (sem inicializar ele), entramos nas pastas crx_quickstart > bin
- Clicamos do lado direito no arquivo start.bat e o abrimos em algum editor de texto


![Pasta AEM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44ur6kt91u2lsgxak1yj.png)

- Na linha 25, precisamos mudar a configuração `set CQ_JVM_OPTS=-Xmx1024m` para `set CQ_JVM_OPTS=-Xmx2048m`, alterando o número.
- No final dessa linha também vamos inserir o seguinte comando: `-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005`, como demonstrado na imagem abaixo.


![Print do Arquivo start.bat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/959mvrsc5ykp5a07v51w.png)

## No IntelliJ

- Agora, com o IntelliJ aberto, clicamos no dropdown ao lado do martelo verde, e depois clicamos em `Edit Configurations...`

![Dropbox do IntelliJ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l3nluzmkh9l20dmykf7.png)

- Na janela que abrirá, clique no `+` do canto superior esquerdo

![Clicar em +](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a16xu5scmv80a68vale2.png)

- Depois, clicamos em `Remote JVM Debug` e daremos um nome para esse debugger. Note que, abaixo do campo para inserirmos o nome do nosso debugger, teremos o `Command line arguments for remote JVM` que terá exatamente o mesmo código que colocamos no start.bat

![Remote JVM Debug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tduzaejint6z0oyz5cez.png)

![Debugger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hwzhnxuw7873ya1em2i.png)

- Clique em `Apply` e depois em `Ok`. Agora o seu debugger será mostrado no mesmo checkbox que clicamos para adicioná-lo.


- Pronto! :wink: Agora é só debugar seu código normalmente, usando o checkpoint (o marcador vermelho :red_circle:) e o inseto (bug :beetle:) na parte superior da navegação do IntelliJ

**Observação:** para abrir o AEM em modo debug, utilize o seguinte comando no terminal (bash): `java -jar <arquivo jar> -debug 5005`. Não esqueça de botar o nome completo do seu arquivo, por exemplo:

`java -jar aem-sdk-quickstart-2022.9.8630.20220905T184657Z-220800.jar -debug 5005`

### Referências

- [Debugging Your AEM 6.4 Application in IntelliJ](https://www.mavice.com/blog/debugging-your-aem-6-4-application-in-intellij/)
Day 14: Youtube Voice Search with Python
Tags: 100daysofcode, challenge, python, programming
Published: 2023-01-19 17:14:47

Have you ever been in a situation where you are going back and forth in a YouTube video. podcast or a movie searching for a specific phrase? No more. Meet OctoTube: It's like Google Search for entire YouTube video content, not just text-based keywords

**Get Started**
Clone the Octopus GitHub repository:
```
git clone --recurse-submodules https://github.com/Picovoice/octopus.git
```
Run this from the root of the repository to install Python dependencies:
```
pip3 install -r demo/youtube/requirements.txt
```
It's day 14, you probably have your AccessKey but if not get your AccessKey from [Picovoice Console](https://console.picovoice.ai/?referrer=docs)

Find a video on YouTube you like to search and from the root of the repository run:
```
python3 demo/youtube/octotube.py \
--access-key ${ACCESS_KEY} \
--url ${YOUTUBE_VIDEO_URL} \
--phrases ${SEARCH_PHRASE0} ${SEARCH_PHRASE1}
```
You should get something like the below
```
indexed 3024 seconds of audio in 54.36 seconds
searched 3024 seconds of audio for 1 phrases in 0.01013 seconds
pied piper >>>
[0.5] https://www.youtube.com/watch?v=Lt6PPiTTwbE&t=784
[1.0] https://www.youtube.com/watch?v=Lt6PPiTTwbE&t=840
[1.0] https://www.youtube.com/watch?v=Lt6PPiTTwbE&t=2355
[1.0] https://www.youtube.com/watch?v=Lt6PPiTTwbE&t=2940
```
Indexing is the bulk of the processing time. The good news is once the video is indexed, it is super fast to search for more.
```
searched 3024 seconds of audio for 1 phrases in 0.00655 seconds
jian yang >>>
[0.3] https://www.youtube.com/watch?v=Lt6PPiTTwbE&t=1332
[0.7] https://www.youtube.com/watch?v=Lt6PPiTTwbE&t=2478
```
**How Does it Work?**
OctoTube uses the [Octopus Speech-to-Index](https://picovoice.ai/platform/octopus/) engine. Octopus [directly indexes audio](https://picovoice.ai/blog/direct-speech-indexing/) without relying on a text representation.