teleren/devto huggingface dataset:
HTML Form Fields: Readonly vs. Disabled
Published: 2023-11-26 17:34:55

---
title: HTML Form Fields: Readonly vs. Disabled
published: true
date: 2023-08-16 17:20:15 UTC
tags: 
canonical_url: https://blog.tvaisanen.com/html-form-fields-readonly-vs-disabled
---

I've been tinkering with the form element once again as web developers often do and lately, I've been using the FormData to parse the values and validate the collected form data with [Malli](https://www.metosin.fi/blog/malli/). I often default to using `disabled="true"` when sketching the forms and I want to block the user from altering a static value, but this week, it hit me that read-only and disabled HTML attributes have different implications.

Here's a simple example of what I mean.

```
(defnc app []
  (d/form
   {:id "form"}
   (d/input {:name (str :static)
             :default-value "non-mutable"})
   (d/fieldset
    {:name "demo"}
    (d/div
     (d/label "one")
     (d/input {:name (str [:data :value-1])
               :default-value "value-one"}))
    (d/div
     (d/label "two")
     (d/input {:name (str [:data :value-2])
               :default-value "value-two"})))))

```

And here's a naive form parser.

```
  (defn naive-form-parser [^js/HTMLFormElement form]
    (reduce
     (fn [form-data [k v]]
       (let [path (edn/read-string k)]
         (if (sequential? path)
           (assoc-in form-data path v)
           (assoc form-data path v))))
     {}
     (for [entry (.entries (js/FormData. form))]
       entry)))

  (naive-form-parser form)
;; => 
{:static "non-mutable", 
 :data {:value-1 "value-one", 
        :value-2 "value-two"}}

```

Now if we set the static field as `disabled`

```
(d/input {:name "static" 
          :disabled true
          :default-value "non-mutable"})
;; ...

(naive-form-parser form)
;; => 
{:data {:value-1 "value-one", 
        :value-2 "value-two"}}

```

The `disabled=true` makes the input field "invisible" to the FormData, but when using the `readonly=true` it will be visible.

```
(d/input {:name "static" 
          :read-only true
          :default-value "non-mutable"})
;; ...

(naive-form-parser form)
;; => 
{:static "non-mutable", 
 :data {:value-1 "value-one", 
        :value-2 "value-two"}}

```

And of course, this is pretty clear if you read through the docs:

> The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
> 
> [https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)

These details can be easy to forget when working with React and other libraries. There's nothing new in this post. I just thought that this was curious since I don't remember paying attention before to this small detail.

If you were wondering the code examples are in [Helix](https://github.com/lilactown/helix).
"Pivoting to Tech from Biomedical Science": CodeNewbie Podcast S25E1
Tags: podcast, career, codenewbie, beginners
Published: 2023-08-16 17:16:22

## We are back y'all!!!!

In the first episode of our 25th season of the CodeNewbie Podcast, @saronyitbarek talks about making a major career change and the significance of laying a strong foundation with with [Marley Anthony](https://twitter.com/marleyanth0ny), Software Engineer at Bench Accounting. 

{% embed https://www.codenewbie.org/podcast/pivoting-to-tech-from-biomedical-science %}

Marley is a software engineer, photographer, and outdoor enthusiast based in Vancouver, BC. He love tech and spending time outside riding bikes or hiking! Tune in to gain valuable perspectives on strategies for landing that all-important internship, fostering growth, and embracing the ongoing pursuit of knowledge.  

---

- [Listen on Apple Podcasts](https://podcasts.apple.com/us/podcast/codenewbie/id919219256?i=1000624625329)

- [Listen on Spotify](https://open.spotify.com/episode/5EjPqzaynyYPI2GL7iuxYv?si=18d7b12fffc14479)

Or, listen wherever you normally get your podcasts!

---

### WOW we are happy to be back for another season.

#### Make sure to follow us on your preferred platform if you haven't already!

And beyond all— happy coding y'all!
Forwarding port 3000 to 80 on ubuntu.
Published: 2023-08-16 17:12:24

```bash
sudo iptables -A INPUT -i eth0 -p tcp --dport 80 -j ACCEPT
sudo iptables -A INPUT -i eth0 -p tcp --dport 3000 -j ACCEPT
sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000
```

That works.
Crew-Go
Tags: go, backenddevelopment, opensource
Published: 2023-08-16 17:04:23

Crew-Go [https://github.com/aaronblondeau/crew-go](https://github.com/aaronblondeau/crew-go) is an open-source project that I have created to help fill a gap among existing background task processing tools. I created Crew-Go because I needed a tool that made it easier to work with the Facebook Marketing API. The Facebook Marketing API is extremely challenging to work with because:

- It crashes regularly
- If it isn't crashing it is throwing random errors
- It has aggressive rate limits
- It requires complex sequences of calls to create ads

With this set of challenges, I found it very difficult to find a tool that allowed Orchard to build ads reliably. There are plenty of great background task managers out there like [BullMQ](https://docs.bullmq.io/), [Celery](https://docs.celeryq.dev/en/stable/getting-started/introduction.html), and [Temporal](https://www.temporal.io/). However, none of them fit my use case very well as I needed the following features:

- Complex parent / child task structure (directed acyclic graph)
- Pause and resume groups of tasks when rate limit errors happen.
- Continuations (tasks can create child tasks)
- Delayed, scheduled tasks
- Can manage rate limit errors by automatically pausing all tasks in same workgroup
- Avoids redundant tasks
- Workers can be written in any language - all workers are simply webhooks.
- Provides a user interface that makes manual interventions easy
- Easy to customize
- Easy to host - can compile to single .exe.

Crew-Go is implemented with Go and is my first attempt at building a large scale Go application. Crew-Go has been used in production environments at [Orchard](https://orchard-insights.com/) for about 6 months now and I am extremely happy with how reliable and helpful it is. I would love to share this tool with others, get feedback on it, and make improvements. Please try it out and let me know what you think!
🔇 Almost Muted Truth about the JavaScript async/await Mechanism
Tags: javascript, programming, node
Published: 2023-08-16 16:41:54


It is commonly said that JavaScript environments like Node.js and others are single threaded. Yes, they are, but it is when you look from the PoV of the JavaScript developer, it is not when you look at the things under the hood.

Developers think that when you await an async call or promise, the whole execution world stops, and the event loop cycles are stopped or queue will overflow if we use too many awaits in our code. But they are missing the tip, "Every await must be in an async function". So, every await is in an async call and event loop cycles when we are waiting an await. But, using awaits excessively may cause larger call stacks and in someway it might damage our executions, but this has a completely another story.

To sum up, async/awaits are about execution order in a single context. Single threaded features of JavaScript runtimes are about adding a call into the event loop, it is not about how they are executed in the background or OS level threads.

A paragraph from MDN expresses this in the paragraph;
"Because await is only valid inside async functions and modules, which themselves are asynchronous and return promises, the await expression never blocks the main thread and only defers execution of code that actually depends on the result, i.e. anything after the await expression.".

[MDN await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)

📷 <a href="https://unsplash.com/@flowforfrank?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ferenc Almasi</a> on <a href="https://unsplash.com/photos/ayjnmG4oUX4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Welcome to AnisCodes: Your Destination for Web Development Tips!
Tags: webdev, javascript, beginners, programming
Published: 2023-08-16 16:38:20

👋 Hello, wonderful people of the web development community! I'm thrilled to welcome you to AnisCodes, your new source of inspiration, insights, and tips on all things web development. Whether you're a seasoned coder or just dipping your toes into the vast ocean of code, this page is here to help you navigate and thrive in the world of web development.

🌐 Who We Are:
At AnisCodes, we believe that web development is a journey of continuous learning and growth. I'm [Your Name], your friendly guide on this exciting adventure. With years of experience in the field, I'm here to share my insights, lessons learned, and tips that I've picked up along the way.

🚀 What to Expect:
Our mission is simple: to make your web development journey smoother and more enjoyable. You can look forward to a wide range of content, including:

Handy Tips and Tricks: Discover shortcuts and techniques that will save you time and effort as you code your way to success.

Tutorials and How-Tos: Step-by-step guides to help you tackle common challenges and build impressive projects.

Latest Trends and Technologies: Stay up-to-date with the ever-evolving world of web development, from new frameworks to best practices.

Q&A and Community Interaction: Got questions? Let's find answers together! Engage with our growing community of fellow developers and enthusiasts.

🤝 Let's Connect:
This page isn't just about me sharing insights – it's about building a vibrant and supportive community. I encourage you to like, follow, and interact with the content. Feel free to ask questions, suggest topics you'd like to learn more about, and share your own experiences. Together, we'll create a space where everyone can learn, grow, and inspire one another.

🎉 Stay Tuned:
Get ready for a journey filled with code, creativity, and collaboration. Follow this page to ensure you don't miss any of the exciting content coming your way. From coding tips to deep dives into the latest web technologies, there's something for everyone.

Thank you for joining us on this adventure! Here's to mastering web development one tip at a time. 🎈👩‍💻👨‍💻

Stay curious and keep coding.
7 Top Kubernetes Monitoring Tools - TechVueHub
Tags: kubernetes, devops, monitoringtools, cloudnative
Published: 2023-08-16 16:00:48

📢 Just dropped a knowledge-packed article for all the DevOps and Kubernetes enthusiasts out there! 🚀 If you're navigating the complex landscape of Kubernetes monitoring tools, this one's for you. 👀 Dive into my latest piece where I break down the 7 Top Kubernetes Monitoring Tools that are changing the game:

**Elastic Stack (ELK) 🐘:** Your go-to trio for next-level monitoring and logging using Elasticsearch, Logstash, and Kibana. 📊
**Prometheus 🏛️:** Unleash the power of open-source metrics collection and smart alerting. 🔍
Grafana 📈: Create dynamic, eye-catching dashboards to visualize your Kubernetes data like a pro. 📊
**Kube-state-metrics 📋:** Real-time insights into your Kubernetes objects and resource states. 🔄
**Datadog 📊:** Elevate observability with specialized monitoring and analytics. 📈
**Sumo Logic 📑: **Get deep insights using cloud-native, machine data analytics. 📊
...and a lot more to explore!

💡 From pros and cons to key features, my article provides an in-depth look at each tool. No matter if you're a seasoned pro or just dipping your toes into the Kubernetes world, this guide will equip you with the knowledge to choose the right tool for your needs.

🔗 Ready to level up your Kubernetes game? Read the full article here: [7 Top Kubernetes Monitoring Tools](https://www.techvuehub.com/blog/7-top-kubernetes-monitoring-tools)

Let's spark a conversation! Feel free to drop your thoughts, questions, and experiences in the comments. Your insights might just help someone make the best decision for their Kubernetes setup.

Tags: #Kubernetes #DevOps #MonitoringTools #CloudNative #TechDeepDive
Mastering the Concurrency In Go Playlist | Blogs + Youtube Videos
Published: 2023-08-16 15:59:55

Hey
Just writing this blog for the update of "Mastering the concurrency in Go" Series. We have published:

Full YouTube Playlist: https://www.youtube.com/playlist?list=PLPCpN15kbMlSyd6pR9qgwp7XUcu_3sgqk

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



- [S1E1: Concurrency In Go | Goroutine | Channels | Waitgroup | Buffered Channel | by Arshlan | Jul, 2023 | Medium](https://arshad404.medium.com/s1e1-concurrency-in-go-goroutine-channels-waitgroup-buffered-channel-5187dcd1696)
- [S1E2: Concurrency Boring Desing Pattern in Go | by Arshlan | Jul, 2023 | Medium](https://arshad404.medium.com/s1e2-concurrency-boring-desing-pattern-in-go-47b6e210cbf5)
- [S1E3: Mastering Concurrency with Worker Pool in GoLang: A Scalable Solution for Efficient Task Processing | by Arshlan | Aug, 2023 | Medium](https://arshad404.medium.com/s1e3-mastering-concurrency-with-worker-pool-in-golang-a-scalable-solution-for-efficient-task-4d1d41a5b7d5)
- [S1E4: Mastering Concurrency Fan-In Design Pattern | by Arshlan | Aug, 2023 | Medium](https://arshad404.medium.com/s1e4-fan-in-concurrency-design-pattern-in-go-1856c2348f11)
- [S1E5: Mastering the Concurrency in Go with Fan Out Design Pattern | by Arshlan | Aug, 2023 | Medium](https://arshad404.medium.com/s1e5-mastering-the-concurrency-in-go-with-fan-out-design-pattern-ec0c2ac2a0ad)
Wednesday Links - Edition 2023-08-16
Tags: java, jvm, openai, spring
Published: 2023-08-16 15:54:58

How to organize the project structure of a REST API service in Spring Modulith? (4 min)🔌
https://github.com/spring-projects/spring-modulith/discussions/210#discussioncomment-6670567

Introducing Semantic Kernel for Java (4 min)🧠
https://devblogs.microsoft.com/semantic-kernel/introducing-semantic-kernel-for-java/
Uncaught TypeError: (0 , _emberBabel.extends) is not a function
Tags: ember, javascript
Published: 2023-08-16 15:30:34

---
title: "Uncaught TypeError: (0 , _emberBabel.extends) is not a function"
published: true
description: babel debugging
tags: emberjs, javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-30 18:18 +0000
---

Did you recently get `Uncaught TypeError: (0 , _emberBabel.extends) is not a function`

in your ember project?

The solution is easy!

Remove IE11 from your browsertargets, [as in this example](https://github.com/ember-template-imports/ember-template-imports/pull/191/files) -- IE11 is no longer supported and it makes Babel (and humans) have conniptions.
Did anyone built online store with Next.JS?
Tags: ecommerce, beginners, nextjs, react
Published: 2023-08-16 15:09:22

I am working on new e-commerce project and would like to set up online store. Simple one. 


I drafted it in Shopify. As it looks like the easiest way, but still build a good looking store kind of challenge. 


I am not sure if there are any open source projects, or recommendations for it.
Exploring the React Ecosystem in 2023: Essential Tools and Libraries
Tags: webdev, react, frontend
Published: 2023-08-16 14:51:37


Hey React enthusiasts! 🌟

Want to stay at the forefront of the React ecosystem in 2023? Look no further! I've a blog post titled "Exploring the React Ecosystem in 2023: Essential Tools and Libraries."

Discover the latest tools and libraries that are shaping the React landscape this year. Don't miss out on levelling up your React game!

Read the blog post here: [link](https://gaurav-shrivastava.hashnode.dev/exploring-the-react-ecosystem-in-2023-essential-tools-and-libraries)

Happy coding and exploring! 🚀🔥
What is Ethical Hacking
Published: 2023-08-16 14:51:01

Ethical Hacking, refers to gaining access or an unauthorized attempt to access a computer system or data.Therefore, Ethical hacking is used to protect and improve security of computer and network systems through fixing vulnerability found during testing.


               **Categories of Ethical Hacking**
1.Network Hacking
2.Website Hacking 
3.Email Hacking 
4.Computer Hacking 
5.Password hacking 

All these in general are various types of hacking that attackers focuses to,in order to get access to the targeted information.

However,there some importance of  conducting ethical hacking, since it helps to get back lost information.
Also it is through Penetration testing that helps to increase the security of a computer and network

Some drawbacks regarding Ethical Hacking,is that it can harm the and get personal information of a particular person.Hence,
Formatting Dates in JavaScript: A Comprehensive Guide
Tags: javascript, webdev, beginners, tutorial
Published: 2023-08-16 14:44:42

As a developer, presenting dates in a readable and user-friendly format is crucial for enhancing the user experience. In this comprehensive guide, we'll dive into various techniques to format dates in `JavaScript`, exploring different libraries and native methods, and providing code examples for each approach.

` 1. Using JavaScript's Native Date Methods:`

JavaScript's` `Date `object offers several methods to retrieve `individual date components, which you can then assemble into your desired format:

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

` 2. Using Intl.DateTimeFormat:`

![javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tllaaansyifx53a5d5a.png)

`3. Using Libraries (moment.js - Deprecated, date-fns, Luxon, Day.js):`

Using libraries provides more advanced and flexible date formatting options:

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

**Best Practices:**

`Consider User Locale`: When using native methods or Intl.DateTimeFormat, consider users' preferred locale for proper date formatting.

`Library Selection`: While libraries provide powerful formatting capabilities, consider the trade-offs in terms of performance and bundle size.

`Consistency`: Maintain consistent date formats across your application for a better user experience.

**Conclusion**:

Formatting `dates `in `JavaScript `is a skill that enhances the usability of your applications. By leveraging `JavaScript's` native methods or utilizing specialized libraries, you can easily customize date presentation to match your application's needs.

`LinkedIn Account` : [LinkedIn](https://www.linkedin.com/in/matthew-odumosu/)
`Twitter Account `: [Twitter](https://twitter.com/iamcymentho)
**Credit**: Graphics sourced from [JFormatting Dates in JavaScript: A Comprehensive Guide](https://www.freecodecamp.org/news/javascript-date-format-how-to-format-a-date-in-js/)
Introduction to Chef
Tags: chef, devops
Published: 2023-08-16 14:40:05



So What is Chef? Chef serves as a robust configuration management tool. Let's dive into this concept. Imagine having a fleet of multiple servers in operation. This responsibility falls into the hands of system administrators who manage tasks like creation, management, and updates. However, when dealing with a substantial number, say 500 servers, this task becomes considerably intricate. This complexity is where the power of automation shines. 

Now, let's explore the essence of configuration. It encompasses the minutiae of your machine, encompassing factors like version updates, metadata, permissions, and more. And then comes management, which involves the pivotal CRUD operations—Create, Read, Update, Delete. 

Configuration management tools come in two primary types: pull-based and push-based. In the realm of push-based services, the servers take the initiative, sending update notifications directly to your device. This mechanism draws parallels to how tools like WhatsApp function. A notable example of this approach is Ansible, a tool highly regarded for its proficiency.

## PUSH BASED


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/faie63jhnp7xb5hq2pea.jpg)
eg-Ansible ,Saltstack

## PULL BASED

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


Server doesn't tell you to update you have to approach the server
pull configuration node checks with the server ,Periodically and fetches the configuration from it.
       eg -:chef,puppet

chef is a configuration-management tool which is written in Ruby and Erlang 
Configuration management tool turns your code into Infrastructure as code .So your code would be repeatable testable .

ADVANTAGES

1.  Complete Automation
2.  Increase up time
3.  Improve performance
Side effect in creating table text boxes using Angular
Tags: discuss
Published: 2023-08-16 14:36:57

I am trying to create a table with 9 rows and 9 columns of text boxes, the point is that the table is built dynamically using Angular's mechanism,
I have a class in the ts file of Angular that contains a two-dimensional array of strings and I fill this array with empty strings, in the html file I go over this array and based on it I build the text boxes. My problem occurs when, after the creation of the text boxes, I enter some value in a random text box, and what actually happens is the text is copied to an adjacent text box and the focus also moves to the adjacent text box.
The thing is that I activate a click event in which I enter the value from the text box and put it in the cell according to the index of the row and column of the two-dimensional array of the string
As soon as the value enters this array, the focus and the value itself is displayed in the adjacent text box, I tried all kinds of ways, also with the databinding mechanism with two way,
Without the need to write one event or another, but the problem occurs anyway.
The solution I made is to duplicate the two-dimensional array of the strings and on the duplicated array to save the values of the text boxes, the problem is that it is not a clean solution! I simply want to understand why this phenomenon occurs and how it can be overcome correctly

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2b1pt4hwm7wrcj77nvb.png)
code in angular file ts:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wzldbj60oxnuhjn3ddf.png)
The problematic section in the following event:
handleInput
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d64iizjpp0l70ywblhxf.png)

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