Cheat Sheets για Web Developers και Designers

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
24/11/2010 από
root

Τα cheat sheets είναι χρήσιμα γιατί οι Web Developers σήμερα πρέπει να θυμούντε περισσότερα πράγματα για να είναι αποτελεσματικοί και να κάνουν τη δουλειά τους.
Τα περισσότερα cheat sheets είναι σχεδιασμένα για εκτύπωση, ώστε να μπορείτε να τα έχετε στο γραφείο σας.

Εδώ είναι μια συλλογή από χρήσιμα cheat sheets ειδικά για ανάπτυξη ιστοσελίδων που θα σας βοηθήσουν με την HTML, JavaScript, Python, Ruby-on-Rails, Ajax, Adobe Photoshop, Adobe Illustrator, CSS3, HTML5, XHTML, XML, MooTools, ASP , VB Script, MySQL, jQuery, SEO, htaccess, mod_rewrite, 3D Max, Cinema 4D R8, PHP και CSS.

 

Disable right-click

Disable right-click contextual menu.

$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});

Disappearing search field text

 

$(document).ready(function() {
$(“input.text1″).val(“Enter your search text here”);
textFill($(‘input.text1′));
});

function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){ input.val(”); }
});
input.blur( function(){
if( $.trim(input.val()) == ” ){ input.val(originalvalue); }
});
}

Cascading Style Sheet Level 2 Visual Cheat Sheet

3

CSS Cheat Sheet (V2)

4

HTML Cheat Sheet

5

jQuery 1.3.2 and 1.1.3 Cheat Sheets

6

jQuery 1.3 Cheat Sheet

7

Ruby on Rails Cheat Sheet

8

jQuery Cheat Sheet 1.2

9

Opening links in a new window

XHTML 1.0

$(‘a[href^=”http://”]‘).attr(“target”, “_blank”);

HTML 5 Cheat Sheet

10

HTML5 Visual Cheat Sheet (Reloaded)

11

(X)HTML Elements and Attributes

12

HTML5 Canvas Cheat Sheet

13

Detect browser

Change/add something for a certain browser.

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= “1.8″ ){
// do something
}

// Target Safari
if( $.browser.safari ){
// do something
}

// Target Chrome
if( $.browser.chrome){
// do something
}

// Target Camino
if( $.browser.camino){
// do something
}

// Target Opera
if( $.browser.opera){
// do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});

jQuery 1.4 API Cheat Sheet

14

jQuery 1.4 Cheat Sheet

16

Oscarotero jQuery 1.3 (as wallpaper)

17

jQuery Selectors

18

MooTools Cheat Sheet

 

19

Adobe Illustrator Shortcuts

20

Preloading images

 

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)=”” {=”” jquery(=””><img>”).attr(“src”, arguments[i]);
}
}
// how to use
$.preloadImages(“image1.jpg”);
});
</arguments.length;>

HTML Color Codes Matching Chart

 

21

ASP/VB Script Cheat Sheet

 

22

HTML Character Entities Cheat Sheet

 

23

Prototype Cheat Sheet

 

24

MySQL Cheat Sheet

 

25

CSS Styleswitcher

Switch between different styles

$(document).ready(function() {
$(“a.Styleswitcher”).click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$(‘link[rel=stylesheet]‘).attr(‘href’ , $(this).attr(‘rel’));
});
// how to use
// place this in your header
<link rel=”stylesheet” href=”default.css” type=”text/css”>
// the links
<a href=”#” class=”Styleswitcher” rel=”default.css”>Default Theme</a>
<a href=”#” class=”Styleswitcher” rel=”red.css”>Red Theme</a>
<a href=”#” class=”Styleswitcher” rel=”blue.css”>Blue Theme</a>
});

JavaScript Cheat Sheet

26

Megapixels and Maximum Print Size Chart

27

The Web Developer’s SEO Cheat Sheet

28

htaccess Cheat Sheet

29

Handy Cheat Sheet of MySQL Commands

30

mod_rewrite Cheat Sheet

31

Columns of equal height

 

$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(“.left”));
equalHeight($(“.right”));
});
});

mod_rewrite Cheat Sheet

 

32

Computer Arts Keyboard Shortcuts

 

33

Gosquared CSS help sheets

34

CSS Shorthand Cheat Sheet

35

W3C – Cascading Style Sheets, Current Work

36

CSS support in Opera 9.5

37

RGB Hex Colour Chart

38

XML (eXtensible Markup Language) in one page

39

Script.aculo.us Cheat Sheet

 

40

PHP Cheat Sheet

41

Font resizing

$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $(‘html’).css(‘font-size’);
$(“.resetFont”).click(function(){
$(‘html’).css(‘font-size’, originalFontSize);
});
// Increase the font size(bigger font0
$(“.increaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
// Decrease the font size(smaller font)
$(“.decreaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
});

Smooth(animated) page scroll

$(document).ready(function() {
$(‘a[href*=#]‘).click(function() {
if (location.pathname.replace(/^//,”) == this.pathname.replace(/^//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=’ + this.hash.slice(1) +’]‘);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to
<a name=”top”></a>
// the link
<a href=”#top”>go to top</a>
});

Get the mouse cursor x and y axis

$(document).ready(function() {
$().mousemove(function(e){
//display the x and y axis values inside the div with the id XY
$(‘#XY’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
// how to use
<div id=”XY”></div>

});

jQuery timer callback functions

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});

Python Cheat Sheet

42

Remove a word

$(document).ready(function() {
var el = $(‘#id’);
el.html(el.html().replace(/word/ig, “”));
});

Verify that an element exists in jQuery

$(document).ready(function() {
if ($(‘#id’).length) {
// do something
}
});

Make the entire DIV clickable

$(document).ready(function() {
$(“div”).click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find(“a”).attr(“href”); return false;
});
// how to use
<div><a href=”index.html”>home</a></div>

});








Hide ↑

extend your possibilities!! xtnd.it

Follow Web Design Forum on Twitter ,

Οδηγός επιβίωσης WordPress για αρχάριους

25 October 2012

                    Ξεκινήσετε το wordpress blog σας μέσα σε λίγα λεπτά!

Read more...

Διαγωνισμός: 5 πακέτα Web Hosting από την StigmaHost

16 October 2012

Με ενθουσιασμό σας ανακοινώνουμε ότι η StigmaHost σας προσφέρει την ευκαιρία[…]

Read more...

Ελληνική Σειρά Εκμάθησης JavaScript (Video Tutorials)

21 September 2012

Η Σειρά περιλαμβάνει τα εξής Μαθήματα:

JavaScript – 1 : Λίγα[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.