Articles

Remove CSS outlines, but keep it for keyboard navigation

I often see outline: 0; or outline: none; in CSS just because we don’t like the ring around actionable elements. Because it’s ugly sometimes and we don’t want to have it in our application / web site. I think this is mostly misunderstanding the mission of that ring. By removing this ring we solving one problem, but in the same time we creating another. I think the trade-off would be removing focus ring for the mouse users only, but not for keyboard navigation.

Let me provide here important cite from W3C about focus ring: Do not use any other[……]

Read more about post Remove CSS outlines, but keep it for keyboard navigation

Using Fiddler to force a web service to support CORS for debugging

There is already nice article about Using Fiddler to force a web service to support CORS for debugging. However, it was written in 2013 and I am going here to little bit update the code for Fiddler v4.5.1.0.

So, you need to add:

public static RulesOption("Force CORS")
BindPref("fiddlerscript.rules.m_ForceCORS")
var m_ForceCORS: boolean = false;

just at the beginning of class Handlers.

In function static function OnBeforeResponse(oSession: Session) { add:

if (m_ForceCORS && (oSession.oRequest.headers.HTTPMethod == "OPTIONS" || o[......]

Read more about post Using Fiddler to force a web service to support CORS for debugging

How do I change default editor for git to Notepad++?

At some point I wanted to change default core git editor from Vim to Notepad++. There are couple of solutions how to do that. However, this:

git config --global core.editor "'C:/Program Files (x86)/Notepad++/notepad++.exe' -multiInst -notabbar -nosession -noPlugin"

works for me on Windows 8.1. By writing this short post here I may save your time in researching.

How to prevent the screen readers to read any information about the image

This post will be super short. So, you want to prevent screen reader from reading any information about image? To achieve that you need to use aria-hidden="true". Example:

<img src="http://www.ctomczyk.pl/wp-content/themes/ct/images/icoFeed.png" alt="" aria-hidden="true" role="presentation"/>

Right to left implementation tricks

Introduction

At some point you may want to have bidirectional (RTL) support in your application / web site. That means you want to have a support for Arabic, Hebrew and other right-to-left languages. Before everything let me quote from W3C some of the definitions:

  • Bidirectional text – in languages that use right-to-left scripts any embedded text from a left-to-right script and all numbers progress visually left-to-right within the right-to-left visual flow of the text. (Of course, English text on this page could also contain bidirectio[……]

Read more about post Right to left implementation tricks

Fix SSL problem when using Ruby “gem install”

During work with GruntJS task named Saas I got stuck on using gem command (the gem command allows you to interact with RubyGems). The problem was with SSL certificate. So, how to fix SSL problem when using Ruby “gem install”? Replace the ssl gem source with non-ssl as a temporary solution:

gem sources -r https://rubygems.org/
gem sources -a http://rubygems.org/

PhantomJS, resources and relative path

PhantomJS (at least version 1.9.8) is not loading resources when you want to use relative path. However, after some research and experimenting here what’s working for me. Example:

var page = require('webpage').create(),
    content = '',
    relativeScriptPath = require('system').args[0],
    fs = require('fs'),
    absoluteScriptPath = fs.absolute(relativeScriptPath),
    absoluteScriptDir = absoluteScriptPath.substring(0, absoluteScriptPath.lastIndexOf('/'));

console.log('scriptDir: ' + absoluteScriptDir);

content += '';
conten[......]

Read more about post PhantomJS, resources and relative path

How do I upgrade npm itself from 1.4.28 version to 2.1.14 on Windows 7?

After some struggling with upgrading npm itself from version 1.4.8 to 2.1.14 I ended up with following solution:

  • I have installed NodeJS, newest version (just overwritten current installation)
  • The npm was installed in (1) C:\Program Files\nodejs\node_modules\npm
  • I have installed new version of npm: npm install npm -g the new version has been located in (2) %USERPROFILE%\AppData\Roaming\npm\node_modules\npm

Now, all you need is to delete all files in directory (1) and copy all files from directory (2) to (1).

npm 2.1.14

How do I set my default Git editor in Windows to create and edit your commit and tag messages

By default, Git uses whatever you’ve set as your default text editor or else falls back to the Vi editor to create and edit your commit and tag messages. To change that default to something else, you can use the core.editor setting. Example for setting default Git editor in Windows to Notepad++:

git config --global core.editor "'C:/Program Files (x86)/Notepad++/notepad++.exe' -multiInst -notabbar -nosession -noPlugin"

Note: use above as a one line command.

Pagination