Frontendplace Blog

Sharing Frontend developing ideas

a Blog for frontend Webdevelopers

This frontendplace aims to offer web development and 3D modelling tutorials, tips and tricks. Written by a web-developer and multimedia consultant who is passionate about web standards, webdevelopment and 3D visualisation.

Sass Mixin for background image with retina support

Posted by info on September 12th, 2012

Here is an example for a sass stylesheet. to support Retina display images. This example only support .png images where the basename of the image is passed to the mixin as variable.

@mixin retina {
  @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    @content;
  }
}

@mixin generic-background-image($image) {
	background: image-url("#{$image}.png");
	  @include retina {
	    background: image-url("#{$image}@2X.png");
	}
}

h1 {
	@include generic-background-image("content");
}

This will generate:

h1 {
  background: url('../images/content.png');
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  h1 {
    background: url('../images/content@2X.png');
  }
}

Posted in Scripting | Comments Off

Dreamweaver modifies XML on opening

Posted by info on June 11th, 2012

Dreamweaver has some preference settings to rewrite your code on opening but even when you uncheck all and expect to view the original content then be warned..

example:

<test>
<!--<node1>
       <node2>
        <!- - Explanation:
         this is some html comment
        - ->
       </node2>
    </node1>-->
</test>

When you want comments nested inside other comments temporary changed and set a space between the two “-” character  in Dreamweaver the xml becomes this and your xml becomes corrupt:

<!--<node1>
       <node2>
          <!- - Explanation:
          this is some html comment
         - ->
        </test>
     -->

So better change this to <!- Explanation….. ->

Posted in 3D Tutorials | Comments Off

Using joomla 1.5 together with php 5.3

Posted by info on June 2nd, 2012

If you have an error in joomla 1.5 website and your provider (or in my case in my snowleopard website)

Warning:
Parameter 2 to frontpage() expected to be a reference, value given in...

Then you can try this fix http://phpscripts4u.com/uncategorized/parameter-2-frontpage-expected-reference/. It helped me.

Posted in 3D Tutorials | Comments Off

regular expression dutch telephonenumbers

Posted by info on April 16th, 2012

For the dutch telephone numbers is a list of prefixes defined (see http://statisch.detelefoongids.nl/static/nl_NL/netnummer.html) and the place of the – and spaces is defined in a NEN description 2132.(http://taaladvies.net/taal/advies/tekst/53/)

If you also want to check for the correct prefixes in your form validation here is a sample expression that checks this all: (this doesnt backtrack the existence of first added “(” to validate “()” pair) and uses ungreedy grouping for better performance.

^\(??0(?:(?:(?:10|13|15|20|23|24|26|30|33|35|36|38|40|43|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79)\)??\s??\-??\s??\d{3}\s??\d{2}\s??\d{2})|(?:111|113|114|115|117|118|161|162|164|165|166|167|168|172|174|180|181|182|183|184|186|187|222|223|224|226|227|228|229|251|252|255|294|297|299|313|314|315|316|317|318|320|321|341|342|343|344|345|346|347|348|411|412|413|416|418|475|478|481|485|486|487|488|492|493|495|497|499|511|512|513|514|515|516|517|518|519|521|522|523|524|525|527|528|529|541|543|544|545|546|547|548|561|562|566|570|571|572|573|575|577|578|591|592|593|594|595|596|597|598|599)\)??\s??\-??\s??\d{2}\s??\d{2}\s??\d{2})$

Posted in Scripting | 2 Comments »

Difference between fireEvent and onclick in internet explorer

Posted by info on February 10th, 2012

I came up to a difference between firing events in internet explorer and firefox, Chrome, safari etc.
In Internet explorer 8 you can fire events like onclick, onmouseover etc with the method fireEvent with javascript. In other browsers you can use dispatchEvent for this and in some other libraries like Prototype you can use triggerEvent or trigger in jQuery.

When you fire an event in the standard browsers (FF,CHR etc) a submit on a form is triggered and a document.location change is triggered when an “click” event is called. And when you don’t want this to happen you should call preventDefault() to cancel the default action of the button or anchor (submitting or redirecting to an other page). But…. in IE8 I see that when calling fireEvent(‘onclick’) only the onclick listeners that are added to the buttons or anchors are triggered but NOT the default actions. So there will be no submitting or redirection when calling fireEvent(‘onclick’). But when you call the general click() function all the onclick event listeners will be triggered INCLUDING the default action. So try it yourself in this example with internet explorer.

See example on http://www.frontendplace.nl/bb/wp-content/uploads/2012/02/fireEvent-Method-Sample.html

Posted in 3D Tutorials | Comments Off

bug report: attributes becomes Uppercase in Dreamweaver xml file

Posted by info on January 11th, 2012

This is a problem that maybe only I came across but you never know if somebody else found this too:

When creating an XML file and use an element with attribute “href” the attribute becomes “HREF” with capitals when somewhere in de XML the content of a node has &nbsp; entity in it. An other entity like &amp; doesn’t show this “feature”.
This only applies when you have set the Code Format preference: Default attribute case to lowercase and have checked Overwrite case of attributes.

This only occurs on attributes and elements that are listed in the tag libraries under Advanced Formatting and the attribute case are set to “default”.
It seems that Dreamweaver doesn’t respect the default setting set by the checkbox Default attribute case.

Steps to reproduce bug:
1. create XML file
2. enter node: <link href=”/mypath”>Example&nbsp;text</link>
3. save the file
4. open the file again in dreamweaver
Results:
<link HREF=”/mypath”>Example&nbsp;text</link> and dreamweaver reports no change in the document.
Expected results:
<link href=”/mypath”>Example&nbsp;text</link>

By adding the following at the top of your XML (under the <?xml version=”1.0″ encoding=”UTF-8″?> ) the problem is solved for Dreamweaver:

<!DOCTYPE FirstElementName [
<!ENTITY nbsp "&#160;">
]>

Posted in Scripting | Comments Off

Re-activate one finger click-and-drag gesture in Lion

Posted by info on December 31st, 2011

When I installed Lion over my old snow leopard versioned system I kept the trackpad settings. I used to use the one-finger gesture in Lion a lot. But when installing a clean Lion default it doesn’t come with the same one finger click-and-drag gesture that used to be in Snow Leopard, and instead the user has an option of enabling a three finger drag gesture through the system preferences. This post shows you how to re-enable the one finger drag gesture. So you are able to use the same settings as before on your older system.


To enable one finger drag, go to System Preferences, click on Universal Access, and then the Mouse & Trackpad tab. Now click on the “Trackpad Options…” button available at the bottom of this screen. Enable the second option, which is named “Dragging” and select the desired draging behaviour from the drop down list
After this you should be able to do one finger click and dragging just like in good old Snow Leopard.

Posted in Other tutorials | Comments Off

Vlookup and concat in excel

Posted by info on December 4th, 2011

Rationale:

I want to find all the objects where a specific part is used in a list of objects and show the objectlist so I know in which objects the part is used.
For example I have this table
B 1
A 2
B 3
B 4

how to display the B result like this
B 1;3;4 whereas the vlookup only return 1 value

Solution: use this macro in excel.

' Lookup_concat module
' This module vertical search all occurrences of a string in a column and
' return the values from a cell in an other column in the same
' row separated with a given separator string.
'
' ©2011 www.frontendplace.nl
'
' Requirements:
' A table sorted on the column where the Search_in_col string is
'
' Usage:
' lookup_concat(value to search{Cell|String}, search column{Range}, returned value column{Range}, seperator{String})
'
' Example:
' lookup_concat(A4,'ReferenceSheet'!$B$1:$B$100,'ReferenceSheet'!$A$1:$A$100,";")
'
' Return value:
' found values separated with separator string defaulted with ","
Function Lookup_concat(Search_String As String, Search_in_col As Range, Return_val_col As Range, ByVal Seperator As String)

Dim lRowIndex As Long
Dim strResult As String
Dim strSep As String

If Len(Seperator) = 0 Then strSep = ", " Else strSep = Seperator

For lRowIndex = 1 To Search_in_col.Count
    If InStr(1, Search_in_col.Cells(lRowIndex, 1), Search_String) Then
        If Len(strResult) = 0 Then
            strResult = Return_val_col.Cells(lRowIndex, 1).Value
        Else
            strResult = strResult & strSep & Return_val_col.Cells(lRowIndex, 1).Value
        End If
    End If
Next

Lookup_concat = Trim(strResult)

End Function

Example

 

Posted in Scripting | Comments Off

Must know for css developers

Posted by info on November 17th, 2011

The new world needs frameworks for quick responsive web designs for multiple devices.

There are several frameworks that use sass or less css.
Here are some links for reading:

http://twitter.github.com/bootstrap/
http://www.anotheruiguy.com/2011/10/from-sass-to-less-and-right-back-with-sass/
https://github.com/paulmist/responsive.less
http://semantic.gs/
http://axle.dalesande.com/
http://compass-style.org/

Posted in Scripting | Comments Off

Streaming from your mac on the ACRyan media box

Posted by info on November 6th, 2011

When you want to stream your video from your mac to the RyanHD box you need to add the shortcut to your computer to the network in the RyanHD box. if you are on the network tab press menu on your remote then choose ADD. Add the IP number of your computer and your password and username. Now you can try to connect to your computer, search the directory on the computer for the music or videos and play it on you ryan HD media streamer.(it may be necessary to add the domain name in the settings too (mine was fritz.box)
When you have a Apple Time capsule you have to look up the IP adres from your timecapsule (I found the IP in the fritz box settings). In the Shop the seller told me I could not store and stream video from my time machine and the box was not designed for that. Only to make backups. But with the ryan HD already full I could also use the 2 TB Data partition from my timecapsule as extra storage and stream my media from there and have a better and extra wireless at home.

Posted in Other tutorials | Comments Off