del v7.0.0 moved to pure ESM (no dual support), which forced me to move my gulpfile to ESM to be able to continue to use del.
The author sindresorhus maintains a lot of npm packages and does not want to provides an upgrade guide for each package so he provided a generic guide. But this guide is a bit vague because it's generic and not helping for gulp, hence this guide.
| // Licence: Robert Koch-Institut (RKI), dl-de/by-2-0 | |
| class IncidenceWidget { | |
| constructor() { | |
| this.previousDaysToShow = 31; | |
| this.apiUrlDistricts = (location) => `https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=1%3D1&outFields=RS,GEN,cases7_bl_per_100k,cases7_per_100k,BL&geometry=${location.longitude.toFixed(3)}%2C${location.latitude.toFixed(3)}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelWithin&returnGeometry=false&outSR=4326&f=json` | |
| this.apiUrlDistrictsHistory = (districtId) => `https://services7.arcgis.com/mOBPykOjAyBO2ZKk/ArcGIS/rest/services/Covid19_hubv/FeatureServer/0/query?where=IdLandkreis%20%3D%20%27${districtId}%27%20AND%20Meldedatum%20%3E%3D%20TIMESTAMP%20%27${this.getDateString(-this.previousDaysToShow)}%2000%3A00%3A00%27%20AND%20Meldedatum%20%3C%3D%20TIMESTAMP%20%27${this.getDateString(1)}%2000%3A00%3A00%27&outFields=Landkreis,Meldedatum,AnzahlFall&outSR=4326&f=json` | |
| this.stateToAbbr = { | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| } |
| import { useLayoutEffect, useCallback, useState } from 'react' | |
| export const useRect = (ref) => { | |
| const [rect, setRect] = useState(getRect(ref ? ref.current : null)) | |
| const handleResize = useCallback(() => { | |
| if (!ref.current) { | |
| return | |
| } |
| function getTranslate(item: HTMLElement): number | number[] | undefined { | |
| const transArr = []; | |
| if (!window.getComputedStyle) { | |
| return; | |
| } | |
| const style = window.getComputedStyle(item); | |
| const transform = style.transform || style.webkitTransform; | |
| let mat = transform.match(/^matrix3d\((.+)\)$/); | |
| if (mat) { | |
| return parseFloat(mat[1].split(', ')[13]); |
| # | |
| # A fastbike could be a racing bike or a speed pedelec. | |
| # But also at night or in rainy whether you might want | |
| # to fallback to this one. | |
| # | |
| # Structure is similar to trekking.brf, see this for documenation. | |
| # | |
| ---context:global # following code refers to global config |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
This is a bash script that will automatically turn your wifi off if you connect your computer to an ethernet connection and turn wifi back on when you unplug your ethernet cable/adapter. If you decide to turn wifi on for whatever reason, it will remember that choice. This was improvised from this mac hint to work with Yosemite, and without hard-coding the adapter names. It's supposed to support growl, but I didn't check that part. I did, however, add OSX notification center support. Feel free to fork and fix any issues you encounter.
Most the credit for these changes go to Dave Holland.