when I set the width again for the slide, the initially is correct but when I click on prev and next button this bug still alive, I also try to adjust display inline-block to flex and set flex property, but I’m still stuck

my html code

my js code

my css code

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 100%;
}

.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.slide label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#prev-btn,
#next-btn {
  cursor: pointer;
  position: absolute;
}

#prev-btn {
  top: 50%;
  left: 0;
  z-index: 10;
}

#next-btn {
  top: 50%;
  right: 0;
  z-index: 10;
}

i have a frontend js that sends some shopping cart details to the server endpoint, the issue that when i host the node app on my shared server the endpoint function doesn’t work but it works fine on localhost, other endpoints works fine on both hosted server and localhost but this one doesn’t work, knowing that latest supported version of node.js on my hosted is 14.21.2 i don’t know if it’s the issue i’m new to node.

frontend function:

function openWhatsAppChat() {
     
    const clientName = clientNameInput.value.trim();
    const clientAddress = clientAddressInput.value.trim();
    const totalDue = totalDueElement.innerText;
    const cartItems = [];

    
    const cartItemElements = cartItemsContainer.querySelectorAll('.cart-item');
    cartItemElements.forEach(itemElement => {
        const itemName = itemElement.querySelector('.cart-item-detail').innerText;
        const itemQuantity = itemElement.querySelector('.quantity-input').value;
        cartItems.push({ detail: itemName, quantity: itemQuantity });
    });

   
    fetch('/generateWhatsAppMessage', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ cartItems, clientName, clientAddress, totalDue }),
    })
    .then(response => response.json())
    .then(data => {
        
        if (data.success) {
            
            window.location.href = data.whatsappLink;

            
            localStorage.removeItem('shoppingCart');
        } else {
            console.error('Failed to generate WhatsApp message.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

backend endpoint:

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const fs = require('fs');
const port = 3000;
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'home')));
let shoppingCart = [];
////////////////////////////////////////////////////////////////////////////////////////////


 


// generating the shopping cart to whatapp
app.post('/generateWhatsAppMessage', (req, res) => {
    const { cartItems, clientName, clientAddress, totalDue } = req.body;
    const phoneNumber = '+123456789';

    let message = `أود طلب هذه الأصناف:nn`;
    message += `الاسم: ${clientName}n`;
    message += `العنوان: ${clientAddress}nn`;

    cartItems.forEach(item => {
        message += `${item.detail} - العدد: ${item.quantity}n`;
    });

    message += `n${totalDue}`;

    const whatsappLink = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;

    res.json({ success: true, whatsappLink });
});



app.listen(port, () => {
    console.log(`Working on port: ${port}`);
});

works fine on localhost npm but not on a hosted server. when testing from hosted server it redirects me to an /undefined endpoint

I have recently starting to learn tailwind and thought to make an analog clock with it here is the html code

`

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<title>Document</title>

<div class="flex justify-center items-center h-screen">

    <div class="card-container relative">

        <img src="clock.png" alt="Clock">

        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-9 h-2 w-2.5 rounded-full bg-white"></div>

        <div id="hour" class="hour absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-7 h-24 w-2.5 rounded-full bg-red-600 before:absolute before:h-24 before:w-2.5"></div>

        <div id="minute" class="minute absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-7 h-28 w-2 rounded-full bg-blue-300"></div>

        <div id="second" class="second absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-7 h-36 w-1 rounded-full bg-green-400"></div>

    </div>

</div>

<script src=# # "script.js"></script>

`

And here is the js code

// script.js

document.addEventListener("DOMContentLoaded", function() {

    const deg = 6;

    const hor = document.querySelector("#hour");

    const min = document.querySelector("#minute");

    const sec = document.querySelector("#second");

    setInterval(() => {

        const NewDate = new Date();

        let hh = NewDate.getHours() * 30; 

        let mm = NewDate.getMinutes() * deg;

        let ss = NewDate.getSeconds() * deg;

        hor.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`;

        min.style.transform = `rotateZ(${mm}deg)`;

   sec.style.transform = `rotateZ(${ss}deg)`;

    }, 1000); 

});

It is giving me this error Uncaught TypeError: Cannot set properties of undefined (setting ‘transform’)
Can some one please solve this i think it is a basic problem which i am not able to get it will be very helpfull if you help

I have tried check all the typos and right DOM method for this but styll not able to get this

I’m a self-taught developer and I’m currently learning data structures in Javascript. In Javascript, arrays are already dynamic. Arrays are easier to implement too so, why are linkedlists needed?

Are there any other benefits of using linkedlists in javascript, compared to arrays?

I’m trying to create a game where a car crashes into letters, how can I create these collisions? Because I only know how to create collisions between rectangles or circles, but not between letters. I tried both creating some writing and using PNG images with the writing inside but I didn’t find the solution. Thanks in advance!

If I create the writings directly with HTML canvas, then I have created a function that manages the collisions, but I cannot switch between the writings, because it is as if it treats them all as a single block.

I want to know how can I set a default value when window.prompt window is opened.

<a href="#" hx-prompt="Type your age" hx-get="/set/age">My Age: ?</a>

window.prompt is blank. How can I set predefined age like 20?

i just dont get it to work 🙁

I have a FormType as an example now where i have a Select Fierlt with Option1 and Option 2
Now i simple just want, that when i choose option 2 the builder add a new DateTimeType Field.

I want to do it with an AJAX Request if it is possible and i dont want to simple “hide” the fields and then when selected show up, i think thats not the way to go?

->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
            $form = $event->getForm();
            $data = $event->getData();

            if($data->getOption() == "2")
            $form->add('datum2', DateTimeType::class, [
            'label' => 'Datum 2',
            'mapped' => false,
        })

Hi I have the following TypeScript code for Dynamics CRM, I’m very new to this what I’m trying to achieve in my logic is when the user role = Business Advisor role set kc_name field false as this is locked by default.

A friend of mine has said hasRoleName function should be separated for better coding practice and you can pass in the string Business Advisor Role or the variable businessAdvisorRole, have a play around, I’m not sure what they mean

What do they mean to split this function so it can be reused in the code base?, you able to add some examples please of separating the hasRoleName function? or have I just miss understood?

let formContext: Xrm.FormContext = null;
let isBusinessAdvisorRole = null;

export function checkBusinessAdvisorRole() {
  var businessAdvisorRole = "Business Advisor role";
  isBusinessAdvisorRole = false;

  //Store Security Roles
  var userRoles = Xrm.Utility.getGlobalContext().userSettings.roles;
  var hasRole = false;

  //seperate the function
  userRoles.forEach(function hasRoleName(item, index) {
    //Check passed in value for role[].name match
    if (item.name === businessAdvisorRole) {
      //match found set return value to true
      isBusinessAdvisorRole = true;
      hasRole = true;

      formContext.getControl<Xrm.Controls.StringControl>("kc_name").setDisabled(false);
    }
  });

  function hasRoleName() {}
}

i have a question: well is it possible to integrate a (OSM) nearby search functionality into my GitHub project page, that said: GitHub Pages, which hosts project pages, primarily serves static content, so we won’t be able to directly run server-side code like PHP to interact with APIs.

However, there is hope: we can still achieve a similar functionality by using client-side languages like JavaScript to make requests to the Overpass API and display the results on our GitHub project page. i guess that there some options would be like so: could this be a high-level overview of how we could approach it:

first of all see the intened osm – nearby-search that runs on the overpass-Turbo.eu -API

[out:csv(::id,::type,::lon,::lat,amenity,name,"addr:postcode","addr:city","addr:street","addr:housenumber","contact:website",website,"contact:email")]
[timeout:600];

area[name="München"];
nwr(area)[name="Marienplatz"];
nwr["amenity"="school"](around:10000);
out center;

it gives back the results:

@id @type   @lon    @lat    amenity name    addr:postcode   addr:city   addr:street addr:housenumber    contact:website website contact:email
312793352   node    11.5815046  48.1322045  school  Schulverbund München    80469   München Kohlstraße  5       https://www.schulverbund.de/    
703266518   node    11.5746643  48.1387135  school  EAM School of International Business                    https://eam-muenchen.com/       
1096318121  node    11.5827303  48.1368214  school  Otto-Falckenberg-Schule 80539   München Stollbergstraße 7a      https://www.otto-falckenberg-schule.de/ 
1096318127  node    11.5822067  48.1376239  school  Otto-Falckenberg-Schule 80539   München Falckenbergstraße   2       https://www.otto-falckenberg-schule.de/ 
1142514805  node    11.5665710  48.1353750  school  Evangelisches Bildungszentrum   80331   München Herzog-Wilhelm-Straße   24  https://www.stadtakademie-muenchen.de/      [email protected]
1576527684  node    11.5728245  48.1336093  school  Theresia-Gerhardinger-Grundschule am Anger                      https://gs-am-anger.de/ 
1576528339  node    11.5721671  48.1333479  school  Theresia-Gerhardinger-Gymnasium am Anger                        https://www.tggaa.de/   
2493656150  node    11.5814603  48.1366835  school  Förderschule an der Herrnstraße 80539   München Herrnstraße 21      https://stadt.muenchen.de/service/info/sonderpaedagogisches-foerderzentrum-muenchen-mitte-2-herrnstr-21/1060084/    
2654727020  node    11.5812823  48.1365482  school  Grundschule an der Herrnstraße  80539   München Herrnstraße 21  

well – i want to add such a serarch retrival on my github-page:

well i think i need to work on the following parts:

HTML/CSS: Create a structure and styling for our project page, including any elements needed for displaying the search results.

JavaScript: now we would have to write JavaScript code to handle user interactions, make requests to the Overpass API, and dynamically update the page with the retrieved data. we can use libraries like Leaflet.js for mapping functionalities if needed.

GitHub Pages Integration: we ought to add the HTML, CSS, and JavaScript files to our GitHub repository and configure GitHub Pages to serve them as our project page.

well – i think we should go like this: – see a simplified example of how we might implement the JavaScript part to perform a nearby search using Overpass API:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nearby Schools Search</title>
    <!-- Include any CSS files here -->
</head>
<body>
    <h1>Nearby Schools</h1>
    <div id="schoolList"></div>

    <script>
        // Function to perform nearby search
        function nearbySchoolsSearch() {
            var url = 'http://overpass-api.de/api/interpreter';
            var data = '[out:json][timeout:25];(node["amenity"="school"](around:10000,48.1351,11.5820););out;';

            fetch(url, {
                method: 'POST',
                body: data
            })
            .then(response => response.json())
            .then(data => {
                // Display search results
                var schools = data.elements;
                var schoolList = document.getElementById('schoolList');
                schoolList.innerHTML = '<ul>';
                schools.forEach(school => {
                    schoolList.innerHTML += '<li>' + school.tags.name + '</li>';
                });
                schoolList.innerHTML += '</ul>';
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // Call the nearbySchoolsSearch function when the page loads
        window.onload = nearbySchoolsSearch;
    </script>
</body>
</html>

What do you say: well i think this code creates a simple HTML page with a heading and a element where the search results will be displayed. The JavaScript code uses the Fetch API to make a request to the Overpass API, retrieves the nearby schools,
and dynamically updates the page with the results

Well – i look forward to hear from you

regards

This is my first React Program where the program will decide from given options for the user.
I have made 5 components which are namely:

1. Add Options
2. Display Options
3. Remove Options.
4. Header
   5 Main (parent component)

I am not able to take the data as an input let alone display it and then giving user a random option and remove all the options.

Like I have got the general Idea of how the program should work but I am not able to write it in code.

import React from "react";
import Header from "./Header";
import Display from "./Display";
import Remove from "./Remove";
import Add from "./AddOption";

export default class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      arr: [],
    };
  }
  render() {
    return (
      <>
        <Header></Header>
        <Display data={this.state.arr} />
        <Add handleAddOption={this.handleAddOption} />
      </>
    );
  }
}

import React from "react";

export default class Display extends React.Component {
  render() {
    const { data } = this.props; 
    return (
      <div>
        <h2>Entered Data:</h2>
        {data && data.length > 0 ? (
          <ul>
            {data.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        ) : (
          <p>No data entered yet.</p>
        )}
      </div>
    );
  }
}

import React from "react";

export default class Add extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleAddOption = this.handleAddOption.bind(this);
  }
  handleAddOption(event) {
    event.preventDefault();
    let option = event.target.option.value;
    alert("You Entered: " + option);
    event.target.option.value = "";
    this.props.handleAddOption(option);
  }

  render() {
    return (
      <>
        <form onSubmit={this.handleAddOption}>
          <>
            <input type="text" placeholder="Add Option"></input>
            <button>Add</button>
          </>
        </form>
        {this.props.arrElement.map((val) => (
          <p key={val}>{val}</p>
        ))}
      </>
    );
  }
}

import React from "react";

export default class Header extends React.Component {
  render() {
    return (
      <>
        <h1>Title</h1>
        <h2>Description</h2>
      </>
    );
  }
}

I am creating some custom elements, which are designed to be dragged into ckeditor

activeHtml.addDragStartHandler(handler->{
    handler.setData("text/html",finalDragHtml);
});

But the point is that these dragged elements should be inserted below the block element(Typical a p) they get dragged into.

So if the user drag the content into an existing paragraph, the entire content(Which is a text paragraph) should be placed below the paragraph where the user dragged the content, instead of splitting the target paragraph in 2. Is this possible?

The only solution I got which almost works is to grab the paste event, then insert the content into the model, and then cancel the drag.

That works except that I can’t get the model position where the content is dragged, so I end up inserting the content at the current cursor position, instead of where the user dragged it.

I am trying to use a Bootstrap (v5.2.8) tooltip to display content from a Pinia store in Vue 3, that is dynamic. When the state in the store changes, the tooltip content should also change. I’m not able to have it update on change, and not sure why. The initial state correctly gets the store’s value, but it doesn’t update. My approach below:

<script setup>
import { Tooltip } from 'bootstrap';
import { ref, watchEffect, onMounted } from 'vue';
import { useMyStore } from '@/store/my-store'

const tooltipContent = ref('');
const tooltipTarget = ref(null);

const tooltipStore = useMyStore(); 


onMounted(() => {
    new Tooltip(tooltipTarget.value);
});


watchEffect(() => {
    tooltipContent.value = tooltipStore.myStateString;
    const tooltip = Tooltip.getInstance(tooltipTarget.value);
    if(tooltip) {
        tooltip.dispose();
        new Tooltip(tooltipTarget.value);
    }


});
</script>

<template>
    <span ref="tooltipTarget" data-bs-toggle="tooltip" :title="tooltipContent">
        tooltip
    </span>
</template>

So I have 2 pages 1. customer-list, 2. customer-detail. so customer-list page will be a table where it contains a list of a customer-id without the details but there’s a button which will navigate to another page customer detail. the code looks like this

const CustomerList = () => {
   const [customers, setCustomers] = useState([]);
   useEffect(() => { fetch customer list here }, [])

   return (
      { 
         customers.map(c => 
            <tr>
              <td>{customer.customer_id}</td>
              <td><button onClick={() => navigate(`/customer/${customer.customer_id}`)}>View details</button></td>
           </tr>
         ) 
      }
   );
}

In the customer details page there’s also a button where it can navigate back to the previous page, customer-list, the code looks like this.

const CustomerDetails = () => {
   const navigate = useNavigate();

   return (
       <>
        <h2>Customer Details</h2>
        <button onClick={() => navigate(-1)}>Back</button>
       </>
   );
}

however when I navigate back to the first page it will completely re-render and fetch the whole data again. Is there a way to cache or prevent the first page from re-rendering or re-load the data because it took very long time to load the customer list so I’m concerning about the user experience here. I’m using react-router-dom v6 and the path structure looks like this.

/ -> root customer-list
/customer/:customerId -> customer-details

I have a site that has a theme switcher (dark, light & reset to OS), which works fine. In MacOS I typically have my theme set to dark, only Chrome never loads the dark theme for sites that have it where they have the prefers-color-scheme media query present, including mine (when the manual selector is not set), whereas other browsers do.

I have added an eventListener, to listen for the change, again, it shows in all browsers but Chrome.

Tested in (all browsers and OS up to date on M1 MBP):

• Chrome (Event doesn’t log to the console)
• Chrome Incognito (Event doesn’t log to the console)
• Firefox Developer Edition (Event logs to the console)
• Safari (Event logs to the console)
• Edge (Event logs to the console)
• Chrome Canary (Event logs to the console)

This has bothered me for far too long, sites I know have prefers-color-scheme: dark; set, don’t initially show me the dark theme, I have to find the manual toggle/button. Not the end of the world, I know, but it’s quite frustrating.

• I opened Incognito (to rule out extensions) reloaded the page, changed my theme, nothing logged to the console
• I tried Firefox & Safari, all good there
• I tried Edge, wondering if this is a Chromium bug on MacOS, again, works perfectly
• I tried Canary and that works
• Reset Flags to Default
• Set Chrome Appearance to System
• Disabled all extensions
• Relaunched after every change I made in Chrome
• Reset all settings in Chrome (I didn’t really want to do that, but I did)
• Googled it extensively, nobody appears to be having the same issue and it’s been like this for ages, like well over a year.

I’m all out of options now, I don’t want to reinstall Chrome as that will probably annoy me more than it has when I reset Chrome and it did nothing.

My JS Event Listener is fine, it works everywhere apart from Chrome on this Mac, it works on Windows Chrome too. The theme displays correctly on Android Chrome and iPad.

Expectation is this log should the OS theme theme to Chrome’s console when I change my MacOS theme:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', evt => {
  const theme = evt.matches ? "dark" : "light";
  console.log( theme );
});

Absolutely nothing happens, only in Chrome. When I make that OS change, My MS Teams, Safari and everything else changes theme.

This logs to the console, as expected, when I resize the window:

window.matchMedia('(min-width: 768px)').addEventListener('change', evt => {
  const size = evt.matches ? "yeah" : "nah";
  console.log( size );
});

Just to add further, this happens on MDN, too, no change there. It’s not my theme switcher, I just add an entry to localStorage when a theme is hard selected, there is a reset button that removes the entry which is selected, localStorage is empty and the data-attr is not displaying on the HTML element, so there is no issue with the way I’m doing anything with any of that. If I do choose Dark Theme, it does load the correct theme on repeat visits, it’s just the system preference that is the issue.

What the issue is, is why won’t that listener run in Chrome, what could I have possibly done that prevents it from even running, especially after resetting everything I can think of?

So I guess my question is, anybody run into this before and if so, what did you do to fix it?

I tested this code to test by text fields:

PDFWriter.prototype.encrypt = function (ref, obj, pdfSecurity) {
  let encryptedData;

  const encryptFn = pdfSecurity.getEncryptFn(
    ref.objectNumber,
    ref.generationNumber,
  );

  if (encryptFn) {

    if (obj instanceof PDFStream) {
      let toBeEncrypt = obj.getContents();
      encryptedData = new Uint8Array(encryptFn(toBeEncrypt));
      obj.contents = encryptedData;
    }
    else if (obj.lookup(PDFLib.PDFName.of("Type")) == PDFLib.PDFName.of("Annot")) {
      let values = ["V", "T", "DA"];

      for (var i = 0; i < values.length; i++) {
        let data = obj.lookup(PDFLib.PDFName.of(values[i]));
        if (data && data.value) {
          encryptedData = encryptFn(new Uint8Array(System.Text.Encoding.ASCII.GetBytes(data.value)));
          data.value = System.Text.Encoding.ASCII.GetString(encryptedData);
        }
      }
    }
  }
}

I used this exemple:

I tested by ASCII (I think in PDF Literal Strings support just ASCII) and the encryption finally works(text fields) but not after every try, in every try I got one or many text empty fields:

Here the code first 4 text fields:
Before encryption:

4 0 obj
<<
/AP <<
/N 26 0 R
>>
/DA (0 0 0 rg /F3 11 Tf)
/DR <<
/Font 24 0 R
>>
/DV <FEFF>
/F 4
/FT /Tx
/MaxLen 40
/P 22 0 R
/Rect [ 165.699997 453.700012 315.700012 467.899994 ]
/Subtype /Widget
/T (Given Name Text Box)
/TU <FEFF004600690072007300740020006E0061006D0065>
/Type /Annot
/V (Hello)
>>
endobj

5 0 obj
<<
/AP <<
/N 27 0 R
>>
/DA (0 0 0 rg /F3 11 Tf)
/DR <<
/Font 24 0 R
>>
/DV <FEFF>
/F 4
/FT /Tx
/MaxLen 40
/P 22 0 R
/Rect [ 165.699997 421.200012 315.700012 435.399994 ]
/Subtype /Widget
/T (Family Name Text Box)
/TU <FEFF004C0061007300740020006E0061006D0065>
/Type /Annot
/V (þÿ'D91(J))
>>
endobj

6 0 obj
<<
/AP <<
/N 28 0 R
>>
/DA (0 0 0 rg /F3 11 Tf)
/DR <<
/Font 24 0 R
>>
/DV <FEFF>
/F 4
/FT /Tx
/MaxLen 40
/P 22 0 R
/Rect [ 165.699997 388.299988 315.700012 402.5 ]
/Subtype /Widget
/T (Address 1 Text Box)
/Type /Annot
/V (þÿY'U‰WߊeM)
>>
endobj

7 0 obj
<<
/AP <<
/N 29 0 R
>>
/DA (0 0 0 rg /F3 11 Tf)
/DR <<
/Font 24 0 R
>>
/DV <FEFF>
/F 4
/FT /Tx
/MaxLen 20
/P 22 0 R
/Rect [ 378.4 388.4 446.9 402.6 ]
/Subtype /Widget
/T (House nr Text Box)
/TU <FEFF0048006F00750073006500200061006E006400200066006C006F006F0072>
/Type /Annot
/V <FEFF>
>>
endobj

After encryption:

4 0 obj
<<
/AP <<
/N 26 0 R
>>
/DA (Bý„¡Öû‹¾B Þ¤„îfbÎ&óp£ÿIp‘ù›Šþ:ø„{†?-}­B<ª    )
/DR <<
/Font 24 0 R
>>
/DV <FEFF>
/F 4
/FT /Tx
/MaxLen 40
/P 22 0 R
/Rect [ 165.699997 453.700012 315.700012 467.899994 ]
/Subtype /Widget
/T (Bý„¡Öû‹¾B Þ¤„ñ“æ®ÖLÄc&žQþÍuòÖÒt.ó-‘Å´ƒ}p)
/TU <FEFF004600690072007300740020006E0061006D0065>
/Type /Annot
/V (Bý„¡Öû‹¾B Þ¤„Šª™†÷ß¿`?Õò˜o)
>>
endobj

5 0 obj
<<
/AP <<
/N 27 0 R
>>
/DA (4‘_‚J~ßZñuJ]îÍø)ô[0¸ßœT;ÌÔjÀÇéY»X6ß-M.üí)
/DR <<
/Font 24 0 R
>>
/DV <FEFF>
/F 4
/FT /Tx
/MaxLen 40
/P 22 0 R
/Rect [ 165.699997 421.200012 315.700012 435.399994 ]
/Subtype /Widget
/T (4‘_‚J~ßZñuJ]î"o÷§ÀijÔˆu!•‡e˜‰Îó)Öçy¥¤ïJFdŠ)
/TU <FEFF004C0061007300740020006E0061006D0065>
/Type /Annot
/V (4‘_‚J~ßZñuJ]îR|™ARqƒ¡hã³»Uy<÷<@@»"I»a£Ê§0Û)
>>
endobj

6 0 obj
<<
/AP <<
/N 28 0 R
>>
/DA (Q¾Ú©hª¶ÈŒæäêèæ@îx ªùé–Cóï5ÍÏ$°léu*Çì‹!t­&)
/DR <<
/Font 24 0 R
>>
/DV <FEFF>
/F 4
/FT /Tx
/MaxLen 40
/P 22 0 R
/Rect [ 165.699997 388.299988 315.700012 402.5 ]
/Subtype /Widget
/T (Q¾Ú©hª¶ÈŒæäêèæg;«è·k6W¹Q!ä€åÆ°]ŒÎ˜*õö5èÅ›t)
/Type /Annot
/V (Q¾Ú©hª¶ÈŒæäêèæÈ۫ʱ'  ½R7ì!ñ1)
>>
endobj

7 0 obj
<<
/AP <<
/N 29 0 R
>>
/DA (ó„Fû’6òñ=t><ÉA¾©ªí˜$•Ã5G ÉFÁþy¸x n‹£§)âÈ×)
/DR <<
/Font 24 0 R
>>
/DV <FEFF>
/F 4
/FT /Tx
/MaxLen 20
/P 22 0 R
/Rect [ 378.4 388.4 446.9 402.6 ]
/Subtype /Widget
/T (ó„Fû’6òñ=t><3xN-ñ>dVù¬H©u`‚7‘ÍžDÆ—í J2g)
/TU <FEFF0048006F00750073006500200061006E006400200066006C006F006F0072>
/Type /Annot
/V <ó„Fû’6òñ=t><žqæ;F˶¶.­öLK>
>>
endobj

What i want to know:

1. Why the fields works just when I use ASCII? is there another way to use UTF-8 in PDF?
2. What kind of PDF strings should I encryptin a PDF instead of just some (/V, /T, /DA) in text fields.