DEV Community: Rémi

#codevember — 7 — Shape

Rémi — Tue, 12 Nov 2019 08:26:55 +0000

codevember 2019 day 7 Shape

Shape as line, in colour and in negative space SDF circle code from http://www.iquilezles.org/ Random from https://thebookofshaders.com/10/

#codevember — 6 — Music 🎹

Rémi — Tue, 12 Nov 2019 08:26:16 +0000

codevember 2019 day 6 Music

#codevember — 5 — Light 💡🔦

Rémi — Fri, 08 Nov 2019 10:52:00 +0000

codevember 2019 day 5 Light from https://www.youtube.com/watch?v=JQ-jNMUxMas

#codevember — 4 — Big 🏙️🎥

Rémi — Thu, 07 Nov 2019 09:39:45 +0000

codevember 2019 day 4
Big buildings with dolly zoom

#codevember — 3 — Deep

Rémi — Mon, 04 Nov 2019 18:09:25 +0000

codevember 2019 day 3

#codevember — 1 — Contrast

Rémi — Fri, 01 Nov 2019 22:23:02 +0000

codevember 2019 day 1

Chrome - Unlimited frame rate

Rémi — Fri, 11 Oct 2019 08:43:47 +0000

It hasn't been working on Chrome in 2018 but it's working again in September 2019.

It can be hard to track how small changes affect the performance of a WebGL project if you’re well within the limits of your GPU and browser.

You can check in details frame rate variations on modifications such has adding a Shader Pass or merging geometries, disabling frustum culling, etc..

How to

1. Run Chrome through ```bash

open -a "Google Chrome" --args --disable-gpu-vsync


or depends on your settings

```bash


open -a "Google Chrome" --args --disable-gpu-vsync --disable-frame-rate-limit

2. Open console Rendering tab (in more tools)

3. Check FPS meter (on a page that triggers frame rate: example my #shadertoy below)

Tested on iMac end 2013 Mojave
Source on medium

Update 14/09/2020

The fps meter has been updated, it doesn't seem possible anymore to disable frame rate limit.
Can't find any article about the new fps meter at the moment, if any on has any lead, please reach out.

Update 28/11/2020

Unfortunately, it appears that the fps meter won't be available anymore in chromium.
It has been renamed Frame rendering stats.
You can find information about release here
Frame rendering stats release tweet
There is to my knowledge only one way to use the Unlimited frame rate FPS meter (Only tested on Mac).
You have to get an old build of Chromium (Version 65.0.3312.0 (Developer Build) (64-bit) in my case) and launch it with the command line, but the rendering might differs for various reasons.



open -a "Chromium" --args --disable-gpu-vsync --disable-frame-rate-limit

Update 23/07/2024

FPS meter is back under the name Frame rendering Stats but you can't uncap the frame rate anymore, but you can have a good insight to debug since the cap is 120fps.

Star atlas - three.js

Rémi — Sun, 12 May 2019 21:24:51 +0000

Trying codepen new dev.to share button. So here's a little pen I made for this week #CodePenChallenge.

Created for the May 2019 CodePen Challenge

Using
three.js
d3-scale-chromatic
TweenMax

WordPress - Hacked site redirections

Rémi — Wed, 10 Apr 2019 17:40:34 +0000

The problem

I have encountered a project where the WP (WordPress) website was redirecting to some "ad" websites.

Identifying the problem

By debugging, from Google Chrome Sources panel with pause script execution, we identify the redirection occurring from a third party script injected in .php files inside the project.

Root cause

A plugin update Related Posts Plugin.

The WP admin updated the plugin after an update notice without knowing the plugin actually became a "malware" that highjacked websites.

Of course, the source code is not available from the plugin website so it is hard to check the integrity of code beforehand. And after checking the WP page of the plugin the status is This plugin was closed on March 30, 2019 and is no longer available for download., but the plugin owner has pushed an update on April 10, 2019 at around 7PM (Paris time) (Covering up the tracks?).

Fixing the problem

1) Plugin removal

Plugin removal might fix the problem only if it didn't affect external files to the plugin.

2) Cleaning by hand (unsafe)

In my case, the "malware" succeed to change files at ${ROOT}/wp-includes/. So I had to clean all the javascript injections "by hand".

3) Backup

If you have a backup of the database before the infection, I advise to delete the project and reinstall the project and feed backup.

Avoid plugin malware

Never update plugins on production environment
Do backup
Check plugin source code before installing

Sources:
Redirection malware third party link
Gist of similar malware
Plugin incriminating StackOverflow post
Related hacked problem

Fix unexpected scroll jump - Vue Router

Rémi — Fri, 01 Feb 2019 15:53:59 +0000

You may have noticed a breaking change in scroll behavior in modern browsers called scrollRestoration while using Vue Router.

It is an awesome feature that allows the browser to jump back to the previously saved scroll location with a JS script based routing.

Unfortunately, it conflicts with the Vue Router implemented methods scrollBehavior.

If you have no <transition/> on your <router-view/> you might not see any difference with the old behavior.
But if you are using it, especially leave transition, the page scroll jumps back to top at the start of the transition when you navigate to a new page.

The solution is to set scrollRestoration to manual, so the browser doesn't try to handle the behavior in your place.

if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual';
}

Source: History API: Scroll Restoration by Paul Lewis