1819 stories
·
1 follower

Basecamp Didn’t Want to Run This Ad

1 Share

Jason Fried:

When Google puts 4 paid ads ahead of the first organic result for your own brand name, you’re forced to pay up if you want to be found. It’s a shakedown. It’s ransom. But at least we can have fun with it. Search for Basecamp and you may see this attached ad.

And of course, Google doesn’t let you target any of their own trademarks this way, and won’t even let you mention “Google” in your ad text. And Google no longer visually styles paid results distinctively from actual search results — just the little “Ad” icon before the result URL.

Link: twitter.com/jasonfried/status/1168986962704982016

Read the whole story
emrox
2 days ago
reply
Hamburg, Germany
Share this story
Delete

“Can I email…” – Support tables for HTML and CSS in emails

1 Share

Can I email is like Can I use but specifically for email: which HTML and CSS features are supported by which mail client?

They also provide a scoreboard, ranking mail clients based on their support among the 70 HTML and CSS features listed on Can I email.

Can I email… Support tables for HTML and CSS in emails →
Can I Email – Email Client Support Scoreboard →

😱 Digging back in the archive I noticed that “Can I use…” got mentioned here on bram.us about 10 (!) years ago … wow, has it been that long already?!

Read the whole story
emrox
2 days ago
reply
Hamburg, Germany
Share this story
Delete

How to Automatically Optimize Responsive Images in Gatsby

1 Share

Image optimization — at least in my experience — has always been a major pain when building speedy websites. Balancing image quality and bandwidth efficiency is a tough act without the right tools. Photo editing tools such as Photoshop are great for retouching, cropping and resizing bitmap images. Unfortunately, they are not that good at creating 100% optimized images for the web.

Luckily, we have extension packages for build tools that can optimize images for us quickly:

Unfortunately, image optimization alone is not enough. You need to make sure that the entire website is responsive and looks great at all screen sizes. This can easily be done through CSS, but here lies the problem:

Should you optimize your image for large screens or small screens?

If the majority of your audience is using mobile devices to access your site, then the logical choice is to optimize images for small screens. However, it's likely that a significant source of revenue is coming from visitors with large screens over 17". You definitely wouldn't want to neglect them.

Luckily, we have technology that allows us to deliver optimized responsive images for different screen sizes. This means we need to generate multiple optimized images with different resolutions fit for specific screen sizes or responsive breakpoints.

For WordPress site owners, this kind of image optimization requires the use of a plugin and a third-party service. The creation of these responsive images cannot be done on the hosting server without significantly slowing down the site for users, hence the need for a third-party service.

If you are using Gatsby to run your website, then you are in luck. This feature is built-in and already configured for you to optimize your responsive images. You just need to drop in some images and write a bit of code to link up your responsive images with your web page. When you run the gatsby build command, the images are optimized for you. This saves you from requiring a third-party service to perform the optimization for you. It's simply done on your deployment machine.

In the subsequent sections, we are going to learn:

  • How image optimization works in Gatsby
  • How to optimize images on a web page
  • How to optimize images in a Markdown post

Prerequisites

Before we start, I would like to note that this tutorial is for developers who are just starting with Gatsby and would like to learn specifically about how to handle images. I am going to assume you already have a good foundation in the following topics:

The post How to Automatically Optimize Responsive Images in Gatsby appeared first on SitePoint.

Read the whole story
emrox
4 days ago
reply
Hamburg, Germany
Share this story
Delete

Frustrations with React Hooks

1 Share

Comments

Read the whole story
emrox
4 days ago
reply
Hamburg, Germany
Share this story
Delete

Turn off DoH, Firefox. Now

1 Share

Comments

Read the whole story
emrox
4 days ago
reply
Hamburg, Germany
Share this story
Delete

react-use – Collection of essential React Hooks

1 Share

react-use is a collection of React Hooks that wrap many browser functions. Want to track the geolocation of a device? Use useGeolocation. Want to read the battery status? Use useBattery. Etc.

import {useBattery} from 'react-use';

const Demo = () => {
  const batteryState = useBattery();

  if (!batteryState.isSupported) {
    return (
      <div>
        <strong>Battery sensor</strong>: <span>not supported</span>
      </div>
    );
  }

  if (!batteryState.fetched) {
    return (
      <div>
        <strong>Battery sensor</strong>: <span>supported</span> <br />
        <strong>Battery state</strong>: <span>fetching</span>
      </div>
    );
  }

  return (
    <div>
      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />
      <strong>Battery state</strong>: <span>fetched</span> <br />
      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />
      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />
      <strong>Charging time</strong>:&nbsp;&nbsp;
      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />
      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>
    </div>
  );
};

Installation per npm:

npm i react-use

react-use Source (GitHub) →
react-use Demos →

Read the whole story
emrox
5 days ago
reply
Hamburg, Germany
Share this story
Delete
Next Page of Stories