I just noticed that on the latest MacOS Ventura 13.3.1 with Safari 16.4, the navigator.clipboard API is not accessible under plain HTTP .test domains, used with puma-dev for example. It returns “property is undefined” type of error.
The solution is to switch to HTTPS. With puma-dev this is simple, as it comes out of box with support for secure connections.
I haven’t had a chance to test it with plain old localhost yet, but I figured to post this, in case it trips you too.
I am realizing an interesting thing. When I work solely on my Macbook just with a mouse I get done much – and I mean it – much more work as opposed to when I work behind my desktop with a big 24″ screen.
It’s like with the big screen I focus too much on details – especially when designing and doing front end/GUI stuff. On the 15″ Macbook screen everything is more compact. Less information to process, more focus possible.
Interesting.
If you have some experience with CSS layouts you probably know the feeling of hopelessness when you are staring at some box overlapping something it shouldn’t and so on. You tried dozens of possible rules combinations that came to your mind but nothing helps.
Over time I gathered some simple techniques that help me to deal with CSS problems much easier and straightforward. If you aren’t new to web design you for sure know or use some of them.
First you should have the proper tools that will help you with common tasks like validating your document: Everybody knows Web Developer Toolbar for Firefox. Then there is the Web Developer Toolbar for Opera and one for Internet Explorer from the IE team too. Since you should test your pages in all of these browsers (at least on Windows platform) it’s good to have the same functionality in all of them.
Recently a browser called Swift has been released. It’s based on the WebKit rendering engine which Safari on Mac uses. This is invaluable for testing your sites on your Windows box. So go ahead, download it and start testing your pages with it too.
Let’s start with some tips. Note that you are not going to delete the actual styles for the area you are working on. You just add these to determine where exactly the problem lies. The big advantage here is that you can determine the error quickly.
html body #something * {
border: 1px solid Red;
}
Add a border (of your favorite color) to all the elements nested in #something. Note you are using such a specific selector that this style will overwrite all the other ones. This quickly gives you an understanding of what exactly are the sizes and positions of all the elements in the area. From my experience with this you can reveal like 80% of all the problems. Just don’t forget to remove it when fine tuning. Remember border adds to the resulting width of the element.
html body #something * {
margin: 0;
padding: 0;
}
This is invaluable when you think you have some padding or margin doing mess in your layout (and this is a very common problem). It resets the margins and paddings to 0 in all the elements nested in #something. If the problem does not disappear you know the margins and paddings are not the cause and you should look elsewhere.
As you can see the universal selector * is very useful. You can reset any setting like this across the desired area. With this technique you identify the rule which is causing problems in no time. Then you can take the proper action.