Comment se passer de jQuery.spip.positionner_marge
▻https://git.spip.net/spip/spip/commit/9f50bd16bfce863b0db3393ca27c0df6de6a251a & du plugin ancres douces à la fois :
html {
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
Comment se passer de jQuery.spip.positionner_marge
▻https://git.spip.net/spip/spip/commit/9f50bd16bfce863b0db3393ca27c0df6de6a251a & du plugin ancres douces à la fois :
html {
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
Un truc sympa pour l’accessibilité : tu peux désactiver le « smooth scrolling » directement dans les CSS pour les gens qui désactivent les animations dans leurs options de smartphone (en tout cas sur iOS) :
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
2 bémols :
Can I use indique un peu plus de 80% : ▻https://caniuse.com/?search=scroll-behavior
Mais le défilement se fait dans tous les cas, donc pas grave.
Ça évite d’ajouter du js mais, dans le cas de liens de retour en haut de page par exemple, on n’a pas forcément envie que l’url soit changée (avec une ancre #haut et même juste #) et je ne sais pas s’il y a une autre solution que du js. Mais là encore, c’est pas bien grave :)
#CSS: Flexible Repeating #SVG Masks
▻https://tylergaw.com/blog/css-repeating-svg-masks
▻https://tylergaw.com/blog/assets/post-image-repeating-masks-streetcred-banner.webp
This is a technique I used recently to create a flexible, repeating pattern using SVG with CSS mask.
A #flexible #header with a little squiggle at the bottom instead of a straight line.
#Sony WH-1000XM4 #headphones will bring multi-device support and auto ambient mode ►https://pocketnow.com/sonys-wh-1000xm4-headphones-will-bring-multi-device-support-and-auto-ambi … #smart
▻https://twitter.com/K1ng0fNo0b/status/1264205234664079361
#Sony WH-1000XM4 #headphones will bring multi-device support and auto ambient mode ►https://pocketnow.com/sonys-wh-1000xm4-headphones-will-bring-multi-device-support-and-auto-ambi … #smart
Best #wireless #headphones to buy in 2020 ►https://www.phonearena.com/news/Best-over-on-ear-wireless-headphones-audiophile-Bluetooth-Amazon-price_i … #smart #audio
▻https://twitter.com/K1ng0fNo0b/status/1263902118366216192
Best #wireless #headphones to buy in 2020 ►https://www.phonearena.com/news/Best-over-on-ear-wireless-headphones-audiophile-Bluetooth-Amazon-price_i … #smart #audio
Razer Releases New Wireless ANC Headset – Razer Opus ►https://royalflushmagazine.com/technology/tech-preview/razer-releases-wireless-anc-headset-razer-opus … #games #Razer #Opus #RazerOpus #Wireless #HeadPhones
▻https://twitter.com/K1ng0fNo0b/status/1262822590999072769
Razer Releases New Wireless ANC Headset – Razer Opus ►https://royalflushmagazine.com/technology/tech-preview/razer-releases-wireless-anc-headset-razer-opus … #games #Razer #Opus #RazerOpus #Wireless #HeadPhones
Contre le mal-être au travail, Starbucks offre une app de méditation | korii.
▻https://korii.slate.fr/et-caetera/entreprise-starbucks-petition-mal-etre-conditions-travail-cadeau-abonnem
Rien ne va plus chez Starbucks. Les coffee shops sont entrés dans la période la plus creuse de l’année pour leur activité. Pendant les trois premiers mois de l’année, et malgré le froid, la clientèle ne se presse guère dans les cafés, et Starbucks enregistre souvent ses ventes les plus basses. Pour s’adapter, l’entreprise réduit ses équipes durant l’hiver. Cela aggrave encore une situation décriée depuis longtemps par certain·es employé·es, qui se plaignent ne plus faire assez d’heures, avec un fort impact (...)
#Adobe #Starbucks #General_Electric #LinkedIn #conditions #travail #travailleurs #santé (...)
Starbucks Workers Want More Hours. Instead They Got a Meditation App - VICE
▻https://www.vice.com/en_us/article/z3bxn3/starbucks-workers-want-more-hours-instead-they-got-a-meditation-app
The coffee shop giant announced that it is launching a free subscription to the app Headspace as a new mental health benefit. Meanwhile workers scramble to make ends meet. It’s the dead of winter and the slowest time of the year for coffee shops, and Starbucks baristas are feeling the pinch. Employees are posting online about how shift cuts and understaffing has them working espresso machines at an unreasonable rate, while scrambling to pay rent and qualify for full benefits. In recent (...)
#Starbucks #conditions #santé #travail #travailleurs #Headspace
##santé
Sur la plupart des serveurs, j’ai besoin d’allonger la durée indiquée de conservation en cache des éléments intégrés aux pages, pour faire plaisir à PageSpeed Insights.
Je me note le code ici :
ExpiresActive on
ExpiresByType text/css A31557600
ExpiresByType application/x-javascript A31557600
ExpiresByType application/javascript A31557600
ExpiresByType text/javascript A31557600
ExpiresByType image/webp A31557600
ExpiresByType image/jpeg A31557600
ExpiresByType image/png A31557600
ExpiresByType image/gif A31557600
ExpiresByType image/svg+xml A31557600
ExpiresByType application/x-shockwave-flash A31557600
AddType application/font-woff .woff
ExpiresByType application/font-woff A31557600
AddType application/font-woff2 .woff2
ExpiresByType application/font-woff2 A31557600
Par rapport à ce qu’on trouve usuellement en ligne, il y a aussi le WebP et le woff/woff2, que j’utilisent désormais systématiquement.
Cadeau, un lien déjà cité ici mais toujours utile : ▻https://technique.arscenic.org/lamp-linux-apache-mysql-php/apache-le-serveur-http/optimisations/article/expire-headers
ping @kent1
Forcing a PDF or DOC to Open in Browser Rather Than Downloading | DeveloperSide.NET
▻http://www.devside.net/wamp-server/forcing-a-pdf-or-doc-to-open-in-browser-rather-than-downloading
Sur le problème du traitement des liens vers des fichiers PDF par les navigateurs, voir aussi : ▻https://www.askapache.com/htaccess/pdf-cookies-headers-rewrites
#PDF #téléchargement #.htacces #virtual_host #apache #PDF.js #header
Servo, the parallel browser engine
▻https://servo.org
Servo is a modern, high-performance browser engine designed for both application and embedded use.
How to quickly set up a Gatsby.js JAMstack website with a headless CMS
▻https://hackernoon.com/how-to-quickly-set-up-a-gatsby-js-jamstack-website-with-a-headless-cms-4
There’s a new source plugin out that makes it easy to use Sanity as a headless CMS for a JAMstack website built with Gatsby.js. It’s pretty easy to install and integrate with exciting projects on Gatsby. If you’re new to the static site generator, or want to test the plugin out, we made a full company website and a headless CMS example, with people, projects, a blog, and some info pages. In this tutorial we’ll show how to set it up, and how to run Gatsby in #development mode on a web server, to get a real-time online preview of content changes.▻https://medium.com/media/c98931f93471ee4aed8e69d221bd6b36/hrefThe example is a monorepo, containing both the configuration for Sanity Studio, where you’ll be editing content, and the Gatsby built website. It’s also configured to be deployed straight (...)
How to use #gatsby with a Headless #cms
▻https://hackernoon.com/how-to-use-gatsby-with-a-headless-cms-ba365bb77733?source=rss----3a8144e
Learn how to build a Gatsby blog using #buttercms. The code examples in this article let you combine Gatsby and ButterCMS in just a few minutes, no matter if you are a beginner or an expert.Why Gatsby and ButterCMS?Gatsby is a static site generator based on React and GraphQL. ButterCMS is a headless CMS and blogging platform. What does that mean and why should you use them?A static site (HTML, CSS, and JavaScript) is fast, secure and flexible. There is no database or server-side code that attackers can exploit. A static site generator pulls data from APIs, databases or files and generates pages using templates.As a developer, you probably want to write your content as Markdown files. However, if your static site’s content has to be managed by non-developers, they’ll prefer a CMS. A (...)
4 Critical Capabilities of Headless CMS #api You Need to Integrate with External Systems
▻https://hackernoon.com/4-critical-capabilities-of-headless-cms-api-you-need-to-integrate-with-e
Integrating a new content management system (CMS) into your existing ecosystem of tools and services may be challenging, but not with a headless CMS with a quality API. Read on to learn how headless CMS API can help you prepare for the future.There is no doubt that in order to connect content-as-a-service with its headless API-first approach to other best-of-breed #microservices you have to have a good quality API on both ends, so that the services communicate and integrate well.But what does a good quality API really mean? Of course, there are many different angles you can consider (e.g. it has to be testable, well documented, with solid error reporting, secure…). In this article I am focusing on the quality of a headless CMS API, and more specifically the required API capabilities (...)
How to get started with Sanity as a headless #cms
▻https://hackernoon.com/how-to-get-started-with-sanity-as-a-headless-cms-b755a9de1770?source=rss
Sanity is the perfect companion for when you want to get started with the JAMstack, or just need API for your project. In this tutorial you’ll learn how to get started with using Sanity — from configuring the #react editor with #javascript, to querying the API and migrating the #content datasets.If you find yourself in need of some backend, the chances are that Sanity is one of the quickest ways to get started without later punishing you. Spin up a new Sanity project for your weekend project. For that time you need an API to test something quickly. Or you can use it for more serious stuff. For example, when you need a conduit between a legacy system and the technology you prefer to use. And when you need humans to be in control of digital content, Sanity has an open source editor, that you (...)
QuickStart a Next.js Website Using a Headless CMS API
▻https://hackernoon.com/quickstart-a-next-js-website-using-a-headless-cms-api-7915887043c9?sourc
Cosmic JS offers a headless CMS that enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team ends up saving time in the process. To demonstrate how easy it is to get started with Cosmic JS, I’ll quickstart a Next.js Website Boilerplate using the Cosmic JS CLI and connect it with my Cosmic JS Bucket Dashboard.TL;DR:Next.js Website BoilerplateNext.js Website App PageDeveloper DocsNext.js Knowledge Base Developer Articles: Next.jsQuickStart a Next.js Website using a Headless CMS APICosmic JS is an example of a robust headless CMS and API that’s promoting collaboration on cross-functional teams to build apps faster. Get started (...)
#quickstart-nextjs-app #web-development #javascript #headless-cms-api #next-website-boilerplate
QuickStart a Gatsby Application Using a Headless CMS API
▻https://hackernoon.com/quickstart-a-gatsby-application-using-a-headless-cms-api-292fa64bdaef?so
Using a headless CMS API has many advantages, namely time and ease of getting your application up and running while giving your cross-functional team the tools they need to get their job done. Cosmic JS enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team ends up saving time in the process. Developers can build applications using their favorite frameworks and programming languages, knowing they can integrate with any third-party APIs, databases or Static Site Generators.A Static Site Generator (SSG) that has broken onto the playing field in a major way is Gatsby. Gatsby lets you build blazing-fast sites with your data, (...)
#headless-cms-api #web-development #quickstart-a-gatsby #gatsbyjs #javascript
Headless #cms vs Traditional CMS: A Deep Dive
▻https://hackernoon.com/headless-cms-vs-traditional-cms-a-deep-dive-4ec834fd6fd3?source=rss----3
If you’ve ever used a Content Management System (CMS), you’ve likely used #wordpress or other traditional CMS (we’ll define “traditional” later). Wordpress — and its architecture — has been around for 15 years and is synonymous with CMS. How it works, and more importantly how you work with it and get it to do what you want, is an entrenched pattern that developers and marketers are used to.This entrenched familiarity with WordPress can be a challenge for a modern CMS like ButterCMS. Butter is quite different from what you’re used to, at least from an architectural standpoint. It leads to many questions when you first discover us, questions that we’re going to cover in this series. The goal of this series is to examine how ButterCMS compares to a traditional CMS like Wordpress and clarify which (...)
Creating your Schema in #flamelink.io, a Headless #cms for #firebase?
▻https://hackernoon.com/creating-your-schema-in-flamelink-io-a-headless-cms-for-firebase-a692a8d
In this article we’ll cover how to create a schema in Flamelink, a headless CMS for Firebase. We’ll also cover how to edit your schema details and how to add, sort & customize your fields.If this is the first time you’ve heard about Flamelink, check out our explainer.You can also find out “How to get started with Flamelink” to learn how to hook Flamelink up to Firebase to help you manage content within your Firebase projects.Alrighty, let’s jump straight into it. You can either watch the Tutorial video below, or follow along with the article (now with free screenshots included).▻https://medium.com/media/8f10b24145ab1c667f6c1974ec5a7bc6/hrefSetting up your Content SchemasFlamelink’s Schema builder lets you structure your content or data in the most optimal way for your app, offering you (...)
How to create a headless #drupal site
▻https://hackernoon.com/how-to-create-a-headless-drupal-site-a88519f8ce7b?source=rss----3a8144ea
ADCI SolutionsIn my previous article “RESTful Web Services in Drupal 8: quick start guide” I just mentioned some possibilities that arise from a decoupled Drupal approach. One of them is an opportunity to build a Drupal site with separate back-end and front-end. Why headless Drupal became a trend in a few past years? First of all, it makes a developer’s life easier: back-end and front-end teams can work separately from each other. Another advantage is an ability to serve content on the growing numbers of websites, back-end systems, different types of applications and multiple devices, such as IoT devices, wearables and more. All of these abilities are based on the web services principles.That’s where our knowledge of a RESTful API from the previous article will come in handy. In this (...)
Introduction to the Headless CMS
▻https://hackernoon.com/introduction-to-the-headless-cms-1a8db3cb0c3d?source=rss----3a8144eabfe3
There are certain types of content management systems — Coupled CMS and Decoupled CMS. The coupled CMS is also known as a traditional or monolith architecture. In a coupled CMS, the back-end is bound to the front-end. As an example of coupled CMS — WordPress or Drupal. It allows users to create content, save it to the back-end and serve it to the front-end. Usually, the coupled CMS allows users to style and customise the frontend, but often those changes are limited.This blog post was originally published in my blogThis is the reason why the decoupled CMS comes into play. The decoupled CMS is also known as a headless CMS. The headless CMS is a back-end only content management system which provides the RESTful API which can be used to build any front-end around. The number of options in terms (...)
Build Vue.js E-Commerce on Top of Headless ButterCMS [Demo]
▻https://hackernoon.com/build-vue-js-e-commerce-on-top-of-headless-buttercms-demo-131cc9895350?s
Photo by Álvaro Serrano on Unsplash“I’m a developer, not a God d*mn point & click machine.”That’s my dev friend Nic. We’re talking e-commerce.Few pints in and he cranks up the ranting:“You know what I don’t like? Here:Coding in a closed ecosystemRigid all-in-one platforms for everyone and their dogNot choosing my tech stackIf you want that Shopify site so bad, you can do it yourself, you don’t need ME (dev).”I love Nic.And he’s right: there’s a plethora of cool frameworks/tools out there. Why not create a custom, kick*ss shopping experience with these instead?Today I want to use Vue.js to show you that’s possible. Because yeah, Vue.js e-commerce is a thing!And with the right set up in the backend — headless content management, namely — it can be a darn cool thing.Enough babbling, here’s what this Vue (...)
GitHub - april/laboratory: Because good website security shouldn’t only be available to mad scientists!
▻https://github.com/april/laboratory
Laboratory is an experimental Firefox extension that helps you generate a proper Content Security Policy (CSP) header for your website
Creating a Progressive Web App with a Headless #cms — Part 2
▻https://hackernoon.com/creating-a-progressive-web-app-with-a-headless-cms-part-2-88ffee198ff6?s
Hey, welcome back! In Part 1 of this series, I introduced you to the Progressive Web App (PWA). I covered what they are, how they function, and how a headless CMS can really add some awesome functionality. In Part 2, I’m going to dive into building a #pwa and adding some cool features. That means creating the base app, adding the magic, and testing.So, let’s get to the good stuff!RecapIn Part 1, I mentioned a few services that we’re going to talk about a lot in this series.Google PWA TutorialThis is the “base” app we started with for our demo. It’s a great tutorial and provides a nice foundation for a PWA.Kentico CloudThis is the cloud-based CMS we used to power our application. It’s a scalable, flexible CMS with tons of SDKs and sample projects to help you get going quickly.Creating the base (...)
Storyblok: API-based & Headless CMS as a Service
▻https://www.storyblok.com
“Clean and structured JSON for you as developer and a CMS your editors will fall in love with. Unlimited extensibility through custom plugins.”
De l’impossible habitabilité de l’anthropocène
▻http://www.internetactu.net/2017/12/21/de-limpossible-habitabilite-de-lanthropocene
A l’occasion de ses 10 ans, la Haute école d’art et de #design de Genève organisait un étrange colloque convoquant designers, artistes, philosophes, théoriciens, cinéastes… pour tracer des « histoires d’un futur proche ». Une prospective aux frontières de la création et de la science. Parfois ébouriffante, parfois déconcertante. Retour (...)