teleren/devto huggingface dataset:
JavaScript30 - 1 JS Drumkit
Tags: javascript, beginners, learning, javascript30
Published: 2024-05-14 17:38:43

About a week ago I finished the Scrimba learn JavaScript course and had a great time doing so.  Looking back on it, it did seem a bit hand-holdy but that's probably a good thing for those just starting out.  I then had the issue of figuring out what to do next.  Instead of going back to the Odin Project or continuing through another scrim I figured I'd switch it up again and dive into Wes Bos's JavaScript30 that was recommended to me.

30 challenges in 30 days, it seems like a lot but the way Wes Bos breaks it down makes it much more manageable.  The HTML and CSS seem for the first challenge was already completed and I just had to tackle the JavaScript itself.  That was both helpful and intimidating as I was excited to make the website before adding functionality to it but I do understand that is not the point of this course.  
At the start of the video introducing the challenge you are given a choice: either code along with the video or pause it and come up with your own solution.  I chose the latter in this case as I think it's important to get the answer yourself and then see another way to do it, as its become pretty obvious to me that there's rarely one "correct" answer in these situations.  

![The look of the Drumkit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjzwin0ymjxhusglh6sz.png)

For a beginner like me this was tough.  Almost immediately I realized that I did not have the tools necessary to solve the challenge and that I was going to need some help.  After several google searches and some talks with ChatGPT I managed to find some answers but ultimately had to phone a friend to give me some hints along the way.  

![My finished JavaScript for the Drum Kit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6kknp62gbt6ijcva12q.png)

I know it's "about the journey not the destination" but this journey was exhausting.  Which is entirely the point.  The lesson I am trying to teach myself is how to find answers in these situations and, in my own sort of way, that's exactly what I did.  
It took me about 3 days (roughly 3-5hours of actual work) to finish this challenge and make a functional Drum Kit and I am very proud of this accomplishment. (I currently work 50-60 hours a week and practice coding in my spare time)


![Wes's JavaScript for the Drum Kit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39v12u8f0wyqah0e7oid.png)

After finishing the Drum Kit challenge I did watch the remainder of Wes's video and saw how he solved the enigma of the drum kit and I am happy to say that, although we did it differently, that I was very much so on the right track.

I am excited to jump into the second challenge of the CSS + JS Clock and hope I stick to my guns and try to come up with my own solutions instead of watching along and mindlessly coding.  I will also try to keep up with my blog posts to monitor my progress through this course and see how much/if I grow.

![The CSS + JS Clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmdfpdubdnrjxg4znbko.png)

Until next time!
Extend Django Templates with Custom Tags and Filters
Tags: django, python, webdev, beginners
Published: 2024-05-14 17:33:53

Django's templating system is a powerful tool for rendering HTML with dynamic data. While Django comes with a wide array of built-in template tags and filters, sometimes you need custom functionality to fit your specific needs. This guide covers how to create and use custom template tags and filters to enhance the template rendering process in Django. 
Below is a detailed explanation of the different types of template tags in Django:

**1. Simple Tags**
Simple tags are used to generate content dynamically within a template. They can perform basic operations and return a string that can be included directly in the template output.

```
# app/templatetags/custom_tags.py
from django import template

register = template.Library()

@register.simple_tag
def add(x, y):
    return x + y
```

```
<!-- template.html -->
{% load custom_tags %}

<p>{% add 3 4 %}</p> 
<!-- Output: 7 -->

```

**2. Inclusion Tags**
Inclusion tags render a specified template fragment with a given context. This is useful for including reusable pieces of templates that need their own context, such as menus or lists.

```
# app/templatetags/custom_tags.py
from django import template

register = template.Library()

@register.inclusion_tag('tag/item_list.html')
def show_items(items):
    return {'items': items}

```

```
<!-- app/templates/tag/item_list.html -->
<ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>
```

```
<!-- template.html -->
{% load custom_tags %}

{% show_items items %}
```

**3. Assignment Tags**
Assignment tags are used to set a variable in the context. This is useful for performing calculations or fetching data and then using the result in the template.

```
# app/templatetags/custom_tags.py
from django import template

register = template.Library()

@register.simple_tag(takes_context=True)
def get_user_full_name(context):
    user = context['user']
    return user.get_full_name()

```

```
<!-- template.html -->
{% load custom_tags %}

{% get_user_full_name as full_name %}
<p>{{ full_name }}</p>
```

**4. Filter Tags**
Filter tags (or custom filters) are used to transform the value of a variable before it is rendered in the template. Filters can be chained together to apply multiple transformations.

```
# app/templatetags/custom_tags.py
from django import template

register = template.Library()

@register.filter
def replace_dash(value, arg=False):
    if not arg:
        return str(value).replace("_", " ")
    return str(value).replace(arg, " ")

```

```
<!-- template.html -->
{% load custom_tags %}

{{ object.title|replace_dash}}
```

Django's templating system provides a variety of template tags that can be customized to fit the specific needs of your application. Understanding the built-in tags and how to create custom ones enhances the flexibility and maintainability of your Django templates, allowing you to build more dynamic and feature-rich web applications.
EasyFix - Appliance Repair Service
Published: 2024-05-14 17:31:57

[Ice-maker Fix](url)

We are EasyFix - #1 Appliance Repair Service Company. We can tell you about us:⠀ - $79.00 Service Call Fee; - More than 5055 Repaired Appliances; - 90 day warranty on labor and parts; - More than 11 years experience (This year there will be 12). BUT THIS IS NOT THE MAIN THING, THE MAIN THING IS THAT WE CAN REALLY HELP YOU. Sincerely, EasyFix team. #Refrigerator Repair #Fridge Repair #Freezer Repair #Ice-maker Repair #Dryer Repair #Oven Repair #Range Repair #Stove Repair #Compressor Replacement
Introducing cross-platform implementation of React Native's Settings API
Tags: reactnative
Published: 2024-05-14 17:29:01

React Native provides a Settings API, acting as a persistent key–value data store with synchronous reads: https://reactnative.dev/docs/settings

However, the Settings API is only available to iOS applications. I've published an NPM package extending this interface to Android:

https://github.com/alipman88/react-native-cross-platform-settings

I'm new to the React Native ecosystem, and this is my first NPM package. Neither React Native or Kotlin are among the frameworks & languages I regularly use, so I very much appreciate feedback regarding conventions & best practices.
Learning AWS Day by Day — Day 64 — AWS CloudTrail
Tags: aws, cloud, cloudcomputing, beginners
Published: 2024-05-14 17:26:03

Exploring AWS !!

Day 64

AWS CloudTrail

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

- Helps enabling operational and risk auditing, governance, and compliance of the AWS account.
- Any actions taken by user, roles or AWS account services, are being recorded as events by CloudTrail.
- The CloudTrail is active in your AWS account since you create the account, also each and every action is being recorded.

3 ways to record events:

1. Event history — provides a history of 90 days of management events.
2. CloudTrail lake — data lake for storing and accessing user and API activity for auditing and security purposes. CloudTrail lake converts JSON format events to Apache ORC format. ORC is columnar format data for fast retrieval of data. The event data store can store data for approximately 10 years. Any existing event data logs in S3 can be stored in new or existing event data store.
3. Trails — captures a record of activities, delivering and storing these events in S3, and also in CloudWatch or Eventbridge, which is optional. Athena can be used to search and analyze your logs.

How it works?

You have a direct access to Event History, which keeps a track since your account gets created. You can view, search or download these logs as per your requirement. The event history is accessible and viewable for 90 days, and event history is not connected to any trail or event data stores, so any configurations or changes you make do not affect trails and data stores.
An event data store can be created to log CloudTrail events, CloudTrail Insights events, AWS Audit Manager evidence, AWS Config configuration items, or events outside of AWS. Event data store used for integration events logs outside AWS, must be single region only, and not multi-region.

Tasks that can be performed on event data stores: View lake Dashboards, Log managements events, Log data events, Log insights events, Copy trail events, Enable federation on an event data store, Stop or start event ingestion on an event data store, Create an integration with an event source outside of AWS, View Lake sample queries in the CloudTrail console, Create or edit a query, Save query results to an S3 bucket, Download saved query results and Validate saved query results.

CloudTrail channels:
Channels for CloudTrail Lake integrations with event sources outside of AWS:
CloudTrail Lake uses channels to bring events from outside of AWS into CloudTrail Lake from external partners that work with CloudTrail, or from your own sources.
Service-linked channels:
AWS services can create a service-linked channel to receive CloudTrail events on your behalf.

CloudTrail logs 3 types of events:
Management events, Data events, Insights events
Management events: Configuring security, registering devices, configuring rules, setting up logging
Data events: provides information about resource operations performed on resource or in resource, also known as data plane.
Insights events: capture unusual API call rate or error rate activity
Milan Kala Plast
Tags: plastic
Published: 2024-05-14 17:22:01

Proudly welcome to Milan Kala Plast, one of the pioneers in the industry of manufacturing [plastic injection machines](https://milankala.ir/%D8%AF%D8%B3%D8%AA%DA%AF%D8%A7%D9%87-%D8%AA%D8%B2%D8%B1%DB%8C%D9%82-%D9%BE%D9%84%D8%A7%D8%B3%D8%AA%DB%8C%DA%A9-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D9%87-%DA%A9%D8%A7%D8%B1%DB%8C-%D8%A7%D9%86%D8%AC/) and related equipment. With more than two decades of brilliant experience, Milan Kala Plast is known as a symbol of quality, innovation and reliability in the field of plastic industry.
Our commitment to providing the best plastic injection machinery and equipment, along with excellent after-sales service, has made us a top partner in the industry. From plastic injection molding machines to technology-driven accessories, we provide our customers with comprehensive and efficient solutions.
At Milan Kala Plast, quality is considered as our main priority in all stages of design, production and presentation of products. From the selection of high-quality raw materials to the precise manufacturing processes, everything has been carefully considered to provide an unparalleled experience for our customers.
Along with all this, we also seek to promote environmental sustainability. All our activities are carried out according to environmental protection standards to contribute to the sustainable and responsible development of the plastic industry.
Our goal is to always respond to the changing and growing needs of the plastic industry by providing superior products and services. Join us to experience a new experience of quality, power and confidence. Join Milan Kala Plast, the best place to trust the future of the plastics industry
[Cypress] Encontrando o valor que não está vísivel dentro do componente ao inspecionar
Published: 2024-05-14 17:07:54

Já pegou um cenário onde você precisa buscar o valor de um elemento, você está vendo que o valor está renderizado na página, mas quando executa o comando, por exemplo, em cypress:

```
cy.get(locator).should('have.text', text)
```
acontece um erro e diz que o elemento não tem esse valor, mesmo você vendo esse valor na sua cara? =/

Alguns componentes não podem estar trazendo esse valor, e se você inspecionar você pode encontrar o elemento mais ou menos assim:

```
<input id="campo-id" minlength="1" name="campo-id" required="" type="number" class="form-input ng-valid" placeholder="Informe o valor da compra">
```


No elemento em si não é mostrado o valor, mas ele é mostrado para o usuário, como então conseguir buscar esse valor desse input pra fazer sua validação.

Você pode usar o commando para buscar esse valor com:

```
cy.get(locator).invoke('val').then(valor => {
  // Fazer suas ações/validações com esse valor
})
```

ou

```
cy.get(locator).invoke('val').should('contain', valor);
```


Agora esse valor estará disponivel pra você.

Esse ocultamento pode ser por alguns motivos, desde como o componente está sendo desenvolvido, no qual o CSS que está sendo usado está mascaradno esse valor ou questão de atualização assíncrona do estado ou autalização do DOM.

Tente entender com seu time o real motivo, mas nesse meio tempo, já agora não deve ser um problema pra você, visto que consegues recuperar esse valor.

E aí, já tinha visto isso acontecer? Tem outra solução?
Se não, já salva a dica para quando enfrentar esse comportamento.
What are the steps of an Automation Test Plan?
Tags: qualitycontrol, testing, testplan, tutorial
Published: 2024-05-14 17:02:28

## Step 1: Defining the Scope of Automation

Here are the things to consider while identifying the scope of Testing Automation:

* What are the modules that can be automated?

* What are the total effective costs and the team size?

* What are the tests to be automated, and which is the approach to be taken?

## Step 2: Appropriate tool selection

It solely depends on the technology on which the application tests are built. Each type of tool or framework may serve different demands, therefore having a thorough understanding of multiple tool types is also a prominent factor in choosing your best tool.

## Step 3: Develop Test Strategy

The test strategy might be something that fewer people are focusing on in the shift to highly automated test systems and lower-level automation (which is in itself still a strategy), but they remain an important aspect of articulating the process of testing to all involved.

## Step 4: Evaluate the suitable framework and build your reports

Write the scripts, and run the test automatically, either by running the code directly or by calling an application’s API or user interface. Once executed they provide detailed test reports.

## Step 5: Improve Automation testing and test cases

* Develop metrics for defining good test coverage at your company.

* Map out all your app’s features and user scenarios and rank by priority.

* Find the gaps in your current test plan.

* Use automation tools to ramp up test coverage.

* Add tests as your app gets bigger and more complex to maintain good coverage.

## Step 6: Maintain Support scripts

No matter how well you manage the automation testing, test maintenance is unavoidable if you want to expand your collection of reusable test scripts. Once your automated tests have been scripted and running, they still need updating if the application changes the next time.

## Step 7: Success Improve KPIs

KPIs are indicators, not end-states. They indicate where strong and weak points exist and should be used to call attention, or used as monitors against a baseline.

![Photo by [Bruno Nascimento](https://unsplash.com/@bruno_nascimento?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/steps?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)](https://raw.githubusercontent.com/jetthoughts/jetthoughts.github.io/master/static/assets/img/blog/what-are-steps-of-an-automation-test-plan-qualitycontrol-testing/file_0.jpeg)

If you enjoyed this post, we recommend reading this one [**https://lnkd.in/gDu7tUA4](https://lnkd.in/gDu7tUA4)**
**Ruslana** is a Lead Generation Manager at [JetThoughts](https://www.jetthoughts.com/). Follow her on [LinkedIn](https://www.linkedin.com/in/ruslana-brykaliuk-970016135/).
>  *If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories.*
Enum validation in Ruby on Rails 7.1
Tags: ruby, rails, changelog, development
Published: 2024-05-14 16:59:59

![](https://cdn-images-1.medium.com/max/2852/1*JxBXDGJmdqyog3dCqDlDOw.png)

The latest version of Rails 7.1 introduces the ability to validate enums, enhancing data integrity and error handling in Rails models. Enums in Rails allow defining a set of permissible values for an attribute. Prior to Rails 7.1, assigning an invalid enum value would raise an ArgumentError, necessitating manual validation checks. The updated feature in Rails 7.1 streamlines this process by enabling built-in enum validation options within ActiveRecord objects.

### Before Rails 7.1

```ruby
    class Project < ApplicationRecord
      enum status: [:active, :inactive, :archived] 
    end
    
    project = Project.find_by(name: "JT Project")
    
    project.status = :new
    => `assert_valid_value': 'new' is not a valid status (ArgumentError)
```
To avoid ArgumentError exception programmers used this trick:
```ruby
    project = Project.find_by(name: "JT Project")
    status_value = :new
    
    if Project.statuses[status_value].present?
      project.status = status_value
    else
      # raise more consistent error than ArgumentError
    end
```
### After Rails 7.1
```ruby
    class Project < ApplicationRecord
      enum status: [:active, :inactive, :draft], validate: true 
    end
    
    project = Project.find_by(name: "JT Project")
    
    project.status = :new # Now in this place we do not receive the error ArgumentError
    project.valid?
    => false
```
Pay attention on validate: true in enum declaration.

We also can send additional rules to validation. For example: validate: { allow_nil: true }

By leveraging the [new enum validation feature in Rails 7.1](https://github.com/rails/rails/pull/49100), developers can ensure the integrity of enum attributes, streamline validation processes, and enhance the overall robustness of Rails applications.

**Paul Keen** is an Open-Source Contributor and a Chief Technology Officer at [JetThoughts](https://www.jetthoughts.com/). Follow him on [LinkedIn](https://www.linkedin.com/in/paul-keen/) or [GitHub](https://github.com/pftg).
>  *If you enjoyed this story, we recommend reading our [latest tech stories](https://jtway.co/latest) and [trending tech stories](https://jtway.co/trending).*
Looking For Cool People With Valuable Feedback
Tags: shopify, saas, customersupport, app
Published: 2024-05-14 16:56:47

We at Lipy.ai are creating a tool to help businesses provide better and more streamlined customer support and experience. This tool aims to solve customer queries, help search and recommend products, generate leads, improve retention, and more. 

We are also developing a Shopify app around our product for easy integration. 

Lipy will assist you to:

Shorten response times while raising client contentment.
Automate time-consuming chores to free up time for strategic endeavors.
Obtain insightful knowledge from dealing with customers.

Our ask is simple, we want your valuable feedback.

Take a walkthrough of our current product at https://app.lipy.ai/

Please offer insightful comments so we may further develop Lipy.ai in the future.

Join our community now: https://chat.whatsapp.com/B51Ngj1Wu5dKyhJBURzwXB 
Visit Lipy.ai to begin your complimentary trial right now!

#affiliates #productivity #efficiency #productivity
Is DSA required for a Front-End Developer?
Tags: beginners, tutorial, codenewbie, frontend
Published: 2024-05-14 16:46:57

The short answer is NO.
Frontend developer basically handles the client side part and most importantly DSA has specifically no role in Frontend development.
BUT....
The thing is that you need to know core Javascript fundamentals. You can't skip that part.
AND....
If you plan to become a Backend developer then be prepared to learn DSA because in interview you're expected to excel in DSA problems.

CONCLUSION💭:-
SO, DSA IS NOT AN ISSUE FOR A FRONTEND DEVELOPER BUT IT IS AN ISSUE FOR A BACKEND DEVELOPER.

Happy Learning 🎉
🚀 Introducing README GPT 🤖 : for Effortless README Generation! 🚀
Tags: python, ai, googlecloud, readme
Published: 2024-05-14 16:44:22


![README GPT Demo](https://raw.githubusercontent.com/chiragjoshi12/readme-generator/main/demo/img1.png)

Are you tired of spending countless hours crafting README.md files for your projects? Say goodbye to manual documentation struggles with README GPT 🤖 - a revolutionary solution that automates the process for you!

In this article, we'll explore how README GPT 🤖 leverages the power of generative AI to streamline README.md file creation, saving you time and effort while ensuring comprehensive documentation for your projects.


## The Problem:
Documenting software projects is often a tedious and time-consuming task. It requires a lot of effort to ensure that the README files are well-structured, informative, and engaging. This is where README Generator comes in.

## README GPT 🤖 : A Solution:
README Generator leverages the power of generative AI to automate the creation of README files. It ensures that every project has a well-structured, informative, and engaging README.md file, adhering to best practices and enhancing the project's visibility and appeal.

## Key Features

- **AI-Powered Content:** Generates high-quality, relevant content.
- **Customizable Configuration:** Tailor generation settings to your preferences with configurable options such as temperature, top p, top k, and safety settings.
- **Dynamic File Input:** Users can add multiple files with custom names and code snippets, enabling comprehensive documentation of project components.
- **User-friendly Interface:** README GPT 🤖 features an easy-to-use interface that allows users to input project details with ease.
- **Emoji Support:** Adds a touch of personality and engagement to the README files.

## Why README GPT 🤖?
README Generator is not just a tool; it's a step towards making documentation more efficient, enjoyable, and impactful. Whether you're a seasoned developer or just starting out, this project aims to make README creation a breeze.

## Getting Started
I'm inviting you all to join me in making README files the cornerstone of every software project's documentation strategy. Your feedback, ideas, and contributions are invaluable!

🔗 Check out the project repository here: [README Generator on GitHub](https://github.com/chiragjoshi12/readme-generator)
🌐 Visit our web application here:[README Generator Web App](https://readme-generator-wpbq.onrender.com/)


Happy Journey 😊 !!