Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
my code is
if(name === 'banana' || name === 'orange') //do something
the word “name” is in my code twice, is there something that I can do to do not repeat it? if I do
if(name === 'banana' || 'orange')
the computer doesn’t understand, maybe there is another way that i dont know yet,
thanks very much
We are keeping my WebDriverIO based automated test scripts in network drive, so that my team mates can also access and run the scripts when needed.
However when we try to run the script from the shared location, it doesn’t trigger and takes a long time without any further information, and eventually we need to abort it.
As you see in the below image, node_modules are also available in the shared folder at the same location.
Please suggest what is the best way to run the test scripts in this kind of set up?
I’m trying to deploy my app to Heroku, it runs fine locally. I’m getting the error in the logs after the build:
heroku[router]: at=info method=GET path="/" host=appname.herokuapp.com fwd="xx.xxx.xxx.xxx" dyno=web.1 connect=0ms service=8ms status=404 bytes=415 protocol=https
When trying to view the app I get the cannot GET / error, I’ve looked through a bunch of similar errors & can’t find where I’m going wrong.my app.js file is located at ./server/app.js
app.js
const express = require("express");
const http = require("http");
var cors = require("cors");
const morgan = require("morgan");
const bodyParser = require("body-parser");
const path = require("path");
const mongoose = require("mongoose");
const createError = require("http-errors");
const { Router } = require("express");
let codeRoutes = require("./api/code-routes.js");
/**
* App configurations
*/
let app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(morgan("dev"));
app.use(cors());
app.use(express.static(path.join(__dirname, "../dist/my-app")));
app.use(
"/",
express.static(path.join(__dirname, "../dist/my-app"))
);
/**
* Variables
*/
const MONGODB_URI =
"myMongoDBConnString";
/**
* Database connection
*/
mongoose
.connect(MONGODB_URI, {
promiseLibrary: require("bluebird"),
useUnifiedTopology: true,
useNewUrlParser: true,
})
.then(() => {
console.debug(`Connection to the database instance was successful`);
})
.catch((err) => {
console.log(`MongoDB Error: ${err.message}`);
}); // end mongoose connection
app.use("/api", myApi);
app.listen(process.env.PORT || 3000, function () {
console.log("Application is running at localhost:" + app.get("port"));
});
package.json
{
"name": "myapp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node ./server/app.js",
"server": "nodemon ./server/app.js",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"localhost": "ng build && node ./server/app.js"
},
I have an angularjs web application that is being hosted on server and displayed on client device using Windows form webbrowsercontrol. The application runs 24/7 in the device. I am also detecting the keep alive of server from client by regularly pinging the server for network connectivity. But there are scenarios when keep alive is true and the webpage goes to “Page Not Found” and stuck there due to intermittent connection loss between server and client.
Is there someway I can refresh the webpage on its own to recover from “Page not found” on server connection?
assume a for loop .how we can add i in src?
extracting src from local storage
for(let i;i<10;i++){
//create an img tag object with IMG name
IMG.src='/project/images/${i}/test.png'
}
I have a shiny flexdashboard that displays multiple datatables (DT package). I would like to apply this responsive tables package, which uses JS/CSS, to the data tables: https://zurb.com/playground/responsive-tables
Can someone walk me through how I might do this?
How do I make a cookie out of the user input from a form like this:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
or like this:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
I’m working on a website that turns my ipad into a drawing tablet for my laptop.
Most of the program is done, but I don’t know how I’m gonna share my screen with my ipad.
for the website I’m using nodejs & socket.io (html, css and js) and for actually moving the mouse I’m using python (pynput, python-socketio)
It was a very silly thing. In localhost, my header component looks quite normal, but after rendering everything on the page stays in the same design, the header gets smaller.
I’m working on netflix clone project, why is my header design getting smaller while everything is building properly on the page?
I did not interfere with the header in any way as javascript. Why did such an event happen to me when I was only standing as a component?
So, I’ve been trying to create a slider using only CSS and have been trying to avoid JS. Here’s what I’ve got so far:
:root{
--width: 300px;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow: hidden;
font-family: sans-serif;
}
.slider-content-box {
display: flex;
align-items: center;
justify-content: space-around;
}
.slide-outer{
width: var(--width);
background: #4e6cf2;
border-radius: 15px;
box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.3);
}
.slider {
text-align: center;
position: relative;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.img-section {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border: none;
outline: none;
}
.img-section img {
height: 250px;
width: 100%;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.slides>div {
color: white;
flex-shrink: 0;
width: var(--width);
height: auto;
padding: 20px 10px 50px 10px;
position: relative;
display: flex;
text-align: left;
justify-content: center;
align-items: center;
font-size: 13px;
font-weight: 400;
}
.slides>div:first-child{
font-size: 20px;
font-weight: 600;
}
.arrows {
position: absolute;
z-index: 1;
display: inline-flex;
column-gap: 10px;
bottom: 18px;
right: 25px;
}
.slider .arrows a {
width: 1rem;
height: 1rem;
text-decoration: none;
align-items: center;
justify-content: center;
position: relative;
}
.slider .arrows a img {
height: 20px;
width: 30px;
}
.non-active-arrow-right,
.non-active-arrow-left {
display: none;
}
.slider-scroll-box{
padding: 10px 0px;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 2px;
border-radius: 10px;
margin: 0px 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #9c9c9c;
border-radius: 10px;
padding: 0 !important;
}
.slides::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
margin: 0px 20px;
}
.blur-image{
filter: brightness(0.5);
}<div class="slider-content-box">
<div class="slide-outer">
<div class="img-section">
<img src="https://fs.hubspotusercontent00.net/hubfs/20523656/Group%2024941.png" width="100%" height="200px">
</div>
<div class="slider-scroll-box">
<div class="slider">
<div class="arrows">
<a href="#slide-1" id="image-1">
<img src="https://fs.hubspotusercontent00.net/hubfs/20523656/left-arrow-active.svg" class="active-arrow-left">
</a>
<a href="#slide-2" id="image-2">
<img src="https://fs.hubspotusercontent00.net/hubfs/20523656/right-arrow-active.svg" class="active-arrow-right">
</a>
</div>
<div class="slides">
<div id="slide-1">
Hello, I'm <br> Joe. The dev <br> of
</div>
<div id="slide-2">
lorem ispoumm lorem ispoumm lorem ispoumm lorem ispoummlorem ispoummlorem ispoumm lorem ispoumm
</div>
</div>
</div>
</div>
</div>
</div>As you can see, I’m using hash links for the arrow buttons so that it moves from div to div. However, this doesn’t seem to be good practice because when it’s applied to a page, clicking the arrows prompts the viewport to jump where the arrows begin.
Is there a way to maybe disable the jumps within this div or the entire page? Would anyone have a different idea to get it to function the same but without the hash links?
I have an existing e-commerce website and we are implementing Web3 capabilities to the site. Our users are given exclusive NFTs built on Solana and we want to allow them to list them for sale in our own Digital Asset marketplace. When a user goes into their profile they’re able to see all the NFTs they have acquired. When they want to list one of them for sale, they click on the item and click a “Add To Marketplace” button. If their wallet isn’t already connected it will ask them to connect their wallet. Once the wallet is connected… I don’t know what to do.
How do I create this transaction that allows the owner of the NFT to list it in our marketplace?
I am using the table-plugin for jQuery DataTables to display a HTML-Table. In addition I am using the Select-Plugin which allows to (multi)select table rows. As a user select a row, the class “selected” is added to the <tr> element:
<tr id="tr_1" class="odd selected">
How can I sort the rows, that the selected rows are shown first? This would improve clarity, especially with many rows or pages provided by DataTable.
I am having problems with importing web3 into reactjs. To replicate my problem, initiallize a new react app as so
npx create-react-app my-app
cd my-app
then open terminal in this location. Write:
npm install web3
npm install
in the App,js file add the following line
import Web3 from "web3";
I got the error after I do npm start then I got the unsolved error which is
Module not found: Error: Can't resolve 'stream'
Module not found: Error: Can't resolve 'crypto'
I tried finding a solution online, in particular I tried each of
None seem to work with me. Is there any advice on how to solve this problem?
Thank you!
I’m currently working in react native for the first time, trying to create an iPhone app. it’s been going well so far, but I’ve come across a slight limitation that I’m not sure I can workaround.
I want to be able to randomly send the user a notification a couple of times throughout the day, I’ve learned that I could use “repeatType” within my “localNotificationSchedule” function to set up a recurring notification message, but the problem with this is the notification repeats the same message over and over, and I want these messages to be random. is there a way about doing this?
I’m using local push notifications, and these two packages:
I’m working on a hobby project similar to markup.io where you can load in any website and annotate it. I can’t figure out how to add an annotation that behaves like it does in markup.io:
From what I can see they place an absolute positioned div inside the element that you clicked on. From my understanding by reading the docs that div would position itself based on the closest positioned ancestor. How would you calculate the correct top and left values to position the annotation to where the user clicked? Is there a better way to do this?
I’m using React if that matters.
Things that I have tried:
<div style="width:0px; height:0px; position:relative;">
<div style="width:50px;height:50px;position:absolute; ">this is the annotation </div>
</div>
Problem: This would mess with the page layout because of the relative positioned div that is not ignored by the document flow.
Problem: Whenever the user would scroll or resize the window the annotation would need to be redrawn at the new position of the element. I used getBoundintClientRect to get the new position and this would cause a reflow and caused the whole website to have severe perfomance issues when dealing with 100+ annotations.
Hopefully someone can point me in the right direction!