teleren/devto huggingface dataset:
Chrome provides no way to disable credit card autofill
Published: 2024-05-06 19:24:14

---
title: Chrome provides no way to disable credit card autofill
published: true
description: Chromium based browsers such as Chrome or Edge have a specific way that detect if forms use credit card fields that cannot be disabled.
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stv9gpm2joqjijonb83h.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-07 22:44 +0000
---

This is going to be just a short article that I write as a way to protest to this annoying behavior in Chromium based browsers (Chrome, Edge, others?).

## Introduction

Well you must be used to autocomplete credit card information in your browser, and indeed it is a very useful feature.

## Buggy detection of credit card fields

The issue is that the following form that just asks the user for a date and a number (in Spanish), will trigger the browser's credit card functionality because it thinks I'm asking the user for a credit card.

```html
<form>
    <label>Fecha</label>
    <input type="text" name="Factura[fecha]">
    <label>Número</label>
    <input type="text" name="Factura[numero]">
</form>
```

So the algorithm is buggy. I'm not blaming the developers behind it because I'm sure it is complex but, they really need to consider if this is the best approach or they need to review how things work.

## Workarounds to solving this incorrect credit card fields detection

Well basically you can solve it with some hacks either by renaming the field names or the text of the label as these two are being used somehow inside the credit card field detection logic.

### Label based hack  

This hack can be used ONLY if your input names do not contain the keywords, but only your labels do and so the labels are triggering the credit card menus.

```html
<form>
    <label>Fecha</label>
    <input type="text" name="Factura[field1]">
    <label>Nú<span style="display:none">/</span>mero</label>
    <input type="text" name="Factura[field2]">
</form>
```

### Input name based hack

```html
<form>
    <label>Fe<span style="display:none">/</span>cha</label>
    <input type="text" name="other_input_name">
    <label>Nú<span style="display:none">/</span>mero</label>
    <input type="text" name="other_input_name_2">
</form>
```

So depending on the fields on your form, you can implement one hack or the other, the label one is less problematic as it does not mess with your field naming, but depending on the case you might need to change the field names too.

**Bottom line: You can't have both "Fecha" and "Número" keywords combination inside your input names or labels.**

I have submitted an issue here to ask for a better solution: https://issues.chromium.org/issues/339033226

The cover image comes from a Spanish invoicing software I'm working on: https://refactu.com/
Why Can't Figma Optimize Exports for the Web Yet?
Tags: figma, imageloading, speedoptimisation, userexperience
Published: 2024-05-07 15:59:29

Today, I was converting **PNG** and **JPG** images to _'interlaced'_ (PNG) and _'progressive_' (JPG) formats. This is to ensure smoother rendering on web pages, where images transition from very pixelated to clear, rather than displaying a **'slow printing'** effect, particularly for visitors with low-speed internet connections.

## Comparison:
Here is an example of what I call "printing load" [1]:
![printing load](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcmf3nndg05jdk1trnk4.gif)

And here is a smoother variant after re-saving in Photoshop [1]:
![progressive load](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tascz0rbovikcsgfrzoc.gif)


## Photoshop's "Save for web" feature
So I was wondering why Figma doesn't have an export tool like Photoshop's '**Save for Web**' feature, which has been available since at least 2007 and can be accessed with the shortcut **Alt + Shift + Ctrl + S** (or **Cmd + Option + Shift + S** for Mac).

![Photoshop save for web menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoj2le8ym1p94jdyyl5w.png)

Initially, I export images from Figma and then reopen all files in Photoshop to resave them with the necessary settings.

## Next step
Next, I am going to create a JS script that handles three variants of each image, tailored for different screen widths—namely, for widths above 1400 pixels, between 1400 and 700 pixels, and below 700 pixels. Depending on the browser window's width, the script dynamically assigns the appropriate image to the src attribute (or the background-image in CSS) in a lazy-loading manner to [enhance user experience](https://web-gate.org). However, I plan to write the JavaScript part later.

What steps do you take to optimize image loading and improve user experience?

## Sources:
[1] - [web-gate.org](https://web-gate.org)
In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge?
Tags: vtable, visactor, data, visualization
Published: 2024-05-07 10:02:05


Description
In the VTable integrated VChart chart scenario, how to avoid the edge points being truncated when drawing points on the chart.

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


Solution
Configure innerOffset on the axes axis. After adding it as above, there will be a certain distance between the elements on the chart and the edge of the table.

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


Code Example

const option = {
  axes: [
          {
            orient: 'left',
            type: 'linear',
            innerOffset: {
              top: 4,
              bottom: 4,
            }
          },
          {
            orient: 'bottom',
            type: 'band',
            innerOffset: {
              left: 4,
              right: 4,
            }
          }
        ]
  ...
}

const tableInstance = new VTable.ListTable(container, option);
Results
Online effect reference:https://visactor.io/vtable/demo/table-type/pivot-chart-scatter

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


Related Documents
Related api：https://visactor.io/vtable/option/PivotTable#axes
github：https://github.com/VisActor/VTable
Tech notes 01 - Two Constructors in Java
Tags: java, oop, constructor, learnwithme
Published: 2024-05-07 10:52:41

**I'm studying OOP using the _Java How to Program Book_. In exercise 4.19 - _(Sales Commission Calculator)_ when I try to solve it. If we have two `constructors `when you call `one `of them, `JVM `will ignore the other `one`.**
**Check the pictures to know more.**

**1. case 1:**

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

**In the `default constructor` I just initialized**

```
this.rate = 0.09;
```
**variable, but I didn't use this `constructor `by the way!**

**2.case 2:**

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

**I did initialize** 

```
this.rate = 0.09;
```
**with a non-zero value, if I didn't give it a value, the compiler will equal it to zero **
**Note: this is an opinion, I'm a student, if you have another answer for this case, please tell me! Thanks!**
Printing reactjs component in a thermal printer
Published: 2024-05-07 12:39:17

I'm developing the management part of a delivery system and i am trying to generate a and print in a thermal printer the customers asks. Most of the users will be restaurants, so i wish i could print it without those dialog boxes just when i click in a button to 'print' to avoid an exausting work when they have a lot of asks.

I can generate the pdf correctly, but it is not printing right. Thats what i've tryied:

```
function Relatorio(props){

useEffect(() => {
    const element = document.getElementById('wrap-relatorio-pedido'); 
    const opt = {
        margin: 5,
        filename: `pedido #${props.nbl_num_nota}.pdf`,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a6', orientation: 'portrait' }
    };

    //first attempt
    // html2pdf().from(element).set(opt).outputPdf('arraybuffer').then((pdf) => {
    //     const blob = new Blob([pdf], { type: 'application/pdf' });
    //     const blobUrl = URL.createObjectURL(blob);

    //     const iframe = document.createElement('iframe');
    //     iframe.style.display = 'none';
    //     iframe.src = blobUrl;
    //     document.body.appendChild(iframe);

    //     iframe.onload = () => {
    //         iframe.contentWindow.print();
    //         document.body.removeChild(iframe);
    //         URL.revokeObjectURL(blobUrl);
    //     };
    // });
    
    
    //second attempt
    // var req = new XMLHttpRequest();
    // req.onload = function (event) {
    //     var blob = new Blob([req.response], {type: 'application/pdf'}); //this make the magic
    //     var blobURL = URL.createObjectURL(blob);
    
    //     const iframe =  document.createElement('iframe'); //load content in an iframe to print later
    //     document.body.appendChild(iframe);
    
    //     iframe.style.display = 'none';
    //     iframe.src = blobURL;
    //     iframe.onload = function() {
    //       setTimeout(function() {
    //         iframe.focus();
    //         iframe.contentWindow.print();
    //       }, 1);
    //     };
    // };

    html2pdf().from(element).set(opt).save();

}, [props.nbl_num_nota]);

const space = ' '; // adiciona espaçamento em spans

const data = new Date(props.nbl_dat_emissao);

// Formatar a data no formato dd/mm/yyyy
const dataFormatada = `${('0' + data.getDate()).slice(-2)}/${('0' + (data.getMonth() + 1)).slice(-2)}/${data.getFullYear()}`;

// Formatar a hora no formato hh:mm
const horaFormatada = `${('0' + data.getHours()).slice(-2)}:${('0' + data.getMinutes()).slice(-2)}`;

return <>
    <div className='d-flex justify-content-between pedido ps-2 pt-3 pb-1' id='body-relatorio-pedido'>
        <div className='row pt-4' id='wrap-relatorio-pedido'>
            //content
        </div>
    </div>
</>
}
```

I don't know if it is possible due to the browser security and i have alredy tryied to the other similar question's solutions... so if anyone know how to do it or can answer if it is possible or not would help a lot.
Shoutout to Document360 - An AI-powered knowledge base software ✍
Tags: beginners, ai, productivity, learning
Published: 2024-05-07 12:50:52


Have you ever tried searching for content and can not see which folder it is stored in? 

If finding the right content at the right time saves you time and makes your work easier, then you must try Document360.

What they do:

Intuitive Knowledge Base Creation: Effortlessly organize your content with categories, subcategories, and tags for easy navigation.

Advanced Search Capabilities: Find and access the information you seek in a Google-like format with AI-powered search functionality.

Customizable Branding: Tailor the look and feel of your knowledge base to match your brand's identity with custom colors, logos, and themes.

Security and Compliance: Your data stays protected with role-based access control, SSL encryption, and GDPR compliance.

Collaboration Tools: Allow multiple users to contribute and review documentation with features like commenting, feedback, and user permissions.

Analytics and Insights: Gain insights into user engagement, content performance, usage metrics, and more.

Multi-language Support: Create and publish your articles in multiple languages.

Integration Ecosystem: Seamlessly integrate with your favorite platforms like Slack, Zendesk, and GitHub for enhanced workflow efficiency.

If you want to evaluate documentation tools, I recommend adding Document360 to your list of tools to evaluate. 

Take a free trial at Document360 - [https://document360.com/signup/](https://document360.com/signup/)
Her - OS1 Loading
Tags: codepen
Published: 2024-05-08 05:48:32

Loading animation based on movie <em>"Her"</em> - <a href="https://www.youtube.com/watch?v=GV01B5kVsC0" target="_blank">OS1</a>.
<br>
* Mouse or Finger press on the page to finish loading action.

{% codepen https://codepen.io/whchxzof-the-encoder/pen/bGybvQv %}
How to configure pie chart size in VChart?
Tags: vchart, visactor, charts
Published: 2024-05-10 09:06:47


## Problem Description

The page is narrow, how to adjust the configuration of VChart to make the pie chart occupy as much screen space as possible

  


## Solution

1.  Cancel the default chart padding.

    VChart sets a certain margin for all charts by default. You can configure `padding: 0` to cancel the default margin.

2.  Adjust the outerRadius the pie chart.

    By default, the pie chart does not fill the entire canvas, you can configure `outerRadius: 1` to set the outer radius ratio to the highest.

  


## Code Example

```
const data = [
  { value: 10, category: 'One' },
  { value: 9, category: 'Two' },
  { value: 6, category: 'Three' },
  { value: 5, category: 'Four' },
  { value: 4, category: 'Five' },
  { value: 3, category: 'Six' },
  { value: 1, category: 'Seven' }
];

const spec = {
  type: 'pie',
  data: [
    {
      id: 'pie',
      values: data
    }
  ],
  outerRadius:1,
  padding:0,
  background:'#eeeeee',
  categoryField: 'category',
  valueField: 'value',
  
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });

vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
```

  


## Results

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a844770a9184fbd9308b5645d1a1666~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1677&h=1044&s=56354&e=png&b=eeeeee)
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e04a4c0cdbc4c19ac48e895e7c30cdb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1677&h=1044&s=47597&e=png&b=eeeeee)
  


## Quote

-   [Pie chart configuration item](https://visactor.io/vchart/option/pieChart#outerRadius)
-   github：https://github.com/VisActor/VChart
Mastering Land Conversions: From Acres to Square Feet
Tags: calculator, acres, square, feet
Published: 2024-05-09 09:35:26

When dealing with real estate transactions, it’s essential to understand land measurement conversions to ensure accuracy in calculations. One of the most common conversions is between acres and square feet, as these units are frequently used in property listings and appraisals. Here are some best practices for converting acres to square feet in real estate transactions:

**Know the Conversion Factor:** The conversion factor from acres to square feet is 1 acre = 43,560 square feet. This is a standard measurement that every real estate professional should know.

**Double-Check Your Calculations:** Always verify your conversions to avoid costly mistakes in your transactions. Simple errors can lead to misunderstandings or misrepresentations of property size.

**Use Technology:** Utilize digital tools or calculators for precise conversions. Apps and online calculators can provide quick and accurate results.

**Cross-Verify with Legal Documents:** Compare your calculations with property deeds and other legal documents to ensure consistency in property measurements.

**Educate Clients:** If you are working with buyers or sellers, help them understand the conversion and its significance in the transaction process.

Read Complete: https://enrolloffice.com/best-practices-for-converting-acres-to-square-feet-in-real-estate-transactions/
30-day Learning Challenge: Day 4— In and out of tech
Tags: learning, programming, nutrition
Published: 2024-05-09 14:21:22

Welcome back to the learning challenge that I’ve set out for myself, where I aim to document something new that I’ve learnt every single day for 30 days!

For today, I continued reading the nutrition-related book featured in Day 3’s article! The insights gleaned have been incredibly interesting, and are concepts that I have not come across before!

## Learnings (Nutrition)
For instance, one of the concepts mentioned at the beginning of the book was explaining why humans, like you and I fail so consistently when it comes to following a diet. In a nutshell, according to the author, it relates to how we are biologically programmed to act and seek out food when we are starved, leading to us spiralling out of control of our diet the moment we eventually succumb to the deprivation of our “sinful”, favourite foods.

It has been an amazing read so far, and I can’t wait to continue with the book to see what else I can learn in the upcoming pages.

Transitioning to the software engineer in me, I learnt even more today about how to write higher quality and sustainable code.

## Learnings (SWE)
From planning your architecture in advance, to understanding how to segment and compartmentalize large amounts of code into isolated containers/Lambdas (in AWS context), these are skills that will be continuously sharpened throughout my journey as a software engineer and I am no doubt excited to learn more!

A famous line I’ve heard from my previous tech leads, as well as from other senior software engineers, is that “if you fail to plan, you plan to fail”!

And I can’t tell you how much I agree with this.

Spending time to plan your code ahead of time, instead of straight deep-diving into writing code for your task/feature will save you immense of time down the line, as well as adjust your mindset to fit business requirements suited for that feature. Who knows, through this thought process and careful planning, you might even discover feature flaws/gaps in the requirements that you can highlight/discuss with your colleagues/peers!

As usual, do join me on this journey as well, and begin documenting your daily attempts at learning something new everyday. Trust me, you’ll shock yourself when you look back at how far you’ve come!

Do leave a comment down below or simply get in touch with me through my [email](mailto:kervynwork@gmail.com) if you wish to discuss about anything related to any of my previous articles!
Eco-Friendly Packaging Solutions: The Role of Custom Serum Boxes"
Published: 2024-05-09 19:37:04

Let's talk sustainability! Delve into the eco-conscious practices of ThePremierPackaging and their approach to crafting **[custom serum boxes](https://thepremierpackaging.com/serum-boxes/)** with minimal environmental impact. Share your thoughts on sustainable packaging materials, recycling initiatives, and the importance of brands prioritizing planet-friendly solutions.
The Human Touch in Software Testing
Tags: qa, testing, development, codequality
Published: 2024-05-10 12:17:37

In our latest [story](https://sharesquare-engineering.medium.com/the-human-element-in-testing-e1bd5b7609b2) we share a short reflection on the vital contribution of a Q&A team member.

We argue that the _human touch_ of a flesh-and-bone Quality Assurance (or testing, in general) specialist is not really replaceable by agents of bots.
CSS in a Simplified way and altruism thought
Tags: webdev, css, design, beginners
Published: 2024-05-12 18:58:18

Imagine CSS as a magic wand for websites! With CSS, we paint the web with colors, shapes, and styles. Each style has its own superpower called an attribute. Think of attributes as special spells we cast to make things look awesome! For example, the "color" attribute changes text colors, while "font-size" makes text big or small. "Background-color" paints the background, and "border" creates borders around things. We can even make things move with "animation"! So, with CSS, we become web wizards, bringing our pages to life with endless possibilities of design magic! ✨🎨✨
The Influence of Personality on Leadership in the Workplace
Published: 2024-05-14 07:55:10

In today's rapidly evolving and competitive work environment, effective leadership in the office is paramount. Gone are the days of singular authority; now, every department has its own leader responsible for [https://greenleafguru.com](https://greenleafguru.com) guiding and motivating their team members. A critical quality for any leader is possessing an influential personality. In this [https://herbalhighsociety.com](https://herbalhighsociety.com) blog, we'll explore how influential personalities contribute to effective leadership.

Inspiring and Motivating Others:

A leader's primary role is to inspire and motivate their team to achieve peak performance. Through compelling communication, a leader can instill a sense of purpose and belonging in their team members. This fosters high morale, leading to increased productivity and goal attainment.

Building Relationships:

Influential leaders prioritize building strong relationships among team members and with higher authorities. They address the needs of their team and cultivate a harmonious and competitive work culture. Encouraging open communication and collaboration, they empower team members to share ideas and work together towards common objectives.

Creating a Positive Work Culture:

A leader's demeanor significantly shapes the office environment. Influential personalities foster positivity and optimism, even in challenging circumstances. By setting an example of resilience and composure, they cultivate loyalty and satisfaction among employees, contributing to a positive workplace atmosphere.

Driving Change and Adaptability:

Influential leaders drive organizational change by challenging the status quo and inspiring innovation. They encourage continuous learning and adaptation, guiding team members through transitions and overcoming resistance to change. Through their persuasive abilities, they inspire confidence in the team's ability to navigate change effectively.

Conclusion:

An influential personality is a cornerstone of effective leadership, energizing and motivating team members to excel. It's essential for influential leaders to wield their influence responsibly, ensuring decisions benefit themselves, their team, and the organization as a whole. By embodying qualities of self-motivation and introspection, anyone can aspire to leadership and elevate themselves and their organization to new heights.
Blender Animations and THREE.js - MEOW!
Tags: blender, animation, javascript, threejs
Published: 2024-05-14 01:46:48

First experience with Blender! (and 3-D modeling, really) Took a fun dive into blender today and made a cat of sorts. I successfully created a brief animation. Not to difficult. 


![purple robotic cat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oijldgm7i4t3xv6s2h75.png)

In fact, it was an awesome experience. Should have tried this before. Now, of course, I want to put my already-animated cat on the web using Three.js. Its turning out to be more complicated than expected. 

I did, however manage to get the cat loaded using the GLTFLoader. Nice and easy. But, I am stuck trying to figure out how to make the animations appear. I tried a few things, including:

- making separate keyframe png files
- adding a clock
- calling mixer

I've been digging for answers for a few hours and would love feedback on this matter. I did find some fun moving grass which I successfully added to the file.


![3D cat sitting in grass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0r3vxab2s7rje87ysw2.png)

We've really gotta figure our this animation business. I have like half an idea what's going on. What's your finest input on the matter?
Open Source Data Engineering Landscape 2024 | ALIREZA SADEGHI
Tags: python, programming, datascience, dataengineering
Published: 2024-05-14 04:18:44

Alireza Sadeghi covered a lot of information related to the data engineering landscape. This article contains information like what once upon a time was popular but not active now to recent ones which are making waves. Read this article which will give you an idea of what tools are needed for each category (Storage Systems, Data Lake Platform, Data Integration, Data Processing & Computation, Workflow Management & DataOps, Data Infrastructure & Monitoring, ML Platform, Metadata Management, Analytics & Visualisation).

{% embed https://practicaldataengineering.substack.com/p/open-source-data-engineering-landscape %}