כלים שימושיים לפיתוח אתרים

[יהודהלה]

אתר מגניב לכתיבת CSS
cssdesk.com - אתר ממש מגניב ששם אפשר לעשות ניסויים של CSS - מה שנקרא ON THE FLY. לפעמים יש בעייה עם גדלים או אנימציה או אובייקטים נעלמים. באתר זה אפשר לפתור תקלה יחסית מהר או לכתוב אובייקטים לאתרים

אתר מגניב לעבודה עם JavaScript
jsfiddle.net - לפעמים ברצוני לבדוק משהו איך זה עובד בספריית JS כזו או אחרת אך אינני רוצה להשקיע זמן בלחפש את הסיפריה הספציפית ולהורידה למחשבי. באתר הזה אני נכנס מסמן מה אני רוצה לעבוד ואני מתחיל לקודד

אתר הדבקות
pastebin.com - אפשר להשתמש בקוד ולשתף אותו באינטרנט, אין צורך בהרשמה
אני משתמש בזה לשיתוף קוד דוגמה בין לקוחות, או שליחת מייל נקי (בתוך מייל לא כיף לשים קוד)
דוגמה

אתר לבניית מבנה JSON
JsonEditorOnline.org - לפעמים אני רוצה לבנות JSON ערוך בצורה ויזואלית בכדי לא להתבלבל בקוד

אתר לג'ינרות JSON
JSON-Generator.com - לפעמים לצורך בדיקות אני רוצה ליצור קובץ ג'יסון עם פרמטרים שלי. הפעולת יצירת קובץ JSON באופן אוטומטי נקראת ג'ינרוט (מהמילה Generate)

אתר לתצוגת JSON
jsonviewer.stack.hu - כשעובדים עם JSON (מבנה נתונים שבנוי בצורת אובייקטים של JAVASCRIPT) לפעמים נתקלים בקוד ארוך שרוצים להציגו בצורה ויזואלית כדי לפתור תקלה
נסו: קוד שג'ינרטתי

אתר לבדיקת RegEx
gskinner.com/RegExr - לפעמים צריך לעשות ולידציה של נתונים, בדיקה שהמבנה של כתובת האתר או דואר או טלפון או ת.ז. תקינה
לרוב אני משתמש בביטויי RegEx ובכדי להקל יש כלי מאוד נוח

======
>>>> אתם מוזמנים לבקר http://www.korotkin.co.il
בקרוב אפרסם הורדה לקובץ JS שעושה Parallax ותומך ב RTL

 

[haggitkb]

תודה רבה. אתרים שימושיים מאד!

 

[mat]

אני מוסיף.

ל regex אני אוהב את האתר הזה.
http://regexpal.com/

ולjson אני אוהב את האתר הזה
http://json.parser.online.fr/
כי הוא מפענח גם json שגוי וגם מסמן איפה השגיאה.

 

[wmw]

http://gskinner.com/RegExr/
עובד על אובייקט ג'אווה בדפדפן
אפשר להוריד אותו למחשב [יש לינק בדף]
ולעבוד איתו אוףליין


אחד הפרוייקטים המהממים לכתיבת צד לקוח
http://brackets.io/

תורידו, תפעילו, תתחילו לשחק.

 

[יהודהלה]

סליחה - לא מצליח למחוק את הודעה זאת.

 

[שמח לעזור]

קומבינציות פיתוח למינהן:
http://codepen.io/pen
http://liveweave.com/vAarhU
http://jsbin.com
http://jsdo.it

כלים שעוזרים בפיתוח
http://emmet.io
http://coffeescript.org
http://sass-lang.com

יהודה, תודה!
אבל, שים לב שעוזר פי כמה לינקים עם הסבר (טייטל) והמלצה אישית.
אתה כמובן לא חייב...

 

[יהודהלה]

לפעמים דוחסים את הקוד ה HTML
בכדי לפתוח את הדחיסה
http://onlinewebtool.com/uncompress-html.php

קומבינציות פיתוח למינהן:
http://codepen.io/pen אתר נחמד לפיתוח - יש לו תמיכה בשפות כתיבת קוד מהיר.
HTML אפשר לכתוב ב JADE, SLIM, HAML, MARKDOWN
CSS אפשר עם SASS, LESS, STYLUS
JS אפשר עם CoffeScript, LiveScript
אינו דורש הרשמה.

http://liveweave.com/6st3m4 מערכת נחמדה עם AUTOCOMPLETE של קוד תוך כדי כתיבה. תומך במגוון ספריות JS
אפשר לשתף בצורה אנונימית - לא דורש הרשמה

http://jsbin.com גם תומך בכל מיני כתיבות מהירות. הפריסת מסך אחרת. יש מגוון סרתוני הדרכה איך לעבוד עם הכלי הזה. יש הרבה אפשרויות.

http://jsdo.it - רשת חברתית למתכנתים בסגנון. נותים שם כל מיני כלים. [טיפ: שם יש כל מיני רעיונות עיצוב נחמדים מאוד, ודוגמאות קוד שמישות]

כלים שעוזרים בפיתוח
http://emmet.io תוסף שמאפשר לכתוב קוד בצורה מהירה לדוגמה - דמינו איך ליצור טבלה ב HTML בלבד של 100 שורות. הרבה עבודה של העתק-הדבק. דוגמת קוד ליצירת טבלה של 100 שורת ובכל שורה שלוש תאים :

table>tr*100>td*3

אוטומטי דרך העורך ה HTML האהוב שלכן הוא יצור טבלה ברגע שתלחצו אנטר

שפות שימושיות
http://coffeescript.org - כתיבת JS בקידוד מהיר לדוגמה:

square = (x) -> x * x

יוצר

square = function(x) {
  return x * x;
};

http://sass-lang.com ממש ממש ממש מגניב -שפה שמג'נרתת CSS
שאפשר לשים שם משתנים - לדוגמה להגדיר פאלטת צבעים, ותוך שניה לשנות את כל האתר לפלטה חדשה.
קוד יותר מסודר
במקום לכתוב

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

אפשר יהיה לכתוב

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

שיחה שלמה בפני עצמה... בקיצור שווה-שווה-שווה (חוסך המון זמן)

 

[שמח לעזור]

יאהוו, ממש תודה!
בhttp://sass-lang.com יש כמה כלים חלקם בתשלום, לאיזה התכוונת?

 

[יהודהלה]

יאהוו, ממש תודה!
בhttp://sass-lang.com יש כמה כלים חלקם בתשלום, לאיזה התכוונת?

משו כזה, http://sass-lang.com זה שפה, כמו לכל שפה יש כלי עזר - שבאתר מפרסמים - חלק מכלי עזר בתשלום.

 

[יהודהלה]

רשמתי סיכום באתר שלי: אתם מוזמנים לראותו:

http://www.korotkin.co.il/blog/כלים-לפיתוח-אתרים-2013