Archive for the ‘Web Development’ Category
Posted by jpluimers on 2020/11/19
Would this be the reason that so many web-sites still use less than half of my screen width?
The 960 Grid System is an effort to streamline web development workflow.
Source: [WayBack] 960 Grid System
Via: [WayBack] windows – What minimum screen size should I assume? – Stack Overflow (where in 2010 for some types of software you had to go for 640×480, many things were still 800×600, but 1024×768 for desktop users was the norm; on the one hand times have changed, but on the other hand not a lot).
Code: [WayBack] GitHub – nathansmith/960-Grid-System: The 960 Grid System is an effort to streamline web development workflow.
Related:
–jeroen
Posted in Development, Software Development, Usability, User Experience (ux), Web Development | Leave a Comment »
Posted by jpluimers on 2020/11/03
Since I keep forgetting this has been possible since the introduction of html 5: [WayBack] html – Is it possible to specify a starting number for an ordered list? – Stack Overflow:
If you need the functionality to start an ordered list (OL) at a specific point, you’ll have to specify your doctype as HTML 5; which is:
<!doctype html>
With that doctype, it is valid to set a start attribute on an ordered list. Such as:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
–jeroen
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2020/10/13
[WayBack/Archive.is] Dimensions – Chrome Web Store: A tool for designers to measure screen dimensions
This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn’t really work with images because there the colors change a lot pixel to pixel.
# Images & HTML Elements
Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.
# Mockups
Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.
# Keyboard Shortcut
You can start and stop dimensions with the ALT + D shortcut.
# Area Boundaries
Wanna get the radius of a circle? Is text standing in your way? Press Alt to measure the dimensions of a connected area.
–jeroen
Via:
Posted in Chrome, Chrome, Development, Google, HTML, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »
Posted by jpluimers on 2020/08/06
Colorblind Web Page Filter
A great tool I found out about a while ago [Archive.is] Toptal Color Blind Filter.
It shows the original web page and the rendering for various types of color blindness:
protan -> Protanopia: red/green color blindness; anomalous red conesdeutan -> Deutanopia: red/green color blindness; anomalous green conestritan -> Tritanopia: blue/yellow color blindness; anomalous blue conesgrey -> Greyscale/achromatopsia: quick check for all forms of colorblindness
Because of a comment at [WayBack] Forums… https://embarcaderomonitoring.wiert.me/ – JWP – Google+, I used Toptal to notify Uptime robot that their status pages are hard for color blind people: [WayBack] Jeroen Pluimers on Twitter: “Some color blind people indicated to me that @uptimerobot status pages are hard for them to read. Examples are for @EmbarcaderoTech as they have subdomains being offline often: …”, so lets look at how people with various types of color blindness see embarcaderomonitoring.wiert.me :
Read the rest of this entry »
Posted in *nix, Color (science), Color (software development), Development, Monitoring, Power User, science, Software Development, Uptimerobot, Usability, User Experience (ux), Web Development | Leave a Comment »
Posted by jpluimers on 2020/06/25
From a while back, but still relevant as the speed of the GMail web-UI still has not improved.
[WayBack/Archive.is] Peeking under the hood of redesigned Gmail – Boris – Medium
Via:
–jeroen
Read the rest of this entry »
Posted in CSS, Development, GMail, Google, HTML, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2020/06/01
Cool: [WayBack] GitHub – kzahel/web-server-chrome: An HTTP Web Server for Chrome (chrome.sockets API)
This allows you to develop HTTP applications that live in Chrome:
[Archive.is1/Archive.is2] Web Server for Chrome – Chrome Web Store: A Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline.
Of course you could to python -m SimpleHTTPServer 8888 or python -m http.server 8888, but this runs within chrome and can be used from inside JavaScript projects.
Features
- serve local files
- configure listening port
- configure listening interface (e.g. localhost or all interfaces)
- custom http handlers possible
- websocket support available
- works nice with chrome.runtime.onSuspend
- options for autostart, start in background, etc etc.
- handles range requests, HEAD, etc
- options for CORS
- optional PUT, DELETE request (for upload files)
- sets MIME types
- can render directory listing
- See relevant options: https://github.com/kzahel/web-server-chrome/blob/master/polymer-ui/options.js
Via [WayBack] This is super useful: A# web #server that runs in #Chrome! Makes it super easy to do local web dev without the hassle of setting up a complex back end s… – Jason Mayes – Google+
–jeroen
Posted in Chrome, Development, Google, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2020/05/14
Back in the days, framing stuff from other sites would just work. Nowadays, often they don’t because of a variety of reasons, often the site not wanting to be embedded, which is OK with me.
But it pays knowing what they do and how they do it, to ensure it is not an accidental setting of the address bar URL to the wrong value like in
if(top != window) {
top.location = window.location
}
So here are some links for me to dig deeper when I encounter framing issues again:
My basic idea for a workaround is to go through a proxy.
It looks like others had this idea too, so some links future reading via cors proxy – Google Search:
–jeroen
Read the rest of this entry »
Posted in Development, JavaScript/ECMAScript, JSFiddle, Scripting, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2020/05/13
A cool [WayBack] 108 byte CSS Layout Debugger · GitHub (and sligtly different versions) that makes your page look like this:
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
–jeroen
Posted in CSS, Development, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »
The Wiert Corner - irregular stream of stuff 