Can not start mongod service getting [fail] on right side of screen when running “sudo service mondod start”

I installed mongod on ubuntu 20.04 and everything seemed to work fine but when I run sudo service mongod start it tries to start the database but fails and I do not know why. I have researched for an hour. Any help would be much appreciated thank you so much.
enter image description here

I tried researching other cases of people who had the problem and pasting all of those commands into my terminal but nothing worked. I expected the database to start properly but it did not.

Angular service assignment does not preserve the state?

I want to understand how angular works. I have an standalone component TestComponent that receive TestService as an injection, this component call the method this.testService.assign(), later a Guard inject the TestService and call the method reassign() the value of the variable inc I expected to be 2 because it was set previously but I don’t know if this behavior is normal. Could you please tell me how I can achieve that the value of the variable inc should be 2 when I call the method reassign

test.component.ts

@Component({
  selector: 'app-test',
  standalone: true,
  imports: [],
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss'
})
export class TestComponent implements OnInit {


  constructor(private testService: TestService) {
  }

  start() {
     this.testService.assign();
  }
}

test.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {

  private inc = 1;

  constructor() { }

  //Called from a Standalone component before the Guard
  assign() {
    this.inc = 2;
    console.log('FromComponent ' + this.inc);
  }

  //Called from a Guard
  reassign() {
    //The value here is 1 it should be 2
    console.log('FromGuard ' + this.inc);
    this.inc = 3;
  }

}

test.guard.ts

import {CanActivateFn, Router} from '@angular/router';
import {inject} from "@angular/core";
import {TestService} from "../../../shared/service/test.service";

export const TestGuard: CanActivateFn = (route, state) => {
  const testService = inject(TestService);
  testService.reassign();
  return true;
};

The start method is called here, it init the cycle the guard is called later.
test.component.html

<form [formGroup]="form" (ngSubmit)="start()">
.
.
.

Output

FromComponent 2
FromGuard 1 <--- Should be 2?

WP_EDITOR content is not captured

I’m trying to change the default theme editor (jqte) to the WP editor, but the edited content is not updating upon form submission.

Here is the code I’m trying to use:

ob_start();
$editor_id = 'ad_description'; // Unique ID for the editor
$settings = array(
    'textarea_name' => 'job_description', // Name of the textarea field
    'textarea_rows' => 10, // Number of rows for the textarea
    'media_buttons' => true, // Whether to include media upload buttons
    'quicktags' => true, // Whether to include quicktags (HTML shortcuts)
);

wp_editor($description, $editor_id, $settings);

         $output = ob_get_contents();
         echo $output;

The submission works when I use static data instead of $description. Although $description has data in it and I was able to retrieve data from it.

$post = get_post($job_id);
    $description = $post->post_content;

I also tried to use ob_get_clean() with no luck.

I appreciate any help. Thanks!

how do i add image created using HTML2Canvas to eml file to contain data and image in attachment or body


  onInitiateExitProcess() {
    if (this.ToEmail) {
      const modalContent = document.querySelector('.email') as HTMLElement;

      html2canvas(modalContent).then(canvas => {
        const imageData = canvas.toDataURL();
        this.sendEmail(imageData);
      });
    }
    //call function making post request to change exitProcessInitiated of this.userId to true

    this.initiateExitProcess.emit();
    this.updateExitProcessInitiation();
}  

sendEmail(imageData: string) {
    const subject = 'Exit Process Information';
    const body = 'Please find the attached information about your assigned items.';

    const base64Image = imageData.split(',')[1];

    const img = new Image();
    img.src = imageData;
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // Resize the canvas to desired dimensions
      const maxWidth = 600; // Maximum width for the resized image
      const maxHeight = 500; // Maximum height for the resized image
      let width = img.width;
      let height = img.height;

      if (width > maxWidth) {
        height *= maxWidth / width;
        width = maxWidth;
      }

      if (height > maxHeight) {
        width *= maxHeight / height;
        height = maxHeight;
      }

      canvas.width = width;
      canvas.height = height;

      ctx?.drawImage(img, 0, 0, width, height);

      const resizedImageData = canvas.toDataURL('image/png');

      const byteCharacters = atob(resizedImageData.split(',')[1]);
      const byteNumbers = new Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      const blob = new Blob([byteArray], { type: 'image/png' });

      let emailContent = `Bcc: ${this.ToEmail}n`;
    emailContent += `Subject: ${subject}n`;
    emailContent += `X-Unsent: 1n`;
    emailContent += "Content-Type: multipart/mixed; boundary=--boundary_text_string" + "n";
    emailContent += "n";
    emailContent += "----boundary_text_string" + "n";
    emailContent += "Content-Type: text/html; charset=UTF-8" + "n";
    emailContent += "n";
    emailContent += body + "n";
    emailContent += "----boundary_text_string" + "n";
    emailContent += "Content-Type: image/jpeg; name=assigned_items.jpeg";
    emailContent += "Content-Transfer-Encoding: base64" + "n";
    emailContent += "Content-Disposition: attachment" + "n";
    emailContent += "" + "n";
    emailContent += base64Image + "n"; // Attach the base64 encoded image data
    emailContent += "----boundary_text_string--";
    const blobData = new Blob([emailContent], { type: 'text/plain' });

  
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blobData);
    link.download = 'email_draft.eml';
    link.click();
      
    };
  }
In the function onInitiateExitProcess is used to create image of the div selected as html element then using html2canvas image is created then passed to sendEmail().

Then in sendEmail we give rest subject, body and make the image fix the dimensions adding all the data to eml file.

currently with what i am trying is to get eml file containing image as either in body or attachment.
What i am getting is “it looks like we don’t support this format” along with no options to send email when eml file is opened.
enter image description here

The issue in Node JS with Promise {} [duplicate]

const fs = require('fs');
const csv = require('csv-parser');
const axios = require('axios');
const { createObjectCsvWriter } = require('csv-writer');

console.time('ScriptExec');
let outputData = [];

const csvWriter = createObjectCsvWriter({path: 'output.csv'});

async function makeGraphQLRequest(apiUrl, query, variables) {
    try {
        const response = await axios.post(apiUrl, {
            query: query,
            variables: variables,
        });
        return response.data.data.price_trader_log
        .map(entry => entry.values[entry.values.length - 1].price_trader_new);
    } catch (error) {
        await new Promise(resolve => setTimeout(resolve, 2000));;
        setTimeout(() => makeGraphQLRequest(apiUrl, query, variables), 2000);
    }
}


const apiUrl = 'https://wiki.cs.money/api/graphql';
const query = `
query price_trader_log($name_ids: [Int!]!) {
  price_trader_log(input: {name_ids: $name_ids}) {
    name_id
    values {
      price_trader_new
    }
  }
}
`;


fs.createReadStream('variables.csv')
.pipe(csv()).on('data', async (row) => {
    const nameIds = row.name_ids.split(',').map(id => parseInt(id.trim()));
    const scrapInfo = [];
    console.log(nameIds);

    for (const pickId of nameIds) {
        console.log(pickId);
        if ( pickId > 0 ) {
            const variables = { name_ids: pickId };
            makeGraphQLRequest(apiUrl, query, variables)
                .then(result => scrapInfo.push(result))  //console.log(result) is Promise {<pending>}
                .catch(err => console.error(err));
        } else {
            scrapInfo.push(pickId);
        }
    }
    outputData.push( {title: row.title, prices: scrapInfo} );
    console.log(outputData);
}).on('end', () => {    // this saver doesn`t work
    csvWriter.writeRecords(outputData) 
        .then(() => console.log('Data sucsesfully writed in output.csv'))
        .catch(err => console.error('ERROR in wrhite csv process:', err))
    console.timeEnd('ScriptExec');
  });

Example of variables.csv: title,name_ids usp-s|whiteout,”1087302,1086843,1086836,1087237,1087212″ usp-s|targetacquired,”1083799,1083764,1083692,1083800,1084013″ usp-s|killconfirmed,”942,896,1332,7411,1042″ usp-s|killconfirmed_stattrak,”13665,13822,2429,587,2595″ usp-s|printstream,”1092369,1092414,1092339,1092498,1092346″ usp-s|printstream_stattrak,”1092439,1092295,1092405,1092442,1092422″ usp-s|orangeanolis,”1087219,1087263,1087249,0,0″ usp-s|darkwater,”0,1581,10527,0,0″

I tried await makeGraphQLRequest, block .then().catch() and Promise.all() but none of this work

Syntax error while running an express file

I am getting this error in the browser in my express app when i run the app:
The error is about localhost/:57 Uncaught SyntaxError: Unexpected identifier ‘indic’

I have been trying to solve it for more than an hour but I couldn’t solve it.
If somebody knows it then consider helping me.



import express from 'express';
import mongoose from 'mongoose';
const app = express();
const port = 3000;

// Connect to the MongoDB database
mongoose.connect('mongodb://localhost:27017/mydatabase')


const User = mongoose.model('User', new mongoose.Schema({
  name: { type: String, required: true, default: "Harry" },
  salary: Number,
  language: { type: String, required: true, default: "Python" },
  city: String,
  ismanager: { type: Boolean, required: true, default: false }
}));


app.post('/createDatabase', async (req, res) => {
  const newUser = new User({ name: 'Harry', salary: 4500000, language: 'Python', city: 'New York', ismanager: true });
  await newUser.save();
  res.send('Database created successfully');
});

app.get('/', (req, res) => {
  res.send(`
  <html>
  <head> 
      <title>Dummy maker</title>
      <style>
          * {
              padding: 0px;
              margin: 0px;
          }
  
          h1 {
              vertical-align: middle;
              height: 80px;
              text-align: center;
              background-color: rgb(240, 250, 215);
          }
  
          .data {
              height: 300px;
              display: flex;
              align-items: center;
              justify-content: center;
          }
  
          button {
              background-color: antiquewhite;
              height: 200px;
              width: 400px;
              border-radius: 500px;
              margin-top: 300px;
          }
  
          button:active {
              height: 195px;
              width: 390px;
              /* background-color: gray; */
          }
      </style>
  </head>
  
  <body>
      <h1>The Dummy Data Maker</h1>
      <hr>
      <hr>
      <hr>
      <hr>
      <hr>
      <hr>
      <div class="data">
          <div>
              <button class="button">Click me to, Generate the dummy data</button>
              <div class="indic"></div></div>
          <script>
  
          const button = document.querySelector("button")
          button.addEventListener("click", function () {
              document.querySelector(".indic").outerHTML = "<div class="indic" style="margin-top: 300px; height: 50px; width: 400px; color: white; background-color: green; border-radius: 50px; display: flex; justify-content: center; align-items: center;">nData Generated Successfullyn</div>"
              setTimeout(() => {
                  document.querySelector(".indic").outerHTML = "<div class="indic"></div>"
              }, 2000);
  
              fetch('/createDatabase', { method: 'POST' })
                .then(response => response.text())
                .then(message => alert(message));
            });
          </script>
        </body>
      </html>
  `);
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
}) 

Vimeo API issues on MAC

Running the following code for the Vimeo JS API works as expected on Windows i.e. console logs and runs the 2 functions. (https://player.vimeo.com/api/player.js)

const player = new Vimeo.Player(document.getElementById('secondaryCameraSetUpIframe'));
player.on('ended', function () {
  console.log('video has ended');
  setCookieToExpireInOneDay();
  disableLaunchExamButton(false);
});

However, on MAC through Chrome Browser it’s failing to do any of this and returning net::ERR_BLOCKED_BY_CLIENT for these two endpoints

  1. POST https://fresnel.vimeocdn.com/add/player-stats?beacon=1&session-id={id}
  2. POST https://player-telemetry.vimeo.com/player-events/log/partial

d3.json – how to replace URL with object/dynamic data?

New to d3. Creating a sankey diagram. Found a sample that uses an external .json file. The sample uses d3.v3. I know that is old, but I have a tree that also uses that version, so I would prefer to just load one d3 version. The sankey works fine, but I want to replace the static json will with dynamic data pulled from a database. I would load the page, query the database, retrieve my data, and format it as an array of objects, passing the array to the sankey code.

Starting with small changes, I have copied the contents of the json file and inserted it into my page.

var MYDATA = {
"links": [
{"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},
{"source":"Agriculture","target":"Agriculture Soils","value":"5.2"},
{"source":"Agriculture","target":"Livestock and Manure","value":"5.4"},
{"source":"Agriculture","target":"Other Agriculture","value":"1.7"},
...
};

The relevant sankey code – where the file is loaded – is

d3.json("#APP_FILES#sankeygreenhouse.json", function(error, graph) {
    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
    graph.links = graph.links.map(function(x) {
      return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        value: x.value
      };
    });

I am trying to change this to use MYDATA instead of ‘#APP_FILES#sankeygreenhouse.json’
I have tried changing this line to

d3.json(MYDATA, function(error, graph) {

but this just gives a 404 error. How do I make this work?

OfficeGen how to set column width?

I am using officeGen to generate word documents.

<sup>  let table = [
    [
      {
        val: "TT",
        fontFamily: "Times New Roman",
      },
      {
        val: "Ten hang",
        fontFamily: "Times New Roman",
      },
      {
        val: "DVT",
        fontFamily: "Times New Roman",
      },
      {
        val: "S.luong",
        fontFamily: "Times New Roman",
      },
      {
        val: "Don gia",
        fontFamily: "Times New Roman",
      },
      {
        val: "Thanh tien",
        fontFamily: "Times New Roman",
      }],
    [1, "Cáp ngầm LS 24kv CXV/DSTA/PVC 1x95mm2", "Met", 119, "420,000", "49,980,000"],
    [2, "Cáp ngầm LS 24kv CXV/DSTA/PVC 1x95mm2", "Met", 253, "420,000", "49,980,000"],
  ];

  var tableStyle = {
    // tableColWidth: 4200,
    // tableSize: 1000,
    tableColor: "ada",
    tableAlign: "left",
    tableFontFamily: "Times New Roman",
    spacingBefor: 120, // default is 100
    spacingAfter: 120, // default is 100
    spacingLine: 240, // default is 240
    spacingLineRule: "atLeast", // default is atLeast
    // indent: 100, // table indent, default is 0
    // fixedLayout: true, // default is false
    borders: true, // default is false. if true, default border size is 4
    borderSize: 2, // To use this option, the 'borders' must set as true, default is 4
    columns: [{ width: 100 }, { width: 200 }, { width: 200 }, { width: 100 }, { width: 200 }, { width: 200 }], // Table logical columns
  };
  docx.createTable(table, tableStyle);
</sup>

Here is the result:
enter image description here ],

I want the 1st col is 100, the 2nd col is 200, But it not work as i hoped
Any help?? Thanks!
//Generating word document with OfficeGen documentation

Django i18n failing to catch strings in JS render functions

I’m using i18n to translate a Django project into various languages. Everything is nicely translated depending on locale, except for certain strings in JavaScript render functions. For example, if I run django-admin makemessages --all and django-admin makemessages -d djangojs --all, “Launch this app” and “App under review” from an HTML template don’t show up in any of the django.po or djangojs.po files, despite being tagged with gettext():

<script>
  const renderStatus = () => {
    let launchApp = gettext("Launch this app");
    document.getElementById("component-appLauncher").innerHTML = `
        <span class="u-flex-grow-1" style="vertical-align: middle;">` + launchApp + `</span>
        <a href="#launch_this_app-modal">
          <button style="btn--sm">
            <i class="u-center fa-wrapper fa fa-solid fa-arrow-right-long"></i>
          </button>
        </a>
    `;

    let appReview = gettext("App under review");
    document.getElementById("component-appStatus").style.color = "red";
    document.getElementById("component-appStatus").innerHTML = appReview;
  }
</script>

Sometimes (though not consistently, and I can’t reproduce this at will), one or the other .po file will have these lines (example from the Spanish translation), with no reference to the HTML template source file or line numbers:

#~ msgid "Launch this app"
#~ msgstr "Lanzar esta app"

#~ msgid "App under review"
#~ msgstr "App en estudio"

This seems to be related to the cache because, after a lot of tab refreshes, the translation will suddenly appear (even though the mapping is missing from the .po files), but I can’t discern a consistent pattern to any of it.

Is this a bug in i18n? If not, any idea what could be causing it?

iOS Mobile Fullscreen Enable Workaround

I have a web app and for best user experience, I need to hide the toolbar of mobile safari (iOS) .

I know that many websites use an overlay taller than the screen size and some kind of indication for the user to scroll up (like a “swipe up” gif”). Scrolling causes the toolbar to disappear!

But I was wondering if there is any library that already does this and detects if the user is playing on iOS and if he is not in fullscreen mode, triggers the popup, etc. and then hides it when the user is back in fullscreen.
If there is no library, any recommendations are welcome to detect if we have iOS and if user is not in fullscreen mode and how to hide the popup after he triggered fullscreen.

The code seems to be fine, but not getting the output. Expected output : Replace text “Heading 1” on browser with array from new.js file

I have 2 files index.html and new.js but could not get the output on browser as expected. The error shows on document.getElementById(“h1”).innerHTML=fruits; //fruits: name of the array
also tried document.getElementById(“h1”).innerHTML= fruits.join(“, “); //got this from chat gpt

//new.js file content

let fruits=["apple","orange","mango"];
fruits.push("kiwi", "grape")
console.log(fruits);
let f1= fruits.indexOf("kiwi");
console.log(f1);
document.getElementById("h1").innerHTML= fruits.join(", ");

//index.html file content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./new.js"></script>
</head>
<body>
    <h1 id="h1">Heading 1</h1>
    
</body>
</html>

All possible combinations of 2 arrays in Javascript

Good day, esteemed StackOverflow contributors.

I am currently building a Ludo game. It’s a simple game and at the core of the game are tokens and dice. What I aim to achieve is generate all possible combination of moves. Usually, Ludo works with 2 dice. So a throw should give 2 dice values. There is an instance though, when a throw (double-six) makes provision for another throw by same player. But because the expected combination of moves is a huge result, I’ve decided to keep things simple by not repeating the dice Values, in other words, avoiding two 6’s in the array, in order to aid clarity in the result’s pattern.

Hence the arrays:

const diceValues = [1, 3, 4, 6];
const tokens = ['A', 'B', 'C', 'D'];
const moves = [];

My customary solution below was to make a note of the pattern of results I would expect, then tailor the code to match. With nested loops I made some progress but as expected, I reached that breaking point where I felt the need an elegant recursion (what else?) would avail.

Below is a list of the possible combinations I could muster on the loop of one token (“A”), to keep it not too long and provide an idea. I write this list non-technically so it’s easy on the eye:

e.g: A1 B346, A1 C346, A1 D346

but while coding, this is the format that gets pushed into the moves array:

e.g: [ {'A': [1], 'B': [3, 4, 6]}, {'A': [1], 'C': [3, 4, 6]}, {'A': [1], 'D': [3, 4, 6]} ]

Important things to note:

All dice values must be used up (i.e. associated with at least 1 token. Something like A1 B3 C4 is not a legal move because the remaining die value of 6 has not been used).

It is not mandatory all tokens are used up. (One token may associate with all 4 dice values e.g. A1346).

Now we are clear, here’s the list:

A1 B346, A1 C346, A1 D346 
A3 B146, A3 C146, A3 D146
A4 B136, A4 B136, A4 D136
A6 B134, A6 C134, A6 D134
 
A13 B46, A13 C46, A13 D46
A13 B4 C6, A13 B4 D6 
A13 C4 B6, A13 C4 D6
A13 D4 B6, A13 D4 C6

A14 B36, A14 C36, A14 D36
A14 B3 C6, A14 B3 D6
A14 C3 B6, A14 C3 D6
A14 D3 B6, A14 D3 C6

A16 B34, A16 C34, A16 D34
A16 B3 C4, A16 B3 D4
A16 C3 B4, A16 C3 D4
A16 D3 B4, A16 D3 C4

A34 B16, A34 C16, A34 D16
A34 B1 C6, A34 B1 D6
A34 C1 B6, A34 C1 D6
A34 D1 B6, A34 D1 D6

A34 B16, A34 C16, A34 D16
A34 B1 C6, A34 B1 D6
A34 C1 B6, A34 C1 D6
A34 D1 B6, A34 D1 C6

A36 B14, A34 C14, A36 D14
A36 B1 C4, A36 B1 D4
A36 C1 B4, A36 C1 D4
A36 D1 B4, A36 D1 C4

A46 B13, A46 C13, A46 D13 
A46 B1 C3, A46 B1 D3
A46 C1 B3, A46 C1 D3
A46 D1 B3, A46 D1 C3

A134 B6, A134 C6, A134 D6 
A136 B4, A136 C4, A136 D4
A146 B6, A146 C3, A146 D3
A346 B1, A346 C1, A346 D1

A1346 

In total, this is 88 loops

Then the next token loop would be something like:

B1 A346, B1 C346, B1 D346 and on and on…

Thus at this point would be expecting 88 * 4 = 352 loops

Final segment which distributes all tokens to all dice values:

A1, B3, C4, D6
A1, B3, C6, D4
A1, B6, C3, D4
A6, B1, C3, D4
A1, B4, C3, D6
A1, B4, C6, D3
A1, B6, C4, D3
A6, B1, C4, D3
A4, B1, C3, D6
A4, B1, C6, D3
A4, B6, C1, D3
A6, B4, C1, D3
A3, B1, C4, D6
A3, B1, C6, D4
A3, B6, C1, D4
A6, B3, C1, D4
A3, B4, C1, D6
A3, B4, C6, D1
A3, B6, C4, D1
A6, B4, C3, D1
A6, B3, C4, D1
A4, B3, C1, D6
A4, B3, C6, D1
A4, B6, C3, D1

I estimate a total number of 448 cycles.

Both arrays were of 4 lengths, but I expect a solution that would work just fine on arrays with longer and varying lengths.

Thank you for your efforts.

const tokens = ['A', 'B', 'C', 'D'];
const diceValues = [1, 3, 4, 6];
let payload = [];
let moves = [];


const moveCollection = (tokens, diceValues) => {
    diceValues.map((die, dieIndex) => {    // [1, 3, 4, 6]
        const leftDiceValues = diceValues.slice(0, dieIndex + 1); // [1], [1, 3], [1, 3, 4], [1, 3, 4, 6]
        const rightDiceValues = diceValues.slice(dieIndex + 1, diceValues.length); // [3, 4, 6], [3, 4, 6], [4, 6], [6]

        tokens.map((token, tokenIndex) => { // [A, B, C, D]
            const remTokens = tokens.slice();
            remTokens.splice(tokenIndex, 1);    // [B, C, D], [A, C, D], [A, B, D], [A, B, C]

            remTokens.map((remToken, remTokenIndex) => {
                moves.push([
                    { [token]: leftDiceValues },    // {A: [1]}
                    { [remToken] : rightDiceValues }    // {B: [3, 4, 6]}
                ]);
            });

            // It was at this point I felt the need for some sort of recursive solution
            // This condition was necessary only to prove the 1st loop new format of 
            // [ {A: [3], B: [1, 4, 6]}, {A: [3], C: [1, 4, 6]}, {A: [3], D: [1, 4, 6]} ]
            
            if (dieIndex === 0) {
                rightDiceValues.map((rightDiceValue, rightDiceIndex) => {   // [3, 4, 6]
                    const remDiceValues = diceValues.slice();   // [1, 3, 4, 6]
                    remDiceValues.splice(rightDiceIndex + 1, 1);
                    remTokens.map((remToken, remTokenIndex) => {
                        moves.push([
                            { [token]: rightDiceValue },    // {A: [3]}
                            { [remToken]: remDiceValues }    // {B: [1, 4, 6]}
                        ]);
                    });
                });
            }
        });
    });
}
moveCollection(tokens, diceValues);

How these effects are made? [closed]

I’m trying to figure out how the effects that locomotive applies work:

  1. The picture scrolls together with the page behind, but remains in place, as if inside. An example is here: https://evm.elektramontreal.ca/en

  2. When scrolling the page, the content (images) seem to appear out of a blackout, but a very small one. That is, the images are loaded and some effect happens. Example here: https://booksofdesign.designstripe.com/artists/alphonse-mucha

  3. Slow scrolling. They have a very nice one, examples on the sites above.

How are these effects done? Any examples? Tutorials, links, any explanation is welcome.

I tried getting into the developer tools when browsing sites, but I couldn’t figure out exactly how a particular effect is implemented.

Reading commit for specific file with isomorphic-git

I want to read the commit history of specific files. What I have tried so far:

git.log({fs, dir: '.', filepath: 'path/to/file', depth: 2})

But I get:

<git.log>: Could not find file or directory found at "5cd2fc6d4023ff3c104801498e4f54a3cbae4c6b:path/to/file

If I leave out the filepath I do get the last commits. But I need the date specific files have been changed.
I’m using the latest version 1.25.6. The git working directory is clean.