Freelance Projects, Design and Programming Tutorials
I have implemented microsoft clarity using Google Tag Manager and currently I am not able to set the cookies as SameSite=None;Secure. I do not have any option in the clarity and google tag manager consoles.
How can I implement the cookies with SameSite=None and Secure?
I could set the cookies dynamically in my js but this might affect the clarity’s analysis and tracking. I’d prefer if I could set it in console or by some other way that doesn’t involve manually manipulating the cookie.
I am Derby. I am new in this community. I would need the help to modify the code for the display of the lenticular effect under the Canvas feature in the Html as the result of the demonstration on the website Lenti (https://danielgamage.github.io/lenti/). The source code is from the old project entitled “Lenti” (https://github.com/danielgamage/lenti?tab=readme-ov-file). I tried to combine the index.js into the html under one simple file to display lenticular effect in the html Canvas, but I cannot perform the same result as the demonstration on the website Lenti (https://danielgamage.github.io/lenti/). Attached is the source code. I wish the source code and files of the link from one old project would help you solve the problem and provide the solutions based on your specialty. Thank you.
<!DOCTYPE html>
<html>
<head>
<script>
/* global window */
class Lenti {
constructor (options) {
// Config
this.container = options.container
this.accelerometerEvents = (options.accelerometerEvents !== undefined)
? options.accelerometerEvents
: true
this.mouseEvents = (options.mouseEvents !== undefined)
? options.mouseEvents
: true
this.stripWidth = options.stripWidth || 16
this.height = options.height || 50
this.width = options.width || 50
this.tiltMax = options.tiltMax || 45
this.tiltMin = options.tiltMin || -45
this.init = this.init.bind(this)
this.sampleImages = this.sampleImages.bind(this)
this.getImage = this.getImage.bind(this)
this.handleSizing = this.handleSizing.bind(this)
this.getBoxPosition = this.getBoxPosition.bind(this)
this.checkVisibility = this.checkVisibility.bind(this)
this.bindEvents = this.bindEvents.bind(this)
this.destroy = this.destroy.bind(this)
this.redraw = this.redraw.bind(this)
this.handleMouse = this.handleMouse.bind(this)
this.handleOrientation = this.handleOrientation.bind(this)
this.remap = this.remap.bind(this)
}
// Initialize
init () {
this.images = [...this.container.querySelectorAll(`img`)]
this.imageCount = this.images.length
this.imageDataArray = [...Array(this.imageCount).keys()] // empty array w/ same length as this.images
this.container.innerHTML += `<canvas />`
this.canvas = this.container.querySelector(`canvas`)
this.ctx = this.canvas.getContext(`2d`)
this.tempCanvas = document.createElement(`canvas`)
this.tempCtx = this.tempCanvas.getContext(`2d`)
this.handleSizing()
this.bindEvents()
this.getBoxPosition()
this.checkVisibility()
}
// Sample image
sampleImages () {
this.images.map((imageEl, imageIndex) => {
if (this.imageDataArray[0]) {
this.getImage(imageEl, imageIndex)
} else {
imageEl.addEventListener(`load`, function () {
this.getImage(imageEl, imageIndex)
}.bind(this))
return imageEl
}
})
}
getImage (image, imageIndex) {
this.tempCtx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, this.canvasWidth, this.canvasHeight)
const currImageData = this.tempCtx.getImageData(0, 0, this.canvasWidth, this.canvasHeight)
this.imageDataArray[imageIndex] = new Uint32Array(currImageData.data.buffer)
}
// Handle window resize
handleSizing () {
// use offsetWidth bc clientWidth = 0 when resizing
// multiply by device pixel ratio to convert css pixels → device pixels
this.canvasWidth = Math.floor(this.canvas.offsetWidth * window.devicePixelRatio)
this.canvasHeight = Math.floor(this.canvasWidth * (this.height / this.width))
this.canvas.width = this.canvasWidth
this.canvas.height = this.canvasHeight
this.tempCanvas.width = this.canvasWidth
this.tempCanvas.height = this.canvasHeight
// Resample images
// careful on the fire rate here.
this.sampleImages()
this.imageData = this.tempCtx.getImageData(0, 0, this.canvasWidth, this.canvasHeight)
this.getBoxPosition()
}
getBoxPosition () {
const boxyRect = this.canvas.getBoundingClientRect()
this.box = {
top: boxyRect.top + window.pageYOffset
}
}
// Check if canvas is in view
checkVisibility () {
const vTop = window.pageYOffset
const vHeight = window.innerHeight
if (vTop + vHeight < this.box.top ||
this.box.top + this.canvasHeight < vTop) {
// viewport doesn't include canvas
this.visible = false
} else {
// viewport includes canvas
this.visible = true
}
}
// Event Binding
bindEvents () {
if (this.mouseEvents) {
this.canvas.addEventListener(`mousemove`, this.handleMouse)
}
if (this.accelerometerEvents) {
window.addEventListener(`deviceorientation`, this.handleOrientation)
}
window.addEventListener(`scroll`, this.checkVisibility)
window.addEventListener(`resize`, this.handleSizing)
}
// Event Unbinding
destroy () {
this.canvas.removeEventListener(`mousemove`, this.handleMouse)
window.removeEventListener(`deviceorientation`, this.handleOrientation)
window.removeEventListener(`scroll`, this.checkVisibility)
window.removeEventListener(`resize`, this.handleSizing)
}
// Redraw canvas
redraw (balance) {
// make sure data is loaded before redrawing
if (this.imageDataArray[0]) {
let data = this.imageData.data
let data32 = new Uint32Array(data.buffer)
const dataArray = this.imageDataArray
const canvasWidth = this.canvasWidth
const canvasHeight = this.canvasHeight
const stripWidth = this.stripWidth
const imageCount = this.imageCount
const addOn = (balance * (imageCount - 1))
for (let x = 0; x < canvasWidth; x++) {
const set = (x % stripWidth / stripWidth) + addOn
const setClamped = Math.floor(set)
for (let y = 0; y < canvasHeight; y++) {
const pixel = x + (canvasWidth * y)
data32[pixel] = dataArray[setClamped][pixel]
}
}
this.ctx.putImageData(this.imageData, 0, 0, 0, 0, this.canvasWidth, this.canvasHeight)
}
}
// Handle mouse events
handleMouse (e) {
const balance = this.remap(e.offsetX / this.canvasWidth, 0, 1, 1, 0)
this.redraw(balance)
}
// Handle device accelerometer events
handleOrientation (e) {
if (this.visible) {
const clamped = Math.min(Math.max(e.gamma, this.tiltMin), this.tiltMax)
const balance = this.remap(clamped, this.tiltMin, this.tiltMax, 1, 0)
this.redraw(balance)
}
}
// Map values from one range to another
remap (value, inLow, inHigh, outLow, outHigh) {
return outLow + ((value - inLow) * (outHigh - outLow) / (inHigh - inLow))
}
}
export default Lenti
</script>
</head>
<body>
global.window = global
document.body.innerHTML = `
<div data-lenticular-list="true" data-strip-width="8" data-tilt-min="-35" data-tilt-max="35">
<img src="./images/1.png" crossorigin="anonymous" alt="" width="1024" height="1024" />
<img src="./images/2.png" crossorigin="anonymous" alt="" width="1024" height="1024" />
<img src="./images/3.png" crossorigin="anonymous" alt="" width="1024" height="1024" />
<img src="./images/4.png" crossorigin="anonymous" alt="" width="1024" height="1024" />
</div>
`
const el = document.querySelector('[data-lenticular-list]')
const testInstance = new Lenti({
container: el,
tiltMax: el.getAttribute('data-tilt-max'),
tiltMin: el.getAttribute('data-tilt-min')
})
describe("Lenti", () => {
it('instantiates properly', () => {
expect(testInstance).toBeInstanceOf(Lenti)
})
it('initializes without error', () => {
testInstance.init()
})
})
describe("remap", () => {
it('maps values from one range to another', () => {
expect(testInstance.remap(5, 0, 10, 0, 100)).toEqual(50)
expect(testInstance.remap(9, 0, 100, 0, 2)).toEqual(0.18)
expect(testInstance.remap(7.5, 5, 10, 0, 2)).toEqual(1)
});
})
</body>
</html>
I’m trying to figure out how Promises work with multiple HTTPS requests in Javascript, but I have a problem where the results seem out of order with the request sequence. I’m using an ASP.NET Controller API implementation for a simple calculator, and Javascript to access the API. I seem to have a synchronization issue, but I can’t for the life of me work out why.
The CalculatorController:
using Microsoft.AspNetCore.Mvc;
namespace Wolflight.Calculator.Controllers
{
[ApiController]
[Route("[controller]")]
public class CalculatorController : Controller
{
private const string TotalName = "Total";
private decimal RetrieveTotal()
{
return ToDecimal(HttpContext.Session.GetString(TotalName));
}
private void StoreTotal(decimal value)
{
HttpContext.Session.SetString(TotalName, FromDecimal(value));
}
private static string FromDecimal(decimal value)
{
return value.ToString();
}
private static decimal ToDecimal(string? value)
{
if (value != null)
{
return Decimal.Parse(value);
}
else
{
return 0M;
}
}
[HttpGet()]
[Route("/api/Calculator/Total")]
public decimal? GetTotal()
{
return RetrieveTotal();
}
[HttpPut()]
[Route("/api/Calculator/Add")]
public void AddValue(decimal value)
{
StoreTotal(RetrieveTotal() + value);
}
[HttpPut()]
[Route("/api/Calculator/Subtract")]
public void SubtractValue(decimal value)
{
StoreTotal(RetrieveTotal() - value);
}
[HttpPut()]
[Route("/api/Calculator/Multiply")]
public void MultiplyValue(decimal value)
{
StoreTotal(RetrieveTotal() * value);
}
[HttpPut()]
[Route("/api/Calculator/Divide")]
public void DivideValue(decimal value)
{
StoreTotal(RetrieveTotal() / value);
}
}
}
The site.js:
const uriBase = "/api/Calculator/";
const uriTotal = uriBase + "Total";
const uriAdd = uriBase + "Add";
let GetTotalValuePromise = function () {
return new Promise(function (myResolve, myReject) {
let total = fetch(uriTotal)
.then(response => response.text())
.catch(error => myReject('Unable to get total.', error));
myResolve(total);
})
};
let PutAddValuePromise = function (addValue) {
return new Promise(function (myResolve, myReject) {
fetch(uriAdd + '?value=' + addValue, { method: 'PUT' })
.catch(error => myReject('Unable to add value.', error));
myResolve();
}
)
};
function DisplayTotal(total) {
const tBody = document.getElementById('totalDisplay');
tBody.innerHTML = total;
}
function GetTotal() {
UpdateDisplay();
}
function AddValue() {
let value = document.getElementById('addValue').value;
PutAddValuePromise(value)
.then(function () {
UpdateDisplay();
});
}
function UpdateDisplay() {
GetTotalValuePromise()
.then(
function (total) { DisplayTotal(total); },
function (message, error) { console.error(message, error); }
)
}
When I call AddValue() from a form button, the result is that sometimes the /Total call returns the value before the /Add occurs, and sometimes it returns the result after.
e.g.
Total = 0AddValue, with element addValue as 5.Network Requests:
/Add?value=5 (no response)/Total – Response: 0.OR
Network Requests:
/Add?value=5 (no response)/Total – Response: 5.Am I missing something in how Promises work, or is the problem on the server side?
If I call GetTotal manually after the AddValue, it always returns the correct value.
You are given a string S made of lowercase letters (‘a’-‘z’ and question marks (‘?’). You must replace each question mark in S with any lowercase letter. You are also given an integer K. After replacing the question marks, you may replace at most K characters in S with any lowercase letter.
Write a function that, given a string S of length N and an integer K, returns any palindrome that can be obtained by performing the operations described above. If it is not possible to obtain a palindrome from S, the function should return the string “NO”.
A palindrome is a string that reads the same both forwards and backwards. Some examples of palindromes are: “kayak”, “abba”,”zaz”.
Examples:
Assume that:
N is an integer within the range [1 ..1,000];
K is an integer within the range [0 .. N];
String S is made only of lowercase English letters (‘a’-‘z’) and/or ‘?’ characteers.
In your solution, focus on correctness. The performance of your solution will not be the focus of the assessment.
Sorry I have not made any attempt.
In the below the screen shot , mentioned nested element as child array.
I wanted to remove child array element , I used below the script but it’s only remove first element.
removeChildWidget(parIndex:number,index:number){
if (parIndex >= 0) {
const widgetNumber = this.dashRightWidget[parIndex]?.widgetNumber;
const widgeDashtNumber = this.dashboardWidgets[parIndex]?.widgetNumber;
this.widgets.forEach((widget) => {
if (widget.widgetNumber == widgeDashtNumber) {
console.log("wid",widget.child[index])
if (index >= 0) widget.child.splice(index, 1)
console.log("wid",widget)
}
});
console.log('final output', this.dashboardWidgets)
}
}
I import a list of companies and internships in the backend as shown:
{
"companies": [
{
"companyID": 1,
...
}
],
"internships": [
{
"internshipID": 1,
...
}
]
}
Btw this is saved as companies:
const [companies, setCompanies] = useState([])
my useEffect:
useEffect(() => {
const fetchCompanies = async () => {
try {
const data = await companyService.getAll();
console.log('Fetched Companies:', data);
setCompanies(data);
setLoading(false);
} catch (error) {
console.error('Error fetching data:', error);
setError('Error fetching data');
setLoading(false);
}
};
fetchCompanies();
}, []);
I then use this code to filter through the arrays when someone searches for a specific one (just for companies):
const companiesArray = companies["companies"]
const filteredCompanies = companiesArray.filter(company =>
company[searchBy]?.toLowerCase().includes(searchTerm.toLowerCase())
);
console.log('Filtered Companies:', filteredCompanies)
I then get the error that companies.filter isnt a function and im not sure why
Since companies is an array, so i thought this should work. What should i try?
I import a list of companies and internships in the backend as shown:
{
"companies": [
{
"companyID": 1,
...
}
],
"internships": [
{
"internshipID": 1,
...
}
]
}
Btw this is saved as companies:
const [companies, setCompanies] = useState([])
I then use this code to filter through the arrays when someone searches for a specific one (just for companies):
const companiesArray = companies["companies"]
const filteredCompanies = companiesArray.filter(company =>
company[searchBy]?.toLowerCase().includes(searchTerm.toLowerCase())
);
console.log('Filtered Companies:', filteredCompanies)
I then get the error that companies.filter isnt a function and im not sure why
Since companies is an array, so i thought this should work. What should i try?
Design a responsive dashboard with the following sections a header sidebar main content area and three widgets that stack horizontally.
answers with code hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhh hhh hhhh hhhhh hhhhhh hhh hhhhhh hhhhh hhhh hhhh h h hh hh hh hh hh hh h h h h hhhh hhhhhhhhhh
I’m building a weather forecast application using Express.js and EJS templates (for my college’s class). Currently, my console.log statements in server.js are only visible in the terminal/server console. I want to make these logs visible in the browser’s developer tools console for debugging purposes.
Here’s my current codes:
server.js:
import express from 'express';
import bodyParser from 'body-parser';
import path from 'path';
import axios from 'axios';
const app = express();
const API_KEY = 'MY_API_KEY_FOR_OPENWEATHERMAP';
const PORT = 3000;
// Add these middleware configurations before your routes
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// define the __dirname
const __dirname = path.resolve();
async function getForecast(city) {
const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${API_KEY}&units=metric`;
// fetch version
// const response = await fetch(url);
// const data = await response.json();
// axios version
const response = await axios.get(url);
const data = response.data;
if (data.cod !== '200') {
throw new Error(data.message);
}
return data;
}
app.get('/', (req, res) => {
res.render(__dirname + '/weather.ejs');
});
app.post('/', async (req, res) => {
try {
const { city } = req.body;
if (!city) {
return res.status(400).render(__dirname + '/weather.ejs', {
error: 'City name is required'
});
}
const forecast = await getForecast(city);
const dailyForecasts = forecast.list.filter((f, i) => i % 8 === 0);
res.render(__dirname + '/weather.ejs', {
city: forecast.city.name,
forecasts: dailyForecasts
});
} catch (error) {
res.render(__dirname + '/weather.ejs', {
error: error.message
});
}
});
app.listen(PORT, () => {
console.log(`Port ${PORT} is running.`);
});
weather.ejs
<!DOCTYPE html>
<html>
<head>
<title>5-Day Weather Forecast</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.forecast-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.forecast-card {
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
background: #f5f5f5;
}
.error {
color: red;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Weather Forecast</h1>
<form action="/" method="POST">
<input type="text" name="city" placeholder="Enter city name">
<button type="submit">Get Forecast</button>
</form>
<% if (locals.error) { %>
<div class="error"><%= error %></div>
<% } %>
<% if (locals.forecasts) { %>
<% console.log(locals.forecasts) %>
<h2>5-Day Forecast for <%= city %></h2>
<div class="forecast-grid">
<% forecasts.forEach(forecast => { %>
<div class="forecast-card">
<h3><%= new Date(forecast.dt * 1000).toLocaleDateString() %></h3>
<p>Temperature: <%= forecast.main.temp %>°C</p>
<p>Weather: <%= forecast.weather[0].main %></p>
<p>Humidity: <%= forecast.main.humidity %>%</p>
<p>Wind Speed: <%= forecast.wind.speed %> m/s</p>
</div>
<% }) %>
</div>
<% } %>
</div>
</body>
</html>
(My Local environment)
In my `weather.ejs` file, I used `<% console.log(locals.forecasts) %>` hoping to see the output in the browser’s console. However, it only shows up in my VSCode terminal instead.
How can I get the output to appear in the browser’s console?
I’m attempting to create a line graph that should show an x and y axis that are both numbers to the second decimal. Say I pass a min of 0.0345 and a max of 5.2345, I would expect the first number on the x axis to be 0.035 and the last number on the x axis to be 5.23, however it shows me 0.00 and 6.00, why is this happening?
here is the xaxis portion of my chart options:
xaxis: {
type: 'category',
categories: [],
min: this.min,
max: this.max,
stepSize: 0.5,
title: {
text: 'Label'
},
labels: {
formatter: function (val) {
return val.toFixed(2);
}
},
}
Another thing that’s happening is that the stepSize option doesn’t do anything! I am trying to do steps by .5 but it still steps up by whole integers. Any idea why?
Can share whatever code is relevant, let me know
I’ve been learning React (kind of new to it) and I’m working on a project and I did an npm create vite@latest. So far everything works fine when I do run dev. However when I do run build, then go to the dist folder and open the index.html file I get a blank page.
So I do an inspect page in FireFox and I get these errors –
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resources at file:///assets/index-J7cny882.js. (Reason: CORS request not http)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resources at file:///assets/index-BAXwXR6k.css. (Reason: CORS request not http)
I’m bit puzzled by this. Don’t know whats wrong or how to fix it. I did come across some things online that mentioned adding “homepage”: “.” to package.json. I did that but didn’t help.
I appreciate the help.
Thanks.
I am overall happy with using flexslider on mobile. However, I have implemented an overflow scroll on my horizontal thumbnails on mobile (They’re css’d to sit horizontally below the current slide). When I drag on the overflowed thumbnails, left or right, it progresses the current slide to the next/previous and won’t allow the overflow containing the thumbnails to be scrolled.
Current slide with thumbnails below
How can I disable the events causing the slider to progress to the next/previous slide when dragging on the current thumbnails? I only want the slider to progress on a thumbnail click.
I’ve tried the woocommerce_single_product_photoswipe_options and woocommerce_single_product_carousel_options filters which did not seem to have what I needed. A thread suggested dequeuing and enqueuing a custom woocomerce flexslider.js file but I’d like to avoid this.
On an ESP32, I have developed a wireless web server from scratch using micropython. Please correct me if I’m wrong, but I think using libraries like Flask and JQuery is not possible.
I’ve had lots of trouble running out of memory composing HTML pages. Currently, keeping an HTML page under 10k bytes avoids trouble. I use javascript as much as possible to reduce the HTML size and improve response time.
I need a dialog that has about 6 buttons. Each button posts a message to the server instructing a simple action.
I would like to do something like the following, which does not work.
dialog = document.createElement('dialog');
document.appendChild(dialog);
closeButton = document.createElement("button");
closeButton.innerHtml = "Close";
closeButton.onclick = function() {
// figure out how to close this dialog
}
dialog.appendChild(closeButton);
dialog.showModal();
Any advice or a pointer to a useful tutorial will be greatly appreciated.
As a learning exercise, I’m making a Javascript browser game where when the user presses a button, it simulates rolling several 6-sided dice and then shows images that correspond to the random value rolled on each dice. I have the basic functionality working. However, rather than immediately showing the end result of each dice, I want to have each dice image cycle through several different values before finally stopping on the end result, in the hopes that this will aesthetically feel more like rolling dice.
I’m trying to follow OOP, so I have the relevant objects and methods in a DiceGame class. To asynchronously let the dice images cycle without freezing all other functionality, I was thinking of using the setTimeout function.
Here’s a simplified version of what I’ve tried:
class DiceGame {
constructor() {
this.diceArray = [new Dice('dice01'), new Dice('dice02')]
}
rollAllDice(tumblesRemaining, tumbleDelay) {
for (let index in this.diceArray) {
this.diceArray[index].roll() //this randomizes the value & image of a single Dice object
}
if (tumblesRemaining > 0) {
function nextRecursiveFunction() {
this.rollAllDice(tumblesRemaining-1, tumbleDelay+100);
}
setTimeout(nextRecursiveFunction, tumbleDelay);
}
}
playGame()
{
this.rollAllDice(10, 100);
}
}
const game = new DiceGame()
game.playGame()
The intention is that this would do something like this:
…and while it does this, it wouldn’t be blocking any other functionality that the game has.
However, the actual code fails. My understanding is that when methods are called as callbacks, the callback doesn’t have access to an instantiated object to use as the context for that method, and thus it can’t access members. So when nextRecursiveFunction is called as a callback by setTimeout, it no longer sees itself as being within the scope of game, and because of that there is no this.rollAllDice function to call. This causes the failure.
I’ve tried to find solutions. I’ve found posts that have demonstrated how to call methods with parameters, I’ve found posts that have demonstrated how to call a single method as a callback, and I’ve found posts that demonstrate how to perform recursion with callbacks. However, I haven’t found a way to have an object recursively call its own method via callbacks without losing access to its members.
So I have two questions:
And in case it helps, I want to clarify that I’m less interested in this specific problem and more interested in learning best practices and growing my understanding of JavaScript problem-solving. I just want to leverage this particular problem as a learning opportunity.
I’m quite new to AWS, so I’m still learning stuff as I go.
I work on a project where we have multiple environments.
A while ago, I made some changes where I implemented some logic using ServerSentEvents in an Express.js server.
It was working excellent locally, but once I deployed my code to a test environment, the events were not sent anymore to the client, as they were blocked somehow. It took me a lot of time to find what the issue was, almost gave up to SSE, until finally I stumbled across an answer where that person was saying that there should be a setting enabled in AWS to allow the events to be sent.
Now, we have to launch another instance and I need to enable that setting again. The problem is I don’t remember at all where that setting was and I can’t find anything on the internet about this.
Could anyone show me where to find it in AWS Console? I’m going nuts right now!