Deploy diessica/diessica.github.io to diessica/diessica.github.io:main

diessica · Oct 4, 2024 · de1fbfa · de1fbfa
commit de1fbfa
Show file tree

Hide file tree

Showing 142 changed files with 5,390 additions and 0 deletions.
diff --git a/.nojekyll b/.nojekyll
diff --git a/404.html b/404.html
@@ -0,0 +1 @@
+<!doctype html><html class="scroll-smooth md:border-[10px] md:border-solid min-h-screen md:border-purple" lang=en><head><meta charset=utf-8><link href="/css/style.css?h=012c5f95ea1463230821" rel=stylesheet><meta content="width=device-width,initial-scale=1" name=viewport><body class="text-gray-700 font-body antialiased"><div class="text-center bg-index min-h-[calc(100vh-16px)] lg:min-h-[calc(100vh-20px)] text-white p-40"><h1 class="text-2xl md:text-9xl font-extrabold mb-2 text-green tracking-widest">4😱4</h1><h1 class="text-2xl md:text-5xll font-extrabold mb-8 text-green tracking-widest">4040<a href=https://en.wikipedia.org/wiki/HTTP_404>404</a>0404</h1><p class="leading-loose mb-5">This page does not exist. If you come from a broken link, you may <a href=https://github.com/diessica/diessica.github.io>let me know on GitHub</a>.</p><a class="font-extrabold text-2xl" href=/>← Go back</a></div></body><script src=/footnotes.js></script>
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+diessi.ca
diff --git a/atom.xml b/atom.xml
diff --git a/badges/browser.png b/badges/browser.png
diff --git a/badges/github.gif b/badges/github.gif
diff --git a/badges/js.png b/badges/js.png
diff --git a/badges/nocookie.png b/badges/nocookie.png
diff --git a/badges/rss.gif b/badges/rss.gif
diff --git a/badges/screen.gif b/badges/screen.gif
diff --git a/badges/smile.gif b/badges/smile.gif
diff --git a/badges/trapped.gif b/badges/trapped.gif
diff --git a/blog/5-bibliotecas-essenciais-para-desenvolver-react-apps/index.html b/blog/5-bibliotecas-essenciais-para-desenvolver-react-apps/index.html
diff --git a/blog/a-better-es2015-and-jsx-workflow-in-vs-code/index.html b/blog/a-better-es2015-and-jsx-workflow-in-vs-code/index.html
@@ -0,0 +1,7 @@
+<!doctype html><html class="scroll-smooth md:border-[10px] md:border-solid min-h-screen md:border-purple" lang=en><head><meta charset=utf-8><link href="/css/style.css?h=012c5f95ea1463230821" rel=stylesheet><meta content="width=device-width,initial-scale=1" name=viewport><title>A Better ES2015+ and JSX Workflow in VS Code | Diéssica Gurskas</title><body class="text-gray-700 font-body antialiased"><div class="bg-blog px-3 md:px-10 min-h-[calc(100vh-16px)] lg:min-h-[calc(100vh-20px)]"><div class="py-12 mb-4 text-center space-x-8 text-md md:text-lg relative z-20"><a class="no-underline font-extrabold hover:border-green hover:border-b-2" href=/>diessi.ca</a><a class="no-underline hover:border-green hover:border-b-2 border-green border-b-2" href=/blog/>Blog</a><a class="no-underline hover:border-green hover:border-b-2" href=/misc/>Misc</a></div><article class="container mx-auto w-full xl:w-1/2 pb-8"><header class="xl:-mx-56 text-center mb-8 md:mb-12"><div class="uppercase tracking-widest opacity-60 mb-4 text-xs">October 30, 2016</div><h1 class="font-extrabold font-display text-3xl md:text-5xl xl:text-6xl text-slate-900">A Better ES2015+ and JSX Workflow in VS Code</h1></header><div class="prose prose-sm md:prose 2xl:prose-lg prose-hr:text-red prose-hr:w-48 prose-hr:h-0.5 prose-hr:mx-auto prose-hr:my-4 prose-hr:bg-black prose-hr:opacity-20 prose-hr:border-0 prose-hr:rounded prose-hr:md:my-10 prose-pre:rounded-none prose-blockquote:border-0 prose-blockquote:text-center prose-blockquote:text-xl prose-blockquote:text-current tracking-tight mx-auto prose-headings:text-slate-800 prose-headings:w-max prose-headings:font-display prose-headings:font-extrabold"><p>Lately I’ve been trying <a href=https://code.visualstudio.com>VS Code</a>, a code editor based on <a href=http://electron.atom.io/>Electron</a>. Since then, it really surprised me and it’s been a nice coding experience.<h2 id=but>But…</h2><p>By default, JS syntax highlighting and ES2015+ and JSX support don’t work as expected.<p>I’ve tried to workaround it by using:<ol><li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-atom-grammar">Atom grammar</a>. JSX support was pretty bad.<li>A <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.typescript-javascript-grammar">development branch of VS Code colorization</a>, which is delivered as an extension. Finally got JSX to work properly, but syntax highlighting was still missing something.</ol><p>So, no success.<h2 id=improving-your-vs-code-workflow>Improving your VS Code workflow</h2><p>After much trial and error, I came up with a better JS workflow in VS Code.<h3 id=1-fix-js-syntax-highlighting>1. Fix JS syntax highlighting</h3><p>Install the <a href="https://marketplace.visualstudio.com/items?itemName=joshpeng.sublime-babel-vscode">Sublime Babel extension</a> and make sure you’re using one of the suggested color themes. (I like <a href="https://marketplace.visualstudio.com/items?itemName=joshpeng.theme-charcoal-oceanicnext">Charcoal Oceanic Next</a>!)<h3 id=2-use-javascript-react-in-js-files>2. Use “JavaScript React” in .js files</h3><p>VS Code only uses “JavaScript React” syntax in <code>.jsx</code> files. Add the following to your User (or Workspace) Settings:<pre class=language-json data-lang=json style=color:#f8f8f2;background-color:#282a36><code class=language-json data-lang=json><span style=color:#eee>"</span><span style=color:#f1fa8c>files.associations</span><span style=color:#eee>"</span><span>: {
+</span><span>  </span><span style=color:#eee>"</span><span style=color:#f1fa8c>*.js</span><span style=color:#eee>"</span><span>: </span><span style=color:#eee>"</span><span style=color:#f1fa8c>javascriptreact</span><span style=color:#eee>"
+</span><span>}
+</span></code></pre><h3 id=3-enable-emmet-for-jsx>3. Enable Emmet for JSX</h3><p>(That’s a plus!)<p>VS Code uses Emmet by default, but doesn’t enable it for <code>.jsx</code> files. Add the following to your User Settings:<pre class=language-json data-lang=json style=color:#f8f8f2;background-color:#282a36><code class=language-json data-lang=json><span style=color:#eee>"</span><span style=color:#f1fa8c>emmet.syntaxProfiles</span><span style=color:#eee>"</span><span>: {
+</span><span>  </span><span style=color:#eee>"</span><span style=color:#f1fa8c>javascript</span><span style=color:#eee>"</span><span>: </span><span style=color:#eee>"</span><span style=color:#f1fa8c>jsx</span><span style=color:#eee>"
+</span><span>}
+</span></code></pre><h2 id=let-s-improve-vs-code>Let’s improve VS Code!</h2><p>There has been <a href=https://code.visualstudio.com/updates#_preview-typescript-javascript-grammar>improvements for JS grammar</a> already, but it’s still not perfect.<p>Fortunately, VS Code is an <strong><a href=https://github.com/Microsoft/vscode>open source project</a></strong> and can be improved by developers like us! Let’s not leave it like this. Give useful feedback and help!<p>Happy coding!</div></article></div></body><script src=/footnotes.js></script>
diff --git a/blog/a-bit-on-random-numbers-in-javascript/index.html b/blog/a-bit-on-random-numbers-in-javascript/index.html
@@ -0,0 +1,10 @@
+<!doctype html><html class="scroll-smooth md:border-[10px] md:border-solid min-h-screen md:border-purple" lang=en><head><meta charset=utf-8><link href="/css/style.css?h=012c5f95ea1463230821" rel=stylesheet><meta content="width=device-width,initial-scale=1" name=viewport><title>A Bit on Random Numbers in JavaScript | Diéssica Gurskas</title><body class="text-gray-700 font-body antialiased"><div class="bg-blog px-3 md:px-10 min-h-[calc(100vh-16px)] lg:min-h-[calc(100vh-20px)]"><div class="py-12 mb-4 text-center space-x-8 text-md md:text-lg relative z-20"><a class="no-underline font-extrabold hover:border-green hover:border-b-2" href=/>diessi.ca</a><a class="no-underline hover:border-green hover:border-b-2 border-green border-b-2" href=/blog/>Blog</a><a class="no-underline hover:border-green hover:border-b-2" href=/misc/>Misc</a></div><article class="container mx-auto w-full xl:w-1/2 pb-8"><header class="xl:-mx-56 text-center mb-8 md:mb-12"><div class="uppercase tracking-widest opacity-60 mb-4 text-xs">November 15, 2016</div><h1 class="font-extrabold font-display text-3xl md:text-5xl xl:text-6xl text-slate-900">A Bit on Random Numbers in JavaScript</h1></header><div class="prose prose-sm md:prose 2xl:prose-lg prose-hr:text-red prose-hr:w-48 prose-hr:h-0.5 prose-hr:mx-auto prose-hr:my-4 prose-hr:bg-black prose-hr:opacity-20 prose-hr:border-0 prose-hr:rounded prose-hr:md:my-10 prose-pre:rounded-none prose-blockquote:border-0 prose-blockquote:text-center prose-blockquote:text-xl prose-blockquote:text-current tracking-tight mx-auto prose-headings:text-slate-800 prose-headings:w-max prose-headings:font-display prose-headings:font-extrabold"><p><code>Math.random()</code> is a JavaScript function that outputs a random number in the range <code>[0, 1)</code> (from 0 up to 1, but doesn’t include 1). It’s the main source of randomness in JavaScript.<p>Although the output looks random, it’s actually not.<h2 id=behind-the-scenes>Behind the Scenes</h2><p><code>Math.random()</code> uses a <strong>pseudo-random number generator</strong> (PRNG). Those algorithms work completely determined by a initial value called “seed”.<blockquote><p>Given a seed, the sequence of random numbers is deterministic.</blockquote><p>Every PRNG requires a seed, which <em>generally</em> is the current system time in milliseconds. Yeah, simple as that.<p>Speaking of JavaScript language, the PRNG algorithm to deal with the seed is left up to implementors<sup class=footnote-reference><a href=#1>1</a></sup>. The algorithm powering V8’s <code>Math.random()</code> was very poor quality until last year (2015), and implementations between engines were pretty inconsistent.<p>But the scenario has changed. Currently, JavaScript Engines such as SpiderMonkey, V8, Webkit and Chakra all implements <a href=https://en.wikipedia.org/wiki/Xorshift>Xorshift128+</a> algorithm<sup class=footnote-reference><a href=#2>2</a></sup>, faster than the previous one.<h2 id=secure-randomness>Secure Randomness</h2><p>Although randomness was improved in most JavaScript engines, it isn’t trustworthy as seen that standard PRNGs are highly predictable after a certain period. That’s where Web Crypto API shines!<p><a href=https://www.w3.org/TR/WebCryptoAPI/>Web Cryptography API</a> introduces <code>window.crypto.getRandomValues</code>, a cryptographically secure pseudo-random number generator (CSPNG), whose output is impossible or highly improbable to distinguish from a truly random one.<h3 id=example>Example</h3><pre class=language-js data-lang=js style=color:#f8f8f2;background-color:#282a36><code class=language-js data-lang=js><span style=color:#6272a4>// Array containing two 32-bit integers
+</span><span style=color:#8be9fd;font-style:italic>const </span><span style=color:#fff>arr </span><span style=color:#ff79c6>= new </span><span>Int32Array(</span><span style=color:#bd93f9>2</span><span>);
+</span><span>
+</span><span style=color:#6272a4>// Override array integers with random values
+</span><span style=color:#8be9fd;font-style:italic>const </span><span style=color:#fff>random </span><span style=color:#ff79c6>= </span><span style=color:#fff>crypto</span><span style=color:#ff79c6>.</span><span style=color:#50fa7b>getRandomValues</span><span>(</span><span style=color:#fff>arr</span><span>);
+</span><span>
+</span><span style=color:#ff79c6>for </span><span>(</span><span style=color:#8be9fd;font-style:italic>let </span><span style=color:#fff>i </span><span style=color:#ff79c6>= </span><span style=color:#bd93f9>0</span><span>; </span><span style=color:#fff>i </span><span style=color:#ff79c6>< </span><span style=color:#fff>random</span><span style=color:#ff79c6>.</span><span>length; </span><span style=color:#fff>i</span><span style=color:#ff79c6>++</span><span>) {
+</span><span>  </span><span style=color:#66d9ef;font-style:italic>console</span><span style=color:#ff79c6>.</span><span style=color:#8be9fd>log</span><span>(</span><span style=color:#fff>random</span><span>[</span><span style=color:#fff>i</span><span>]);
+</span><span>}
+</span></code></pre><p class=note>Of course it comes at a performance cost, so make sure you really need secure random numbers in your program.<h2 id=conclusion>Conclusion</h2><p>If you need apparent randomness–less and speed, you’d probably better off using <code>Math.random()</code>. If you need high-quality randomness, such as in cryptography applications, hashing or statistics, go for a CSPNG such as <code>window.crypto.getRandomValues</code> instead.<div class=footnote-definition id=1><sup class=footnote-definition-label>1</sup><p>See <a href=https://tc39.github.io/ecma262/#sec-math.random>ES2015 spec on <code>Math.random()</code></a>.</div><div class=footnote-definition id=2><sup class=footnote-definition-label>2</sup><p>Sources: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=322529">SpiderMonkey</a>, <a href=http://v8project.blogspot.com.br/2015/12/theres-mathrandom-and-then-theres.html>V8</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=151641">Webkit</a>, <a href=https://github.com/Microsoft/ChakraCore/pull/145>Chakra</a>.</div></div></article></div></body><script src=/footnotes.js></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html class="scroll-smooth md:border-[10px] md:border-solid min-h-screen md:border-purple" lang=en><head><meta charset=utf-8><link href="/css/style.css?h=012c5f95ea1463230821" rel=stylesheet><meta content="width=device-width,initial-scale=1" name=viewport><body class="text-gray-700 font-body antialiased"><div class="text-center bg-index min-h-[calc(100vh-16px)] lg:min-h-[calc(100vh-20px)] text-white p-40"><h1 class="text-2xl md:text-9xl font-extrabold mb-2 text-green tracking-widest">4😱4</h1><h1 class="text-2xl md:text-5xll font-extrabold mb-8 text-green tracking-widest">4040<a href=https://en.wikipedia.org/wiki/HTTP_404>404</a>0404</h1><p class="leading-loose mb-5">This page does not exist. If you come from a broken link, you may <a href=https://github.com/diessica/diessica.github.io>let me know on GitHub</a>.</p><a class="font-extrabold text-2xl" href=/>← Go back</a></div></body><script src=/footnotes.js></script>