Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am making a web app and want to get this kind of outline effect dynamically.
I don’t quite know how to describe it properly, but the outlines and the insides of the text are colored in.
My initial thought was that this would have something to do with text-stroke and the Canvas API, but I’m a bit out of my depth here. I’m open to any method!
Thank you!
I’ve been working on a YouTube ID parsing regex (because none of the available ones are complete) on RegExr.com and I found a pattern that works great. However, when the page first loads, it ALWAYS throws an error.
Exec Error: The expression took longer than 250ms to execute.
The pattern doesn’t take longer than 250ms though. If I make ANY edit to the pattern (e.g. add a space and then remove it), it runs quickly, and perfectly does what I need it to.
A couple of other weird things occur in the execution reporting though.
So, the pattern is effective, but something about it is really throwing the Regexr execution reporting. Any ideas? Is there something wrong with the pattern itself?
Here is the pattern:
/(?:https?://|//)?(?:www.|m.|music.)?(?:youtube.com|youtu.be){1}(/live/|/v/|/embed/|/watch?v=|/w+?v=|/)([w-]+)??.*/gi
Please see the linked page for the demo to see the functionality I described.
I am using Marked.js for parsing Markdown. The original Markdown language does not support different ordered list styles, for instance, lettered ones, like HTML. I would like to introduce this function to the parser. Below is my JavaScript code:
const customList = {
name: "customList",
level: "block",
start(src) {
return src.match(/(?:^|n)(s*)(-|+|*|d+.|[A-Za-z]+.|[iIvVxX]+.)(s+)/)?.index;
},
tokenizer(src, tokens) {
const rule = /^([^Srn]*)(-|+|*|d+.|[A-Za-z]+.|[iIvVxX]+.)(s+)(.*)/;
const textRule = /^([^Srn]*)(.*)/;
const match = rule.exec(src);
let style;
if (match) {
if (/-/.test(match[2])) style = "-";
else if (/+/.test(match[2])) style = "+";
else if (/*/.test(match[2])) style = "*";
else if (/d+./.test(match[2])) style = "1";
else if (/[IVX]+./.test(match[2])) style = "I";
else if (/[ivx]+./.test(match[2])) style = "i";
else if (/[A-Z]+./.test(match[2])) style = "A";
else if (/[a-z]+./.test(match[2])) style = "a";
const items = [];
let remainingSrc = src;
let prevIndent = match[1].length;
let itemText = "", raw = "";
while (remainingSrc) {
const itemMatch = rule.exec(remainingSrc);
const textMatch = textRule.exec(remainingSrc);
if (itemMatch && itemMatch[1].length === prevIndent) {
let itemStyle;
if (/-/.test(itemMatch[2])) itemStyle = "-";
else if (/+/.test(itemMatch[2])) itemStyle = "+";
else if (/*/.test(itemMatch[2])) itemStyle = "*";
else if (/d+./.test(itemMatch[2])) itemStyle = "1";
else if (/[IVX]+./.test(itemMatch[2])) itemStyle = "I";
else if (/[ivx]+./.test(itemMatch[2])) itemStyle = "i";
else if (/[A-Z]+./.test(itemMatch[2])) itemStyle = "A";
else if (/[a-z]+./.test(itemMatch[2])) itemStyle = "a";
else break;
if (itemStyle !== style) break;
if (itemText) {
const itemTokens = [];
this.lexer.inlineTokens(itemText, itemTokens);
items.push({
type: "customListItem",
raw: raw,
tokens: itemTokens
});
}
itemText = itemMatch[4].trim();
raw = itemMatch[0];
remainingSrc = remainingSrc.slice(itemMatch[0].length + 1);
}
else if (textMatch && textMatch[1].length === prevIndent) {
itemText += "n" + textMatch[2];
raw += "n" + textMatch[0];
remainingSrc = remainingSrc.slice(textMatch[0].length + 1);
}
else break;
}
if (itemText) {
const itemTokens = [];
this.lexer.inlineTokens(itemText, itemTokens);
items.push({
type: "customListItem",
raw: raw,
tokens: itemTokens
});
}
const token = {
type: "customList",
raw: src.slice(0, src.length - remainingSrc.length),
style: style,
items: items
};
return token;
}
},
renderer(token) {
const listItems = token.items.map(item =>
`<li>${this.parser.parseInline(item.tokens)}</li>`
).join('n');
if (token.style === "-" || token.style === "+" || token.style === "*") return `<ul>n${listItems}n</ul>n`;
else if (token.style === "1" || token.style === "I" || token.style === "i" || token.style === "A" || token.style === "a") return `<ol type="${token.style}">n${listItems}n</ol>n`;
},
childTokens: ["items"]
};
marked.use({ extensions: [customList] });
It works normally in most cases:
Example 1
marked.parse(" 1. firstn 2. secondn 3. third")
Output
<ol type="1">
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
Example 2
marked.parse("A. firstnB. secondn* firstn* second")
Output
<ol type="A">
<li>first</li>
<li>second</li>
</ol>
<ul>
<li>first</li>
<li>second</li>
</ul>
However, when I try this:
marked.parse("1 + 1")
The output becomes:
<p>1</p>
<ul>
<li>1</li>
</ul>
I expect that only the list markers appearing at the beginning of a line (surrounded by whitespaces) will be detected as a list.
I tried getting some values of the variables by adding console.log(src) in the tokenizer function. Surprisingly, I receive two outputs when I try the above case.
1 + 1
+ 1
Why is this occurring? I am sorry that I am new to JavaScript, and the code may look clumsy. If you need more information, please let me know. Thanks a lot.
having huge latency issue while working with elasticsearch runtime query. i have a nested type mapping field “actTypeCadence”.
“actTypeCadence”: {
“type”: “nested”,
“dynamic”: “false”,
“properties”: {
“cadenceDaysOut”: {
“type”: “long”
},
“crmActivityTypeId”: {
“type”: “long”
},
“outOfCadence”: {
“type”: “boolean”
}
}
}
and based on this mapping i am running a kibana query containing runtime query.
GET accounts/_search?routing=22687
{
"query": {
"bool": {
"filter": [
{
"term": {
"orgId": 22687
}
},
{
"bool": {
"must": [
{
"bool": {
"must": {
"term": {
"cadenceStatus": {
"value": "Unknown",
"_name": "cadenceStatus"
}
}
}
}
}
]
}
}
],
"must_not": [],
"should": [],
"must": [
{
"match_all": {}
}
]
}
},
"explain":true,
"track_total_hits": true,
"runtime_mappings": {
"cadenceStatus": {
"type": "keyword",
"script": {
"source": "long ci = 100;long co = -999;if (params['_source'].actTypeCadence != null && params['_source'].actTypeCadence.length > 0 && params['_source'].actTypeCadence[0].containsKey('cadenceInterval')) {ci = params['_source'].actTypeCadence[0].cadenceInterval} if (params['_source'].cadenceDaysOut != null) {co = params['_source'].cadenceDaysOut} long upcomingCutoff = 14;String status = 'Up to date';if (ci == 1) {upcomingCutoff = -1} else if (ci == 2) {upcomingCutoff = 1} else if (ci <= 7) {upcomingCutoff = 2} else if (ci <= 25) {upcomingCutoff = 5} else if (ci <= 70) {upcomingCutoff = Math.round(0.2 * ci)}if (co >= 0){ status = 'Past due'} else if (Math.abs(co) <= upcomingCutoff){status = 'Upcoming'} else if (co == -999){status = 'Unknown'} emit(status);"
}
}
},
"fields": [
"cadenceStatus"
],
"size": 1
}
The issue is that the query takes nearly 20 seconds to execute. According to the Elasticsearch documentation, accessing fields using params[‘_source’].field is significantly slower than using doc[‘field’]. However, since my mapping uses the nested type (which stores data as separate Lucene documents), doc[‘field’] doesn’t work in this case. I’m therefore constrained to use params[‘_source’].field.
I can’t change the mapping from nested to object because I need to support filtering on nested data. So my question is: how can I optimize this query without making major architectural changes?
Currently, I’m considering separating out the runtime computation and performing it on the server side, then storing the result in a new keyword field. However, this feels like a somewhat naive solution.
i ran the query on search profiler as well, and the major bottleneck was actually at
“cadenceStatus”: {
“value”: “Unknown”,
“_name”: “cadenceStatus”
}
Access to fetch at ‘https://api.example.com/data’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
I’m not sure why this happens or how to fix it. I’ve read that it has something to do with CORS and server headers, but I’m new to this.
Could someone explain why this error occurs and how I can resolve it?
Is there anything I can do on the frontend, or does this have to be fixed on the server?
Thanks!
I’m using history.pushState to change the URL programmatically without any user interaction (like a button click). This works fine in Chrome and some other browsers, but in Firefox, when I press the browser back button, the popstate event is not firing as expected.
Expected behavior:
Actual behavior in Firefox:
Here’s a simplified version of the code:
`window.addEventListener(‘load’, () => {
history.pushState({ page: 1 }, ”, ‘/new-url’);
});
window.addEventListener(‘popstate’, (event) => {
console.log(‘Popstate fired:’, event.state);
});`
What I’ve tried:
Question :
Is this a known Firefox behavior/limitation when using pushState without user interaction?
Is there a workaround to reliably trigger the popstate event in this scenario?
Any help or explanation would be appreciated!
i’m trying to make a generic laravel component for simple filepond use since it’s pure js and laravel i don’t want to get in much of the issues that would be simpler if i was using something like vue
so i want to populate from the html directly using the fileset
Is a bit messy but i guess the idea is understandable, however maybe because i’m trying to acces a private file via url (i mean it’s not public and is served directly from the URL it seems it can’t be found maybe i’m misunderstanding the usage fieldset needs an expanded section in documentation thanks before hand tell me if you would like to see anything else in the code
if i remove the field set it clearly shows the correct accesible full url in the html
@php
// Set defaults
$inputId = $id ?? $name;
$error = $errors->first($name);
$accept = $accept ?? 'image/*';
$multiple = $multiple ?? false;
$required = $required ?? false;
$files = $files ?? [];
$existingFile = $existingFile ?? null;
@endphp
<script>
console.log("{{ $existingFile }}");
</script>
<div class="fv-row mb-8 {{ $attributes->get('class', '') }}">
<div class="filepond-container">
@if(isset($label))
<label for="{{ $inputId }}" class="form-label {{ $required ? 'required' : '' }}">
{{ $label }}
</label>
@endif
<fieldset>
<legend>Files</legend>
<!-- a list of already uploaded files -->
<ul>
@foreach ($files as $file)
<li>
<label>
<input value="{{ $file }}" data-type="local" checked type="checkbox" />
{{ $file }}
</label>
</li>
@endforeach
</ul>
<input
type="file"
name="{{ $name }}"
id="{{ $inputId }}"
class="filepond @error($name) is-invalid @enderror"
accept="{{ $accept }}"
{{ $required ? 'required' : '' }}
{{ $multiple ? 'multiple' : '' }}
{{ $attributes->except(['class', 'name', 'id', 'accept', 'multiple', 'required','files']) }}
/>
</fieldset>
</div>
@error($name)
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
The below problem occurs only in Chromium browsers but the same functionality works fine in Firefox: It seems that Chromium by default turns every load of an originally lossless image format (e.g. .png) into a lossy operation.
example:
let image = new Image;
image.onload = function() {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
let imgData = ctx.getImageData(0, 0, image.width, image.height).data;
...
}.bind(this);
image.src = 'test.png';
In Chromium browsers the imgData returned here always seems to contain random
rounding errors as compared to the original data stored in the original .png file.
The magnitude of respective errors typically seem to be +/-1; rendering the respective
API quite useless.
Is there some workaround to make this kind of functionality work correctly (i.e. access the
original image data and not some corrupted version thereof) in garbage Chromium based browsers?
I’m trying to open Chromium in headfull mode on my Linux machine using a custom extension to handle authenticated proxy servers. Despite configuring the webRequest.onAuthRequired listener in my background script, Chromium isn’t authenticating with the proxy.
Chromium Details:
Binaries downloaded from: https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/
Version: chrome.137.0.7151.55
Command to open Chromium:
timeout -k 10 1800 /path_to_chrome_binary/chrome --disable-popup-blocking --allow-running-insecure-content --ignore-certificate-errors --no-sandbox --remote-allow-origins=* --user-agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.6422.112 Safari/537.36" --proxy-server='{proxy_host}:{proxy_port}' --user-data-dir={user_data_path} --remote-debugging-port=9732 --load-extension={path_to_extension}
(Note: {proxy_host}, {proxy_port}, {user_data_path}, {path_to_extension} are placeholders.)
Extension Details:
Since my proxy server is authenticated, I’ve created a custom extension with the following files:
manifest.json:
`{
"manifest_version": 3,
"name": "Proxy Authenticator",
"version": "1.0",
"description": "Handles proxy authentication",
"permissions": [
"proxy",
"storage",
"webRequest",
"webRequestAuthProvider",
"webRequestBlocking",
"scripting"
],
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Proxy Authenticator"
}
}`
background.js:
`chrome.webRequest.onAuthRequired.addListener(
function(details, callback) {
console.log(`Auth challenge for: ${details.uri}`);
callback({
authCredentials: {
username: '{proxy_username}',
password: '{proxy_password}'
}
});
},
{ urls: ["<all_urls>"] },
['asyncBlocking']
);`
(Note: {proxy_username} and {proxy_password} are placeholders.)
What I’m experiencing:
Chromium launches, but it fails to connect through the authenticated proxy. The console.log inside onAuthRequired doesn’t seem to be triggered, or the authentication is not being applied correctly.
What am i doing wrong here?
Ensured the extension path in the Chromium command is correct.
Verified the proxy host and port are accurate.
Checked the proxy username and password are correct.
Confirmed manifest_version is 3 and background uses service_worker.
Explain with a real life implementation for better understanding.
Function async and sync. A basic code implemetation of the javascript functions
I am expecting the the real life usage example of javascript of different functions also with synchronization.
I’m debugging a performance regression in a hot code path and found that V8 is deoptimizing a function that uses closures in a monomorphic way. Here’s a simplified version of the pattern
function createGetter(prop) {
return function(obj) {
return obj[prop];
};
}
const getX = createGetter("x");
const getY = createGetter("y");
const obj1 = { x: 10, y: 20 };
const obj2 = { x: 15, y: 25 };
for (let i = 0; i < 1e6; i++) {
getX(obj1);
getY(obj2);
}
Despite obj1 and obj2 sharing the same hidden class and the call site being monomorphic per closure, –trace-opt –trace-deopt deoptimizations related to LoadIC and context mismatches.
It verified that both closures are optimized initially.
Shapes are hidden classes and stable and verified via –print-opt-code.
Deopt seems to relate to the context or inline cache confusion between closures.
Is V8’s inline cache strategy per-closure or per-site in this case? and could context isolation be triggering unnecessary polymorphism? Would defining getX and getY inline rather than through a shared factory mitigate this, or is there a deeper reason for deopt? Is this related to feedback vector sharing or context-specific feedback slots for closures created from the same outer function?
tried a lot..haven’t figgerd it out.
I’m trying to write login and signup page using React. Data from the form sends to the /api/auth/login from login form, and to /api/auth/signup from signup from. Spring Security allows login requests but it doesn’t pass signup requests. I’ve tried to change my CORS config but it doesn’t look like a problem.
Security config
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
return http.csrf(AbstractHttpConfigurer::disable)
.cors(cors -> cors.configurationSource(corsConfigurationSource()))
.authorizeHttpRequests(request -> request
.requestMatchers(HttpMethod.POST, "/api/auth/**").permitAll()
.requestMatchers(HttpMethod.OPTIONS, "/**").permitAll()
.requestMatchers(HttpMethod.GET, "/api/users/get/username/*").permitAll()
.requestMatchers(HttpMethod.GET, "/swagger-ui/**", "/api-docs/**").permitAll()
.anyRequest().authenticated())
.sessionManagement(sessionManagement -> sessionManagement.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
.authenticationProvider(authenticationProvider)
.addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class)
.build();
}
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOrigins(List.of("http://localhost:5173"));
configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
configuration.setAllowedHeaders(Arrays.asList("authorization", "content-type", "x-auth-token"));
configuration.setExposedHeaders(List.of("x-auth-token"));
configuration.setAllowCredentials(true);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
JwtAuthenticationFilter
@Override
protected void doFilterInternal(
@NonNull HttpServletRequest request,
@NonNull HttpServletResponse response,
@NonNull FilterChain filterChain
) throws ServletException, IOException {
final String authHeader = request.getHeader("Authorization");
if (request.getRequestURI().startsWith("/api/auth/") || request.getRequestURI().startsWith("/api/users/get/username/")) {
filterChain.doFilter(request, response);
return;
}
if (authHeader == null || !authHeader.startsWith("Bearer ")) {
log.error("There is no authentication token or header!");
filterChain.doFilter(request, response);
}
try {
final String jwt = authHeader.substring(7);
final String username = jwtService.extractUsername(jwt);
if (username != null && SecurityContextHolder.getContext().getAuthentication() == null) {
User user = (User) this.userService.loadUserByUsername(username);
if (jwtService.isTokenValid(jwt, user)) {
UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(
user,
null,
user.getAuthorities()
);
authToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
SecurityContextHolder.getContext().setAuthentication(authToken);
} else {
log.error("Invalid subject!");
response.setStatus(401);
}
}
filterChain.doFilter(request, response);
} catch (Exception exception) {
handlerExceptionResolver.resolveException(request, response, null, exception);
}
}
AuthController
@PostMapping("/signup")
@Operation(summary = "Registration", description = "Allows user to create new account.")
@ApiResponses(
value = {
@ApiResponse(responseCode = "201", description = "Registered successfully!"),
@ApiResponse(responseCode = "400", description = "Entered data not valid.")
}
)
public ResponseEntity<Void> signup(@Valid @RequestBody SignUpRequest user) throws UniqueConstraintException {
log.info("Signing up user with username: '{}' and phone number: '{}'", user.getUsername(), user.getPhoneNumber());
authenticationService.signup(user);
log.info("User username: '{}' and phone number: '{}' successfully signed in!", user.getUsername(), user.getPhoneNumber());
return ResponseEntity.status(201).build();
}
@PostMapping("/login")
@Operation(summary = "Log In", description = "Allows user to login.")
@ApiResponses(
value = {
@ApiResponse(responseCode = "200", description = "Logged in successfully!"),
@ApiResponse(responseCode = "404", description = "User with such username or phone number not found!")
}
)
public ResponseEntity<LoginResponse> login(@Valid @RequestBody LoginRequest user) throws UserNotFoundException {
log.info("Trying to log in user with username: '{}' and phone number: '{}'", user.getUsername(), user.getPhoneNumber());
User loginUser = authenticationService.login(user);
String token = jwtService.generateToken(loginUser);
LoginResponse loginResponse = new LoginResponse(token, jwtService.getJwtExpiration());
log.info("User with username: '{}' and phone number: '{}' logged in successfully!", user.getUsername(), user.getPhoneNumber());
return ResponseEntity.ok(loginResponse);
}
Frontend
AuthApi
import axios from "axios";
export async function login(username, phoneNumber, password) {
console.log(username, phoneNumber, password);
const { token } = await axios.post(
"http://localhost:8080/api/auth/login",
{
username,
phoneNumber,
password,
},
{
headers: {
"Content-Type": "application/json",
},
}
);
return token;
}
export async function signup(username, phoneNumber, password, balance) {
console.log(username, phoneNumber, password);
const response = await axios
.post(
"http://localhost:8080/api/auth/signup",
{
username,
phoneNumber,
password,
balance,
},
{
headers: {
"Content-Type": "application/json",
},
}
)
.then((response) => console.log(response));
console.log(response);
return response;
}
Logs
2025-06-10T17:45:35.898+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Detected DefaultRequestToViewNameTranslator
2025-06-10T17:45:35.898+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'beanNameViewResolver'
2025-06-10T17:45:35.898+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'mvcViewResolver'
2025-06-10T17:45:35.898+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'defaultViewResolver'
2025-06-10T17:45:35.898+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'viewResolver'
2025-06-10T17:45:35.898+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'thymeleafViewResolver'
2025-06-10T17:45:35.898+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'flashMapManager'
2025-06-10T17:45:35.898+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Detected SessionFlashMapManager
2025-06-10T17:45:35.898+03:00 DEBUG 35282 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : enableLoggingRequestDetails='true': request parameters and headers will be shown which may lead to unsafe logging of potentially sensitive data
2025-06-10T17:45:35.898+03:00 INFO 35282 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 1 ms
2025-06-10T17:45:35.902+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.w.s.f.OrderedRequestContextFilter : Bound request context to thread: org.apache.catalina.connector.RequestFacade@6947beb8
2025-06-10T17:45:35.902+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'springSecurityFilterChain'
2025-06-10T17:45:35.909+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'authenticationRestController'
2025-06-10T17:45:35.910+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.security.web.FilterChainProxy : Trying to match request against DefaultSecurityFilterChain defined as 'securityFilterChain' in [class path resource [com/epam/finaltask/config/SecurityConfig.class]] matching [any request] and having filters [DisableEncodeUrl, WebAsyncManagerIntegration, SecurityContextHolder, HeaderWriter, Cors, Logout, JwtAuthentication, RequestCacheAware, SecurityContextHolderAwareRequest, AnonymousAuthentication, SessionManagement, ExceptionTranslation, Authorization] (1/1)
2025-06-10T17:45:35.911+03:00 DEBUG 35282 --- [nio-8080-exec-1] o.s.security.web.FilterChainProxy : Securing OPTIONS /api/auth/signup
2025-06-10T17:45:35.911+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.security.web.FilterChainProxy : Invoking DisableEncodeUrlFilter (1/13)
2025-06-10T17:45:35.911+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.security.web.FilterChainProxy : Invoking WebAsyncManagerIntegrationFilter (2/13)
2025-06-10T17:45:35.912+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.security.web.FilterChainProxy : Invoking SecurityContextHolderFilter (3/13)
2025-06-10T17:45:35.912+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.security.web.FilterChainProxy : Invoking HeaderWriterFilter (4/13)
2025-06-10T17:45:35.913+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.security.web.FilterChainProxy : Invoking CorsFilter (5/13)
2025-06-10T17:45:35.924+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.s.w.header.writers.HstsHeaderWriter : Not injecting HSTS header since it did not match request to [Is Secure]
2025-06-10T17:45:35.924+03:00 TRACE 35282 --- [nio-8080-exec-1] o.s.b.w.s.f.OrderedRequestContextFilter : Cleared thread-bound request context: org.apache.catalina.connector.RequestFacade@6947beb8
I’m having an issue with Google Maps custom styled integration. When I open my HTML file directly using file:// protocol, the map looks crisp and perfect. But when I serve the same file through any web server (even localhost), the map quality becomes significantly worse and blurry. I’ve tried different servers and browsers but the problem persists. What could be causing this quality difference between local files and server-served content?
Any insights or solutions would be greatly appreciated!
Esta encuesta se diseñó para recopilar información sobre la implementación de lectores de códigos de barras en JavaScript. El objetivo principal de la encuesta es entender las necesidades y desafíos de los desarrolladores al implementar lectores de códigos de barras en aplicaciones web utilizando JavaScript.
recently I have update my angular to 19 but, for some reason I had to also migrate from browser builder to application builder, after I fixed all the circular dependencies in my app, now I am getting this weird error
ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')
at getComponentDef (core.mjs:1663:10)
at extractDirectiveDef (core.mjs:19345:10)
at core.mjs:19555:96
at Array.map (<anonymous>)
at core.mjs:19555:85
at createTView (core.mjs:11933:59)
at getOrCreateComponentTView (core.mjs:11971:24)
at createComponentLView (core.mjs:12001:17)
at instantiateAllDirectives (core.mjs:12389:5)
at createDirectivesInstances (core.mjs:12197:3)
| Promise.then | |
-- | -- | -- | --
| step | @ | chunk-YRJTWU7C.js:86
| (anonymous) | @ | chunk-YRJTWU7C.js:87
| __async | @ | chunk-YRJTWU7C.js:71
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Promise.then | |
| (anonymous) | @ | chunk-YRJTWU7C.js:87
| __async | @ | chunk-YRJTWU7C.js:71
| getSiteProperties | @ | app.component.ts:362
| _AppComponent | @ | app.component.ts:161
| AppComponent_Factory | @ | app.component.ts:123
| Zone - Promise.then | |
| (anonymous) | @ | localize-router.parser.ts:146
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Zone - Promise.then | |
| step | @ | chunk-YRJTWU7C.js:86
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Promise.then | |
| step | @ | chunk-YRJTWU7C.js:86
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Promise.then | |
| step | @ | chunk-YRJTWU7C.js:86
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Promise.then | |
| step | @ | chunk-YRJTWU7C.js:86
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Promise.then | |
| step | @ | chunk-YRJTWU7C.js:86
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Promise.then | |
| step | @ | chunk-YRJTWU7C.js:86
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Promise.then | |
| step | @ | chunk-YRJTWU7C.js:86
| (anonymous) | @ | chunk-YRJTWU7C.js:87
| __async | @ | chunk-YRJTWU7C.js:71
| fulfilled | @ | chunk-YRJTWU7C.js:74
| Promise.then | |
| (anonymous) | @ | chunk-YRJTWU7C.js:87
| __async | @ | chunk-YRJTWU7C.js:71
| init | @ | localize-router.parser.ts:67
| (anonymous) | @ | localize-router.parser.ts:478
| load | @ | localize-router.parser.ts:477
| appInitializer | @ | localize-router.module.ts:39
| (anonymous) | @ | localize-router.module.ts:119
| onDeviceReady | @ | main.ts:21
| (anonymous) | @ | main.ts:30
any Ideas why this happens? is it related to this library or something else is wrong?
I have fixed also all the circular dependencies using
thanks
npx madge --circular --extensions ts ./src
Processed 1260 files (39.1s) (583 warnings)
✔ No circular dependency found!
I reverted my builder to browser and the issue is fixed, but I need to use application builder to be able to silent the new sass warnings