1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> 4<head> 5 <title>Carrer Blog</title> 6 7 <link href="http://vcarrer.googlepages.com/favicon.png" rel="shortcut icon"/> 8<meta name="description" content="Blog about web programming & web design" /> 9<meta name="keywords" content="Mysql, database, javascript, gridview, programming,asp.net,php,cold fusion,sql server" /> 10<meta name="p:domain_verify" content="94ccd042aa20fb8eb6ec5028d7a426d0"/> 11<meta name="verify-v1" content="wtPeMftTOYsq745nPKHUos5mX+TrOnQbNJ8sVwcBiXs=" /> 12<meta name="msvalidate.01" content="5550065980266AED67AF2AE326236A8B" /> 13<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/CarrerBlog" /> 14 15<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 15-16
15 16<script async src="https://www.googletagmanager.com/gtag/js?id=
16G-GYQDJECWTC
vendor: 12 bytes, line 16
16"></script>
17<script> 18
vendor: 134 bytes, lines 18-22
18window.dataLayer = window.dataLayer || []; 19 function gtag(){dataLayer.push(arguments);} 20 gtag('js', new Date()); 21 22 gtag('config', '
22G-GYQDJECWTC
vendor: 4 bytes, line 22
22');
23</script>
23 24 25 <style type="text/css"> 26/* Reset */ 27 28body { 29 margin: 0; line-height: 1.5; 30} 31 32/* Tables still need 'cellspacing="0"' in the markup. */ 33table { border-collapse: separate; border-spacing: 0; } 34caption, th, td { text-align: left; font-weight: normal; } 35table, td, th { vertical-align: middle; } 36 37/* Remove possible quote marks (") from <q>, <blockquote>. */ 38blockquote:before, blockquote:after, q:before, q:after { content: ""; } 39blockquote, q { quotes: "" ""; } 40 41/* Remove annoying border on linked images. */ 42a img { border: none; } 43 44/* GRID */ 45 46 47.main { 48width:80em;margin:0 auto;text-align:left; } 49 50.clear {clear:both;} 51 52.dl1, 53.dl2, 54.dl5, 55.dl10, 56.dl15, 57.dl20, 58.dl25, 59.dl30, 60.dl35, 61.dl40, 62.dl45, 63.dl50, 64.dl55, 65.dl60, 66.dl65, 67.dl70, 68.dl75{float:left; display: inline; } 69 70.dr1, 71.dr2, 72.dr5, 73.dr10, 74.dr15, 75.dr20, 76.dr25, 77.dr30, 78.dr35, 79.dr40, 80.dr45, 81.dr50, 82.dr55, 83.dr60, 84.dr65, 85.dr70, 86.dr75 87{float:right; display: inline; } 88 89.dl1, .dr1 {width:1em;} 90.dl2, .dr2 {width:2em;} 91.dl5, .dr5{width:5em;} 92.dl10, .dr10{width:10em;} 93.dl15, .dr15{width:15em;} 94.dl20, .dr20{width:20em;} 95.dl25, .dr25{width:25em;} 96.dl30, .dr30{width:30em;} 97.dl35, .dr35{width:35em;} 98.dl40, .dr40{width:40em;} 99.dl45, .dr45{width:45em;} 100.dl50, .dr50{width:50em;} 101.dl55, .dr55{width:55em;} 102.dl60, .dr60{width:60em;} 103.dl65, .dr65{width:65em;} 104.dl70, .dr70{width:70em;} 105.dl75, .dr75{width:75em;} 106 107 108.ml5{margin-left:5em;} 109.ml10{margin-left:10em;} 110.ml15{margin-left:15em;} 111.ml20{margin-left:20em;} 112.ml25{margin-left:25em;} 113.ml30{margin-left:30em;} 114.ml35{margin-left:35em;} 115.ml40{margin-left:40em;} 116.ml45{margin-left:45em;} 117.ml50{margin-left:50em;} 118.ml55{margin-left:55em;} 119.ml60{margin-left:60em;} 120.ml65{margin-left:65em;} 121.ml70{margin-left:70em;} 122.ml75{margin-left:75em;} 123 124.mr5{margin-right:5em;} 125.mr10{margin-right:10em;} 126.mr15{margin-right:15em;} 127.mr20{margin-right:20em;} 128.mr25{margin-right:25em;} 129.mr30{margin-right:30em;} 130.mr35{margin-right:35em;} 131.mr40{margin-right:40em;} 132.mr45{margin-right:45em;} 133.mr50{margin-right:50em;} 134.mr55{margin-right:55em;} 135.mr60{margin-right:60em;} 136.mr65{margin-right:65em;} 137.mr70{margin-right:70em;} 138.mr75{margin-right:75em;} 139 140.fluid {width:auto; float:none;} 141div .fluid {padding:0em 0em 0em 0.1em;} 142 143.hp{width:100%; float:left; } 144 145.clearfix, .main{ display:block;} 146 147.clearfix:after, .main:after { 148 visibility: hidden; 149 display: block; 150 font-size: 0; 151 content: " "; 152 clear: both; 153 height: 0; 154 155 } 156 157/* IE5/MAC hack \*/ 158* html .clearfix{ display: inline; height: 1px;} 159/* close */ 160 161/* Typography */ 162body { font:75%/1.5em Arial, Helvetica, sans-serif; 163font-size-adjust:none; 164font-style:normal; 165font-variant:normal; 166font-weight:normal; 167 } 168 169p { padding:0 0 1.5em 0em;color:#111; word-spacing:0.03em; letter-spacing:-0.03em; } 170p img { float: left; margin: 0 1em 1em 0; padding: 0; } 171p img.right { float: right; margin: 0 0 1em 1em; } 172 173h1,h2{ font-weight:normal; color: #333; font-family:Georgia, "Times New Roman", serif; letter-spacing: 2px; word-spacing:0.1em; } 174h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, "Times New Roman", serif; } 175 176 177h1 { font-size: 2.2em; margin-bottom: 0.682em; } 178h2 { font-size: 1.9em; margin-bottom: 0.79em; } 179h3 { font-size: 1.7em; margin-bottom: 0.882em; } 180h4 { font-size: 1.4em; margin-bottom: 1.071em; } 181h5,h6 { font-size: 1.3em; margin-bottom: 1,154em; } 182 183 184 185li ul, 186li ol { margin:0 1.5em; } 187ul, ol { margin: 0; padding: 10px 0 20px 20px; } 188 189 190dl { margin: 0 0 1.5em 0; } 191dl dt { font-weight: bold; } 192dl dd { margin-left: 1.5em; } 193 194a { color: #035292; text-decoration: none; } 195a:hover { text-decoration: underline; } 196 197 198table { margin-bottom: 1.5em; } 199th { border-top: 0px solid #ddd; border-bottom: 0px solid #ddd;font-weight: bold; } 200th,td { padding:0 1.5em 0em 1em;} 201tfoot { font-style: italic; } 202tfoot td { border-top: 0px solid #ddd;border-bottom: 0px solid #ddd; } 203caption { text-align:center; font-family:Georgia, serif; } 204 205 206abbr, acronym { border-bottom: 1px dotted #000; } 207address { margin-top: 1.5em; font-style: italic; } 208del { color: #000; } 209 210 211blockquote { padding-left:1.5em; margin: 1.5em; border-left:3px solid #ccc; font-style:italic; } 212strong { font-weight: bold; } 213em, dfn { font-style: italic; } 214dfn { font-weight: bold; } 215pre, code { margin: 1.5em 0; white-space: pre; } 216pre, code, tt { font: 1em 'lucida console',monospace; line-height: 1.5; } 217tt { display: block; margin: 1.5em 0; line-height: 1.5; } 218hr {margin-bottom:1.5em;} 219 220/* new */ 221.rc {-moz-border-radius: 10px; -webkit-border-radius: 10px; ; border:1px solid #fff; } 222.drzac { position:relative; right:10px; margin:auto; margin:auto; display:block; } 223.byline { 224font-family: "Lucida Grande", Tahoma; 225 font-size: 0.865em; 226 font-weight: lighter; 227 font-variant: normal; 228 text-transform: uppercase; 229 color: #666666; 230 letter-spacing: 0.4em; 231 display: block; 232 margin-bottom: 1.734em; 233 padding:0em 0em 0em 1em; 234 } 235 236.byline>p{margin:0; padding: 0 0 20px 0; line-height: 1;} 237 238 span.and{font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; 239 font-style: italic; 240 color: #777; 241 } 242 .shadow { 243
244 background: #fff url(sahdow1.png) repeat-y bottom right ; 245 246 247 248 249 padding: 0px 5px 6px 0px; 250 251 252} 253 .shadow1 { position:absolute; top:0px; right:0px; } 254 .shadow2 { position:absolute; bottom:0px; left:0px; } 255 256.ramka {border:1px solid #ccc; padding:0.25em;} 257.tc {text-align:center;} 258.tr {text-align:right;} 259.tl {text-align:left;} 260.b{ font-weight:bold;} 261.pl1{padding-left:1em;} 262.pl2{padding-left:2em;} 263.pl3{padding-left:3em;} 264 265 266.water{color:#5582d1;} 267.earth{color:#4e3e2c;} 268.air{color:#f1fff7;} 269.fire{ color:#ff8a19;} 270 /* drinks food */ 271 .wine{color:#4a040a;} 272 .beer{color:#F0C030;} 273 .caffe{color:#473523;} 274 .caffe-cream{color:#b68d3d;} 275 .espresso{color:#2c1901;} 276 .caramel{color:#ab671f;} 277 .chocolate{color:#290200;} 278 .black-pepper{color:#444334;} 279 .pepper-lite{color:#8d8a72;} 280 281 .lipstick{color:#c20c0c;} 282 .oldbook{font-family:"Book Antiqua","Warnock Pro","Goudy Old Style","Palatino",Georgia,serif;} 283.note{font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; color:#333;} 284 285 .main{width:80em;} 286 287 .gridlines {background:url(grid.png);} 288 h1 + p, h2 + p, h3 + p { text-indent:0; } 289 .mono + p:first-line {text-align: justify; 290 font-variant: small-caps; 291 text-transform: lowercase; 292 font-weight: 700; 293letter-spacing: 0.1em; 294 } 295.frame {border:1px dotted #ccc; padding:0.25em;} 296.bline {border-bottom:1px dotted #000; margin:0;} 297.bline1 {border-bottom:1px dotted; border-top:1px dotted; margin:0 0 0.3em 0; padding:0 0.1em 0 0.5em; background-color:#FAFAFA;} 298p{font-size:1em; line-height:1.6;} 299h3{color:#111;} 300ul{ list-style-type: circle; list-style-position:outside;} 301.small{font-size:0.35em;margin:0;padding:0;line-height:0;} 302.medium{font-size:0.9em;margin:0;padding:0;line-height:0; color:#ccc;} 303.mono{font-family:"Courier New", Courier, monospace;font-size:12px; margin:0} 304#navbar-iframe { 305 306height:0px; 307visibility:hidden; 308display:none; 309} 310 311 </style> 312 313 <!--[if IE]> 314 315 <![endif]--> 316 317<link rel="me" href="https://www.blogger.com/profile/04801854386297420021" /> 318<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/> 319<meta name='google-adsense-platform-domain' content='blogspot.com'/> 320 321<!-- data-ad-client=ca-pub-0316081000391490 --> 322<!-- --><style type="text/css">@import url(https://www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css); 323div.b-mobile {display:none;} 324</style> 325 326</head> 327 328<body>
328<script type="text/javascript"> 329 function setAttributeOnload(object, attribute, val) { 330 if(window.addEventListener) { 331 window.addEventListener('load', 332 function(){ object[attribute] = val; }, false); 333 } else { 334 window.attachEvent('onload', function(){ object[attribute] = val; }); 335 } 336 } 337 </script>
337 338<div id="navbar-iframe-container"></div>
339<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
vendor: 1 bytes, line 339
339
340<script type="text/javascript"> 341 gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { 342 if (gapi.iframes && gapi.iframes.getContext) { 343 gapi.iframes.getContext().openChild({ 344 url: 'https://www.blogger.com/navbar/20880701?origin\x3dhttp://www.vcarrer.com', 345 where: document.getElementById("navbar-iframe-container"), 346 id: "navbar-iframe" 347 }); 348 } 349 }); 350 </script>
350 351 352<div class="main gridlines"> 353<div class="hp mt2"><h1>{<span class="espresso">Carrer<span> <span class="lipstick">web</span> <span class="pepper-lite">log</span>} </h1></div> 354<br class="clear" /> 355<div class="hp clearfix byline"><p>Blog about web design <span class="and caffe-cream" style="font-size:1.3em;">&</span> development</p></div> 356 357 358<div class="dl50"> 359 360 361<h3 class="bline">GPT-3 and CSS Frameworks</h3> 362 363<p class="mono tl">Tuesday, April 27, 2021 { <a href="https://www.blogger.com/comment/fullpage/post/20880701/4715290044518385658"location.href=https://www.blogger.com/comment/fullpage/post/20880701/4715290044518385658;>1 Comments</a> }</p> 364Recently I gained access to the <a href="https://openai.com/api/">OpenAI GPT-3 API</a>. I tried different things like content creation, code translation and other experiments. One of the amazing things of GPT-3 is the capacity to learn from simple textual examples.<div><br /><div>Programming is one of the most complex and problem solving tasks. But I wasnât interested in training GPT-3 to program. For me it was more interesting how GPT-3 can speed up some boring repetitive code creation.</div><div><br /></div><div>GPT-3 works great with well structured code that has clear naming logic. I tried to train it to generate layout HTML with clear class syntax. </div><div><br /></div><div>I used my <a href="https://vladocar.github.io/SMART-CSS-GRID/">Smart CSS Grid Framework</a> because it has simple naming logic. 365 366CSS Classes are named from one to twelve because it is a 12 grid system. </div><div><br /></div><div>The logic is the total of each row should be always 12 or something like this 3 + 3 + 4 + 2 = 12</div><div><br /></div><div>The idea was, when I write something like this: </div><div><br /></div><div><b> 3 | 3 | 6 </b></div><div><br /></div><div>To receive something like this: 367 368<p><b><div class="three"> </div> <div class="three"> </div> <div class="six"> </div></b></p> 369 370After a couple examples GPT-3 started to work almost perfectly even with more complex layouts. 371 372<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-r1rlOJbHs9GPn2LvBCehcXyn7NyTXCWxD2ORHWrIZadBPBGhJjqN9W7DdOVnZG1xqqNNmwG0ckeRozW2jpxoR7dNkInMu9EudAQ0Yqf7ZdLJsc5QrNudSDbjoZ9jAe5ThldPJQ/s1914/GPT-3-and-CSS-Framework.jpg" style="display: block; padding: 1em 0px; text-align: center;"><img alt="GPT3 and CSS Frameworks" border="0" data-original-height="730" data-original-width="1914" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-r1rlOJbHs9GPn2LvBCehcXyn7NyTXCWxD2ORHWrIZadBPBGhJjqN9W7DdOVnZG1xqqNNmwG0ckeRozW2jpxoR7dNkInMu9EudAQ0Yqf7ZdLJsc5QrNudSDbjoZ9jAe5ThldPJQ/s400/GPT-3-and-CSS-Framework.jpg" width="400" /></a></div> 373 374 <p>Here is the text I used to train GPT-3:</p> 375 376
377<script src="https://gist.github.com/vladocar/984cf5be4f511a3351526e97a2291522.js"></script>
377 378 379Important to keep the <b>âtemperatureâ to 0</b>, we donât want GPT-3 to be creative. </div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UDalKE0KbuyHZD5R0kVRvgqKH7RUgfl20MhbveEiH7MRLkie1YXndhJOMDq2dvSBs37jH8vZBB99R71nO34TILN6YijFcn-L8SlzNUaSucGDeLlc1r0J6a54n5k1vThhgsBLQQ/s1536/screen-capture-%25282%2529.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="647" data-original-width="1536" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UDalKE0KbuyHZD5R0kVRvgqKH7RUgfl20MhbveEiH7MRLkie1YXndhJOMDq2dvSBs37jH8vZBB99R71nO34TILN6YijFcn-L8SlzNUaSucGDeLlc1r0J6a54n5k1vThhgsBLQQ/s320/screen-capture-%25282%2529.gif" width="320" /></a></div><br /><div><br /></div><div><br /></div><div>This is a super simple example of how GPT-3 can be used to generate repetitive HTML code. Basically all CSS Frameworks follow certain rules that can be easily used for GPT-3 training. 380 381<br /><br /><br /> 382</div></div> 383 384 385 386 387<h3 class="bline">Donât use CSS Reset use CSS Set</h3> 388 389<p class="mono tl">Wednesday, June 24, 2020 { <a href="https://www.blogger.com/comment/fullpage/post/20880701/4680933821520654863"location.href=https://www.blogger.com/comment/fullpage/post/20880701/4680933821520654863;>2 Comments</a> }</p> 390CSS Reset is obsolete. It made sense 10 - 15 years ago when we had IE6, Opera, Firefox and they all behaved differently with very different HTML rendering engines. Making web sites back then was a nightmare, we first made it compatible with IE6 and after that we tested them in Firefox and other browsers. Most of the websites used HTML table tags to make the layout. CSS layouts with float were only for the bravest. For every IE browser we had a special layout hack, if the layout wasnât px perfect it would brake. Probably the worst thing was that there were no browser profiling tools. So everything was based on trial and error.<br /> 391<br /> 392In those chaotic times CSS Reset was born and it was loved by everyone. It served as a bridge gap between various browsers. Everyone used CSS Reset, it became so popular that people forgot why it was implemented in the first place. The main debate between web designers was what kind of CSS reset we should use. Advising against use of CSS reset was considered CSS blasphemy.<br /> 393<br /> 394What is the purpose of CSS reset today, in the chromium dominated browsers market? <br /> 395<br /> 396Just as a reminder, Chrome used Apple's open source WebKit browser engine to later create the Blink browser engine. So, Safari and Chrome have the same origins.<br /> 397<br /> 398Chromium (Chrome, Edge, Opera, Brave, Vivaldi) + Safari have total browser domination. Firefox has only 8% market share in the desktop/laptop market.<br /> 399<br /> 400In addition, the differences between Firefox, Chromium and Safari are negligible.<br /> 401<br /> 402Conclusion: CSS Reset is obsolete.<br /> 403<br /> 404What you may not know also, is that every browser has its own default CSS. So thereâs no need to reset something that is already set with the default styling.<br /> 405<br /> 406Let's take some random HTML element like H1 tag. Often we make the mistake to define the same element over and over. First H1 element is defined by the browser default CSS then itâs reseted in the CSS Reset and itâs set many times over before it's rendered.<br /> 407<br /> 408My suggestion is to set the HTML elements once and try to stick with that setting. Always minimise the number of element settings and resettings.<br /> 409<br /> 410Make your own default.css where you define colors, dimensions, round corners and all the important HMTL elements that you are planning to use. If you do not plan to use the H6 tag or some form or table tags donât put them in your defaut.css.<br /> 411<br /> 412Here is my take on this problem:<br /> 413<br /> 414Itâs called Basic.css and it sets the common styles without resetting anything. Itâs also ultra-light, at less than 1 Kb.<br /> 415<br /> 416Take a look.<br /> 417<br /> 418<a href="https://vladocar.github.io/Basic.css/">https://vladocar.github.io/Basic.css/</a><br /> 419<br /> 420<br /> 421 422 423 424 425 426<h3 class="bline">One Page 2020 Calendar Print Version</h3> 427 428<p class="mono tl">Wednesday, January 22, 2020 { <a href="https://www.blogger.com/comment/fullpage/post/20880701/8817345120330953708"location.href=https://www.blogger.com/comment/fullpage/post/20880701/8817345120330953708;>0 Comments</a> }</p> 429I really liked the idea of the <a href="https://davebakker.io/onepagecalendar/">One Page 2020 Calendar</a>
429. I decided to make my own printed version.<br /> 430<br /> 431So I did just that:<br /> 432<br /> 433<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAepj0HIkXA99m1UvkoGBKnPhLNoxjFardjjT4ODUio8XIjYe8JEFGKPJq1omC9G9VD4prz3xzft-yTLZRVkS6E-PhCV76cR1YJCaMe5sPd3ABAKuMRMC30Czc49nhdQq7n0l56A/s1600/One+Page+Calendar+2020.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAepj0HIkXA99m1UvkoGBKnPhLNoxjFardjjT4ODUio8XIjYe8JEFGKPJq1omC9G9VD4prz3xzft-yTLZRVkS6E-PhCV76cR1YJCaMe5sPd3ABAKuMRMC30Czc49nhdQq7n0l56A/s320/One+Page+Calendar+2020.png" width="320" height="153" data-original-width="1162" data-original-height="557" /></a><br /> 434<br /> 435You can download the Calendar <a href="https://www.dropbox.com/s/7xk4wtt1zle083i/One%20Page%202020%20Calendar.pdf?dl=0">in .pdf version here</a>. <br /> 436<br /> 437<br /> 438 439 440 441 442 443<h3 class="bline">3 CLI tools based on Node.js</h3> 444 445<p class="mono tl">Monday, January 21, 2019 { <a href="https://www.blogger.com/comment/fullpage/post/20880701/1514612169023401537"location.href=https://www.blogger.com/comment/fullpage/post/20880701/1514612169023401537;>0 Comments</a> }</p> 446<h3>screenshoteer</h3><br /> 447Node.js based CLI for making website screenshots and mobile emulations. It can export the results in .png or .pdf. It uses puppeteer(Headless Chrome).<br /> 448<br />
449For the install:<br /> 450<br /> 451npm i -g screenshoteer<br /> 452<br /> 453Demo:<br /> 454<br /> 455screenshoteer --url https://www.example.com<br /> 456<br /> 457<a href="https://github.com/vladocar/screenshoteer">https://github.com/vladocar/screenshoteer</a><br /> 458<br /> 459<br /> 460<h3>keywords-extract</h3><br /> 461Command line tool for keyword extraction. This Node.js project works mainly with two node modules "node-readability" that filters only the main text clearing the noise from the main text and "gramophone" module that filters the keywords from the texts.<br /> 462<br /> 463Install:<br /> 464<br /> 465npm i -g keywordsextract<br /> 466<br /> 467Demo:<br /> 468<br /> 469keywordsextract --url https://en.wikipedia.org/wiki/Search_engine_optimization --n 3,4<br /> 470<br /> 471<a href="https://github.com/vladocar/keywordsextract">https://github.com/vladocar/keywordsextract</a><br /> 472<br /> 473<h3>PDFSave</h3><br /> 474PDFSave uses node-readability for clearing all non essential content. Later with pdfkit converts the HTML to lightweight PDF. PDFSave is text only, it doesn't save images or other multimedia content.<br /> 475<br /> 476Install:<br /> 477<br /> 478npm i -g pdfsave<br /> 479<br /> 480Demo:<br /> 481<br /> 482pdfsave --url https://www.lipsum.com<br /> 483<br /> 484<br /> 485<a href="https://github.com/vladocar/PDFSave">https://github.com/vladocar/PDFSave</a><br /> 486<br /> 487<br /> 488 489 490 491 492 493<h3 class="bline">Scribble Font for Prototyping & Wireframing</h3> 494 495<p class="mono tl">Wednesday, October 17, 2018 { <a href="https://www.blogger.com/comment/fullpage/post/20880701/4142579597642471155"location.href=https://www.blogger.com/comment/fullpage/post/20880701/4142579597642471155;>0 Comments</a> }</p> 496I needed better solution for making Lorem Ipsum Text when I was making low fidelity wireframes. <br /> 497<br /> 498That is why I made Scribble - Free Font for making wireframes.<br /> 499<br /> 500Here is the demo:<br /> 501<br /> 502<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFlbXNo-7o5u54ih8xCiPurbCgCoR9cF7t1IUOqmcgwa18RqOHre0xgyJiwE5KGinqbYwlJsFO6_hgZwdCdB4uD5Pd7lTiUFXOBxKZnmBpWh7Ba9ds7_NcmGTM7F-M_GJUZjHgQ/s1600/Demo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFlbXNo-7o5u54ih8xCiPurbCgCoR9cF7t1IUOqmcgwa18RqOHre0xgyJiwE5KGinqbYwlJsFO6_hgZwdCdB4uD5Pd7lTiUFXOBxKZnmBpWh7Ba9ds7_NcmGTM7F-M_GJUZjHgQ/s320/Demo.png" width="320" /></a></div><br /> 503<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4NqOGz9KYjISIppLXoJLXTpriq-ICKwVCgG1dCKPI9z55TdhL_CI1aSPbIjSiDHi96j8KoXE42RvDA3aojKgJxdJy2jToFXS7h0JCKLfqwirUKneZUPUjjp66O61sq71-FKj0A/s1600/Demo-Scribble1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="800" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4NqOGz9KYjISIppLXoJLXTpriq-ICKwVCgG1dCKPI9z55TdhL_CI1aSPbIjSiDHi96j8KoXE42RvDA3aojKgJxdJy2jToFXS7h0JCKLfqwirUKneZUPUjjp66O61sq71-FKj0A/s320/Demo-Scribble1.png" width="320" /></a></div><br /> 504<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDT7cROWvN0snCYtnUvVItP1tZwiq66jBN-KZ7Q2mKfqvie_UH5FUrxW79g9AS25Yudfv8GJbQCY2uAER00EcaSa4oGCUgVdk9ccsRb_-ZGInnufckdAjGf48w0W50Cjf0rsKdyg/s1600/Demo-Scribble.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="490" data-original-width="980" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDT7cROWvN0snCYtnUvVItP1tZwiq66jBN-KZ7Q2mKfqvie_UH5FUrxW79g9AS25Yudfv8GJbQCY2uAER00EcaSa4oGCUgVdk9ccsRb_-ZGInnufckdAjGf48w0W50Cjf0rsKdyg/s320/Demo-Scribble.png" width="320" /></a></div><br /> 505You can download Scribble for free on GitHub:<br /> 506<br /> 507<a href="https://github.com/vladocar/Scribble-Font">https://github.com/vladocar/Scribble-Font</a><br /> 508<br /> 509<br> 510<a href="https://www.designinspiration.info/free-fonts-for-lo-fi-wireframing/">Some other useful fonts for low fidelity wireframing</a> 511<br /> 512<br /> 513 514 515 516 517 518<h3 class="bline">ramd.js - Small JavaScript library for making TODO-like web apps</h3> 519 520<p class="mono tl">Monday, July 16, 2018 { <a href="https://www.blogger.com/comment/fullpage/post/20880701/3490345796951660826"location.href=https://www.blogger.com/comment/fullpage/post/20880701/3490345796951660826;>0 Comments</a> }</p> 521Few weeks ago I made <a href="https://github.com/vladocar/Minimal-Notes">Minimal Notes</a> - TODO like web app made with Vue.js. Vue.js is great but it felt like overkill using that huge framework for making that simple app. Frameworks like React, Vue or Anuglar are great but we rarely use their full potential. Sometimes we need simple tool for making simple project.<br /> 522<br /> 523I decided to make small JS library for doing just that, simple tool for making TODO-like web apps.<br /> 524<br /> 525I'm taking about RAMD.js or Render - Add - Modify, Delete simple JS library for making web TODO projects. It is only 0.65 Kb minified and compressed.<br /> 526<br /> 527It is based around "simplified virtual DOM" that is JavaScript Object listing the essential element properties. It is internal database that can be managed or stored locally or on the server.<br /> 528You can use RAMD.js for making âlistâ applications and you can save the "simplified virtual DOM" in the browser or on the server. All is made with simple JavaScript functions that you can modify and personalise. <br /> 529<br /> 530You can find ramd.js here:<br /> 531<br /> 532<a href="https://github.com/vladocar/ramd.js">https://github.com/vladocar/ramd.js</a><br /> 533<br /> 534<br><br /> 535 536 537 538 539 540<h3 class="bline">Katana.scss - CSS Layout System made with Flexbox</h3> 541 542<p class="mono tl">Monday, June 04, 2018 { <a href="https://www.blogger.com/comment/fullpage/post/20880701/299127854995742277"location.href=https://www.blogger.com/comment/fullpage/post/20880701/299127854995742277;>0 Comments</a> }</p> 543After my latest CSS project <a href="https://vladocar.github.io/flexy/">Flexy</a> I was inspired to do CSS Layout system that is even more dynamic. What better way to make CSS dynamic then SASS. That is how the project Katana was born.<br /> 544<br /> 545Katana is ultra minimal CSS Framework made with few lines of SASS. Default parameters are: 12 columns, 15px margin and 94% main width. But you can personalise anything, just change the default numbers. <br /> 546<br /> 547So you have super dynamic layout system with 20 lines of .scss.<br /> 548<br /> 549Enjoy!<br /> 550<br /> 551You can find Katana on GitHub:<br /> 552<br /> 553<br /> 554<a href="https://vladocar.github.io/Katana/">https://vladocar.github.io/Katana/</a><br /> 555<br /> 556or<br /> 557<br /> 558<a href="https://github.com/vladocar/Katana">https://github.com/vladocar/Katana</a><br /> 559<br /> 560<br /> 561<br> 562 563 564 565</div> 566<div class="dl30"> 567<div class="dl25 pl3"> 568<p style="top:12px;margin-left:150px; display:block; position:absolute;"> <a href="http://feeds.feedburner.com/CarrerBlog"><img src="http://www.handdrawnicons.com/images/RSS.png" class="right" alt="RSS Icon" /></a><a href="http://twitter.com/vladocar"><img src="http://www.handdrawnicons.com/images/Twitter.png" alt="Twitter icon" class="right" /></a> 569<a href="http://dribbble.com/vladocar"><img src="http://www.handdrawnicons.com/images/Dribbble.png" alt="Twitter icon" class="right" /></a> 570<a href="https://github.com/vladocar"><img src="http://www.handdrawnicons.com/images/GitHub1.png" alt="Twitter icon" class="right" /></a> 571</p> 572 <h3 class="tr bline1 oldbook"> About Me<span class="mono small"> <<< </span></h3> 573 <p> Name: Vladimir Carrer <br /> 574vladocar [at] gmail.com <br /> 575 Location: Verona, Italy <br /> 576 577I'm a web designer, developer, teacher, speaker, generally web addicted <a href="http://www.blogger.com/profile/04801854386297420021">...</a> 578</p> 579 580 581 582 583 <h3 class="tr bline1 oldbook">My projects<span class="mono small"> <<< </span></h3> 584 <ul class="gridlines"> 585<li><a href="https://www.aipromptsdirectory.com/">AI Prompt Directory</a></li> 586<li><a href="http://www.handdrawnicons.com/">Hand Drawn Icons</a></li> 587 <li><a href="https://www.designinspiration.info">Font Design Inspiration</a></li> 588 <li><a href="http://fontpairings.com">Font Pairings</a></li> 589 <li><a href="https://www.joysvg.com">Free SVG Cut File</a></li> 590 <li><a href="https://www.upcomingnfts.info">Upcoming NFT projects</a></li> 591 <li><a href="https://www.distuts.com">Discord Tutorials</a></li> 592 <li><a href="https://www.freesublimationdesign.com">Free Sublimation Designs</a></li> 593 594<li><a href="https://www.techfeed.info/">Tech Feed</a></li> 595<li><a href="http://code.google.com/p/mysql-lite-administrator/">MySQL Lite Administrator</a></li> 596<li><a href="http://code.google.com/p/quark-php/">Quark Mini PHP CMS</a></li> 597<li><a href="http://code.google.com/p/formy-css-framework/">Formy - CSS Form Framework</a></li> 598<li><a href="http://code.google.com/p/emastic">Emastic - CSS Framework</a></li> 599<li><a href="http://code.google.com/p/malo">Malo - CSS Library</a></li> 600<li>
600<a href="http://code.google.com/p/the-golden-grid/">The Golden Grid</a></li> 601<li><a href="http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html">1 line CSS Grid Framework</a></li> 602<li><a href="https://github.com/vladocar/Two-Lines-CSS-Framework">Two Lines CSS Framework</a></li> 603<li><a href="http://code.google.com/p/child-selector-css-system/">Child Selector System - CSS Framework</a></li> 604<li><a href="http://code.google.com/p/better-web-readability-project/">Better Web Readability Project</a></li> 605<li><a href="http://code.google.com/p/azbuka/">Azbuka - CSS Typographical Base Rendering Library</a></li> 606<li><a href="http://code.google.com/p/clipr/">ClipR - bookmarklet for better reading</a></li> 607<li><a href="http://code.google.com/p/css3-action-framework/">CSS3 Action Framework </a></li> 608<li><a href="http://github.com/vladocar/CSS-Mini-Reset">CSS Mini Reset</a></li> 609<li><a href="http://github.com/vladocar/HTML5-Mini-Template">HTML5 Mini Template</a></li> 610<li><a href="https://github.com/vladocar/CSS-Mobile-Reset">CSS Mobile Reset</a></li> 611<li><a href="https://github.com/vladocar/picoCSS">picoCSS - JavaScript Framework</a></li> 612<li><a href="https://github.com/vladocar/HTML-Lorem-Ipsum-Crash-Test">HTML Lorem Ipsum Crash Test</a></li> 613<li><a href="https://github.com/vladocar/AutoObjectDocumentation">Object Auto Documentation - JavaScript</a></li> 614<li><a href="https://github.com/vladocar/o---JS-Library-for-Object-Manipulation">o - JS Library for Object Manipulation</a></li> 615<li><a href="https://github.com/vladocar/Foxy-CSS-Framework">Foxy - CSS Framework</a></li> 616<li><a href="http://www.tumblr.com/theme/17806">Tumblr Free Theme - Better Readability Project</a></li> 617<li><a href="https://github.com/vladocar/Box-CSS-Framework">Box - CSS Framework</a></li> 618<li><a href="https://vladocar.github.io/SMART-CSS-GRID/">SMART CSS GRID</a></li> 619<li><a href="https://vladocar.github.io/nanoJS/">nanoJS - Minimal JS DOM Library</a></li> 620<li><a href="https://vladocar.github.io/flexy/">Flexy CSS Framework</a></li> 621<li><a href="https://vladocar.github.io/Katana/">Katana is CSS Layout System made with Flexbox</a></li> 622<li><a href="https://github.com/vladocar/CSS-Micro-Reset">Micro CSS Reset</a></li> 623<li><a href="https://vladocar.github.io/60gs/">60 Grid System</a></li> 624<li><a href="https://vladocar.github.io/Simple-Button/">Simple CSS Button</a></li> 625<li><a href="https://github.com/vladocar/ramd.js">ramd.js JavaScript library for making web applications.</a></li> 626<li><a href="https://github.com/vladocar/Minimal-Notes">Minimal Notes web app build with Vue.js</a></li> 627<li><a href="https://github.com/vladocar/Scribble-Font">Scribble Font for Prototyping & Wireframing</a></li> 628<li><a href="https://vladocar.github.io/Flex-One/">Flex One - 1 CSS Class System</a></li> 629<li><a href="https://vladocar.github.io/floaty/">Floaty - CSS Float Based Layout System</a></li> 630<li><a href="https://vladocar.github.io/infinity-css-grid/">Infinity CSS Grid</a></li> 631 632<li><a href="https://github.com/vladocar/PDFSave">CLI Convert websites into readable PDFs</a></li> 633<li><a href="https://github.com/vladocar/keywordsextract">keywords-extract - CLI tool, extract keywords from any web page.</a></li> 634<li><a href="https://github.com/vladocar/screenshoteer">screenshoteer - Make website screenshots and mobile emulations from the command line.</a></li> 635<li><a href="https://github.com/vladocar/Basic.css">Basic.css - Classless CSS Starter File</a></li> 636 </ul> 637 638 <h3 class="tr bline1 oldbook"><span class="medium">§§</span>Previous Posts<span class="mono small"> <<< </span></h3> 639 <ul class="gridlines"> 640 641 <li><a href="http://www.vcarrer.com/2021/04/gpt-3-and-css-frameworks.html">GPT-3 and CSS Frameworks</a></li> 642 643 <li><a href="http://www.vcarrer.com/2020/06/dont-use-css-reset-use-css-set.html">Don’t use CSS Reset use CSS Set</a></li> 644 645 <li><a href="http://www.vcarrer.com/2020/01/one-page-2020-calendar-print-version.html">One Page 2020 Calendar Print Version</a></li> 646 647 <li><a href="http://www.vcarrer.com/2019/01/3-cli-tools-based-on-nodejs.html">3 CLI tools based on Node.js</a></li> 648 649 <li><a href="http://www.vcarrer.com/2018/10/scribble-font-for-prototyping.html">Scribble Font for Prototyping & Wireframing</a></li> 650 651 <li><a href="http://www.vcarrer.com/2018/07/ramdjs-small-javascript-library-for.html">
651ramd.js - Small JavaScript library for making TODO...</a></li> 652 653 <li><a href="http://www.vcarrer.com/2018/06/katanascss-css-layout-system-made-with.html">Katana.scss - CSS Layout System made with Flexbox</a></li> 654 655 <li><a href="http://www.vcarrer.com/2018/05/flexy-css-framework.html">Flexy CSS Framework</a></li> 656 657 <li><a href="http://www.vcarrer.com/2018/05/nanojs-javascript-for-dom-manipulation.html">nanoJS - JavaScript for DOM manipulation</a></li> 658 659 <li><a href="http://www.vcarrer.com/2018/05/smart-css-grid.html">SMART CSS GRID</a></li> 660 661 </ul> 662<div class="dl25"> 663<a href="http://www.handdrawnicons.com"><img src="http://www.handdrawnicons.com/images/banner-hand-drawn-icons.png" style="border:1px solid #ccc; margin-bottom:10px" alt="Hand Drawn Icons"/></a> 664</div> 665 666 667<div class="dl25"> 668<a href="https://www.amazon.com/dp/B01H27TZXG" target="_blank"><img width="300px" border="0" src="https://images-na.ssl-images-amazon.com/images/I/71cWiN%2BH3VL._UX466_.jpg" ></a> 669</div> 670<div class="dl25"> 671<a href="https://www.amazon.com/dp/B01J61E7DO" target="_blank"><img width="300px" border="0" src="https://images-na.ssl-images-amazon.com/images/I/812edvZ3UeL._UL1500_.jpg" ></a> 672</div> 673 674<div class="clear"> </div> 675 676 677 <h3 class="tr bline1 oldbook"><span class="medium">§</span>Archives<span class="mono small"> <<< </span></h3> 678 <ul class="gridlines"> 679 680 <li><a href="http://www.vcarrer.com/2006/05/">May 2006</a></li> 681 682 <li><a href="http://www.vcarrer.com/2006/06/">June 2006</a></li> 683 684 <li><a href="http://www.vcarrer.com/2006/07/">July 2006</a></li> 685 686 <li><a href="http://www.vcarrer.com/2006/08/">August 2006</a></li> 687 688 <li><a href="http://www.vcarrer.com/2006/09/">September 2006</a></li> 689 690 <li><a href="http://www.vcarrer.com/2006/10/">October 2006</a></li> 691 692 <li><a href="http://www.vcarrer.com/2007/01/">January 2007</a></li> 693 694 <li><a href="http://www.vcarrer.com/2007/02/">February 2007</a></li> 695 696 <li><a href="http://www.vcarrer.com/2007/10/">October 2007</a></li> 697 698 <li><a href="http://www.vcarrer.com/2008/04/">April 2008</a></li> 699 700 <li><a href="http://www.vcarrer.com/2008/06/">June 2008</a></li> 701 702 <li><a href="http://www.vcarrer.com/2008/07/">July 2008</a></li> 703 704 <li><a href="http://www.vcarrer.com/2008/08/">August 2008</a></li> 705 706 <li><a href="http://www.vcarrer.com/2008/09/">September 2008</a></li> 707 708 <li><a href="http://www.vcarrer.com/2008/11/">November 2008</a></li> 709 710 <li><a href="http://www.vcarrer.com/2008/12/">December 2008</a></li> 711 712 <li><a href="http://www.vcarrer.com/2009/01/">January 2009</a></li> 713 714 <li><a href="http://www.vcarrer.com/2009/02/">February 2009</a></li> 715 716 <li><a href="http://www.vcarrer.com/2009/03/">March 2009</a></li> 717 718 <li><a href="http://www.vcarrer.com/2009/04/">April 2009</a></li> 719 720 <li><a href="http://www.vcarrer.com/2009/05/">May 2009</a></li> 721 722 <li><a href="http://www.vcarrer.com/2009/06/">June 2009</a></li> 723 724 <li><a href="http://www.vcarrer.com/2009/08/">August 2009</a></li> 725 726 <li><a href="http://www.vcarrer.com/2009/09/">September 2009</a></li> 727 728 <li><a href="http://www.vcarrer.com/2009/10/">October 2009</a></li> 729 730 <li><a href="http://www.vcarrer.com/2009/11/">November 2009</a></li> 731 732 <li><a href="http://www.vcarrer.com/2009/12/">December 2009</a></li> 733 734 <li><a href="http://www.vcarrer.com/2010/01/">January 2010</a></li> 735 736 <li><a href="http://www.vcarrer.com/2010/02/">February 2010</a></li> 737 738 <li><a href="http://www.vcarrer.com/2010/03/">March 2010</a></li> 739 740 <li><a href="http://www.vcarrer.com/2010/04/">April 2010</a></li> 741 742 <li><a href="http://www.vcarrer.com/2010/05/">May 2010</a></li> 743 744 <li><a href="http://www.vcarrer.com/2010/06/">June 2010</a></li> 745 746 <li><a href="http://www.vcarrer.com/2010/07/">July 2010</a></li> 747 748 <li><a href="http://www.vcarrer.com/2010/08/">August 2010</a></li> 749 750 <li><a href="http://www.vcarrer.com/2010/09/">September 2010</a></li> 751 752 <li><a href="http://www.vcarrer.com/2010/10/">October 2010</a></li> 753 754 <li><a href="http://www.vcarrer.com/2010/11/">November 2010</a></li> 755 756 <li><a href="http://www.vcarrer.com/2010/12/">December 2010</a></li> 757 758 <li><a href="http://www.vcarrer.com/2011/01/">January 2011</a></li> 759 760 <li><a href="http://www.vcarrer.com/2011/02/">February 2011</a></li> 761 762 <li><a href="http://www.vcarrer.com/2011/03/">March 2011</a></li> 763 764 <li><a href="http://www.vcarrer.com/2011/04/">April 2011</a></li> 765 766 <li><a href="http://www.vcarrer.com/2011/05/">May 2011</a></li> 767 768 <li><a href="http://www.vcarrer.com/2011/06/">June 2011</a></li> 769 770 <li><a href="http://www.vcarrer.com/2011/07/">July 2011</a></li> 771 772 <li><a href="http://www.vcarrer.com/2011/08/">August 2011</a></li> 773 774 <li><a href="http://www.vcarrer.com/2011/09/">September 2011</a></li> 775 776 <li><a href="http://www.vcarrer.com/2011/10/">October 2011</a></li> 777 778 <li><a href="http://www.vcarrer.com/2011/11/">November 2011</a></li> 779 780 <li><a href="http://www.vcarrer.com/2011/12/">December 2011</a></li> 781 782 <li><a href="http://www.vcarrer.com/2012/01/">January 2012</a></li> 783 784 <li><a href="http://www.vcarrer.com/2012/02/">February 2012</a></li> 785 786 <li><a href="http://www.vcarrer.com/2012/03/">March 2012</a></li> 787 788 <li><a href="http://www.vcarrer.com/2012/04/">April 2012</a></li> 789 790 <li><a href="http://www.vcarrer.com/2012/06/">June 2012</a></li> 791 792 <li><a href="http://www.vcarrer.com/2012/08/">August 2012</a></li> 793 794 <li><a href="http://www.vcarrer.com/2012/11/">November 2012</a></li> 795 796 <li><a href="http://www.vcarrer.com/2013/01/">January 2013</a></li> 797 798 <li><a href="http://www.vcarrer.com/2013/03/">March 2013</a></li> 799 800 <li><a href="http://www.vcarrer.com/2013/06/">June 2013</a></li> 801 802 <li><a href="http://www.vcarrer.com/2013/10/">October 2013</a></li> 803 804 <li><a href="http://www.vcarrer.com/2013/11/">November 2013</a></li> 805 806 <li><a href="http://www.vcarrer.com/2014/03/">March 2014</a></li> 807 808 <li><a href="http://www.vcarrer.com/2014/09/">September 2014</a></li> 809 810 <li><a href="http://www.vcarrer.com/2014/10/">October 2014</a></li> 811 812 <li><a href="http://www.vcarrer.com/2015/11/">November 2015</a></li> 813 814 <li><a href="http://www.vcarrer.com/2018/03/">March 2018</a></li> 815 816 <li><a href="http://www.vcarrer.com/2018/05/">May 2018</a></li> 817 818 <li><a href="http://www.vcarrer.com/2018/06/">June 2018</a></li> 819 820 <li><a href="http://www.vcarrer.com/2018/07/">July 2018</a></li> 821 822 <li><a href="http://www.vcarrer.com/2018/10/">October 2018</a></li> 823 824 <li><a href="http://www.vcarrer.com/2019/01/">
824January 2019</a></li> 825 826 <li><a href="http://www.vcarrer.com/2020/01/">January 2020</a></li> 827 828 <li><a href="http://www.vcarrer.com/2020/06/">June 2020</a></li> 829 830 <li><a href="http://www.vcarrer.com/2021/04/">April 2021</a></li> 831 832 833 </ul> 834 835 836 837 838 839 <h3 class="tr bline1 oldbook">Other Profiles <span class="mono small"><<< </span></h3> 840 <ul class="gridlines"> 841 <li><a href="http://twitter.com/vladocar">Twitter</a></li> 842<li><a href="https://github.com/vladocar">GitHub</a></li> 843<li><a href="http://dribbble.com/vladocar">Dribbble</a></li> 844<li><a href="http://dzone.com/users/vladocar">Dzone</a></li> 845<li><a href="https://plus.google.com/100906093071985825940/posts">Google + </a></li> 846<li><a href="http://www.flickr.com/photos/vladocar/">Flickr</a></li> 847 848 849 </ul> 850 851<a href="http://www.linkedin.com/in/vladocar?goback=%2Esrp_1_1206380747789_in" ><img src="http://www.linkedin.com/img/webpromo/btn_myprofile_160x33.gif" width="160" height="33" border="0" alt="View Vladimir Carrer's profile on LinkedIn"></a> 852 853<br /> 854 855 <p><a href="http://www.dzone.com/aboutmvb"><img src="http://www.dzone.com/sites/all/files/big-mvbbutton.png" /></a></p> 856 857
858<script type="text/javascript"><!-- 859google_ad_client = "ca-pub-0316081000391490"; 860google_ad_host = "pub-1556223355139109"; 861/* vcarrer */ 862google_ad_slot = "0929188486"; 863google_ad_width = 234; 864google_ad_height = 60; 865//--> 866</script>
vendor: 1 bytes, line 866
866
867<script type="text/javascript" 868src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 869</script>
869 870 </div> 871 872</div> 873 874 875 876 877<div class="hp "><p class="pepper-lite tc">Content is licensed under a Creative Commons Public Domain License </p></div> 878</div> 879 880</body> 881</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.