Front-end developer. Working with React, Svelte, and Vue.js. Passionate about accessibility, performance, and developer tooling.
- Hungary
Pinned Loading
-
beat-the-ai
beat-the-ai Public๐ค Try to write a JavaScript function that beats the AI in a game called Five in a Row
TypeScript
-
pomodoro-timer
pomodoro-timer Public๐ Time management tool designed to boost productivity and focus
TypeScript
-
game-of-life
game-of-life Public๐ฆ A simple web app to see how Svelte, SvelteKit and Server Side Rendering work.
JavaScript
-
๐ Bookmarklet to measure any element...
๐ Bookmarklet to measure any element on a webpage 1Create a new bookmark with the following URL (or execute it in a Dev Console):
2```javascript
3javascript:{/*! v1.1 */const x=new AbortController,d=document,a=(e,s,o=d.body)=>o.addEventListener(e,s,{signal:x.signal}),p=(e,s={},o=[])=>{const r=d.createElement(e);return Object.entries(s).map(([i,g])=>r[i]=g),r.append(...o),r},f=p("div",{style:"all:revert;height:10px;align-self:start;background:no-repeat 50%/100% 2px linear-gradient(#000,#000 1px,#fff 0,#fff 2px,transparent 0);border-color:#000;border-width:0 1px 0;border-style:solid;cursor:ew-resize;user-select:none;"}),y=p("div",{style:"all:revert;padding:1px 2px;align-self:center;border-radius:2px;font:700 12px system-ui;color:#fff;background:#000;cursor:move;user-select:none;"}),n=p("div",{tabIndex:0,style:"all:revert;position:absolute;display:inline-flex;flex-direction:column;gap:1px;outline-offset:1px;"},[f,y]),u={x:e=>n.style.left=e+"px",y:e=>n.style.top=e+"px",s:e=>y.textContent=f.style.width=e+"px",f:e=>e?(n.style.zIndex=1e9,n.style.opacity=1):(n.style.zIndex=1e8,n.style.opacity=.4)},t=new Proxy({},{set(e,s,o){u[s](o),e[s]=o}});d.body.append(n),a("focus",()=>t.f=!0,n),a("blur",()=>t.f=!1,n);let c,l={};a("keydown",e=>{const{key:s,repeat:o}=e;if(["Backspace","Escape"].includes(s)){x.abort(),n.remove();return}if(s==="s"){e.preventDefault(),console.log(`Ruler's position: [${t.x}, ${t.y}], size: ${t.s}px`);return}const r={"+":[1,0],"-":[-1,0],ArrowUp:[0,-1],ArrowLeft:[-1,0],ArrowDown:[0,1],ArrowRight:[1,0]}[s];if(r){e.preventDefault();const i=o?5:1;s.startsWith("Arrow")?(t.x+=r[0]*i,t.y+=r[1]*i):t.s+=r[0]*i}},n),a("mousedown",({target:e,clientX:s,clientY:o})=>{c=e===f?"r":"m",l.s={...t},l.c={x:s,y:o}},n),a("mouseup",()=>c=void 0),a("mousemove",({buttons:e,clientX:s,clientY:o})=>{if(e&1&&c){const i={x:s-l.c.x,y:o-l.c.y};c==="m"?(t.x=l.s.x+i.x,t.y=l.s.y+i.y):t.s=l.s.s+i.x}}),t.x=t.y=t.s=100,n.focus()}
4```
5
Something went wrong, please refresh the page to try again.
If the problem persists, check the GitHub status page or contact support.
If the problem persists, check the GitHub status page or contact support.