Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
so basically i want to do a text sliding down from outside of the screen then the text turns to a video which is only displayed in the background of the text, like this video here: https://www.youtube.com/watch?v=n_9UKMDEYg0
I’m facing problem with the transition from normal text to text with a video background, i know that i can do it simply with mix-blend-mode but it isn’t animation properly, can someone help, I’ll provide code if needed.
I’ve created a Puppeteer script that navigates to a website, performs searches over a range of dates, downloads PDFs, and writes certain data to a CSV file. The script is supposed to run for long periods, handling large volumes of searches and downloads. However, after around an hour of runtime, I receive a “Not enough memory to open this page” error in the browser.
My environment consists of an Azure VPS with the following specifications:
The script is a Node.js code that automates the process of logging into the Tulsa County Acclaim Web portal, searching for, downloading, and recording details of public records into a CSV file, while handling downloads, pagination, and date-based incremental searches with robust error handling and stealth browsing features.
Here is my Puppeteer code:
(async () => {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
// Other launch options...
});
const page = await browser.newPage();
// Login and navigation logic...
while (/* condition for looping over dates */) {
// Date logic and search initiation here...
try {
for (let iPage = 0; /* pagination handling */) {
// Fetching and processing data...
// Opening new tabs and downloading PDFs...
// Handling tab for PDF download
// opens new page
// May elements are listed as Table format and I click one element ad go to newTab
let newTabPromise = new Promise((resolve) => browser.once('targetcreated', resolve));
let newTarget = await newTabPromise;
let newTab = await newTarget.page(); // Dereference the new target as a Page object.
if (newTab){
// Sample handling for another action requiring a new tab, 'newNewTab'
let newNewTab = await browser.newPage();
if (newNewTab){
// Logic specific to 'newNewTab'...
// I could get pdf file in this newNewTab, so open newNewTab and download pdf file
await newNewTab.close();
}
await newTab.close();
}
}
// Data processing and CSV writing after closing tabs to conserve memory...
} catch (e) {
console.error(e);
}
// Increment date logic...
}
// Consider adding browser.close() here to ensure the browser closes when the loop is complete.
})();
Reference this full code: https://github.com/flurryunicorn/county-lib-scraper/tree/main/tulsa_county
I suspect the memory issue might be related to opening and closing many tabs or perhaps some uncollected garbage in the Puppeteer/Node.js environment. Could the way I’m handling the downloads or the constant opening and closing of tabs be leading to the memory leak?
Is there any practice or Puppeteer setting recommended for long-running tasks like this to avoid memory leaks or any specific parts of my approach I should reconsider?
See below for my YAML code that I have in Azure pipeline, it is based off of a pipeline I created that works great for building and deploying.
I’m hoping to create a new pipeline that triggers when there is a PR to the “main” branch, and it builds the branch in the PR to see if there are any build issues before we merge it with the “main” branch. I believe the name for this is Build Validation, but I’m stuck with creating the pipeline. Or is this right and I need to handle this with settings in the build validation setup?
I tried to update the YAML so it only runs when a PR is created, I think that part is okay. But I can’t seem to figure out how to cancel the deployment part. The changes I make keep breaking in the build process of my existing normal pipeline.
name: Azure Static Web Apps CI/CD
pr:
branches:
include:
- main
trigger: none
jobs:
- job: build_and_deploy_job
displayName: Build and Deploy Job
condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
pool:
vmImage: ubuntu-latest
variables:
- group: Azure-Static-Web-Apps
steps:
- checkout: self
submodules: true
- task: AzureStaticWebApp@0
inputs:
azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "" # Built app content directory - optional
env:
NEXT_PUBLIC_OPENAI_KEY: $(NEXT_PUBLIC_OPENAI_KEY)
###### End of Repository/Build Configurations ######
I use fabric.js 5.3.0 and i’m trying to create a custom temperature filter, I understand that fabric.js had many API changes, i tried to search online and nothing quite works. so lets see what I’ve got so far.
so every search i did, or every bot i asked gave me a different answer which is very confusing. i want to create a temperature custom filter that is based on canvas2d and not webgl because.. well i don’t know webgl!
if something like that is not that complicated in webGL and can someone provide an example it would be great…
i understand that applyTo2d function is supposed to be executed and with that i can get the image data and manipulate it? but in my case only the applyTo function is being called, i assume it’s because it still works with webGL and not canvas. i may be wrong i investigated a lot and got different information every time so still confused.
i tried some code suggestions to disable webGL for this filter but nothing made much sense.
this is the code that I have so far:
//@ts-ignore
fabric.Image.filters.Temperature = fabric.util.createClass({
type: 'Temperature',
initialize: function(options: any) {
options = options || {};
this.temperature = options.temperature || 0;
},
applyTo: function(options: any) {
var imageData = options.imageData,
data = imageData.data,
i, len;
for (i = 0, len = data.length; i < len; i += 4) {
data[i] += this.temperature;
data[i + 2] -= this.temperature;
}
},
toJSON: function() {
return {
temperature: this.temperature
};
}
});
// @ts-ignore
fabric.Image.filters.Temperature.fromObject = function(object) {
// @ts-ignore
return new fabric.Image.filters.Temperature(object);
};
i’m sure i tried many other things.. i’m at this issue over a week i’m just confused from all the scrambled information i got so far.
so in general i would like to know how to create a custom filter, and i’m pretty sure that learning webGL will complicate things, but if the image manipulation part is as easy as canvas.. cool if not.. l need the canvas solution.
https://i.imgur.com/UvZOWXr.gif
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
I am trying to get my button to signInWithPopup when clicked but it is not working. I have firebase configured as it should be with the authentication sign-in methods enabled as well as my firestore database enabled. The code below will show you what I have and yet when I click the button nothing happens.
I am doing my own website but I am haveing problems with one js file that use scrollspy and returns the error “TypeError: a(…).scrollspy is not a function”.
This is the script:
!function(a) {
"use strict";
a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^//, "") == this.pathname.replace(/^//, "") && location.hostname == this.hostname) {
var o = a(this.hash);
if ((o = o.length ? o : a("[name=" + this.hash.slice(1) + "]")).length)
return a("html, body").animate({
scrollTop: o.offset().top - 54
}, 1e3, "easeInOutExpo"),
!1
}
}),
a(".js-scroll-trigger").click(function() {
a(".navbar-collapse").collapse("hide")
}),
a("body").scrollspy({
target: "#mainNav",
offset: 56
});
var o = function() {
a("#mainNav").offset().top > 100 ? a("#mainNav").addClass("navbar-shrink") : a("#mainNav").removeClass("navbar-shrink")
};
o(),
a(window).scroll(o),
a(".portfolio-modal").on("show.bs.modal", function(o) {
a(".navbar").addClass("d-none")
}),
a(".portfolio-modal").on("hidden.bs.modal", function(o) {
a(".navbar").removeClass("d-none")
})
}(jQuery);
And this is the HTML
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
<div class="container">
<a class="js-scroll-trigger" href="#page-top">
HOME
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#information">Information</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#curriculum">Curriculum</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#proyectos">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
I am using this imports (I reade in some webs that it is an imports problem)
<!-- Bootstrap core JavaScript -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="jquery.easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/portfolio.js"></script>
But it continues failing, so I do not know what to do.
I’ve tried to use some JS function in order to create simple animations – what I’m doing wrong? I cannot see any effect and I’m new to JS. In theory that function should find DOM and change inner HTML in given speed.
Code for script (scripts/asci_animation.js):
function ASCIIAnimation(animArray, speed, DOMtarget) {
var currentFrame = 0;
for(var i = 0; i < animArray.length; i++) {
animArray[i] = animArray[i].replace(/ /g," ");
animArray[i] = "<pre>" + animArray[i] + "</pre>";
}
DOMtarget.innerHTML = animArray[0];
currentFrame++;
this.animation = setInterval(function() {
DOMtarget.innerHTML = animArray[currentFrame];
currentFrame++;
if(currentFrame >= animArray.length) currentFrame = 0;
}, speed);
this.getCurrentFrame = function() {
return currentFrame;
}
}
ASCIIAnimation.prototype.stopAnimation = function() {
clearInterval(this.animation);
}
var animArray1 = ["///","|||","\\\","|||"];
var anim1 = new ASCIIAnimation(animArray1, 200, "anim");
part of HTML that should contain text:
text1
<div id="anim"></div>
text2
<script type="text/javascript" src="scripts/asci_animation.js"></script>
Can you tell me how to make it visible/working?
I’ve tried to use code mentioned above with multiple changes. Original code comes from //https://codepen.io/alan8r/pen/VjRrZj. No errors in console. Tried to put script type…src before and after .
I came across the following code and it obviously emit notification-alert event and an object as a parameter
this.$root.$emit('notification-alert', {
text,
type: 'warning',
click: () => this.unselect(file),
});What I don’t understand is this line click: () => this.unselect(file)
so basically i want to do a text sliding down from outside of the screen then the text turns to a video which is only displayed in the background of the text.
I’m facing problem with the transition from normal text to text with a video background, i know that i can do it simply with mix-blend-mode but it isn’t animation properly, can someone help, I’ll provide code if needed.
I’m trying to build a customizable library with different types of buttons. I’m using cva (class-variance-authority) to implement the variants. Currently having trouble trying to define the outline variant, I would like the button to change, on hover, from a transparent background to the background color specified in colors, similar to bootstrap. Is there a proper way to do it? I’m a newbie just getting started with tailwindcss.
Here is the code of variants.ts that implements the different buttons.
import { cva } from "class-variance-authority";
/**
* Button styles for the Button component.
*/
export const buttonStyles = cva(
"flex flex-row gap-x-4 disabled:cursor-not-allowed items-center justify-center",
{
variants: {
buttonType: {
primary: "hover:bg-opacity-75",
outline: "bg-transparent", // outline variant
warning: "border-yellow-500 hover:bg-yellow-600",
disabled: "bg-black text-white border-black cursor-not-allowed",
error: "bg-red-500 text-white border-red-500 hover:bg-red-600",
},
color: {
default: ["text-white", "bg-black", "border-black"],
black: ["text-white", "bg-black", "border-black"],
white: ["text-black", "bg-white", "border-white"],
gray: ["text-gray-500", "bg-gray-200", "border-gray-500"],
red: ["text-red-500", "bg-red-200", "border-red-500"],
yellow: ["text-yellow-500", "bg-yellow-200", "border-yellow-500"],
green: ["text-green-500", "bg-green-200", "border-green-500"],
blue: ["text-blue-500", "bg-blue-200", "border-blue-500"],
indigo: ["text-indigo-500", "bg-indigo-200", "border-indigo-500"],
purple: ["text-purple-500", "bg-purple-200", "border-purple-200"],
pink: ["text-pink-500", "bg-pink-200", "border-pink-200"],
teal: ["text-teal-500", "bg-teal-200", "border-teal-200"],
orange: ["text-orange-500", "bg-orange-200", "border-orange-500"],
},
size: {
default: ["text-base"],
small: ["text-sm"],
large: ["text-lg"],
xxl: ["text-2xl"],
},
spacing: {
default: ["py-2", "px-4"],
small: ["py-1", "px-2"],
large: ["py-3", "px-6"],
xxl: ["py-4", "px-8"],
},
rounded: {
default: "rounded-md",
sm: "rounded-sm",
lg: "rounded-lg",
xl: "rounded-xl",
xxl: "rounded-2xl",
none: "rounded-none",
full: "rounded-full",
},
},
compoundVariants: [
{
buttonType: "primary",
size: "default",
color: "default",
spacing: "default",
rounded: "default",
},
],
defaultVariants: {
buttonType: "primary",
size: "default",
color: "default",
rounded: "default",
spacing: "default",
},
}
);
// linkedlist.hpp
#pragma once
#include <napi.h>
#include <variant>
class ListTest : public Napi::ObjectWrap<ListTest>
{
private:
struct Node{
std::variant<Napi::Value, Napi::Object, Napi::Array, Napi::String> data;
std::shared_ptr<Node> next;
Node(Napi::Value v, std::shared_ptr<Node> node);
Node(Napi::Value v);
Node();
};
std::shared_ptr<Node> head;
public:
int list_size = 0;
ListTest(const Napi::CallbackInfo& info);
static Napi::Object Init(Napi::Env env, Napi::Object exports);
Napi::Value size(const Napi::CallbackInfo& info);
Napi::Value peek(const Napi::CallbackInfo& info);
Napi::Value addHead(const Napi::CallbackInfo& info);
Napi::Value removeHead(const Napi::CallbackInfo& info);
Napi::Value isPresent(const Napi::CallbackInfo& info);
};
// linkedlist.cc
#include "actual-list.h"
#include <iostream>
Napi::Object ListTest::Init(Napi::Env env, Napi::Object exports){
Napi::Function func = DefineClass(env, "ListTest",{
InstanceMethod("addHead", &ListTest::addHead),
InstanceMethod("size", &ListTest::size),
InstanceMethod("peek", &ListTest::peek)
}
);
exports.Set("ListTest", func);
return exports;
}
// Define the constructor
ListTest::ListTest(const Napi::CallbackInfo& info) : Napi::ObjectWrap<ListTest>(info) {}
// Define the Node
ListTest::Node::Node(Napi::Value v, std::shared_ptr<Node> node){
data = v;
next = node;
}
ListTest::Node::Node(Napi::Value v){
data = v;
next = nullptr;
}
ListTest::Node::Node(){
next = nullptr;
}
// add Head
Napi::Value ListTest::addHead(const Napi::CallbackInfo& info)
{
Napi::Env env = info.Env();
Napi::Value input = info[0];
auto newNode = std::make_shared<Node>(input, head);
newNode->next = head;
head = (newNode);
list_size++;
return input;
}
Napi::Value ListTest::peek(const Napi::CallbackInfo& info)
{
Napi::Env env = info.Env();
if (head == nullptr)
{
return env.Null();
}
if (std::holds_alternative<Napi::String>(head->data)){
return Napi::Value::From(env, std::get<Napi::String>(head->data));
}
if (std::holds_alternative<Napi::Array>(head->data)){
return Napi::Value::From(env, std::get<Napi::Array>(head->data));
}
return Napi::Value::From(env, std::get<Napi::Object>(head->data));
}
Napi::Value ListTest::size(const Napi::CallbackInfo& info)
{
return Napi::Number::From(info.Env(), list_size);
}
// lib.js
const {ListTest} = require("../build/Release/dsa-native.node");
const node = new ListTest()
console.log(node.addHead("hello"))
console.log(node.peek(),"head")
console.log(node.size())
// output
hello
ListTest {} head
1
[Object] returned when I access it. The work around this was to convert all the values into strings before inserting them into the vector. While makes insertion too slow./**
* Sets the value at a specific index.
* @param {number} index - The index to set the value at.
* @param {any} val - The value to set.
* @returns {void}
* @throws {RangeError} If the index is out of bounds.
* @throws {Error} If JSON stringification fails.
* @timeComplexity O(n) - Linear search to reach the index.
*/
set(index, val) {
this.list.set(index, JSON.stringify(val));
}
I’m updating an old Ionic + Angular app, and am seeing a strange behaviour: elements made draggable with Interact.js will drag for a few hundred milliseconds, only to abort prematurely and fire the dragend event. The strange part is that the behaviour is only visible when testing the app in an android device, and in chrome via ionic serve. Firefox via ionic serve works fine!
I’ve tried to isolate this as much as I can, running exactly the example from the docs within a component in my Ionic 7 + Angular 17 + Capacitor 6 app:
package.json:
"@interactjs/types": "^1.10.26",
"interactjs": "^1.10.26",
component:
import interact from 'interactjs';
...
const position = { x: 0, y: 0 }
interact('#test-draggable').draggable({
listeners: {
start (event) {
console.log(event.type, event.target)
},
move (event) {
position.x += event.dx
position.y += event.dy
event.target.style.transform =
`translate(${position.x}px, ${position.y}px)`
},
}
})
…to no avail! can anyone else reproduce this? it’s like all you can do is nudge elements a few pixels. i’m at a point where i don’t know what i’m missing, and i really don’t want to rewrite this thing using a different dragging library. perhaps something about angular change detection?
thanks in advance everyone! take good care.
My UI is pretty simple.
I have to set a start time first, and thne select a service. When changing the service, I make a backend call to get how long the service takes. From the backend end I would get back a string value like this: “10” which means 10 minutes. “60” = 60 minutes. “90” = 1 hour 30 miiuntes etc.
My code is simple.
var startDateAppt = $("#apptStartTime").val();
var date = new Date(startDateAppt);
var endDate = date.toISOString() + 10*60000;
$("#apptEndTime").val(endDate.toISOString());
However, I am getting an error..
endDate.toISOString is not a function
I can not figure out why this is happening to it…
i give the background style and when i click on the element the color will change but right after that it get back to the previous color
navListMenuItems.map(
({ icon, title, description, id }, key) => (
< a href="#" key={key} >
<MenuItem onClick={ (event) => {
event.currentTarget.style.backgroundColor = 'salmon'
}} className="flex items-center gap-3 rounded-lg hover:bg-lightbluebg py-[8px] pl-[20px]">
<div className={key === 0 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-naviconpurple p-2" : (key == 1 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-navicondarkblue2x p-2" : (key == 2 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-naviconorange p-2" : (key == 3 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-naviconlightblue p-2" : (key == 4 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-navicongreen p-2" : (key == 5 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-navicondarkblue2x p-2" : (key == 6 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-naviconorange p-2" : (key == 7 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-naviconpurple p-2" : (key == 8 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-navicongreen p-2" : (key == 9 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-navicondarkblue2x p-2" : (key == 10 ? "w-[43px] flex items-center justify-center rounded-[50%] !bg-naviconorange p-2" : "w-[43px] flex items-center justify-center rounded-[50%] !bg-naviconpurple p-2"))))))))))}>
{" "}
{React.createElement(icon, {
strokeWidth: 1,
className: "h-6 text-mainblack w-6 text-white border-none",
})}
</div>
<div>
<h6
className="flex items-center text-sm font-bold transition-colors ease duration-300 text-[15px]"
>
{title}
</h6>
<p
className="text-xs !font-medium text-textgrey mt-1"
>
{description}
</p>
</div>
</MenuItem>
</a >
),