טריק מדליק: בוקמרקלט שיוצר פתק בדפדפן

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

למה זה עובד?

עניין פשוט של הדפדפן אשר יודע לקלוט הגדרות מידע "data:text/html" ומאפשר לנו ליצור כל מיני אלמנטים ישירות בדפדפן בעזרת קישור.

איך משתמשים בזה?

  • העתיקו את הקוד לדוגמה
  • הדביקו אותו בדפדפן שלכם
  • שמרו במועדפים!
  • מעתה יש לכם סימניה שהיא יוצר פתקים!

  • אהבתם? שתפו!

לא חסר בבל"ת ברשת – ישר לדוגמאות

data:text/html, <body><canvas id="dyDraw">%E4%BD%A0%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E6%94%AF%E6%8C%81HTML5 Canvas</canvas></body><script>function $(id){return document.getElementById(id);} $('dyDraw').width=document.body.clientWidth;$('dyDraw').height=document.body.clientHeight;if(window.addEventListener){window.addEventListener('load',function(){var canvas,canvastext;var hua=false;function dyDrawing(){canvas=$('dyDraw');canvastext=canvas.getContext('2d');canvas.addEventListener('mousedown',canvasMouse,false);canvas.addEventListener('mousemove',canvasMouse,false);window.addEventListener('mouseup',canvasMouse,false);} function canvasMouse(dy){var x,y;if(dy.layerX||dy.layerX==0){x=dy.layerX;y=dy.layerY;}else if(dy.offsetX||dy.offsetX==0){x=dy.offsetX;y=dy.offsetY;} x-=dyDraw.offsetLeft;y-=dyDraw.offsetTop;if(dy.type=='mousedown'){hua=false;canvastext.beginPath();canvastext.moveTo(x,y);hua=true;}else if(dy.type=='mousemove'){if(hua){canvastext.strokeStyle="rgb(255,0,0)";canvastext.lineWidth=9;canvastext.lineTo(x,y);canvastext.stroke();}}else if(dy.type=='mouseup'){hua=false;}} dyDrawing();},false);}</script>

דוגמה 2

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style>
<script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script>
</head>
<body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;direction: rtl;">
<h3 style="text-align: center;">כתבו משהו</h3>

</body>
</html>

דוגמה 3

<style>html,body{margin: 0; padding: 0; direction: rtl;}</style>
<textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %233a3; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="בוקר טוב עולם..." />

דוגמה 4

data:text/html;charset=utf-8, <title>TextEditor</title> <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/> <style> html{height: 100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%;} .paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px;} </style> <body spellcheck="false"> <div class="paper"> <textarea autofocus="autofocus"></textarea> </div> </body> </html>

אהבתם? פרגנו עם לייק

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

  • אהבתם? שתפו!