Aanpassen hosts file Mac OSX

Wanneer u bezig bent met het verhuizen van uw website en u nog niet de dns hebt aangepast kunt u de nieuwe site niet bereiken onder de domeinnaam. De dns wijst immers nog steeds naar de oude locatie.
We kunnen hier gebruik maken van het hosts file dat op zowel unix (gebaseerde) systemen linux, freebsd, macosx als op het windows platform bestaat.
Op elk unix systeem staat het hosts bestand in de /etc directory. Alleen root heeft rechten dit bestand aan te passen.
Op de Mac is het net een beetje anders.

Hier wordt uitgelegd hoe het op de Mac moet.

  1. Open je terminal: Ga naar Applicaties -> Utilities -> Terminal
  2. Typ: sudo nano /private/etc/hosts + enter
  3. Vul je wachtwoord in: het wachtwoord van je machine + enter
  4. Ga naar de laatste regel en typ: ip-adres www.domain1.tld domain1.tld
  5. Toets ctrl-X
  6. Typ Y + enter
  7. Toets: enter
  8. Typ: dscacheutil -flushcache

Uitleg van de stappen

/private/etc/hosts is het hosts bestand waar we het eerder over hadden.
nano is het tekstbewerkingsprogramma dat we gaan gebruiken om dit bestand aan te passen.
sudo zorgt ervoor dat we tijdelijk root (beheerder) rechten krijgen om het bestand aan te mogen passen.

Wanneer we op enter drukken wordt ons om een wachtwoord gevraagd. Dit is uw eigen wachtwoord. Wanneer u uw wachtwoord invult lijkt het alsof er niet op gereageerd wordt. Dit is normaal. Wanneer er toevallig iemand met u meekijkt kan deze persoon namelijk niet zien uit hoeveel tekens uw wachtwoord bestaat.

Onderaan voegen we de volgende regel toe: [het ipadres van de server waarop uw site gehost wordt] [tab] [uw websiteadres en uw domeinnaam] [tab] is simpelweg de tab-toets, maar u mag hier ook een spatie gebruiken. De regel die we dan toevoegen is:

ip-adres www.domain.tld domain.tld

Vervolgens slaan we het hosts bestand op. Druk op ctrl-X.
U wordt dan gevraagd of u het bestand op wilt slaan. Druk op Y (yes) om dit te doen.
Vervolgens ziet u de naam van het bestand getoond en drukt u op enter.
Het scherm van het tekstbewerkingsprogramma sluit.

Nu moeten we alleen nog 1 commando uitvoeren:
dscacheutil -flushcache

Voor het tijdelijk uitschakelen van de regel volstaat het ook om een # voor de regel te zetten. De regel veranderd dan in commentaar en wordt genegeerd. Het blijft echter nodig om na elke verandering dscacheutil -flushcache uit te voeren.

(Bron: ermis.nl/helpdesk/knowledgebase )

CSS Day 2015: presentations

CSS Day 2015 Stephen Hay: "I want to write some css" | photo-credit: Paul Robert Lloyd
CSS Day 2015 Stephen Hay: "I want to write some css" | photo-credit: Paul Robert Lloyd
CSS Day 2015 Stephen Hay: “I want to write some css” | photo-credit: Paul Robert Lloyd

Speakers @ edition 2015

Paul Robert Lloyd
@paulrobertlloyd: “Responsive Principles” @ speakerdeck, pdf.

Zoe Mickley Gillenwater
@zomigi: “Enhancing Responsiveness With Flexbox” @ slideshare.

John Daggett
“Typography on the Web”

Clarissa Peterson
@clarissa: “Responsive Color” @ slideshare.

Rachel Andrew
@rachelandrew: “CSS Grid Layout” @ slideshare.

Roy Tomeij
@roy: “The Future of CSS Isn’t CSS” @ speakerdeck.

Elika J. Etemad
@fantasai: “Defining auto, An Adventure in Layout” @ inkedblade.

Stephen Hay
@stephenhay: “Best Practices”

Know which media query is active

Screen Shot 2013-06-28 at 11.15.02This tip from Alex Morris is really handy while working on css.

When you’re designing or testing a complicated responsive site in a browser, you often find yourself wondering which media query is currently active – or whether it’s firing at all. My usual debug technique in scenarios like this is to flip the background colour inside each breakpoint. However, that’s not all that informative, so I threw this little snippet together using the CSS ‘content’ property and the ‘after’ pseudo selector. Just slot it into the top of each media query and give each one a unique description – either the breakpoint width/range it relates to, or whatever makes most sense for your needs. It’s quick, lightweight and doesn’t require any scripting. You can use the same technique for other scenarios like annotating a design for a client or even displaying user messages.

@media screen and (min-width: 768px) and (max-width: 1024px) {
	body:after {
		content: "from 768 up to 1024"; /* the label to identify this MQ */
		position: absolute;
		bottom: 0;
		right: 0;
		background: #333;
		color: #fff;
		padding: 10px;

Demo: http://codepen.io/alexmorris/full/tcnhA

Tips I’ve got & found as a new Mac user

On the end of March I stepped into the other world; the one where the people are Mac-users. Since I graduated as a Graphic Designer in ’97 I’ve never been working on a Mac, not that I did not want to, it was to expensive or everybody else worked on Windows or I had to check all my development in the well known ‘always have an issue’ browsers 😉
First of all you have to get used to working on a Mac (again) and that’s not really hard, it just takes a couple of days. The best thing are the gestures/swipes to navigate through the applications and with them! I also use the shortcut keys significantly more than before.

But there are things I did not figure out by myself, although a Mac is as userfriendly as it can be 😉

  1. Show hidden files 28-03-’13
    Once and a while I need to change hidden files to get some things happen at the front-end of a website. I was taken to this article Show hidden files Mac OS X 10.7 Lion and 10.8 Mountain Lion to see them eventually.
    Update 03-04-’13: Now I think it is too much clutter in my finder and in Dreamweaver CS6 there is the option the show hidden files (). Probably I’ll undo this tip.
  2. cdtoOpen terminal in active directory 28-03-’13
    The command line is one application  I do not use very often; the commands won’t stick in my head for very long.
    I just want to open the terminal from where I am in the finder and already be in the same directory as in the finder. Using the little programme  cdto will do this for you.
  3. Switching windows within the application 02-04-’13
    Finally used to the multiple desktops and switching between them (ctrl + left or right arrows) I did not figure out yet how to activate the window that I had opened before, like a mail I had opened in Outlook: it disappeared behind the ‘main’ window. The trick to get it in front/active again is the shortcut key combination: cmd + tilde (the left key just above the cmd key)
  4. Second screen not recognized 03-04-’13
    It’s handy to use a second and bigger screen for development. Once connected my Macbook Pro recognizes it and their I have my big screen. I use the second screen as an extension of my desktop; twice as wide. But not today! I tried many options to get my screen the same resolution as my first screen… Had no luck doing it. Untill my collegue gave me a nice tip: “First open your Macbook and after that connect your second screen, not the other way around”. Disconnecting the second screen, waiting for SyncMaster to adjust and than connect it again: problem solved.
  5. .jpeg vs .jpg 03-04-’13
    Had to save a mailed image (in MS Outlook) with the extension .jpg to my local directory and it forced me to use the extension .jpeg. As a front-end developer I need to use the extensions properly in my css files otherwise the file won’t show up. This will be an extra handling that I was not used to do before (on a windows machine) and the workflow should be as smooth/quick as possible; I need this issue to be fixed. Searching for the best tip resulted in the following: “… In the aforementioned Microsoft Outlook (14.2.4) dragging and dropping a .jpg attachment to the desktop retains the .jpg extension, …“.
    source: OS X says “they standard extension is” .jpeg, but according to who?
  6. Generating SSH key 10-04-’13
  7. Clicking A Button With Your Spacebar 23-07-’13

Thanx to Onno, Maarten, Tim, Shura, Renzo  & Peter and Google

my Firefox Add-ons 13wk09

#329_sbsimnl_20130226-162633_Web Developer __ Add-ons voor Firefox

  • Awesome screenshot: Capture and Annotate 2.3.8
    Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click upload to share. And more!
  • British English Dictionary 1.19.1
    British English Dictionary R1.19 for Firefox, Thunderbird and SeaMonkey by David Bartlett.
  • ColorZilla 2.8
    Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies…
  • Console² 0.9
    Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. From v0.5 includes the Console Filter extension previously available separately from the Console² website.
  • CSS Usage 0.3.0
    Firebug extension to view which CSS rules are actually used.
  • Download Statusbar 0.9.10
    View and manage downloads from a tidy statusbar – without the download window getting in the way of your web browsing.
  • Dummy Lipsum 3.0.0
    Generate “Lorem Ipsum” dummy text (from http://www.lipsum.com).
  • FireBreak 1.3
    The easiest way to find the break points in your responsive designs.
  • Firebug 1.11.2
    Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
  • FireShot 0.98.31
    FireShot captures webpage screenshot in Firefox entirely (see the demo: http://bit.ly/RlBQMV)
    The capture can be quickly annotated and: + Uploaded + Saved as PDF/PNG/GIF/JPEG/BMP + Sent to clipboard + Printed + E-Mailed + Exported
  • Garmin Communicator 4.0.4
    The Garmin Communicator is an internet browser plugin that allows you to easily transfer data between websites and Garmin GPS devices.
  • Html Validator
    HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon.
  • HttpFox 0.8.11
    An HTTP analyzer addon for Firefox
  • MeasureIt 0.4.10
    Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
  • Save Images 0.8.7
    Save Images saves the images from the current tab page, from the cache, to a specified location, with either the images original file name or a file name that you specify. The size and types of images saved may be chosen, with options if…
  • SnipR 3.0.0
    Server Network IP Resolver : Discover where-on-earth the hosts of the websites are, which you visit. Total timeout for hideous web-servers!
  • Symbaloo bookmarker 0.103
    Symbaloo is de simpelste start op het internet.
    Door de Symbaloo bookmarker te installeren, kun je dankzij een extra knop in je browser eenvoudig elke website met 1 muisklik toevoegen aan je Symbaloo.
  • Web Developer 1.2.2
    The Web Developer extension adds various web developer tools to the browser.
  • YSlow 3.1.4
    YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
    http://yslow.org is the official open source website.
  • FireQuery* 1.3
    Firebug plugin for jQuery development
  • Pixel Perfect* 1.7.1
    Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.

*= ff uitgeschakeld

JS: redirect with referrer domainname and tld

Had to write this script to redirect visitors of a global information page back to the subdomain of the site they came from.

Visitor came from a link on this page: http://www.domain1.tld/category/post
Comes on a different website: http://www.domain2.tld/page
After clicking the button the visitor is sent to: http://subdomain.domain1.tld/

var AAP = {}; // global object
var referringDoc = document.referrer;
var referringUrl  = referringDoc.split('/')[2]; // chop the url at each / and use the second chop 
if (referringDoc != "") {
	AAP.referringHost = referringUrl.replace(/^[^.]+\./g, ""); // strip everything before the dot
else {
	AAP.referringHost = "domain.tld";
document.write("<a href=\"http://subdomain." + AAP.referringHost +"\" target=\"_self\" class=\"btn\"><span>Nice button to click on</span></a>");

Widget area in admin area not expanding

If you did not install any plugins then fault is in your functions.php file of active theme. You need to delete last closing “?>” that is closing tag of php. Remove final closing tag of php.

In case if this if happening because of some plugin you need to find out exactly that plugin which is causing this by deactivating plugins one by one, And when you find that plugin which is causing this problem then do the same steps in all .php file of that plugin and remove final closing tag of php “?>”.

source: wordpress.org forums

Unfortunately in my case I already had this ?> removed from my functions.php. So my next move to solve my problem was to disable all the functions; one by one and try to open the widget area. Had no luck with that, so I enabled all the functions in my functions.php again.

Next step was to disable plugins and see if disabling one would result in opening that widget area again. Luckly I don’t use that many plugins and found out that the ‘DMSGuestbook widget’ was causing my problem. Altering the code of that plugin, like Jaytesh Barange mentioned above, would be overwritten with it’s next update.

So for now I disabled the plugin, as it fixes the the problem expanding the widget area 🙁
Hope to find an answer on it soon.

The author of the plugin, Daniel Schurter, has an answer for it; although I don’t find it a nice one :S

Set “Enable accessibility mode” on “Appearance -> Widget -> Screen Options”, that should resolve your problem.
source: dmsguestbook-1-17-1, comment-17972


/** FAVICON ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
function favicon_link()
echo '<link rel="shortcut icon" href="' . get_stylesheet_directory_uri() . '/pix/favicon.ico" />' . "\n";
add_action('wp_head', 'favicon_link');

Interesting read on favicons: Understand the favicon by Jonathan T. Neal

<link href="/path/to/favicon.ico?v=1" rel="icon"/>

CSS: IE bug fixing


body {
color: red; — all browsers, of course
color : green\9; — IE8 and below
*color : yellow; — IE7 and below
_color : orange; — IE6