Style Your Console Lazy Dev!

אנחנו בתור מפתחי FED רואים כל היום רואים בעיניים (או כבר לא רואים בעיניים) את מסך ה- developer tool, אם זה בכרום, פיירבאג, safari dev tool או IE Shit כלשהו (יאללה ש- Edge יגיע כבר :)).

console הוא אחד הכלים שלנו להציג הודעות מידיות וחישוב expression שונים on live בקונסול, לכן הטיפ הבא הוא:

עיצוב שורת ה- console לפי גודל צבע, סוג, וכד'…

הדבר מאפשר למעשה למצוא הודעה ספציפי וב- type מסוים בצורה הרבה יותר קלה ונוחה.

הנה דוגמא קטנטנה שהכנתי אני מאמין ש- 100% ממכם יבינו אותה בלי הסבר 🙂

דוגמא

מודעות פרסומת
מאת chenreuven פורסם ב-General

Virtual Reality With Javascript!

טוב כמו שכולנו יודעים לג'אווה סקריפט אין גבולות.

היום בתפריט: Virtual Reality With Javascript.

Virtual Reality זה אחד הנושאים החמים (אש) היום בתעשייה ויש דיבור מאוד חזק שזה ללא ספק יהיה העתיד הלא רחוק (ביחד עם הולוגרמות). בכללי מפתחים (חכמים מאוד) לקחו את webGL בשילוב עם Three.js או ספריות אחרות שעוזרות לתחום התלת מימד ב- web, פיתחו ספריית API שעוזרת לצורך כתיבה VR ב- JS(ראו בלינקים למטה). כמו כן בדפדפנים החדשים (גוגל כרומיום ופיירפוקס [בחייאת אנשים IE זה לא דפדפן]), יש משהו שנקרא WebVR שזה עוד פ'יצר נסיוני שהדפדפן יודע לתמוך ב- VR על ה- Browser – בקיצור חסר גבולות לחלוטין.

דוגמא

הנה כמה לינקים למתעניינים:

כתבה 1

וידיאו 1

וידיאו 2

 

המשך שבוע טוב

מאת chenreuven פורסם ב-General

Angular Meteor, למה כן כדאי לפתח איתו?

שלום לכולם,

– כתבה נחמדה מאוד ושווה קריאה:

http://www.shmck.com/angular-meteor/

– MeteorJS זה  Full Stack Framework , שנותן הרבה כלים למפתחים בנוסף לפילוסופיות ומתוולוגיות פיתוח קצת שונות.

הייתרון הכי גדול שלו ב- high level זה ללא ספק זמן הפיתוח המהיר שלו באמצעות סט הכלים הנרחב שלו, בנוסף הוא בנוי על packages ז"א סוג של plug&play שפשוט עובד כ-"קסם" (זה גם חלק מהסיבה למהירות הפיתוח)

– שימו לב לדוגמא ש- meteorjs הוא מאוד אגנוסטי ומאפשר להחליף את כל חבילת ה- VIew שכן ברירת המחדל של מטאור זה פריים וורק FE שנקרא Blaze וניתן להחליף אותו בקלות ב-   Angular או ב- React.

– יוצר הספרייה הוא אורי גולדשטיין (Well Done!)

https://github.com/Urigo/angular-meteor

מסקנה:

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

יש לו עוד הרבה ייתרונות שלא אזכרתי פה, אבל זה כבר לכתבה אחרת או just google it )

סופ"ש רגוע

מאת chenreuven פורסם ב-General

הרחבת אופקים עם Coursera

מה זה coursera?

אתר אשר מכיל קורסים חינמיים(מוקלטים עם חומרים מלאים לחלקם) מהאוניברסטאות בעולם.

למה צריך את זה?

  • – הרחבת אופקים
  • – למידה עצמית של דברים שלאו דווקא קשורים לתחום בו אתם עוסקים
  • – סקרנות 🙂 (אנחנו בני אדם לא?)

איזה סוג של הרצאות יש שם?

הכל מהכל. אם זה בפיתוח תוכנה כמו קורס פייתון ועד נושאים שקשורים לכימיה וביולוגיה. (Free Your Mind)

לינק:

https://www.coursera.org/

שוב פעם אנו רואים את כוחו החזק של שיתוף בין אנשים/קהילות שונות להרים פרוייקט יפה כזה.

נ.ב: תודה רבה לאוהד סבג, שהפנה את צומת ליבי לאתר הזה.

מאת chenreuven פורסם ב-General

ES6 – Arrow function and there scope!

אז כמו שכולנו יודעים ES6 Rules! או ישלוט בהמשך ביד רמה. (זה הניחוש הלוגי שלי :))

אני יתחיל פה עם סדרת כתבות ללינקים שמתארים את הפ'יצרים העיקריים של השפה.

והיום בקנה:

Arrow function – כמו בשפה ב- java7 וב- C#, אז החב'רה מלמעלה החליטו להכניס ל- es6 גם את האופציה ל- js. כידוע js שפה דינמית ואוכלת את זה בלי מלח 🙂

arrow function = פונקציה אנונימת בלבד, שכתובה בצורה מקוצרת. לוקח אמנם זמן להתרגל, אבך הרגע שזה קורה אז זה פשוט מעולה.

ייתרון נוסף שלה זה שהיא מחזיקה בסקופ הנוכחי של המקום בו היא נמצא lexecal scope. (מפורט בלינק), ולכן לא נצטרך להשתמש ב- bind או כל קומבינה אחרת לשמירת ה- this הנוכחי.

http://jsrocks.org/2014/10/arrow-functions-and-their-scope/

תתפנקו

מאת chenreuven פורסם ב-General

מה זה GTD?

GTD = Getting Things Done ("לגרום לדברים לקרות" :))

שיטה/מתודולוגיה לניהול ותיכנון זמנים שפותחה ע"י דיוויד אלן

הבלוג הזה הוא יותר ענייני ומעשי ולכן אני אדבר על פחות תיאוריה ויותר עשייה, יותר "איך" לעשות את הדברים מאשר "מה" זה הדברים.

אבל חייב להבין ולקרוא מה זה GTD ברמה הכללית ולכן אני אשלח אותכם לפשפש ולקרוא בוויקפדיה.

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

GTD כמו שרשמתי זה מתודולגיה לניהול ותכנון נכון יותר של הזמנים, וזאת מתבצע באמצעות מספר פעולות פשוטות ובסדרי עדיפויות מסוימיים.

מאת chenreuven פורסם ב-General

GTD- פרק 1 : ניהול משימות הדרך שלי- Getting Things Done

שלום אנשים,

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

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

מה זה GTD:

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

מה שקורה זה פשוט: אנדרלמוסיה במחשבות שלנו = אי שקט נפשי.

דיווד אלן פיתח שיטה שמפרקת כל דבר למשימה, ואף כל משימה לתתי משימות לפי כללים מסויימים. (ראה תרשים).

בכלליות ניתן לתאר זאת כך:

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

התחלה = הכנה של כל הכלים שאיתם אנו רוצים לעבוד לצורך ניהול משימות. קיימות לא מעט כלים(טכנולוגיים ואחרים) להחזיק את כל כמות המידע שמצטבר.

איסוף = איסוף של כל המידע שקיים "בראש"/בחומרים פיזים למקום אחד. (Inbox)

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

ארגון/סקירה = ארגון של המשימות לפי חשיבות ואנרגיות

עשייה = ביצוע המשימה (יכול להיות עשייה ישירה של המשימה/דחייה של המשימה לזמן אחר).

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

GTD-diagram

 

איך אני מיישם את השיטה:

– חשוב לציין שכל אחד יכול ליישם את השיטה כראות עיניו ובכלים שהכי נוחים לו.

הכלים שלי: Google Calendar(GC), Trello

GC – מחזיק את כל המישמות שהם חובה (Must) לעשותם באריך מסוים בזמן מסוים! (לדוגמא: תור לרופא עיניים בתאריך X בשעה Y)

Trello – זה למעשה ה"כלי" הכי טוב שאני מכיר כיום לניהול של כרטיסיות, כאשר אני מחזיק בכלי הזה את כל הדברים שלי בראש. כל דבר חדש נכנס אצלי ל- Inbox (בהמשך אני יפרט איך החלוקה מתבצעת). החסרון היחיד אצלו זה ה- Notification שלו, שהם לא ברמה מספיק טובה ונותנים התראה רק 24 שעות לפני ולא לפי שעה מסוימת. (דבר בעייתי שהחברה עובדת לפתור אותו).

איך Trello מחולק אצלי:

Trello בנוי מ- Boards שבכל אחד מהם יש כרטיסיות שלכל כרטיסייה יש מספר אפשרויות אבל המטרה של כל כרטיסייה זה לשמור מידע. (ברשימה, בהערה וכד'…)

Boards: (תמציתי בגלל שזה פרק ראשון בסדרה):

– Work

– Private

היום אני יעבור רק על החלק של ה- Private:

חלוקה:

א. Inbox

ב. Global/Home

ג. Computer

ד. Phone

ה. Waiting For

אני מאמין שלפי השמות של החלוקה תבינו כל אחד את ההקשר שלו למשימה שלו 🙂

תהליך בקצרה של דוגמא: לצבוע את השולחן בגינה בצבע חום

1. המשימה הזאת נכנסת ל- Inbox

2. המשימה עוברת ל- Home

3. המשימה מדורגת מבין שאר המשימות לפי חשיבות

4. אם אני ארצה לבצע את המשימה ביום מסוים למשל(שישי בבוקר), אני ישים תזכורות Due Date.

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

6. מבצע את המשימה.

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

להתראות וסופ"ש מהנה לכולם

CSS3: פינות מעוגלות ומה שבינהם

שלום לכם,

מי לא מכיר היום את הפינות המעוגלות שקיימות ב- css3 , הלא הם: border-radius כמאפיין ב- css3.

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

אני רוצה קצת לחדש/לרענן דברים לגבי המאפיין border-raduis.

1. איך ממשים את זה בפשטות:

#example1 {
-moz-border-radius: 15px; // עבור פיירפוקס
border-radius: 15px; // שאר הדפדפנים
}

2. התבנית של border-radius:

border-*-*-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

הסבר (משמאל לימין):

א. 2 כוכביות, עבור איזה צד  בצורהלבצע את עיגול הפינה לדוגמא: border-bottom-right-radius,border-top-right-radius, border-bottom-left-radius

ב.  length – גודל של "עיגול הקודקוד", ב- PX או באחוזים.

ג. 1,4 – שמאל עליון, ימין עליון, ימין תחתון, שמאל תחתון – בצורה אופקית.

ד. החלק השני אחרי הסלאש, דומה לחלק הראשון רק בצורה אנכית.

ה. אם נרשום רק את אחד החלקים אז החלק השני יהיה בצורה סימטרית לחלק הראשון . ז"א שהעיגול פינה האנכי יהיה שווה ערך לעיגול פינה אופקי.

Example1:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; (אנכית אופקי)

border-radius: 5px; (אופקי ואנכי לכל הצדדים)

border-radius: 5px 10px / 10px;

Example2:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

border-radius-diagram-1

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

4. דוגמאות בלייב: http://jsbin.com/uyecol/2/

שימו לב: יש גם את הנושא של browser compatability שניתן לבדוק כאן:

http://caniuse.com/

שיהיה שבת שלום, וסופ"ש רגוע.

*אשמח לתגובות

מאת chenreuven פורסם ב-CSS