diff --git a/200.html b/200.html index e6a2cd6dd..87552b01d 100644 --- a/200.html +++ b/200.html @@ -50,4 +50,4 @@
- \ No newline at end of file + \ No newline at end of file diff --git a/404.html b/404.html index e6a2cd6dd..87552b01d 100644 --- a/404.html +++ b/404.html @@ -50,4 +50,4 @@
- \ No newline at end of file + \ No newline at end of file diff --git a/_nuxt/builds/latest.json b/_nuxt/builds/latest.json index f599beee9..3b845155e 100644 --- a/_nuxt/builds/latest.json +++ b/_nuxt/builds/latest.json @@ -1 +1 @@ -{"id":"a9325b21-f00d-415b-b3da-24add7e93a45","timestamp":1733447455965} \ No newline at end of file +{"id":"4c9cfd30-1398-4585-a238-71983b28fde3","timestamp":1733533822469} \ No newline at end of file diff --git a/_nuxt/builds/meta/4c9cfd30-1398-4585-a238-71983b28fde3.json b/_nuxt/builds/meta/4c9cfd30-1398-4585-a238-71983b28fde3.json new file mode 100644 index 000000000..5787b9290 --- /dev/null +++ b/_nuxt/builds/meta/4c9cfd30-1398-4585-a238-71983b28fde3.json @@ -0,0 +1 @@ +{"id":"4c9cfd30-1398-4585-a238-71983b28fde3","timestamp":1733533822469,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":["/privacy-policy","/blog/2024/how-to-protect-state-in-pinia","/blog/2023/when-is-a-clickable-div-okay","/blog/2020/learning-neumorphic-design","/blog/2020/hover-css-media-query","/blog/2023/should-you-clean-out-your-blog","/","/links","/projects","/blog"]} \ No newline at end of file diff --git a/_nuxt/builds/meta/a9325b21-f00d-415b-b3da-24add7e93a45.json b/_nuxt/builds/meta/a9325b21-f00d-415b-b3da-24add7e93a45.json deleted file mode 100644 index bb57d0c5c..000000000 --- a/_nuxt/builds/meta/a9325b21-f00d-415b-b3da-24add7e93a45.json +++ /dev/null @@ -1 +0,0 @@ -{"id":"a9325b21-f00d-415b-b3da-24add7e93a45","timestamp":1733447455965,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":["/privacy-policy","/","/blog/2020/hover-css-media-query","/blog/2023/should-you-clean-out-your-blog","/blog/2023/when-is-a-clickable-div-okay","/blog/2020/learning-neumorphic-design","/blog/2024/how-to-protect-state-in-pinia","/links","/projects","/blog"]} \ No newline at end of file diff --git a/_payload.json b/_payload.json index 1563d67bd..2aaba828c 100644 --- a/_payload.json +++ b/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":1030},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"$pqtWcjQkdb":118,"project-list-undefined":262},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":260},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"2QHyZ7VxF5oLnaQdSZOGQF","2022-11-29T19:03:07.826Z","2024-10-27T19:04:32.339Z",{"sys":132},{"id":18,"type":10,"linkType":19},123,21,{"sys":136},{"type":10,"linkType":57,"id":137},"home",{"name":64,"metaDescription":139,"title":116,"heroBody":140,"heroImage":150,"aboutTitle":173,"aboutBody":174,"aboutImage":150,"skillsTitle":211,"skillsList":212},"A Nottinghamshire-based frontend & UX developer, primarily working with Vue.js, Nuxt.js, TypeScript, SCSS & many more technologies.",{"data":141,"content":142,"nodeType":117},{},[143],{"data":144,"content":145,"nodeType":102},{},[146],{"data":147,"marks":148,"value":149,"nodeType":101},{},[],"Senior Frontend Developer",{"metadata":151,"sys":154,"fields":162},{"tags":152,"concepts":153},[],[],{"space":155,"id":157,"type":14,"createdAt":158,"updatedAt":158,"environment":159,"publishedVersion":161,"revision":21,"locale":22},{"sys":156},{"type":10,"linkType":11,"id":12},"1mPOrNhlrFYTBTczYmv3ZW","2023-01-21T21:22:09.036Z",{"sys":160},{"id":18,"type":10,"linkType":19},6,{"title":163,"description":164,"file":165},"Me (portrait)","Jack Domleo portrait",{"url":166,"details":167,"fileName":171,"contentType":172},"//images.ctfassets.net/l1wujzr3g1ab/1mPOrNhlrFYTBTczYmv3ZW/6bc83cfc55892490e750e5d9f47d40d9/me.jpg",{"size":168,"image":169},23399,{"width":170,"height":170},460,"me.jpg","image/jpeg","About me",{"nodeType":117,"data":175,"content":176},{},[177,197,204],{"nodeType":102,"data":178,"content":179},{},[180,184,193],{"nodeType":101,"value":181,"marks":182,"data":183},"Hi, I'm Jack Domleo, a Nottinghamshire-based developer in the UK, currently working as a Senior Frontend Developer at ",[],{},{"nodeType":185,"data":186,"content":188},"hyperlink",{"uri":187},"https://www.oceanfinance.co.uk/",[189],{"nodeType":101,"value":190,"marks":191,"data":192},"Ocean Finance",[],{},{"nodeType":101,"value":194,"marks":195,"data":196},".",[],{},{"nodeType":102,"data":198,"content":199},{},[200],{"nodeType":101,"value":201,"marks":202,"data":203},"I have just over 6 years of professional experience working as a developer. I often work with Vue.js, TypeScript, Vite, Vitest, SCSS, Storybook, and PlayWright.",[],{},{"nodeType":102,"data":205,"content":206},{},[207],{"nodeType":101,"value":208,"marks":209,"data":210},"I have a passion for frontend technologies, and writing clean websites and applications while maintaining high accessibility standards.",[],{},"Skills",[213,217,221,225,229,233,237,241,245,248,252,256],{"id":214,"key":215,"value":216},"d896fe97-be3e-4c5f-978b-0327614319f4","vue","Vue.js",{"id":218,"key":219,"value":220},"42846b2b-1fb3-4e40-995a-45f6e74f8bb3","nuxt","Nuxt.js",{"id":222,"key":223,"value":224},"dc3fdfb3-a196-4a15-a775-e8d8d35fc83b","typescript","TypeScript",{"id":226,"key":227,"value":228},"b5ac1642-12dd-4073-88f6-6314ac9c7919","jest","Jest",{"id":230,"key":231,"value":232},"853277e0-df13-4e88-88f8-a857bcac9d3a","storybook","Storybook",{"id":234,"key":235,"value":236},"d36cf843-6326-4b93-9f32-ee489277ecd6","sass","Sass/SCSS",{"id":238,"key":239,"value":240},"3cf64446-8147-475a-b64e-54df9b5ce682","a11y","Accessibility",{"id":242,"key":243,"value":244},"a98d8951-611b-4321-8c43-ee325ba5e932","node_js","Node.js",{"id":246,"key":247,"value":247},"7329b3e5-11e0-493f-ac9a-1dcc1d496a3e","npm",{"id":249,"key":250,"value":251},"bdea57ff-9074-4455-b456-57eaecf2f71e","vs_code","VS Code",{"id":253,"key":254,"value":255},"b4e8d466-6275-45a0-9916-5175565ff32b","javascript","JavaScript",{"id":257,"key":258,"value":259},"3e620c9f-53e6-4e83-bd1a-3a01fe90eb52","html","HTML",{"Asset":261},[150],{"sys":263,"total":264,"skip":38,"limit":265,"items":266,"includes":1028},{"type":37},15,1000,[267,325,377,425,476,530,578,630,680,729,780,830,879,927,976],{"metadata":268,"sys":271,"fields":282},{"tags":269,"concepts":270},[],[],{"space":272,"id":274,"type":48,"createdAt":275,"updatedAt":275,"environment":276,"publishedVersion":278,"revision":21,"contentType":279,"locale":22},{"sys":273},{"type":10,"linkType":11,"id":12},"4Kiex9dMPsL87rteSvnG2h","2023-01-28T19:13:41.069Z",{"sys":277},{"id":18,"type":10,"linkType":19},10,{"sys":280},{"type":10,"linkType":57,"id":281},"project",{"name":283,"type":284,"url":285,"description":286,"tech":296,"tags":300,"image":302},"Grassverse NFT","Client","https://www.grassverse.org/",{"data":287,"content":288,"nodeType":117},{},[289],{"data":290,"content":291,"nodeType":102},{},[292],{"data":293,"marks":294,"value":295,"nodeType":101},{},[],"This website came with pre-existing designs and includes a CMS and an account section for Grassverse asset owners to log in to view their assets and fellow owners of assets.",[297,298,224,299],"Nuxt 2","Web3","SCSS",[301],"NFT",{"metadata":303,"sys":306,"fields":314},{"tags":304,"concepts":305},[],[],{"space":307,"id":309,"type":14,"createdAt":310,"updatedAt":310,"environment":311,"publishedVersion":313,"revision":21,"locale":22},{"sys":308},{"type":10,"linkType":11,"id":12},"01rxXuPpEQ6phTc1Bvt9W9","2023-01-28T19:13:34.307Z",{"sys":312},{"id":18,"type":10,"linkType":19},3,{"title":315,"description":316,"file":317},"grassverse-project-img","",{"url":318,"details":319,"fileName":324,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/01rxXuPpEQ6phTc1Bvt9W9/5d347eb3e2a3731922c0aa7046273780/grassverse-project-img.png",{"size":320,"image":321},163210,{"width":322,"height":323},600,315,"grassverse-project-img.png",{"metadata":326,"sys":329,"fields":338},{"tags":327,"concepts":328},[],[],{"space":330,"id":332,"type":48,"createdAt":333,"updatedAt":333,"environment":334,"publishedVersion":20,"revision":21,"contentType":336,"locale":22},{"sys":331},{"type":10,"linkType":11,"id":12},"2JxOvMguZVHxM565SKDspu","2023-01-28T18:25:42.700Z",{"sys":335},{"id":18,"type":10,"linkType":19},{"sys":337},{"type":10,"linkType":57,"id":281},{"name":339,"type":340,"url":341,"description":342,"tech":352,"tags":354,"image":356},"npx jackdomleo7","Mini","https://github.com/jackdomleo7/npx_business_card",{"data":343,"content":344,"nodeType":117},{},[345],{"data":346,"content":347,"nodeType":102},{},[348],{"data":349,"marks":350,"value":351,"nodeType":101},{},[],"A simple npm script to show some details about me right in the console.",[255,353],"npx",[355],"npm package",{"metadata":357,"sys":360,"fields":368},{"tags":358,"concepts":359},[],[],{"space":361,"id":363,"type":14,"createdAt":364,"updatedAt":364,"environment":365,"publishedVersion":367,"revision":21,"locale":22},{"sys":362},{"type":10,"linkType":11,"id":12},"2ilJcH34gnOn1SEfkJqlJj","2023-01-28T18:25:36.903Z",{"sys":366},{"id":18,"type":10,"linkType":19},5,{"title":369,"description":339,"file":370},"npx-jackdomleo7-project-img",{"url":371,"details":372,"fileName":375,"contentType":376},"//images.ctfassets.net/l1wujzr3g1ab/2ilJcH34gnOn1SEfkJqlJj/69c7b64c07e828439e60e1287e47828c/npx-jackdomleo7-project-img.gif",{"size":373,"image":374},30415,{"width":322,"height":323},"npx-jackdomleo7-project-img.gif","image/gif",{"metadata":378,"sys":381,"fields":390},{"tags":379,"concepts":380},[],[],{"space":382,"id":384,"type":48,"createdAt":385,"updatedAt":385,"environment":386,"publishedVersion":278,"revision":21,"contentType":388,"locale":22},{"sys":383},{"type":10,"linkType":11,"id":12},"1y1gYckxXHOqS4a811GoMM","2023-01-28T18:10:23.588Z",{"sys":387},{"id":18,"type":10,"linkType":19},{"sys":389},{"type":10,"linkType":57,"id":281},{"name":391,"type":284,"url":392,"description":393,"tech":403,"tags":404,"image":405},"Mad Parrot Crew NFT","https://www.madparrotcrew.com/",{"data":394,"content":395,"nodeType":117},{},[396],{"data":397,"content":398,"nodeType":102},{},[399],{"data":400,"marks":401,"value":402,"nodeType":101},{},[],"Created a fully responsive minting website based on existing designs for the Mad Parrot Crew NFT.",[297,224,299],[301],{"metadata":406,"sys":409,"fields":416},{"tags":407,"concepts":408},[],[],{"space":410,"id":412,"type":14,"createdAt":413,"updatedAt":413,"environment":414,"publishedVersion":161,"revision":21,"locale":22},{"sys":411},{"type":10,"linkType":11,"id":12},"4yYU2VsDfEvMnOIFnWe8s6","2023-01-28T18:10:15.589Z",{"sys":415},{"id":18,"type":10,"linkType":19},{"title":417,"description":418,"file":419},"mad-parrot-crew-project-img","Screenshot of Mad Parrot Crew home page",{"url":420,"details":421,"fileName":424,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/4yYU2VsDfEvMnOIFnWe8s6/550e38a11ea5618096b160698925405c/mad-parrot-crew-project-img.png",{"size":422,"image":423},148413,{"width":322,"height":323},"mad-parrot-crew-project-img.png",{"metadata":426,"sys":429,"fields":439},{"tags":427,"concepts":428},[],[],{"space":430,"id":432,"type":48,"createdAt":433,"updatedAt":433,"environment":434,"publishedVersion":436,"revision":21,"contentType":437,"locale":22},{"sys":431},{"type":10,"linkType":11,"id":12},"6OEC4mGGiIzD1ebZVuCeke","2023-01-28T17:54:35.724Z",{"sys":435},{"id":18,"type":10,"linkType":19},7,{"sys":438},{"type":10,"linkType":57,"id":281},{"name":440,"type":441,"url":442,"description":443,"tech":453,"image":455},"Spring Clean Twitter Bot","Project","https://github.com/jackdomleo7/Spring_Clean_Twitter_Bot",{"data":444,"content":445,"nodeType":117},{},[446],{"data":447,"content":448,"nodeType":102},{},[449],{"data":450,"marks":451,"value":452,"nodeType":101},{},[],"A Twitter bot to automatically clean up my Twitter account.",[224,454],"CRON",{"metadata":456,"sys":459,"fields":467},{"tags":457,"concepts":458},[],[],{"space":460,"id":462,"type":14,"createdAt":463,"updatedAt":463,"environment":464,"publishedVersion":466,"revision":21,"locale":22},{"sys":461},{"type":10,"linkType":11,"id":12},"5zb0pDWNBVdorGnCnM0gwb","2023-01-28T17:54:30.356Z",{"sys":465},{"id":18,"type":10,"linkType":19},4,{"title":468,"description":469,"file":470},"twitter-spring-clean-bot-project-img","Twitter spring clean",{"url":471,"details":472,"fileName":475,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/5zb0pDWNBVdorGnCnM0gwb/d9cf343aeb2136f44ab17dc6b0410281/twitter-spring-clean-bot-project-img.png",{"size":473,"image":474},150202,{"width":322,"height":323},"twitter-spring-clean-bot-project-img.png",{"metadata":477,"sys":480,"fields":489},{"tags":478,"concepts":479},[],[],{"space":481,"id":483,"type":48,"createdAt":484,"updatedAt":484,"environment":485,"publishedVersion":278,"revision":21,"contentType":487,"locale":22},{"sys":482},{"type":10,"linkType":11,"id":12},"5kzQZ2SXoScnodt56Ulmiv","2023-01-28T17:37:10.177Z",{"sys":486},{"id":18,"type":10,"linkType":19},{"sys":488},{"type":10,"linkType":57,"id":281},{"name":490,"type":340,"url":491,"description":492,"tech":506,"tags":508,"image":510},"Colour Theme Watcher & Switcher","https://codepen.io/jackdomleo7/full/OJWaeem",{"data":493,"content":494,"nodeType":117},{},[495],{"data":496,"content":497,"nodeType":102},{},[498,502],{"data":499,"marks":500,"value":501,"nodeType":101},{},[],"A pure JavaScript snippet to watch",{"data":503,"marks":504,"value":505,"nodeType":101},{},[],"/detect a user's colour theme and allow them to change it.",[255,507],"CSS",[509],"Utility",{"metadata":511,"sys":514,"fields":521},{"tags":512,"concepts":513},[],[],{"space":515,"id":517,"type":14,"createdAt":518,"updatedAt":518,"environment":519,"publishedVersion":367,"revision":21,"locale":22},{"sys":516},{"type":10,"linkType":11,"id":12},"5u50SbmPUZoqIhzqtV7UaL","2023-01-28T17:37:05.167Z",{"sys":520},{"id":18,"type":10,"linkType":19},{"title":522,"description":523,"file":524},"colour-theme-picker-project-img","Changing colour theme from dark to light",{"url":525,"details":526,"fileName":529,"contentType":376},"//images.ctfassets.net/l1wujzr3g1ab/5u50SbmPUZoqIhzqtV7UaL/b7abf17a991a5e6b491ed212cd8e1c49/colour-theme-picker-project-img.gif",{"size":527,"image":528},123783,{"width":322,"height":323},"colour-theme-picker-project-img.gif",{"metadata":531,"sys":534,"fields":543},{"tags":532,"concepts":533},[],[],{"space":535,"id":537,"type":48,"createdAt":538,"updatedAt":538,"environment":539,"publishedVersion":20,"revision":21,"contentType":541,"locale":22},{"sys":536},{"type":10,"linkType":11,"id":12},"2qHSazjv6Ro4OXfCrkVkwg","2023-01-28T17:31:17.504Z",{"sys":540},{"id":18,"type":10,"linkType":19},{"sys":542},{"type":10,"linkType":57,"id":281},{"name":544,"type":340,"url":545,"description":546,"tech":556,"image":558},"Custom Car Colour Preview","https://codepen.io/jackdomleo7/full/wvoYjNP",{"data":547,"content":548,"nodeType":117},{},[549],{"data":550,"content":551,"nodeType":102},{},[552],{"data":553,"marks":554,"value":555,"nodeType":101},{},[],"An application to preview different colours of a car.",[557,299],"SVG",{"metadata":559,"sys":562,"fields":569},{"tags":560,"concepts":561},[],[],{"space":563,"id":565,"type":14,"createdAt":566,"updatedAt":566,"environment":567,"publishedVersion":367,"revision":21,"locale":22},{"sys":564},{"type":10,"linkType":11,"id":12},"1ZmqPLpQtjTJPsWiUB8ihd","2023-01-28T17:31:09.936Z",{"sys":568},{"id":18,"type":10,"linkType":19},{"title":570,"description":571,"file":572},"car-colour-picker-project-img","A car changing colour",{"url":573,"details":574,"fileName":577,"contentType":376},"//images.ctfassets.net/l1wujzr3g1ab/1ZmqPLpQtjTJPsWiUB8ihd/89be01caacd54b1d9e5975e584056260/car-colour-picker-project-img.gif",{"size":575,"image":576},439705,{"width":322,"height":323},"car-colour-picker-project-img.gif",{"metadata":579,"sys":582,"fields":594},{"tags":580,"concepts":581},[],[],{"space":583,"id":585,"type":48,"createdAt":586,"updatedAt":587,"environment":588,"publishedVersion":590,"revision":591,"contentType":592,"locale":22},{"sys":584},{"type":10,"linkType":11,"id":12},"wpQfsnzkVT7y1Eg4ANU24","2023-01-28T17:25:18.524Z","2023-01-28T17:37:25.464Z",{"sys":589},{"id":18,"type":10,"linkType":19},14,2,{"sys":593},{"type":10,"linkType":57,"id":281},{"name":595,"type":441,"url":596,"description":597,"tech":607,"tags":609,"image":610},"Checka11y.css","https://checka11y.jackdomleo.dev/",{"data":598,"content":599,"nodeType":117},{},[600],{"data":601,"content":602,"nodeType":102},{},[603],{"data":604,"marks":605,"value":606,"nodeType":101},{},[],"A CSS stylesheet to quickly highlight a11y concerns and a really good education project for those wanting to learn about accessibility.",[299,608],"Cypress",[355,509],{"metadata":611,"sys":614,"fields":621},{"tags":612,"concepts":613},[],[],{"space":615,"id":617,"type":14,"createdAt":618,"updatedAt":618,"environment":619,"publishedVersion":367,"revision":21,"locale":22},{"sys":616},{"type":10,"linkType":11,"id":12},"3nPJwMFNQ8OZ7OlHMED3YJ","2023-01-28T17:25:13.225Z",{"sys":620},{"id":18,"type":10,"linkType":19},{"title":622,"description":623,"file":624},"checka11y-project-img","Checka11y.css logo",{"url":625,"details":626,"fileName":629,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nPJwMFNQ8OZ7OlHMED3YJ/9350ee10587c33b4e9dd71464aa1173d/checka11y-project-img.png",{"size":627,"image":628},28340,{"width":322,"height":323},"checka11y-project-img.png",{"metadata":631,"sys":634,"fields":643},{"tags":632,"concepts":633},[],[],{"space":635,"id":637,"type":48,"createdAt":638,"updatedAt":638,"environment":639,"publishedVersion":20,"revision":21,"contentType":641,"locale":22},{"sys":636},{"type":10,"linkType":11,"id":12},"6egKMvjf6ugswngEWd7bzb","2023-01-28T17:19:29.418Z",{"sys":640},{"id":18,"type":10,"linkType":19},{"sys":642},{"type":10,"linkType":57,"id":281},{"name":644,"type":340,"url":645,"description":646,"tech":656,"tags":658,"image":660},"Spinning Smiley Face","https://codepen.io/jackdomleo7/full/wvKLjVb",{"data":647,"content":648,"nodeType":117},{},[649],{"data":650,"content":651,"nodeType":102},{},[652],{"data":653,"marks":654,"value":655,"nodeType":101},{},[],"A cute spinning smiley face while learning GSAP.",[657,299],"GSAP",[659],"Animation",{"metadata":661,"sys":664,"fields":671},{"tags":662,"concepts":663},[],[],{"space":665,"id":667,"type":14,"createdAt":668,"updatedAt":668,"environment":669,"publishedVersion":367,"revision":21,"locale":22},{"sys":666},{"type":10,"linkType":11,"id":12},"6i901gWFLWWSjs2ZYc9rpL","2023-01-28T17:19:17.739Z",{"sys":670},{"id":18,"type":10,"linkType":19},{"title":672,"description":673,"file":674},"spinning-smiley-face-project-img","Spinning smiley face animation",{"url":675,"details":676,"fileName":679,"contentType":376},"//images.ctfassets.net/l1wujzr3g1ab/6i901gWFLWWSjs2ZYc9rpL/e32d8b3cb14a794272c70360d1a39ac9/spinning-smiley-face-project-img.gif",{"size":677,"image":678},232759,{"width":322,"height":323},"spinning-smiley-face-project-img.gif",{"metadata":681,"sys":684,"fields":693},{"tags":682,"concepts":683},[],[],{"space":685,"id":687,"type":48,"createdAt":688,"updatedAt":688,"environment":689,"publishedVersion":436,"revision":21,"contentType":691,"locale":22},{"sys":686},{"type":10,"linkType":11,"id":12},"1rx3EwhjpCdMESgcFDv0CY","2023-01-28T17:10:10.423Z",{"sys":690},{"id":18,"type":10,"linkType":19},{"sys":692},{"type":10,"linkType":57,"id":281},{"name":694,"type":340,"url":695,"description":696,"tech":706,"tags":707,"image":709},"CSS Union Jack Flag","https://codepen.io/jackdomleo7/full/abvrgEo",{"nodeType":117,"data":697,"content":698},{},[699],{"nodeType":102,"data":700,"content":701},{},[702],{"nodeType":101,"value":703,"marks":704,"data":705},"A pure CSS pixel-perfect Union Jack flag.",[],{},[299],[708],"CSS Art",{"metadata":710,"sys":713,"fields":720},{"tags":711,"concepts":712},[],[],{"space":714,"id":716,"type":14,"createdAt":717,"updatedAt":717,"environment":718,"publishedVersion":367,"revision":21,"locale":22},{"sys":715},{"type":10,"linkType":11,"id":12},"2220otIqCHTmP1a6UkmHTO","2023-01-28T17:10:05.172Z",{"sys":719},{"id":18,"type":10,"linkType":19},{"title":721,"description":722,"file":723},"union-jack-project-img","Union Jack Flag",{"url":724,"details":725,"fileName":728,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2220otIqCHTmP1a6UkmHTO/1b888dd09c45cbb842cd476585c54eaf/union-jack-project-img.png",{"size":726,"image":727},29999,{"width":322,"height":323},"union-jack-project-img.png",{"metadata":730,"sys":733,"fields":744},{"tags":731,"concepts":732},[],[],{"space":734,"id":736,"type":48,"createdAt":737,"updatedAt":738,"environment":739,"publishedVersion":741,"revision":591,"contentType":742,"locale":22},{"sys":735},{"type":10,"linkType":11,"id":12},"3NkVQqDSFreEt3KgDspqhk","2023-01-28T12:20:29.489Z","2023-01-28T17:37:59.428Z",{"sys":740},{"id":18,"type":10,"linkType":19},9,{"sys":743},{"type":10,"linkType":57,"id":281},{"name":745,"type":340,"url":746,"description":747,"tech":757,"tags":758,"image":760},"Neumorphic Design Elements","https://codepen.io/jackdomleo7/full/mdeowoz",{"data":748,"content":749,"nodeType":117},{},[750],{"data":751,"content":752,"nodeType":102},{},[753],{"data":754,"marks":755,"value":756,"nodeType":101},{},[],"Some common UI elements in the style of neumorphic design.",[299],[759],"Popular",{"metadata":761,"sys":764,"fields":771},{"tags":762,"concepts":763},[],[],{"space":765,"id":767,"type":14,"createdAt":768,"updatedAt":768,"environment":769,"publishedVersion":367,"revision":21,"locale":22},{"sys":766},{"type":10,"linkType":11,"id":12},"5Qg1EnfhYLYpuJAT0qkaNc","2023-01-28T12:19:53.096Z",{"sys":770},{"id":18,"type":10,"linkType":19},{"title":772,"description":773,"file":774},"neumorphic-design-project-img","Neumorphic design components",{"url":775,"details":776,"fileName":779,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/5Qg1EnfhYLYpuJAT0qkaNc/43107f82a221c1809ab117bfd206170f/neumorphic-design-project-img.png",{"size":777,"image":778},31790,{"width":322,"height":323},"neumorphic-design-project-img.png",{"metadata":781,"sys":784,"fields":793},{"tags":782,"concepts":783},[],[],{"space":785,"id":787,"type":48,"createdAt":788,"updatedAt":788,"environment":789,"publishedVersion":20,"revision":21,"contentType":791,"locale":22},{"sys":786},{"type":10,"linkType":11,"id":12},"7vaOyrQvl5V0jGSDY3EsM2","2023-01-28T11:36:08.387Z",{"sys":790},{"id":18,"type":10,"linkType":19},{"sys":792},{"type":10,"linkType":57,"id":281},{"name":794,"type":284,"url":795,"description":796,"tech":806,"tags":808,"image":810},"TMD Interior Projects & Building Services Ltd","https://github.com/jackdomleo7/tmdip.co.uk",{"data":797,"content":798,"nodeType":117},{},[799],{"data":800,"content":801,"nodeType":102},{},[802],{"data":803,"marks":804,"value":805,"nodeType":101},{},[],"Designed and built a fully responsive static website for a small shop-fitting & interior design company. This website needed a modern but minimal feel to it so they could clearly get their message across to visitors. Unfortunately, the company closed in October 2021.",[297,224,807,299],"Prismic",[809],"Website",{"metadata":811,"sys":814,"fields":821},{"tags":812,"concepts":813},[],[],{"space":815,"id":817,"type":14,"createdAt":818,"updatedAt":818,"environment":819,"publishedVersion":161,"revision":21,"locale":22},{"sys":816},{"type":10,"linkType":11,"id":12},"v3W2zbHXA5PrqQNtVPUMm","2023-01-28T11:36:03.512Z",{"sys":820},{"id":18,"type":10,"linkType":19},{"title":822,"description":823,"file":824},"tmdip-project-img","Screenshot of TMD Interior Projects home page",{"url":825,"details":826,"fileName":829,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/v3W2zbHXA5PrqQNtVPUMm/1053b757abf68582bfa0f410077806c8/tmdip-project-img.png",{"size":827,"image":828},102678,{"width":322,"height":323},"tmdip-project-img.png",{"metadata":831,"sys":834,"fields":845},{"tags":832,"concepts":833},[],[],{"space":835,"id":837,"type":48,"createdAt":838,"updatedAt":839,"environment":840,"publishedVersion":842,"revision":591,"contentType":843,"locale":22},{"sys":836},{"type":10,"linkType":11,"id":12},"4ujuAFszSXcHDSvTByVFDD","2023-01-27T22:02:31.611Z","2023-01-28T17:37:41.676Z",{"sys":841},{"id":18,"type":10,"linkType":19},12,{"sys":844},{"type":10,"linkType":57,"id":281},{"name":846,"type":441,"url":847,"description":848,"tech":858,"tags":859,"image":860},"Cooltipz.css","https://cooltipz.jackdomleo.dev",{"data":849,"content":850,"nodeType":117},{},[851],{"data":852,"content":853,"nodeType":102},{},[854],{"data":855,"marks":856,"value":857,"nodeType":101},{},[],"A pure CSS solution for adding highly customisable, accessible tooltips to HTML.",[299],[355,759,509],{"metadata":861,"sys":864,"fields":871},{"tags":862,"concepts":863},[],[],{"space":865,"id":867,"type":14,"createdAt":868,"updatedAt":868,"environment":869,"publishedVersion":313,"revision":21,"locale":22},{"sys":866},{"type":10,"linkType":11,"id":12},"26fP6efyZsX7tw8rGCVrDL","2023-01-27T22:02:21.767Z",{"sys":870},{"id":18,"type":10,"linkType":19},{"title":872,"description":316,"file":873},"cooltipz-project-img",{"url":874,"details":875,"fileName":878,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/26fP6efyZsX7tw8rGCVrDL/0bc668a492f6b7eb375a3ad568df6c83/cooltipz-project-img.png",{"size":876,"image":877},11929,{"width":322,"height":323},"cooltipz-project-img.png",{"metadata":880,"sys":883,"fields":892},{"tags":881,"concepts":882},[],[],{"space":884,"id":886,"type":48,"createdAt":887,"updatedAt":887,"environment":888,"publishedVersion":54,"revision":21,"contentType":890,"locale":22},{"sys":885},{"type":10,"linkType":11,"id":12},"6YB39UZiiMFBSFf5YBFqaO","2023-01-27T21:57:40.389Z",{"sys":889},{"id":18,"type":10,"linkType":19},{"sys":891},{"type":10,"linkType":57,"id":281},{"name":893,"type":340,"url":894,"description":895,"tech":905,"tags":906,"image":908},"Jumping into Lightspeed","https://codepen.io/jackdomleo7/full/rNOYdwz",{"data":896,"content":897,"nodeType":117},{},[898],{"data":899,"content":900,"nodeType":102},{},[901],{"data":902,"marks":903,"value":904,"nodeType":101},{},[],"A mini animation demonstrating Star Wars lightspeed using HTML, CSS & JS.",[255,507],[907,659],"Star Wars",{"metadata":909,"sys":912,"fields":919},{"tags":910,"concepts":911},[],[],{"space":913,"id":915,"type":14,"createdAt":916,"updatedAt":916,"environment":917,"publishedVersion":313,"revision":21,"locale":22},{"sys":914},{"type":10,"linkType":11,"id":12},"zXmBtqvpORf1Zffobl22F","2023-01-27T21:57:26.116Z",{"sys":918},{"id":18,"type":10,"linkType":19},{"title":920,"description":316,"file":921},"lightspeed-project-img",{"url":922,"details":923,"fileName":926,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/zXmBtqvpORf1Zffobl22F/c4a75a537080960d72f5930149bf2817/lightspeed-project-img.png",{"size":924,"image":925},100927,{"width":322,"height":323},"lightspeed-project-img.png",{"metadata":928,"sys":931,"fields":940},{"tags":929,"concepts":930},[],[],{"space":932,"id":934,"type":48,"createdAt":935,"updatedAt":935,"environment":936,"publishedVersion":842,"revision":21,"contentType":938,"locale":22},{"sys":933},{"type":10,"linkType":11,"id":12},"4aZX5AexMhJjo66sZ0Nm03","2023-01-27T21:51:09.097Z",{"sys":937},{"id":18,"type":10,"linkType":19},{"sys":939},{"type":10,"linkType":57,"id":281},{"name":941,"type":340,"url":942,"description":943,"tech":953,"tags":954,"image":956},"Pixel Art R2-D2","https://codepen.io/jackdomleo7/full/ZEEqdxy",{"data":944,"content":945,"nodeType":117},{},[946],{"data":947,"content":948,"nodeType":102},{},[949],{"data":950,"marks":951,"value":952,"nodeType":101},{},[],"A pure CSS, single div pixel art of the beloved Star Wars droid, R2-D2.",[507],[708,955,907],"Single div",{"metadata":957,"sys":960,"fields":967},{"tags":958,"concepts":959},[],[],{"space":961,"id":963,"type":14,"createdAt":964,"updatedAt":964,"environment":965,"publishedVersion":367,"revision":21,"locale":22},{"sys":962},{"type":10,"linkType":11,"id":12},"1lG3pACHA8YGmbbpQ2fpA7","2023-01-27T21:50:58.303Z",{"sys":966},{"id":18,"type":10,"linkType":19},{"title":968,"description":969,"file":970},"r2-d2-project-img","R2-D2 from Star Wars as pixel art",{"url":971,"details":972,"fileName":975,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1lG3pACHA8YGmbbpQ2fpA7/6ed00265778f38c5bd7f1bc395eb484d/r2-d2-project-img.png",{"size":973,"image":974},37976,{"width":322,"height":323},"r2-d2-project-img.png",{"metadata":977,"sys":980,"fields":991},{"tags":978,"concepts":979},[],[],{"space":981,"id":983,"type":48,"createdAt":984,"updatedAt":985,"environment":986,"publishedVersion":988,"revision":313,"contentType":989,"locale":22},{"sys":982},{"type":10,"linkType":11,"id":12},"4RGkQbZ9QFaahqn14RB3fg","2023-01-27T21:40:30.860Z","2023-12-18T23:39:32.367Z",{"sys":987},{"id":18,"type":10,"linkType":19},20,{"sys":990},{"type":10,"linkType":57,"id":281},{"name":992,"type":441,"url":993,"description":994,"tech":1004,"tags":1007,"image":1008},"My website","https://github.com/jackdomleo7/jackdomleo.dev",{"data":995,"content":996,"nodeType":117},{},[997],{"data":998,"content":999,"nodeType":102},{},[1000],{"data":1001,"marks":1002,"value":1003,"nodeType":101},{},[],"Designed and built a fully responsive static website and blog for myself. This has been through many design variations as my UI skills have developed.",[1005,1006,224,299],"Nuxt 3","Contentful",[809],{"metadata":1009,"sys":1012,"fields":1019},{"tags":1010,"concepts":1011},[],[],{"space":1013,"id":1015,"type":14,"createdAt":1016,"updatedAt":1016,"environment":1017,"publishedVersion":436,"revision":21,"locale":22},{"sys":1014},{"type":10,"linkType":11,"id":12},"7fXjHpN3LyWRS6iULHyR02","2023-01-27T21:40:19.986Z",{"sys":1018},{"id":18,"type":10,"linkType":19},{"title":1020,"description":1021,"file":1022},"jackdomleo.dev-project-img","Screenshot of jackdomleo.dev homepage",{"url":1023,"details":1024,"fileName":1027,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/7fXjHpN3LyWRS6iULHyR02/8b59f60fb2404576a0c93553694fb1b6/jackdomleo.dev-project-img.png",{"size":1025,"image":1026},44662,{"width":322,"height":323},"jackdomleo.dev-project-img.png",{"Asset":1029},[302,558,956,709,860,356,610,405,760,510,455,660,1008,810,908],1733447471197] \ No newline at end of file +[{"data":1,"prerenderedAt":1030},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"$pqtWcjQkdb":118,"project-list-undefined":262},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":260},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"2QHyZ7VxF5oLnaQdSZOGQF","2022-11-29T19:03:07.826Z","2024-10-27T19:04:32.339Z",{"sys":132},{"id":18,"type":10,"linkType":19},123,21,{"sys":136},{"type":10,"linkType":57,"id":137},"home",{"name":64,"metaDescription":139,"title":116,"heroBody":140,"heroImage":150,"aboutTitle":173,"aboutBody":174,"aboutImage":150,"skillsTitle":211,"skillsList":212},"A Nottinghamshire-based frontend & UX developer, primarily working with Vue.js, Nuxt.js, TypeScript, SCSS & many more technologies.",{"data":141,"content":142,"nodeType":117},{},[143],{"data":144,"content":145,"nodeType":102},{},[146],{"data":147,"marks":148,"value":149,"nodeType":101},{},[],"Senior Frontend Developer",{"metadata":151,"sys":154,"fields":162},{"tags":152,"concepts":153},[],[],{"space":155,"id":157,"type":14,"createdAt":158,"updatedAt":158,"environment":159,"publishedVersion":161,"revision":21,"locale":22},{"sys":156},{"type":10,"linkType":11,"id":12},"1mPOrNhlrFYTBTczYmv3ZW","2023-01-21T21:22:09.036Z",{"sys":160},{"id":18,"type":10,"linkType":19},6,{"title":163,"description":164,"file":165},"Me (portrait)","Jack Domleo portrait",{"url":166,"details":167,"fileName":171,"contentType":172},"//images.ctfassets.net/l1wujzr3g1ab/1mPOrNhlrFYTBTczYmv3ZW/6bc83cfc55892490e750e5d9f47d40d9/me.jpg",{"size":168,"image":169},23399,{"width":170,"height":170},460,"me.jpg","image/jpeg","About me",{"nodeType":117,"data":175,"content":176},{},[177,197,204],{"nodeType":102,"data":178,"content":179},{},[180,184,193],{"nodeType":101,"value":181,"marks":182,"data":183},"Hi, I'm Jack Domleo, a Nottinghamshire-based developer in the UK, currently working as a Senior Frontend Developer at ",[],{},{"nodeType":185,"data":186,"content":188},"hyperlink",{"uri":187},"https://www.oceanfinance.co.uk/",[189],{"nodeType":101,"value":190,"marks":191,"data":192},"Ocean Finance",[],{},{"nodeType":101,"value":194,"marks":195,"data":196},".",[],{},{"nodeType":102,"data":198,"content":199},{},[200],{"nodeType":101,"value":201,"marks":202,"data":203},"I have just over 6 years of professional experience working as a developer. I often work with Vue.js, TypeScript, Vite, Vitest, SCSS, Storybook, and PlayWright.",[],{},{"nodeType":102,"data":205,"content":206},{},[207],{"nodeType":101,"value":208,"marks":209,"data":210},"I have a passion for frontend technologies, and writing clean websites and applications while maintaining high accessibility standards.",[],{},"Skills",[213,217,221,225,229,233,237,241,245,248,252,256],{"id":214,"key":215,"value":216},"d896fe97-be3e-4c5f-978b-0327614319f4","vue","Vue.js",{"id":218,"key":219,"value":220},"42846b2b-1fb3-4e40-995a-45f6e74f8bb3","nuxt","Nuxt.js",{"id":222,"key":223,"value":224},"dc3fdfb3-a196-4a15-a775-e8d8d35fc83b","typescript","TypeScript",{"id":226,"key":227,"value":228},"b5ac1642-12dd-4073-88f6-6314ac9c7919","jest","Jest",{"id":230,"key":231,"value":232},"853277e0-df13-4e88-88f8-a857bcac9d3a","storybook","Storybook",{"id":234,"key":235,"value":236},"d36cf843-6326-4b93-9f32-ee489277ecd6","sass","Sass/SCSS",{"id":238,"key":239,"value":240},"3cf64446-8147-475a-b64e-54df9b5ce682","a11y","Accessibility",{"id":242,"key":243,"value":244},"a98d8951-611b-4321-8c43-ee325ba5e932","node_js","Node.js",{"id":246,"key":247,"value":247},"7329b3e5-11e0-493f-ac9a-1dcc1d496a3e","npm",{"id":249,"key":250,"value":251},"bdea57ff-9074-4455-b456-57eaecf2f71e","vs_code","VS Code",{"id":253,"key":254,"value":255},"b4e8d466-6275-45a0-9916-5175565ff32b","javascript","JavaScript",{"id":257,"key":258,"value":259},"3e620c9f-53e6-4e83-bd1a-3a01fe90eb52","html","HTML",{"Asset":261},[150],{"sys":263,"total":264,"skip":38,"limit":265,"items":266,"includes":1028},{"type":37},15,1000,[267,325,377,425,476,530,578,630,680,729,780,830,879,927,976],{"metadata":268,"sys":271,"fields":282},{"tags":269,"concepts":270},[],[],{"space":272,"id":274,"type":48,"createdAt":275,"updatedAt":275,"environment":276,"publishedVersion":278,"revision":21,"contentType":279,"locale":22},{"sys":273},{"type":10,"linkType":11,"id":12},"4Kiex9dMPsL87rteSvnG2h","2023-01-28T19:13:41.069Z",{"sys":277},{"id":18,"type":10,"linkType":19},10,{"sys":280},{"type":10,"linkType":57,"id":281},"project",{"name":283,"type":284,"url":285,"description":286,"tech":296,"tags":300,"image":302},"Grassverse NFT","Client","https://www.grassverse.org/",{"data":287,"content":288,"nodeType":117},{},[289],{"data":290,"content":291,"nodeType":102},{},[292],{"data":293,"marks":294,"value":295,"nodeType":101},{},[],"This website came with pre-existing designs and includes a CMS and an account section for Grassverse asset owners to log in to view their assets and fellow owners of assets.",[297,298,224,299],"Nuxt 2","Web3","SCSS",[301],"NFT",{"metadata":303,"sys":306,"fields":314},{"tags":304,"concepts":305},[],[],{"space":307,"id":309,"type":14,"createdAt":310,"updatedAt":310,"environment":311,"publishedVersion":313,"revision":21,"locale":22},{"sys":308},{"type":10,"linkType":11,"id":12},"01rxXuPpEQ6phTc1Bvt9W9","2023-01-28T19:13:34.307Z",{"sys":312},{"id":18,"type":10,"linkType":19},3,{"title":315,"description":316,"file":317},"grassverse-project-img","",{"url":318,"details":319,"fileName":324,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/01rxXuPpEQ6phTc1Bvt9W9/5d347eb3e2a3731922c0aa7046273780/grassverse-project-img.png",{"size":320,"image":321},163210,{"width":322,"height":323},600,315,"grassverse-project-img.png",{"metadata":326,"sys":329,"fields":338},{"tags":327,"concepts":328},[],[],{"space":330,"id":332,"type":48,"createdAt":333,"updatedAt":333,"environment":334,"publishedVersion":20,"revision":21,"contentType":336,"locale":22},{"sys":331},{"type":10,"linkType":11,"id":12},"2JxOvMguZVHxM565SKDspu","2023-01-28T18:25:42.700Z",{"sys":335},{"id":18,"type":10,"linkType":19},{"sys":337},{"type":10,"linkType":57,"id":281},{"name":339,"type":340,"url":341,"description":342,"tech":352,"tags":354,"image":356},"npx jackdomleo7","Mini","https://github.com/jackdomleo7/npx_business_card",{"data":343,"content":344,"nodeType":117},{},[345],{"data":346,"content":347,"nodeType":102},{},[348],{"data":349,"marks":350,"value":351,"nodeType":101},{},[],"A simple npm script to show some details about me right in the console.",[255,353],"npx",[355],"npm package",{"metadata":357,"sys":360,"fields":368},{"tags":358,"concepts":359},[],[],{"space":361,"id":363,"type":14,"createdAt":364,"updatedAt":364,"environment":365,"publishedVersion":367,"revision":21,"locale":22},{"sys":362},{"type":10,"linkType":11,"id":12},"2ilJcH34gnOn1SEfkJqlJj","2023-01-28T18:25:36.903Z",{"sys":366},{"id":18,"type":10,"linkType":19},5,{"title":369,"description":339,"file":370},"npx-jackdomleo7-project-img",{"url":371,"details":372,"fileName":375,"contentType":376},"//images.ctfassets.net/l1wujzr3g1ab/2ilJcH34gnOn1SEfkJqlJj/69c7b64c07e828439e60e1287e47828c/npx-jackdomleo7-project-img.gif",{"size":373,"image":374},30415,{"width":322,"height":323},"npx-jackdomleo7-project-img.gif","image/gif",{"metadata":378,"sys":381,"fields":390},{"tags":379,"concepts":380},[],[],{"space":382,"id":384,"type":48,"createdAt":385,"updatedAt":385,"environment":386,"publishedVersion":278,"revision":21,"contentType":388,"locale":22},{"sys":383},{"type":10,"linkType":11,"id":12},"1y1gYckxXHOqS4a811GoMM","2023-01-28T18:10:23.588Z",{"sys":387},{"id":18,"type":10,"linkType":19},{"sys":389},{"type":10,"linkType":57,"id":281},{"name":391,"type":284,"url":392,"description":393,"tech":403,"tags":404,"image":405},"Mad Parrot Crew NFT","https://www.madparrotcrew.com/",{"data":394,"content":395,"nodeType":117},{},[396],{"data":397,"content":398,"nodeType":102},{},[399],{"data":400,"marks":401,"value":402,"nodeType":101},{},[],"Created a fully responsive minting website based on existing designs for the Mad Parrot Crew NFT.",[297,224,299],[301],{"metadata":406,"sys":409,"fields":416},{"tags":407,"concepts":408},[],[],{"space":410,"id":412,"type":14,"createdAt":413,"updatedAt":413,"environment":414,"publishedVersion":161,"revision":21,"locale":22},{"sys":411},{"type":10,"linkType":11,"id":12},"4yYU2VsDfEvMnOIFnWe8s6","2023-01-28T18:10:15.589Z",{"sys":415},{"id":18,"type":10,"linkType":19},{"title":417,"description":418,"file":419},"mad-parrot-crew-project-img","Screenshot of Mad Parrot Crew home page",{"url":420,"details":421,"fileName":424,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/4yYU2VsDfEvMnOIFnWe8s6/550e38a11ea5618096b160698925405c/mad-parrot-crew-project-img.png",{"size":422,"image":423},148413,{"width":322,"height":323},"mad-parrot-crew-project-img.png",{"metadata":426,"sys":429,"fields":439},{"tags":427,"concepts":428},[],[],{"space":430,"id":432,"type":48,"createdAt":433,"updatedAt":433,"environment":434,"publishedVersion":436,"revision":21,"contentType":437,"locale":22},{"sys":431},{"type":10,"linkType":11,"id":12},"6OEC4mGGiIzD1ebZVuCeke","2023-01-28T17:54:35.724Z",{"sys":435},{"id":18,"type":10,"linkType":19},7,{"sys":438},{"type":10,"linkType":57,"id":281},{"name":440,"type":441,"url":442,"description":443,"tech":453,"image":455},"Spring Clean Twitter Bot","Project","https://github.com/jackdomleo7/Spring_Clean_Twitter_Bot",{"data":444,"content":445,"nodeType":117},{},[446],{"data":447,"content":448,"nodeType":102},{},[449],{"data":450,"marks":451,"value":452,"nodeType":101},{},[],"A Twitter bot to automatically clean up my Twitter account.",[224,454],"CRON",{"metadata":456,"sys":459,"fields":467},{"tags":457,"concepts":458},[],[],{"space":460,"id":462,"type":14,"createdAt":463,"updatedAt":463,"environment":464,"publishedVersion":466,"revision":21,"locale":22},{"sys":461},{"type":10,"linkType":11,"id":12},"5zb0pDWNBVdorGnCnM0gwb","2023-01-28T17:54:30.356Z",{"sys":465},{"id":18,"type":10,"linkType":19},4,{"title":468,"description":469,"file":470},"twitter-spring-clean-bot-project-img","Twitter spring clean",{"url":471,"details":472,"fileName":475,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/5zb0pDWNBVdorGnCnM0gwb/d9cf343aeb2136f44ab17dc6b0410281/twitter-spring-clean-bot-project-img.png",{"size":473,"image":474},150202,{"width":322,"height":323},"twitter-spring-clean-bot-project-img.png",{"metadata":477,"sys":480,"fields":489},{"tags":478,"concepts":479},[],[],{"space":481,"id":483,"type":48,"createdAt":484,"updatedAt":484,"environment":485,"publishedVersion":278,"revision":21,"contentType":487,"locale":22},{"sys":482},{"type":10,"linkType":11,"id":12},"5kzQZ2SXoScnodt56Ulmiv","2023-01-28T17:37:10.177Z",{"sys":486},{"id":18,"type":10,"linkType":19},{"sys":488},{"type":10,"linkType":57,"id":281},{"name":490,"type":340,"url":491,"description":492,"tech":506,"tags":508,"image":510},"Colour Theme Watcher & Switcher","https://codepen.io/jackdomleo7/full/OJWaeem",{"data":493,"content":494,"nodeType":117},{},[495],{"data":496,"content":497,"nodeType":102},{},[498,502],{"data":499,"marks":500,"value":501,"nodeType":101},{},[],"A pure JavaScript snippet to watch",{"data":503,"marks":504,"value":505,"nodeType":101},{},[],"/detect a user's colour theme and allow them to change it.",[255,507],"CSS",[509],"Utility",{"metadata":511,"sys":514,"fields":521},{"tags":512,"concepts":513},[],[],{"space":515,"id":517,"type":14,"createdAt":518,"updatedAt":518,"environment":519,"publishedVersion":367,"revision":21,"locale":22},{"sys":516},{"type":10,"linkType":11,"id":12},"5u50SbmPUZoqIhzqtV7UaL","2023-01-28T17:37:05.167Z",{"sys":520},{"id":18,"type":10,"linkType":19},{"title":522,"description":523,"file":524},"colour-theme-picker-project-img","Changing colour theme from dark to light",{"url":525,"details":526,"fileName":529,"contentType":376},"//images.ctfassets.net/l1wujzr3g1ab/5u50SbmPUZoqIhzqtV7UaL/b7abf17a991a5e6b491ed212cd8e1c49/colour-theme-picker-project-img.gif",{"size":527,"image":528},123783,{"width":322,"height":323},"colour-theme-picker-project-img.gif",{"metadata":531,"sys":534,"fields":543},{"tags":532,"concepts":533},[],[],{"space":535,"id":537,"type":48,"createdAt":538,"updatedAt":538,"environment":539,"publishedVersion":20,"revision":21,"contentType":541,"locale":22},{"sys":536},{"type":10,"linkType":11,"id":12},"2qHSazjv6Ro4OXfCrkVkwg","2023-01-28T17:31:17.504Z",{"sys":540},{"id":18,"type":10,"linkType":19},{"sys":542},{"type":10,"linkType":57,"id":281},{"name":544,"type":340,"url":545,"description":546,"tech":556,"image":558},"Custom Car Colour Preview","https://codepen.io/jackdomleo7/full/wvoYjNP",{"data":547,"content":548,"nodeType":117},{},[549],{"data":550,"content":551,"nodeType":102},{},[552],{"data":553,"marks":554,"value":555,"nodeType":101},{},[],"An application to preview different colours of a car.",[557,299],"SVG",{"metadata":559,"sys":562,"fields":569},{"tags":560,"concepts":561},[],[],{"space":563,"id":565,"type":14,"createdAt":566,"updatedAt":566,"environment":567,"publishedVersion":367,"revision":21,"locale":22},{"sys":564},{"type":10,"linkType":11,"id":12},"1ZmqPLpQtjTJPsWiUB8ihd","2023-01-28T17:31:09.936Z",{"sys":568},{"id":18,"type":10,"linkType":19},{"title":570,"description":571,"file":572},"car-colour-picker-project-img","A car changing colour",{"url":573,"details":574,"fileName":577,"contentType":376},"//images.ctfassets.net/l1wujzr3g1ab/1ZmqPLpQtjTJPsWiUB8ihd/89be01caacd54b1d9e5975e584056260/car-colour-picker-project-img.gif",{"size":575,"image":576},439705,{"width":322,"height":323},"car-colour-picker-project-img.gif",{"metadata":579,"sys":582,"fields":594},{"tags":580,"concepts":581},[],[],{"space":583,"id":585,"type":48,"createdAt":586,"updatedAt":587,"environment":588,"publishedVersion":590,"revision":591,"contentType":592,"locale":22},{"sys":584},{"type":10,"linkType":11,"id":12},"wpQfsnzkVT7y1Eg4ANU24","2023-01-28T17:25:18.524Z","2023-01-28T17:37:25.464Z",{"sys":589},{"id":18,"type":10,"linkType":19},14,2,{"sys":593},{"type":10,"linkType":57,"id":281},{"name":595,"type":441,"url":596,"description":597,"tech":607,"tags":609,"image":610},"Checka11y.css","https://checka11y.jackdomleo.dev/",{"data":598,"content":599,"nodeType":117},{},[600],{"data":601,"content":602,"nodeType":102},{},[603],{"data":604,"marks":605,"value":606,"nodeType":101},{},[],"A CSS stylesheet to quickly highlight a11y concerns and a really good education project for those wanting to learn about accessibility.",[299,608],"Cypress",[355,509],{"metadata":611,"sys":614,"fields":621},{"tags":612,"concepts":613},[],[],{"space":615,"id":617,"type":14,"createdAt":618,"updatedAt":618,"environment":619,"publishedVersion":367,"revision":21,"locale":22},{"sys":616},{"type":10,"linkType":11,"id":12},"3nPJwMFNQ8OZ7OlHMED3YJ","2023-01-28T17:25:13.225Z",{"sys":620},{"id":18,"type":10,"linkType":19},{"title":622,"description":623,"file":624},"checka11y-project-img","Checka11y.css logo",{"url":625,"details":626,"fileName":629,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nPJwMFNQ8OZ7OlHMED3YJ/9350ee10587c33b4e9dd71464aa1173d/checka11y-project-img.png",{"size":627,"image":628},28340,{"width":322,"height":323},"checka11y-project-img.png",{"metadata":631,"sys":634,"fields":643},{"tags":632,"concepts":633},[],[],{"space":635,"id":637,"type":48,"createdAt":638,"updatedAt":638,"environment":639,"publishedVersion":20,"revision":21,"contentType":641,"locale":22},{"sys":636},{"type":10,"linkType":11,"id":12},"6egKMvjf6ugswngEWd7bzb","2023-01-28T17:19:29.418Z",{"sys":640},{"id":18,"type":10,"linkType":19},{"sys":642},{"type":10,"linkType":57,"id":281},{"name":644,"type":340,"url":645,"description":646,"tech":656,"tags":658,"image":660},"Spinning Smiley Face","https://codepen.io/jackdomleo7/full/wvKLjVb",{"data":647,"content":648,"nodeType":117},{},[649],{"data":650,"content":651,"nodeType":102},{},[652],{"data":653,"marks":654,"value":655,"nodeType":101},{},[],"A cute spinning smiley face while learning GSAP.",[657,299],"GSAP",[659],"Animation",{"metadata":661,"sys":664,"fields":671},{"tags":662,"concepts":663},[],[],{"space":665,"id":667,"type":14,"createdAt":668,"updatedAt":668,"environment":669,"publishedVersion":367,"revision":21,"locale":22},{"sys":666},{"type":10,"linkType":11,"id":12},"6i901gWFLWWSjs2ZYc9rpL","2023-01-28T17:19:17.739Z",{"sys":670},{"id":18,"type":10,"linkType":19},{"title":672,"description":673,"file":674},"spinning-smiley-face-project-img","Spinning smiley face animation",{"url":675,"details":676,"fileName":679,"contentType":376},"//images.ctfassets.net/l1wujzr3g1ab/6i901gWFLWWSjs2ZYc9rpL/e32d8b3cb14a794272c70360d1a39ac9/spinning-smiley-face-project-img.gif",{"size":677,"image":678},232759,{"width":322,"height":323},"spinning-smiley-face-project-img.gif",{"metadata":681,"sys":684,"fields":693},{"tags":682,"concepts":683},[],[],{"space":685,"id":687,"type":48,"createdAt":688,"updatedAt":688,"environment":689,"publishedVersion":436,"revision":21,"contentType":691,"locale":22},{"sys":686},{"type":10,"linkType":11,"id":12},"1rx3EwhjpCdMESgcFDv0CY","2023-01-28T17:10:10.423Z",{"sys":690},{"id":18,"type":10,"linkType":19},{"sys":692},{"type":10,"linkType":57,"id":281},{"name":694,"type":340,"url":695,"description":696,"tech":706,"tags":707,"image":709},"CSS Union Jack Flag","https://codepen.io/jackdomleo7/full/abvrgEo",{"nodeType":117,"data":697,"content":698},{},[699],{"nodeType":102,"data":700,"content":701},{},[702],{"nodeType":101,"value":703,"marks":704,"data":705},"A pure CSS pixel-perfect Union Jack flag.",[],{},[299],[708],"CSS Art",{"metadata":710,"sys":713,"fields":720},{"tags":711,"concepts":712},[],[],{"space":714,"id":716,"type":14,"createdAt":717,"updatedAt":717,"environment":718,"publishedVersion":367,"revision":21,"locale":22},{"sys":715},{"type":10,"linkType":11,"id":12},"2220otIqCHTmP1a6UkmHTO","2023-01-28T17:10:05.172Z",{"sys":719},{"id":18,"type":10,"linkType":19},{"title":721,"description":722,"file":723},"union-jack-project-img","Union Jack Flag",{"url":724,"details":725,"fileName":728,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2220otIqCHTmP1a6UkmHTO/1b888dd09c45cbb842cd476585c54eaf/union-jack-project-img.png",{"size":726,"image":727},29999,{"width":322,"height":323},"union-jack-project-img.png",{"metadata":730,"sys":733,"fields":744},{"tags":731,"concepts":732},[],[],{"space":734,"id":736,"type":48,"createdAt":737,"updatedAt":738,"environment":739,"publishedVersion":741,"revision":591,"contentType":742,"locale":22},{"sys":735},{"type":10,"linkType":11,"id":12},"3NkVQqDSFreEt3KgDspqhk","2023-01-28T12:20:29.489Z","2023-01-28T17:37:59.428Z",{"sys":740},{"id":18,"type":10,"linkType":19},9,{"sys":743},{"type":10,"linkType":57,"id":281},{"name":745,"type":340,"url":746,"description":747,"tech":757,"tags":758,"image":760},"Neumorphic Design Elements","https://codepen.io/jackdomleo7/full/mdeowoz",{"data":748,"content":749,"nodeType":117},{},[750],{"data":751,"content":752,"nodeType":102},{},[753],{"data":754,"marks":755,"value":756,"nodeType":101},{},[],"Some common UI elements in the style of neumorphic design.",[299],[759],"Popular",{"metadata":761,"sys":764,"fields":771},{"tags":762,"concepts":763},[],[],{"space":765,"id":767,"type":14,"createdAt":768,"updatedAt":768,"environment":769,"publishedVersion":367,"revision":21,"locale":22},{"sys":766},{"type":10,"linkType":11,"id":12},"5Qg1EnfhYLYpuJAT0qkaNc","2023-01-28T12:19:53.096Z",{"sys":770},{"id":18,"type":10,"linkType":19},{"title":772,"description":773,"file":774},"neumorphic-design-project-img","Neumorphic design components",{"url":775,"details":776,"fileName":779,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/5Qg1EnfhYLYpuJAT0qkaNc/43107f82a221c1809ab117bfd206170f/neumorphic-design-project-img.png",{"size":777,"image":778},31790,{"width":322,"height":323},"neumorphic-design-project-img.png",{"metadata":781,"sys":784,"fields":793},{"tags":782,"concepts":783},[],[],{"space":785,"id":787,"type":48,"createdAt":788,"updatedAt":788,"environment":789,"publishedVersion":20,"revision":21,"contentType":791,"locale":22},{"sys":786},{"type":10,"linkType":11,"id":12},"7vaOyrQvl5V0jGSDY3EsM2","2023-01-28T11:36:08.387Z",{"sys":790},{"id":18,"type":10,"linkType":19},{"sys":792},{"type":10,"linkType":57,"id":281},{"name":794,"type":284,"url":795,"description":796,"tech":806,"tags":808,"image":810},"TMD Interior Projects & Building Services Ltd","https://github.com/jackdomleo7/tmdip.co.uk",{"data":797,"content":798,"nodeType":117},{},[799],{"data":800,"content":801,"nodeType":102},{},[802],{"data":803,"marks":804,"value":805,"nodeType":101},{},[],"Designed and built a fully responsive static website for a small shop-fitting & interior design company. This website needed a modern but minimal feel to it so they could clearly get their message across to visitors. Unfortunately, the company closed in October 2021.",[297,224,807,299],"Prismic",[809],"Website",{"metadata":811,"sys":814,"fields":821},{"tags":812,"concepts":813},[],[],{"space":815,"id":817,"type":14,"createdAt":818,"updatedAt":818,"environment":819,"publishedVersion":161,"revision":21,"locale":22},{"sys":816},{"type":10,"linkType":11,"id":12},"v3W2zbHXA5PrqQNtVPUMm","2023-01-28T11:36:03.512Z",{"sys":820},{"id":18,"type":10,"linkType":19},{"title":822,"description":823,"file":824},"tmdip-project-img","Screenshot of TMD Interior Projects home page",{"url":825,"details":826,"fileName":829,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/v3W2zbHXA5PrqQNtVPUMm/1053b757abf68582bfa0f410077806c8/tmdip-project-img.png",{"size":827,"image":828},102678,{"width":322,"height":323},"tmdip-project-img.png",{"metadata":831,"sys":834,"fields":845},{"tags":832,"concepts":833},[],[],{"space":835,"id":837,"type":48,"createdAt":838,"updatedAt":839,"environment":840,"publishedVersion":842,"revision":591,"contentType":843,"locale":22},{"sys":836},{"type":10,"linkType":11,"id":12},"4ujuAFszSXcHDSvTByVFDD","2023-01-27T22:02:31.611Z","2023-01-28T17:37:41.676Z",{"sys":841},{"id":18,"type":10,"linkType":19},12,{"sys":844},{"type":10,"linkType":57,"id":281},{"name":846,"type":441,"url":847,"description":848,"tech":858,"tags":859,"image":860},"Cooltipz.css","https://cooltipz.jackdomleo.dev",{"data":849,"content":850,"nodeType":117},{},[851],{"data":852,"content":853,"nodeType":102},{},[854],{"data":855,"marks":856,"value":857,"nodeType":101},{},[],"A pure CSS solution for adding highly customisable, accessible tooltips to HTML.",[299],[355,759,509],{"metadata":861,"sys":864,"fields":871},{"tags":862,"concepts":863},[],[],{"space":865,"id":867,"type":14,"createdAt":868,"updatedAt":868,"environment":869,"publishedVersion":313,"revision":21,"locale":22},{"sys":866},{"type":10,"linkType":11,"id":12},"26fP6efyZsX7tw8rGCVrDL","2023-01-27T22:02:21.767Z",{"sys":870},{"id":18,"type":10,"linkType":19},{"title":872,"description":316,"file":873},"cooltipz-project-img",{"url":874,"details":875,"fileName":878,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/26fP6efyZsX7tw8rGCVrDL/0bc668a492f6b7eb375a3ad568df6c83/cooltipz-project-img.png",{"size":876,"image":877},11929,{"width":322,"height":323},"cooltipz-project-img.png",{"metadata":880,"sys":883,"fields":892},{"tags":881,"concepts":882},[],[],{"space":884,"id":886,"type":48,"createdAt":887,"updatedAt":887,"environment":888,"publishedVersion":54,"revision":21,"contentType":890,"locale":22},{"sys":885},{"type":10,"linkType":11,"id":12},"6YB39UZiiMFBSFf5YBFqaO","2023-01-27T21:57:40.389Z",{"sys":889},{"id":18,"type":10,"linkType":19},{"sys":891},{"type":10,"linkType":57,"id":281},{"name":893,"type":340,"url":894,"description":895,"tech":905,"tags":906,"image":908},"Jumping into Lightspeed","https://codepen.io/jackdomleo7/full/rNOYdwz",{"data":896,"content":897,"nodeType":117},{},[898],{"data":899,"content":900,"nodeType":102},{},[901],{"data":902,"marks":903,"value":904,"nodeType":101},{},[],"A mini animation demonstrating Star Wars lightspeed using HTML, CSS & JS.",[255,507],[907,659],"Star Wars",{"metadata":909,"sys":912,"fields":919},{"tags":910,"concepts":911},[],[],{"space":913,"id":915,"type":14,"createdAt":916,"updatedAt":916,"environment":917,"publishedVersion":313,"revision":21,"locale":22},{"sys":914},{"type":10,"linkType":11,"id":12},"zXmBtqvpORf1Zffobl22F","2023-01-27T21:57:26.116Z",{"sys":918},{"id":18,"type":10,"linkType":19},{"title":920,"description":316,"file":921},"lightspeed-project-img",{"url":922,"details":923,"fileName":926,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/zXmBtqvpORf1Zffobl22F/c4a75a537080960d72f5930149bf2817/lightspeed-project-img.png",{"size":924,"image":925},100927,{"width":322,"height":323},"lightspeed-project-img.png",{"metadata":928,"sys":931,"fields":940},{"tags":929,"concepts":930},[],[],{"space":932,"id":934,"type":48,"createdAt":935,"updatedAt":935,"environment":936,"publishedVersion":842,"revision":21,"contentType":938,"locale":22},{"sys":933},{"type":10,"linkType":11,"id":12},"4aZX5AexMhJjo66sZ0Nm03","2023-01-27T21:51:09.097Z",{"sys":937},{"id":18,"type":10,"linkType":19},{"sys":939},{"type":10,"linkType":57,"id":281},{"name":941,"type":340,"url":942,"description":943,"tech":953,"tags":954,"image":956},"Pixel Art R2-D2","https://codepen.io/jackdomleo7/full/ZEEqdxy",{"data":944,"content":945,"nodeType":117},{},[946],{"data":947,"content":948,"nodeType":102},{},[949],{"data":950,"marks":951,"value":952,"nodeType":101},{},[],"A pure CSS, single div pixel art of the beloved Star Wars droid, R2-D2.",[507],[708,955,907],"Single div",{"metadata":957,"sys":960,"fields":967},{"tags":958,"concepts":959},[],[],{"space":961,"id":963,"type":14,"createdAt":964,"updatedAt":964,"environment":965,"publishedVersion":367,"revision":21,"locale":22},{"sys":962},{"type":10,"linkType":11,"id":12},"1lG3pACHA8YGmbbpQ2fpA7","2023-01-27T21:50:58.303Z",{"sys":966},{"id":18,"type":10,"linkType":19},{"title":968,"description":969,"file":970},"r2-d2-project-img","R2-D2 from Star Wars as pixel art",{"url":971,"details":972,"fileName":975,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1lG3pACHA8YGmbbpQ2fpA7/6ed00265778f38c5bd7f1bc395eb484d/r2-d2-project-img.png",{"size":973,"image":974},37976,{"width":322,"height":323},"r2-d2-project-img.png",{"metadata":977,"sys":980,"fields":991},{"tags":978,"concepts":979},[],[],{"space":981,"id":983,"type":48,"createdAt":984,"updatedAt":985,"environment":986,"publishedVersion":988,"revision":313,"contentType":989,"locale":22},{"sys":982},{"type":10,"linkType":11,"id":12},"4RGkQbZ9QFaahqn14RB3fg","2023-01-27T21:40:30.860Z","2023-12-18T23:39:32.367Z",{"sys":987},{"id":18,"type":10,"linkType":19},20,{"sys":990},{"type":10,"linkType":57,"id":281},{"name":992,"type":441,"url":993,"description":994,"tech":1004,"tags":1007,"image":1008},"My website","https://github.com/jackdomleo7/jackdomleo.dev",{"data":995,"content":996,"nodeType":117},{},[997],{"data":998,"content":999,"nodeType":102},{},[1000],{"data":1001,"marks":1002,"value":1003,"nodeType":101},{},[],"Designed and built a fully responsive static website and blog for myself. This has been through many design variations as my UI skills have developed.",[1005,1006,224,299],"Nuxt 3","Contentful",[809],{"metadata":1009,"sys":1012,"fields":1019},{"tags":1010,"concepts":1011},[],[],{"space":1013,"id":1015,"type":14,"createdAt":1016,"updatedAt":1016,"environment":1017,"publishedVersion":436,"revision":21,"locale":22},{"sys":1014},{"type":10,"linkType":11,"id":12},"7fXjHpN3LyWRS6iULHyR02","2023-01-27T21:40:19.986Z",{"sys":1018},{"id":18,"type":10,"linkType":19},{"title":1020,"description":1021,"file":1022},"jackdomleo.dev-project-img","Screenshot of jackdomleo.dev homepage",{"url":1023,"details":1024,"fileName":1027,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/7fXjHpN3LyWRS6iULHyR02/8b59f60fb2404576a0c93553694fb1b6/jackdomleo.dev-project-img.png",{"size":1025,"image":1026},44662,{"width":322,"height":323},"jackdomleo.dev-project-img.png",{"Asset":1029},[302,558,956,709,860,356,610,405,760,510,455,660,1008,810,908],1733533838286] \ No newline at end of file diff --git a/blog/2020/hover-css-media-query/_payload.json b/blog/2020/hover-css-media-query/_payload.json index 29625e38c..1eb5194a6 100644 --- a/blog/2020/hover-css-media-query/_payload.json +++ b/blog/2020/hover-css-media-query/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":628},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-hover-css-media-query":118,"$rpzcfBTaqR":465,"article-list-hover-css-media-query":482},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":463},{"type":37},[121],{"metadata":122,"sys":125,"fields":137},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":54,"contentType":134,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"5GKjEQKbXAneX7HsUv1qtm","2023-01-22T21:55:27.965Z","2023-01-24T08:10:50.331Z",{"sys":132},{"id":18,"type":10,"linkType":19},110,{"sys":135},{"type":10,"linkType":57,"id":136},"article",{"title":138,"slug":139,"image":140,"description":161,"publishDate":162,"tags":163,"body":165},"@media (hover: hover) - CSS Media Query","hover-css-media-query",{"metadata":141,"sys":144,"fields":152},{"tags":142,"concepts":143},[],[],{"space":145,"id":147,"type":14,"createdAt":148,"updatedAt":148,"environment":149,"publishedVersion":151,"revision":21,"locale":22},{"sys":146},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":150},{"id":18,"type":10,"linkType":19},5,{"title":153,"description":154,"file":155},"css=hover-media-query-og","CSS media query for hover",{"url":156,"details":157,"fileName":160,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":158,"image":159},13019,{"width":31,"height":32},"css=hover-media-query-og.png","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.","2020-07-06",[164],"CSS",{"nodeType":117,"data":166,"content":167},{},[168,199,226,242,249,257,265,272,279,290,297,313,324,331,338,361,372,387,394,434,438,445],{"nodeType":169,"data":170,"content":171},"blockquote",{},[172,179],{"nodeType":102,"data":173,"content":174},{},[175],{"nodeType":101,"value":176,"marks":177,"data":178},"The `hover` CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",[],{},{"nodeType":102,"data":180,"content":181},{},[182,186,195],{"nodeType":101,"value":183,"marks":184,"data":185},"- ",[],{},{"nodeType":187,"data":188,"content":190},"hyperlink",{"uri":189},"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover",[191],{"nodeType":101,"value":192,"marks":193,"data":194},"MDN web docs",[],{},{"nodeType":101,"value":196,"marks":197,"data":198},"\r",[],{},{"nodeType":102,"data":200,"content":201},{},[202,206,212,216,222],{"nodeType":101,"value":203,"marks":204,"data":205},"Not to be confused with the ",[],{},{"nodeType":101,"value":207,"marks":208,"data":211},":hover",[209],{"type":210},"code",{},{"nodeType":101,"value":213,"marks":214,"data":215}," psuedo selector, this is a ",[],{},{"nodeType":101,"value":217,"marks":218,"data":221},"media query",[219],{"type":220},"bold",{},{"nodeType":101,"value":223,"marks":224,"data":225}," you may have never used or never considered using.\r",[],{},{"nodeType":102,"data":227,"content":228},{},[229,233,238],{"nodeType":101,"value":230,"marks":231,"data":232},"Let's look at an example and see how it could be improved using the ",[],{},{"nodeType":101,"value":234,"marks":235,"data":237},"hover",[236],{"type":210},{},{"nodeType":101,"value":239,"marks":240,"data":241}," media query.",[],{},{"nodeType":102,"data":243,"content":244},{},[245],{"nodeType":101,"value":246,"marks":247,"data":248},"Let's assume we're using this HTML for the below demonstration.\r",[],{},{"nodeType":102,"data":250,"content":251},{},[252],{"nodeType":101,"value":253,"marks":254,"data":256},"HTML\n\u003Cbutton class=\"button\">\n Hover me\r\n \u003Csvg>...\u003C/svg>\r\n\u003C/button>\r",[255],{"type":210},{},{"nodeType":258,"data":259,"content":260},"heading-2",{},[261],{"nodeType":101,"value":262,"marks":263,"data":264},"Showing an icon on hover\r",[],{},{"nodeType":102,"data":266,"content":267},{},[268],{"nodeType":101,"value":269,"marks":270,"data":271},"This is a typical feature request. It's not very detailed, but as front-end developers, it's enough for us to work with and create a prototype button at the least.\r",[],{},{"nodeType":102,"data":273,"content":274},{},[275],{"nodeType":101,"value":276,"marks":277,"data":278},"For this to work, we may jump to do something like this:\r",[],{},{"nodeType":102,"data":280,"content":281},{},[282,287],{"nodeType":101,"value":283,"marks":284,"data":286},"CSS\n.button {\r\n background: darkorange;\r\n color: white;\r\n border: none;\r\n padding: 1rem;\r\n text-align: center;\r\n position: relative;\r\n cursor: pointer;\r\n}\n\r\n.button svg {\r\n height: 2rem;\r\n width: 2rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 0.6rem;\r\n fill: currentColor;\r\n opacity: 0;\r\n}\n\r\n.button:hover {\r\n padding-right: 3rem;\r\n}\n\r\n.button:hover svg {\r\n opacity: 1;\r\n}",[285],{"type":210},{},{"nodeType":101,"value":196,"marks":288,"data":289},[],{},{"nodeType":102,"data":291,"content":292},{},[293],{"nodeType":101,"value":294,"marks":295,"data":296},"This would for sure show the icon when the button is hovered! 💪 But it doesn't work on my mobile... It doesn't know I'm hovering the button.\r",[],{},{"nodeType":102,"data":298,"content":299},{},[300,304,309],{"nodeType":101,"value":301,"marks":302,"data":303},"So, how do we cater for touchscreen devices that can't hover? A common solution would be to always display the icon on _mobile devices (take note of this, I will come back to it later)_ and add the hovering functionality for larger screens by using a ",[],{},{"nodeType":101,"value":305,"marks":306,"data":308},"min-width",[307],{"type":210},{},{"nodeType":101,"value":310,"marks":311,"data":312}," media query, typically these are screens that are 768px or wider:\r",[],{},{"nodeType":102,"data":314,"content":315},{},[316,321],{"nodeType":101,"value":317,"marks":318,"data":320},"CSS\n.button {\r\n background: darkorange;\r\n color: white;\r\n border: none;\r\n padding: 1rem;\r\n padding-right: 3rem;\r\n text-align: center;\r\n position: relative;\r\n}\n\r\n.button svg {\r\n height: 2rem;\r\n width: 2rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 0.6rem;\r\n fill: currentColor;\r\n opacity: 1;\r\n}\n\r\n@media (min-width: 768px) {\r\n .button {\r\n padding-right: 1rem;\r\n cursor: pointer;\r\n }\n\r\n .button svg {\r\n opacity: 0;\r\n }\n\r\n .button:hover {\r\n padding-right: 3rem;\r\n }\n\r\n .button:hover svg {\r\n opacity: 1;\r\n }\r\n}",[319],{"type":210},{},{"nodeType":101,"value":196,"marks":322,"data":323},[],{},{"nodeType":102,"data":325,"content":326},{},[327],{"nodeType":101,"value":328,"marks":329,"data":330},"Great! We now have a button that always shows the icon on devices with a screen width less than 768px and will initially hide the icon on devices with a screen width of 768px wide or wider.\r",[],{},{"nodeType":102,"data":332,"content":333},{},[334],{"nodeType":101,"value":335,"marks":336,"data":337},"Chances are, this works for most cases and has been an acceptable solution for many years. However, we can't assume a device doesn't have a hover input mechanism just because of its screen width, and vice-versa.\r",[],{},{"nodeType":102,"data":339,"content":340},{},[341,345,349,353,357],{"nodeType":101,"value":342,"marks":343,"data":344},"This is where our `hover` media query comes in. Let's take a look at how we can refactor our ",[],{},{"nodeType":101,"value":305,"marks":346,"data":348},[347],{"type":210},{},{"nodeType":101,"value":350,"marks":351,"data":352}," to use ",[],{},{"nodeType":101,"value":234,"marks":354,"data":356},[355],{"type":210},{},{"nodeType":101,"value":358,"marks":359,"data":360}," instead.",[],{},{"nodeType":102,"data":362,"content":363},{},[364,369],{"nodeType":101,"value":365,"marks":366,"data":368},"CSS\n.button {\r\n background: darkorange;\r\n color: white;\r\n border: none;\r\n padding: 1rem;\r\n padding-right: 3rem;\r\n text-align: center;\r\n position: relative;\r\n}\n\r\n.button svg {\r\n height: 2rem;\r\n width: 2rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 0.6rem;\r\n fill: currentColor;\r\n opacity: 1;\r\n}\n\r\n@media (hover: hover) {\r\n .button {\r\n padding-right: 1rem;\r\n cursor: pointer;\r\n }\n\r\n .button svg {\r\n opacity: 0;\r\n }\n\r\n .button:hover {\r\n padding-right: 3rem;\r\n }\n\r\n .button:hover svg {\r\n opacity: 1;\r\n }\r\n}",[367],{"type":210},{},{"nodeType":101,"value":196,"marks":370,"data":371},[],{},{"nodeType":102,"data":373,"content":374},{},[375,379,383],{"nodeType":101,"value":376,"marks":377,"data":378},"Outside any media query, we define our base styles that apply to everything. Inside our ",[],{},{"nodeType":101,"value":234,"marks":380,"data":382},[381],{"type":210},{},{"nodeType":101,"value":384,"marks":385,"data":386}," media query, we define styles specific to devices with a hover input mechanism.\r",[],{},{"nodeType":102,"data":388,"content":389},{},[390],{"nodeType":101,"value":391,"marks":392,"data":393},"Can you see how this is better than determining hover-specific styles based on screen size?\r",[],{},{"nodeType":102,"data":395,"content":396},{},[397,401,405,409,414,418,422,426,430],{"nodeType":101,"value":398,"marks":399,"data":400},"It's also a cleaner method because we define our ",[],{},{"nodeType":101,"value":234,"marks":402,"data":404},[403],{"type":220},{},{"nodeType":101,"value":406,"marks":407,"data":408}," styles in our ",[],{},{"nodeType":101,"value":234,"marks":410,"data":413},[411,412],{"type":220},{"type":210},{},{"nodeType":101,"value":415,"marks":416,"data":417}," media query, it's grouped them nicely for us. These ",[],{},{"nodeType":101,"value":234,"marks":419,"data":421},[420],{"type":210},{},{"nodeType":101,"value":423,"marks":424,"data":425}," styles would be harder to identify in the stylesheet if they were encapsulated in a ",[],{},{"nodeType":101,"value":305,"marks":427,"data":429},[428],{"type":210},{},{"nodeType":101,"value":431,"marks":432,"data":433}," media query.\r",[],{},{"nodeType":435,"data":436,"content":437},"hr",{},[],{"nodeType":102,"data":439,"content":440},{},[441],{"nodeType":101,"value":442,"marks":443,"data":444},"For a working example, I created a CodePen below (with a few extra CSS properties) that I hope will help 🙂.",[],{},{"nodeType":102,"data":446,"content":447},{},[448,452,460],{"nodeType":101,"value":449,"marks":450,"data":451},"\r\n",[],{},{"nodeType":187,"data":453,"content":455},{"uri":454},"https://codepen.io/jackdomleo7/embed/jOWZRXX",[456],{"nodeType":101,"value":457,"marks":458,"data":459},"CodePen: hover: hover media query",[],{},{"nodeType":101,"value":196,"marks":461,"data":462},[],{},{"Asset":464},[140],{"sys":466,"total":21,"skip":38,"limit":21,"items":467},{"type":37},[468],{"fields":469,"sys":480},{"articleDisclaimer":470},{"data":471,"content":472,"nodeType":117},{},[473],{"data":474,"content":475,"nodeType":102},{},[476],{"data":477,"marks":478,"value":479,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":481,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":483,"total":151,"skip":38,"limit":484,"items":485,"includes":613},{"type":37},1000,[486,519,552,583],{"fields":487,"sys":517},{"title":488,"description":489,"image":490,"tags":513,"publishDate":515,"slug":516},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":491,"sys":494,"fields":504},{"tags":492,"concepts":493},[],[],{"space":495,"id":497,"type":14,"createdAt":498,"updatedAt":499,"environment":500,"publishedVersion":502,"revision":503,"locale":22},{"sys":496},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":501},{"id":18,"type":10,"linkType":19},9,2,{"title":505,"description":505,"file":506},"Pineapple",{"url":507,"details":508,"fileName":511,"contentType":512},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":509,"image":510},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg",[514],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":518,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":520,"sys":550},{"title":521,"description":522,"image":523,"tags":544,"publishDate":548,"slug":549},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":524,"sys":527,"fields":535},{"tags":525,"concepts":526},[],[],{"space":528,"id":530,"type":14,"createdAt":531,"updatedAt":531,"environment":532,"publishedVersion":534,"revision":21,"locale":22},{"sys":529},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":533},{"id":18,"type":10,"linkType":19},7,{"title":536,"description":537,"file":538},"When is a clickable div okay","An example modal element",{"url":539,"details":540,"fileName":543,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":541,"image":542},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[545,546,547],"Accessibility","UX","HTML","2023-07-18","when-is-a-clickable-div-okay",{"id":551,"type":48},"brxitJC35PyChlVzusyLP",{"fields":553,"sys":581},{"title":554,"description":555,"image":556,"tags":576,"publishDate":579,"slug":580},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":557,"sys":560,"fields":567},{"tags":558,"concepts":559},[],[],{"space":561,"id":563,"type":14,"createdAt":564,"updatedAt":564,"environment":565,"publishedVersion":151,"revision":21,"locale":22},{"sys":562},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":566},{"id":18,"type":10,"linkType":19},{"title":568,"description":569,"file":570},"clutter","A cluttered office desk",{"url":571,"details":572,"fileName":575,"contentType":512},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":573,"image":574},281805,{"width":31,"height":32},"clutter.jpg",[577,578,547],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":582,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":584,"sys":611},{"title":585,"description":586,"image":587,"tags":607,"publishDate":609,"slug":610},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":588,"sys":591,"fields":598},{"tags":589,"concepts":590},[],[],{"space":592,"id":594,"type":14,"createdAt":595,"updatedAt":595,"environment":596,"publishedVersion":534,"revision":21,"locale":22},{"sys":593},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":597},{"id":18,"type":10,"linkType":19},{"title":599,"description":600,"file":601},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":602,"details":603,"fileName":606,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":604,"image":605},6959,{"width":31,"height":32},"neumorphic-design-og.png",[608,164],"Design","2020-05-27","learning-neumorphic-design",{"id":612,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":614},[615,523,490,556,587],{"metadata":616,"sys":619,"fields":624},{"tags":617,"concepts":618},[],[],{"space":620,"id":147,"type":14,"createdAt":148,"updatedAt":148,"environment":622,"publishedVersion":151,"revision":21,"locale":22},{"sys":621},{"type":10,"linkType":11,"id":12},{"sys":623},{"id":18,"type":10,"linkType":19},{"title":153,"description":154,"file":625},{"url":156,"details":626,"fileName":160,"contentType":34},{"size":158,"image":627},{"width":31,"height":32},1733447471197] \ No newline at end of file +[{"data":1,"prerenderedAt":628},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-hover-css-media-query":118,"$rpzcfBTaqR":465,"article-list-hover-css-media-query":482},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":463},{"type":37},[121],{"metadata":122,"sys":125,"fields":137},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":54,"contentType":134,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"5GKjEQKbXAneX7HsUv1qtm","2023-01-22T21:55:27.965Z","2023-01-24T08:10:50.331Z",{"sys":132},{"id":18,"type":10,"linkType":19},110,{"sys":135},{"type":10,"linkType":57,"id":136},"article",{"title":138,"slug":139,"image":140,"description":161,"publishDate":162,"tags":163,"body":165},"@media (hover: hover) - CSS Media Query","hover-css-media-query",{"metadata":141,"sys":144,"fields":152},{"tags":142,"concepts":143},[],[],{"space":145,"id":147,"type":14,"createdAt":148,"updatedAt":148,"environment":149,"publishedVersion":151,"revision":21,"locale":22},{"sys":146},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":150},{"id":18,"type":10,"linkType":19},5,{"title":153,"description":154,"file":155},"css=hover-media-query-og","CSS media query for hover",{"url":156,"details":157,"fileName":160,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":158,"image":159},13019,{"width":31,"height":32},"css=hover-media-query-og.png","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.","2020-07-06",[164],"CSS",{"nodeType":117,"data":166,"content":167},{},[168,199,226,242,249,257,265,272,279,290,297,313,324,331,338,361,372,387,394,434,438,445],{"nodeType":169,"data":170,"content":171},"blockquote",{},[172,179],{"nodeType":102,"data":173,"content":174},{},[175],{"nodeType":101,"value":176,"marks":177,"data":178},"The `hover` CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",[],{},{"nodeType":102,"data":180,"content":181},{},[182,186,195],{"nodeType":101,"value":183,"marks":184,"data":185},"- ",[],{},{"nodeType":187,"data":188,"content":190},"hyperlink",{"uri":189},"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover",[191],{"nodeType":101,"value":192,"marks":193,"data":194},"MDN web docs",[],{},{"nodeType":101,"value":196,"marks":197,"data":198},"\r",[],{},{"nodeType":102,"data":200,"content":201},{},[202,206,212,216,222],{"nodeType":101,"value":203,"marks":204,"data":205},"Not to be confused with the ",[],{},{"nodeType":101,"value":207,"marks":208,"data":211},":hover",[209],{"type":210},"code",{},{"nodeType":101,"value":213,"marks":214,"data":215}," psuedo selector, this is a ",[],{},{"nodeType":101,"value":217,"marks":218,"data":221},"media query",[219],{"type":220},"bold",{},{"nodeType":101,"value":223,"marks":224,"data":225}," you may have never used or never considered using.\r",[],{},{"nodeType":102,"data":227,"content":228},{},[229,233,238],{"nodeType":101,"value":230,"marks":231,"data":232},"Let's look at an example and see how it could be improved using the ",[],{},{"nodeType":101,"value":234,"marks":235,"data":237},"hover",[236],{"type":210},{},{"nodeType":101,"value":239,"marks":240,"data":241}," media query.",[],{},{"nodeType":102,"data":243,"content":244},{},[245],{"nodeType":101,"value":246,"marks":247,"data":248},"Let's assume we're using this HTML for the below demonstration.\r",[],{},{"nodeType":102,"data":250,"content":251},{},[252],{"nodeType":101,"value":253,"marks":254,"data":256},"HTML\n\u003Cbutton class=\"button\">\n Hover me\r\n \u003Csvg>...\u003C/svg>\r\n\u003C/button>\r",[255],{"type":210},{},{"nodeType":258,"data":259,"content":260},"heading-2",{},[261],{"nodeType":101,"value":262,"marks":263,"data":264},"Showing an icon on hover\r",[],{},{"nodeType":102,"data":266,"content":267},{},[268],{"nodeType":101,"value":269,"marks":270,"data":271},"This is a typical feature request. It's not very detailed, but as front-end developers, it's enough for us to work with and create a prototype button at the least.\r",[],{},{"nodeType":102,"data":273,"content":274},{},[275],{"nodeType":101,"value":276,"marks":277,"data":278},"For this to work, we may jump to do something like this:\r",[],{},{"nodeType":102,"data":280,"content":281},{},[282,287],{"nodeType":101,"value":283,"marks":284,"data":286},"CSS\n.button {\r\n background: darkorange;\r\n color: white;\r\n border: none;\r\n padding: 1rem;\r\n text-align: center;\r\n position: relative;\r\n cursor: pointer;\r\n}\n\r\n.button svg {\r\n height: 2rem;\r\n width: 2rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 0.6rem;\r\n fill: currentColor;\r\n opacity: 0;\r\n}\n\r\n.button:hover {\r\n padding-right: 3rem;\r\n}\n\r\n.button:hover svg {\r\n opacity: 1;\r\n}",[285],{"type":210},{},{"nodeType":101,"value":196,"marks":288,"data":289},[],{},{"nodeType":102,"data":291,"content":292},{},[293],{"nodeType":101,"value":294,"marks":295,"data":296},"This would for sure show the icon when the button is hovered! 💪 But it doesn't work on my mobile... It doesn't know I'm hovering the button.\r",[],{},{"nodeType":102,"data":298,"content":299},{},[300,304,309],{"nodeType":101,"value":301,"marks":302,"data":303},"So, how do we cater for touchscreen devices that can't hover? A common solution would be to always display the icon on _mobile devices (take note of this, I will come back to it later)_ and add the hovering functionality for larger screens by using a ",[],{},{"nodeType":101,"value":305,"marks":306,"data":308},"min-width",[307],{"type":210},{},{"nodeType":101,"value":310,"marks":311,"data":312}," media query, typically these are screens that are 768px or wider:\r",[],{},{"nodeType":102,"data":314,"content":315},{},[316,321],{"nodeType":101,"value":317,"marks":318,"data":320},"CSS\n.button {\r\n background: darkorange;\r\n color: white;\r\n border: none;\r\n padding: 1rem;\r\n padding-right: 3rem;\r\n text-align: center;\r\n position: relative;\r\n}\n\r\n.button svg {\r\n height: 2rem;\r\n width: 2rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 0.6rem;\r\n fill: currentColor;\r\n opacity: 1;\r\n}\n\r\n@media (min-width: 768px) {\r\n .button {\r\n padding-right: 1rem;\r\n cursor: pointer;\r\n }\n\r\n .button svg {\r\n opacity: 0;\r\n }\n\r\n .button:hover {\r\n padding-right: 3rem;\r\n }\n\r\n .button:hover svg {\r\n opacity: 1;\r\n }\r\n}",[319],{"type":210},{},{"nodeType":101,"value":196,"marks":322,"data":323},[],{},{"nodeType":102,"data":325,"content":326},{},[327],{"nodeType":101,"value":328,"marks":329,"data":330},"Great! We now have a button that always shows the icon on devices with a screen width less than 768px and will initially hide the icon on devices with a screen width of 768px wide or wider.\r",[],{},{"nodeType":102,"data":332,"content":333},{},[334],{"nodeType":101,"value":335,"marks":336,"data":337},"Chances are, this works for most cases and has been an acceptable solution for many years. However, we can't assume a device doesn't have a hover input mechanism just because of its screen width, and vice-versa.\r",[],{},{"nodeType":102,"data":339,"content":340},{},[341,345,349,353,357],{"nodeType":101,"value":342,"marks":343,"data":344},"This is where our `hover` media query comes in. Let's take a look at how we can refactor our ",[],{},{"nodeType":101,"value":305,"marks":346,"data":348},[347],{"type":210},{},{"nodeType":101,"value":350,"marks":351,"data":352}," to use ",[],{},{"nodeType":101,"value":234,"marks":354,"data":356},[355],{"type":210},{},{"nodeType":101,"value":358,"marks":359,"data":360}," instead.",[],{},{"nodeType":102,"data":362,"content":363},{},[364,369],{"nodeType":101,"value":365,"marks":366,"data":368},"CSS\n.button {\r\n background: darkorange;\r\n color: white;\r\n border: none;\r\n padding: 1rem;\r\n padding-right: 3rem;\r\n text-align: center;\r\n position: relative;\r\n}\n\r\n.button svg {\r\n height: 2rem;\r\n width: 2rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 0.6rem;\r\n fill: currentColor;\r\n opacity: 1;\r\n}\n\r\n@media (hover: hover) {\r\n .button {\r\n padding-right: 1rem;\r\n cursor: pointer;\r\n }\n\r\n .button svg {\r\n opacity: 0;\r\n }\n\r\n .button:hover {\r\n padding-right: 3rem;\r\n }\n\r\n .button:hover svg {\r\n opacity: 1;\r\n }\r\n}",[367],{"type":210},{},{"nodeType":101,"value":196,"marks":370,"data":371},[],{},{"nodeType":102,"data":373,"content":374},{},[375,379,383],{"nodeType":101,"value":376,"marks":377,"data":378},"Outside any media query, we define our base styles that apply to everything. Inside our ",[],{},{"nodeType":101,"value":234,"marks":380,"data":382},[381],{"type":210},{},{"nodeType":101,"value":384,"marks":385,"data":386}," media query, we define styles specific to devices with a hover input mechanism.\r",[],{},{"nodeType":102,"data":388,"content":389},{},[390],{"nodeType":101,"value":391,"marks":392,"data":393},"Can you see how this is better than determining hover-specific styles based on screen size?\r",[],{},{"nodeType":102,"data":395,"content":396},{},[397,401,405,409,414,418,422,426,430],{"nodeType":101,"value":398,"marks":399,"data":400},"It's also a cleaner method because we define our ",[],{},{"nodeType":101,"value":234,"marks":402,"data":404},[403],{"type":220},{},{"nodeType":101,"value":406,"marks":407,"data":408}," styles in our ",[],{},{"nodeType":101,"value":234,"marks":410,"data":413},[411,412],{"type":220},{"type":210},{},{"nodeType":101,"value":415,"marks":416,"data":417}," media query, it's grouped them nicely for us. These ",[],{},{"nodeType":101,"value":234,"marks":419,"data":421},[420],{"type":210},{},{"nodeType":101,"value":423,"marks":424,"data":425}," styles would be harder to identify in the stylesheet if they were encapsulated in a ",[],{},{"nodeType":101,"value":305,"marks":427,"data":429},[428],{"type":210},{},{"nodeType":101,"value":431,"marks":432,"data":433}," media query.\r",[],{},{"nodeType":435,"data":436,"content":437},"hr",{},[],{"nodeType":102,"data":439,"content":440},{},[441],{"nodeType":101,"value":442,"marks":443,"data":444},"For a working example, I created a CodePen below (with a few extra CSS properties) that I hope will help 🙂.",[],{},{"nodeType":102,"data":446,"content":447},{},[448,452,460],{"nodeType":101,"value":449,"marks":450,"data":451},"\r\n",[],{},{"nodeType":187,"data":453,"content":455},{"uri":454},"https://codepen.io/jackdomleo7/embed/jOWZRXX",[456],{"nodeType":101,"value":457,"marks":458,"data":459},"CodePen: hover: hover media query",[],{},{"nodeType":101,"value":196,"marks":461,"data":462},[],{},{"Asset":464},[140],{"sys":466,"total":21,"skip":38,"limit":21,"items":467},{"type":37},[468],{"fields":469,"sys":480},{"articleDisclaimer":470},{"data":471,"content":472,"nodeType":117},{},[473],{"data":474,"content":475,"nodeType":102},{},[476],{"data":477,"marks":478,"value":479,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":481,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":483,"total":151,"skip":38,"limit":484,"items":485,"includes":613},{"type":37},1000,[486,519,552,583],{"fields":487,"sys":517},{"title":488,"description":489,"image":490,"tags":513,"publishDate":515,"slug":516},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":491,"sys":494,"fields":504},{"tags":492,"concepts":493},[],[],{"space":495,"id":497,"type":14,"createdAt":498,"updatedAt":499,"environment":500,"publishedVersion":502,"revision":503,"locale":22},{"sys":496},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":501},{"id":18,"type":10,"linkType":19},9,2,{"title":505,"description":505,"file":506},"Pineapple",{"url":507,"details":508,"fileName":511,"contentType":512},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":509,"image":510},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg",[514],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":518,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":520,"sys":550},{"title":521,"description":522,"image":523,"tags":544,"publishDate":548,"slug":549},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":524,"sys":527,"fields":535},{"tags":525,"concepts":526},[],[],{"space":528,"id":530,"type":14,"createdAt":531,"updatedAt":531,"environment":532,"publishedVersion":534,"revision":21,"locale":22},{"sys":529},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":533},{"id":18,"type":10,"linkType":19},7,{"title":536,"description":537,"file":538},"When is a clickable div okay","An example modal element",{"url":539,"details":540,"fileName":543,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":541,"image":542},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[545,546,547],"Accessibility","UX","HTML","2023-07-18","when-is-a-clickable-div-okay",{"id":551,"type":48},"brxitJC35PyChlVzusyLP",{"fields":553,"sys":581},{"title":554,"description":555,"image":556,"tags":576,"publishDate":579,"slug":580},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":557,"sys":560,"fields":567},{"tags":558,"concepts":559},[],[],{"space":561,"id":563,"type":14,"createdAt":564,"updatedAt":564,"environment":565,"publishedVersion":151,"revision":21,"locale":22},{"sys":562},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":566},{"id":18,"type":10,"linkType":19},{"title":568,"description":569,"file":570},"clutter","A cluttered office desk",{"url":571,"details":572,"fileName":575,"contentType":512},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":573,"image":574},281805,{"width":31,"height":32},"clutter.jpg",[577,578,547],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":582,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":584,"sys":611},{"title":585,"description":586,"image":587,"tags":607,"publishDate":609,"slug":610},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":588,"sys":591,"fields":598},{"tags":589,"concepts":590},[],[],{"space":592,"id":594,"type":14,"createdAt":595,"updatedAt":595,"environment":596,"publishedVersion":534,"revision":21,"locale":22},{"sys":593},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":597},{"id":18,"type":10,"linkType":19},{"title":599,"description":600,"file":601},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":602,"details":603,"fileName":606,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":604,"image":605},6959,{"width":31,"height":32},"neumorphic-design-og.png",[608,164],"Design","2020-05-27","learning-neumorphic-design",{"id":612,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":614},[615,523,490,556,587],{"metadata":616,"sys":619,"fields":624},{"tags":617,"concepts":618},[],[],{"space":620,"id":147,"type":14,"createdAt":148,"updatedAt":148,"environment":622,"publishedVersion":151,"revision":21,"locale":22},{"sys":621},{"type":10,"linkType":11,"id":12},{"sys":623},{"id":18,"type":10,"linkType":19},{"title":153,"description":154,"file":625},{"url":156,"details":626,"fileName":160,"contentType":34},{"size":158,"image":627},{"width":31,"height":32},1733533838286] \ No newline at end of file diff --git a/blog/2020/hover-css-media-query/index.html b/blog/2020/hover-css-media-query/index.html index cbf633918..bcadd02e3 100644 --- a/blog/2020/hover-css-media-query/index.html +++ b/blog/2020/hover-css-media-query/index.html @@ -23,7 +23,7 @@ - + @@ -187,5 +187,5 @@ opacity: 1; } }

Outside any media query, we define our base styles that apply to everything. Inside our hover media query, we define styles specific to devices with a hover input mechanism.

Can you see how this is better than determining hover-specific styles based on screen size?

It's also a cleaner method because we define our hover styles in our hover media query, it's grouped them nicely for us. These hover styles would be harder to identify in the stylesheet if they were encapsulated in a min-width media query.

For a working example, I created a CodePen below (with a few extra CSS properties) that I hope will help 🙂.

-

See the Pen hover: hover media query by @jackdomleo7 on CodePen

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

- \ No newline at end of file +

See the Pen hover: hover media query by @jackdomleo7 on CodePen

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

+ \ No newline at end of file diff --git a/blog/2020/learning-neumorphic-design/_payload.json b/blog/2020/learning-neumorphic-design/_payload.json index b7b88a46b..7f38404c4 100644 --- a/blog/2020/learning-neumorphic-design/_payload.json +++ b/blog/2020/learning-neumorphic-design/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":782},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-learning-neumorphic-design":118,"$rpzcfBTaqR":620,"article-list-learning-neumorphic-design":637},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":618},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"2KWdODn6oaRYNzG4Qz4yd3","2023-01-24T20:35:19.875Z","2023-01-24T20:40:12.164Z",{"sys":132},{"id":18,"type":10,"linkType":19},114,3,{"sys":136},{"type":10,"linkType":57,"id":137},"article",{"title":139,"slug":140,"image":141,"description":162,"publishDate":163,"tags":164,"body":167},"Learning Neumorphic Design","learning-neumorphic-design",{"metadata":142,"sys":145,"fields":153},{"tags":143,"concepts":144},[],[],{"space":146,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":150,"publishedVersion":152,"revision":21,"locale":22},{"sys":147},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":151},{"id":18,"type":10,"linkType":19},7,{"title":154,"description":155,"file":156},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":157,"details":158,"fileName":161,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":159,"image":160},6959,{"width":31,"height":32},"neumorphic-design-og.png","The awesome design trend that never took off! What are the fundamentals to neumorphic design?","2020-05-27",[165,166],"Design","CSS",{"nodeType":117,"data":168,"content":169},{},[170,178,185,204,211,218,283,290,319,326,333,341,358,375,382,398,405,412,419,426,433,451,483,500,515,532,538,545,552,569,576,583,590,597,604,611],{"nodeType":171,"data":172,"content":173},"heading-2",{},[174],{"nodeType":101,"value":175,"marks":176,"data":177},"What is neumorphic design?\r",[],{},{"nodeType":102,"data":179,"content":180},{},[181],{"nodeType":101,"value":182,"marks":183,"data":184},"Neumorphic design is a combination of skeuomorphic design and flat design. It gives a soft UI vibe with a 3D, nearly-realistic style by cleverly and carefully combining background colours, gradients, shapes, rounded edges and shadows. The design trend is made to feel like the elements are being pushed through and/or out of the page while being one with the background.",[],{},{"nodeType":102,"data":186,"content":187},{},[188,192,201],{"nodeType":101,"value":189,"marks":190,"data":191},"",[],{},{"nodeType":193,"data":194,"content":196},"hyperlink",{"uri":195},"https://codepen.io/jackdomleo7/embed/GRpaNGp",[197],{"nodeType":101,"value":198,"marks":199,"data":200},"CodePen: Neumorphic music player UI",[],{},{"nodeType":101,"value":189,"marks":202,"data":203},[],{},{"nodeType":102,"data":205,"content":206},{},[207],{"nodeType":101,"value":208,"marks":209,"data":210},"\r",[],{},{"nodeType":102,"data":212,"content":213},{},[214],{"nodeType":101,"value":215,"marks":216,"data":217},"Summarise neumorphic design in a few words:\r",[],{},{"nodeType":219,"data":220,"content":221},"unordered-list",{},[222,233,243,253,263,273],{"nodeType":223,"data":224,"content":225},"list-item",{},[226],{"nodeType":102,"data":227,"content":228},{},[229],{"nodeType":101,"value":230,"marks":231,"data":232},"Soft\r",[],{},{"nodeType":223,"data":234,"content":235},{},[236],{"nodeType":102,"data":237,"content":238},{},[239],{"nodeType":101,"value":240,"marks":241,"data":242},"Rounded\r",[],{},{"nodeType":223,"data":244,"content":245},{},[246],{"nodeType":102,"data":247,"content":248},{},[249],{"nodeType":101,"value":250,"marks":251,"data":252},"Smooth\r",[],{},{"nodeType":223,"data":254,"content":255},{},[256],{"nodeType":102,"data":257,"content":258},{},[259],{"nodeType":101,"value":260,"marks":261,"data":262},"Futuristic\r",[],{},{"nodeType":223,"data":264,"content":265},{},[266],{"nodeType":102,"data":267,"content":268},{},[269],{"nodeType":101,"value":270,"marks":271,"data":272},"Modern\r",[],{},{"nodeType":223,"data":274,"content":275},{},[276],{"nodeType":102,"data":277,"content":278},{},[279],{"nodeType":101,"value":280,"marks":281,"data":282},"Anti-accessible\r",[],{},{"nodeType":171,"data":284,"content":285},{},[286],{"nodeType":101,"value":287,"marks":288,"data":289},"Learning neumorphism\r",[],{},{"nodeType":102,"data":291,"content":292},{},[293,297,303,307,315],{"nodeType":101,"value":294,"marks":295,"data":296},"Learning neumorphism was quite difficult for me to begin with because I don't see myself as very design-minded (yet). I really struggled to get the CSS ",[],{},{"nodeType":101,"value":298,"marks":299,"data":302},"box-shadow",[300],{"type":301},"code",{},{"nodeType":101,"value":304,"marks":305,"data":306}," looking right. When I first came across neumorphic design, I was instantly hooked; I was searching ",[],{},{"nodeType":193,"data":308,"content":310},{"uri":309},"https://codepen.io/search/pens?q=neumorphic",[311],{"nodeType":101,"value":312,"marks":313,"data":314},"neumorphic on CodePen",[],{},{"nodeType":101,"value":316,"marks":317,"data":318},", I was searching [neumorphic on Google and was reading many articles on the topic. I find the aesthetics of neumorphic design so inviting to learn more about.\r",[],{},{"nodeType":171,"data":320,"content":321},{},[322],{"nodeType":101,"value":323,"marks":324,"data":325},"Themes\r",[],{},{"nodeType":102,"data":327,"content":328},{},[329],{"nodeType":101,"value":330,"marks":331,"data":332},"Neumorphic design has many themes to consider, I have listed some of the primary themes to kick-start your design.\r",[],{},{"nodeType":334,"data":335,"content":336},"heading-3",{},[337],{"nodeType":101,"value":338,"marks":339,"data":340},"Font\r",[],{},{"nodeType":102,"data":342,"content":343},{},[344,348,354],{"nodeType":101,"value":345,"marks":346,"data":347},"A theme of neumorphic design is roundness, so you should probably consider choosing a font with rounded letters. A rounded font will give your UI the ",[],{},{"nodeType":101,"value":349,"marks":350,"data":353},"soft",[351],{"type":352},"bold",{},{"nodeType":101,"value":355,"marks":356,"data":357}," vibe that comes with neumorphic design, rather than a sharp edge. To further explain this, I created a simple CodePen below:\r",[],{},{"nodeType":102,"data":359,"content":360},{},[361,364,372],{"nodeType":101,"value":189,"marks":362,"data":363},[],{},{"nodeType":193,"data":365,"content":367},{"uri":366},"https://codepen.io/jackdomleo7/embed/dyYEdPg",[368],{"nodeType":101,"value":369,"marks":370,"data":371},"CodePen: Choosing a neumorphic font-family",[],{},{"nodeType":101,"value":189,"marks":373,"data":374},[],{},{"nodeType":334,"data":376,"content":377},{},[378],{"nodeType":101,"value":379,"marks":380,"data":381},"Sizing\r",[],{},{"nodeType":102,"data":383,"content":384},{},[385,389,394],{"nodeType":101,"value":386,"marks":387,"data":388},"When considering sizing with neumorphic, you shouldn't look at it as \"Can a mouse click it?\" You should come from the angle of, \"Will my thumb be able to press it easily on mobile?\" With this in mind, it's natural to have ",[],{},{"nodeType":101,"value":390,"marks":391,"data":393},"larger components",[392],{"type":352},{},{"nodeType":101,"value":395,"marks":396,"data":397},".\r",[],{},{"nodeType":102,"data":399,"content":400},{},[401],{"nodeType":101,"value":402,"marks":403,"data":404},"Naturally, larger components will ultimately prevent you from creating small, cluttered and hard-to-read UIs. Think about padding. Neumorphism should allow for space and keep things distanced apart.\r",[],{},{"nodeType":334,"data":406,"content":407},{},[408],{"nodeType":101,"value":409,"marks":410,"data":411},"Colour\r",[],{},{"nodeType":102,"data":413,"content":414},{},[415],{"nodeType":101,"value":416,"marks":417,"data":418},"This is where your neumorphic design starts looking neumorphic. You should remember that the component and the background colour should be the same or very very similar.\r",[],{},{"nodeType":102,"data":420,"content":421},{},[422],{"nodeType":101,"value":423,"marks":424,"data":425},"It's OK to have components that contrast with the background, as long as the majority of your components blend in. It's also OK to have components that contrast with the background if you apply the shadows correctly...\r",[],{},{"nodeType":334,"data":427,"content":428},{},[429],{"nodeType":101,"value":430,"marks":431,"data":432},"Shadow\r",[],{},{"nodeType":102,"data":434,"content":435},{},[436,440,447],{"nodeType":101,"value":437,"marks":438,"data":439},"Save the best until last. Shadows. This needs to be right, I spent ages learning the complexes of the ",[],{},{"nodeType":193,"data":441,"content":443},{"uri":442},"https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow",[444],{"nodeType":101,"value":298,"marks":445,"data":446},[],{},{"nodeType":101,"value":448,"marks":449,"data":450}," CSS property. I played around with it by adding a shadow to an element, adding two shadows, three shadows, etc. You can't implement neumorphism effectively if you don't know about shadows.\r",[],{},{"nodeType":102,"data":452,"content":453},{},[454,458,462,466,471,475,479],{"nodeType":101,"value":455,"marks":456,"data":457},"Wait! Two shadows, three shadows? Yes. You can apply multiple shadows to a single CSS ",[],{},{"nodeType":101,"value":298,"marks":459,"data":461},[460],{"type":301},{},{"nodeType":101,"value":463,"marks":464,"data":465}," property. Although the R2-D2 below doesn't have anything to do with neumorphic design, it does demonstrate multiple shadows quite well. Below is a CodePen I created a while back of a pixel art R2-D2. It consists of a single ",[],{},{"nodeType":101,"value":467,"marks":468,"data":470},"\u003Cdiv>",[469],{"type":301},{},{"nodeType":101,"value":472,"marks":473,"data":474},", then a very long, but easy-to-understand ",[],{},{"nodeType":101,"value":298,"marks":476,"data":478},[477],{"type":301},{},{"nodeType":101,"value":480,"marks":481,"data":482}," CSS property.\r",[],{},{"nodeType":102,"data":484,"content":485},{},[486,489,497],{"nodeType":101,"value":189,"marks":487,"data":488},[],{},{"nodeType":193,"data":490,"content":492},{"uri":491},"https://codepen.io/jackdomleo7/embed/ZEEqdxy",[493],{"nodeType":101,"value":494,"marks":495,"data":496},"CodePen: Single Div Pixel Art R2-D2",[],{},{"nodeType":101,"value":189,"marks":498,"data":499},[],{},{"nodeType":102,"data":501,"content":502},{},[503,507,511],{"nodeType":101,"value":504,"marks":505,"data":506},"The trick to neumorphic design shadows is there are two shadows on your ",[],{},{"nodeType":101,"value":298,"marks":508,"data":510},[509],{"type":301},{},{"nodeType":101,"value":512,"marks":513,"data":514}," CSS property, one lighter shadow and one darker. Now imagine you have a light source in the top left-hand corner of your page shining from the top left to the bottom right. Since a theme of neumorphism is 3D, you need to think, \"Where will the shadow be?\" Here is a little CodePen I created to help explain it.",[],{},{"nodeType":102,"data":516,"content":517},{},[518,521,529],{"nodeType":101,"value":189,"marks":519,"data":520},[],{},{"nodeType":193,"data":522,"content":524},{"uri":523},"https://codepen.io/jackdomleo7/embed/yLYWqoQ",[525],{"nodeType":101,"value":526,"marks":527,"data":528},"CodePen: Understanding neumorphic design shadows",[],{},{"nodeType":101,"value":189,"marks":530,"data":531},[],{},{"nodeType":102,"data":533,"content":534},{},[535],{"nodeType":101,"value":208,"marks":536,"data":537},[],{},{"nodeType":171,"data":539,"content":540},{},[541],{"nodeType":101,"value":542,"marks":543,"data":544},"Put it all together",[],{},{"nodeType":102,"data":546,"content":547},{},[548],{"nodeType":101,"value":549,"marks":550,"data":551},"When you combine all these themes, ideas, tips and tricks, you can end up with a nice set of components for your design system.\r",[],{},{"nodeType":102,"data":553,"content":554},{},[555,558,566],{"nodeType":101,"value":189,"marks":556,"data":557},[],{},{"nodeType":193,"data":559,"content":561},{"uri":560},"https://codepen.io/jackdomleo7/embed/mdeowoz",[562],{"nodeType":101,"value":563,"marks":564,"data":565},"CodePen: Neumorphic Design Elements",[],{},{"nodeType":101,"value":189,"marks":567,"data":568},[],{},{"nodeType":171,"data":570,"content":571},{},[572],{"nodeType":101,"value":573,"marks":574,"data":575},"When not to use neumorphic design?\r",[],{},{"nodeType":102,"data":577,"content":578},{},[579],{"nodeType":101,"value":580,"marks":581,"data":582},"Neumorphic design became a big trend in early 2020 but was quickly discarded.\r",[],{},{"nodeType":102,"data":584,"content":585},{},[586],{"nodeType":101,"value":587,"marks":588,"data":589},"Neumorphic design became popular for its sexiness. It brought a really nice, Futuristic, 3D-like design to the UI and I have to admit, I do love how it looks. But good UI/UX design in 2020, it's not all about good looks, it needs to be as equally accessible as it is sexy.\r",[],{},{"nodeType":102,"data":591,"content":592},{},[593],{"nodeType":101,"value":594,"marks":595,"data":596},"Neumorphic design lacks colour contrast since an element's background colour should be the same or very similar to the background it sits on to look neumorphic, this makes it difficult for some users to see, therefore making it difficult for them to use your website or application.\r",[],{},{"nodeType":102,"data":598,"content":599},{},[600],{"nodeType":101,"value":601,"marks":602,"data":603},"There are ways around this if you really want to include neumorphic design; you could learn about implementing different themes and offer a \"high contrast\" theme. The high contrast theme wouldn't be neumorphic but at least you're giving user's the option of what vibe they want or need.",[],{},{"nodeType":102,"data":605,"content":606},{},[607],{"nodeType":101,"value":608,"marks":609,"data":610},"In other words, neumorphic is only useful for demonstrations, much like this one and should ideally never be used in the real world.",[],{},{"nodeType":102,"data":612,"content":613},{},[614],{"nodeType":101,"value":615,"marks":616,"data":617},"I had fun learning about neumorphic design, but I feel this is where I part ways with it and never touch on it again.",[],{},{"Asset":619},[141],{"sys":621,"total":21,"skip":38,"limit":21,"items":622},{"type":37},[623],{"fields":624,"sys":635},{"articleDisclaimer":625},{"data":626,"content":627,"nodeType":117},{},[628],{"data":629,"content":630,"nodeType":102},{},[631],{"data":632,"marks":633,"value":634,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":636,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":638,"total":639,"skip":38,"limit":640,"items":641,"includes":767},{"type":37},5,1000,[642,675,707,738],{"fields":643,"sys":673},{"title":644,"description":645,"image":646,"tags":669,"publishDate":671,"slug":672},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":647,"sys":650,"fields":660},{"tags":648,"concepts":649},[],[],{"space":651,"id":653,"type":14,"createdAt":654,"updatedAt":655,"environment":656,"publishedVersion":658,"revision":659,"locale":22},{"sys":652},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":657},{"id":18,"type":10,"linkType":19},9,2,{"title":661,"description":661,"file":662},"Pineapple",{"url":663,"details":664,"fileName":667,"contentType":668},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":665,"image":666},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg",[670],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":674,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":676,"sys":705},{"title":677,"description":678,"image":679,"tags":699,"publishDate":703,"slug":704},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":680,"sys":683,"fields":690},{"tags":681,"concepts":682},[],[],{"space":684,"id":686,"type":14,"createdAt":687,"updatedAt":687,"environment":688,"publishedVersion":152,"revision":21,"locale":22},{"sys":685},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":689},{"id":18,"type":10,"linkType":19},{"title":691,"description":692,"file":693},"When is a clickable div okay","An example modal element",{"url":694,"details":695,"fileName":698,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":696,"image":697},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[700,701,702],"Accessibility","UX","HTML","2023-07-18","when-is-a-clickable-div-okay",{"id":706,"type":48},"brxitJC35PyChlVzusyLP",{"fields":708,"sys":736},{"title":709,"description":710,"image":711,"tags":731,"publishDate":734,"slug":735},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":712,"sys":715,"fields":722},{"tags":713,"concepts":714},[],[],{"space":716,"id":718,"type":14,"createdAt":719,"updatedAt":719,"environment":720,"publishedVersion":639,"revision":21,"locale":22},{"sys":717},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":721},{"id":18,"type":10,"linkType":19},{"title":723,"description":724,"file":725},"clutter","A cluttered office desk",{"url":726,"details":727,"fileName":730,"contentType":668},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":728,"image":729},281805,{"width":31,"height":32},"clutter.jpg",[732,733,702],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":737,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":739,"sys":765},{"title":740,"description":741,"image":742,"tags":762,"publishDate":763,"slug":764},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":743,"sys":746,"fields":753},{"tags":744,"concepts":745},[],[],{"space":747,"id":749,"type":14,"createdAt":750,"updatedAt":750,"environment":751,"publishedVersion":639,"revision":21,"locale":22},{"sys":748},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":752},{"id":18,"type":10,"linkType":19},{"title":754,"description":755,"file":756},"css=hover-media-query-og","CSS media query for hover",{"url":757,"details":758,"fileName":761,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":759,"image":760},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[166],"2020-07-06","hover-css-media-query",{"id":766,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"Asset":768},[742,679,646,711,769],{"metadata":770,"sys":773,"fields":778},{"tags":771,"concepts":772},[],[],{"space":774,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":776,"publishedVersion":152,"revision":21,"locale":22},{"sys":775},{"type":10,"linkType":11,"id":12},{"sys":777},{"id":18,"type":10,"linkType":19},{"title":154,"description":155,"file":779},{"url":157,"details":780,"fileName":161,"contentType":34},{"size":159,"image":781},{"width":31,"height":32},1733447471197] \ No newline at end of file +[{"data":1,"prerenderedAt":782},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-learning-neumorphic-design":118,"$rpzcfBTaqR":620,"article-list-learning-neumorphic-design":637},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":618},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"2KWdODn6oaRYNzG4Qz4yd3","2023-01-24T20:35:19.875Z","2023-01-24T20:40:12.164Z",{"sys":132},{"id":18,"type":10,"linkType":19},114,3,{"sys":136},{"type":10,"linkType":57,"id":137},"article",{"title":139,"slug":140,"image":141,"description":162,"publishDate":163,"tags":164,"body":167},"Learning Neumorphic Design","learning-neumorphic-design",{"metadata":142,"sys":145,"fields":153},{"tags":143,"concepts":144},[],[],{"space":146,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":150,"publishedVersion":152,"revision":21,"locale":22},{"sys":147},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":151},{"id":18,"type":10,"linkType":19},7,{"title":154,"description":155,"file":156},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":157,"details":158,"fileName":161,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":159,"image":160},6959,{"width":31,"height":32},"neumorphic-design-og.png","The awesome design trend that never took off! What are the fundamentals to neumorphic design?","2020-05-27",[165,166],"Design","CSS",{"nodeType":117,"data":168,"content":169},{},[170,178,185,204,211,218,283,290,319,326,333,341,358,375,382,398,405,412,419,426,433,451,483,500,515,532,538,545,552,569,576,583,590,597,604,611],{"nodeType":171,"data":172,"content":173},"heading-2",{},[174],{"nodeType":101,"value":175,"marks":176,"data":177},"What is neumorphic design?\r",[],{},{"nodeType":102,"data":179,"content":180},{},[181],{"nodeType":101,"value":182,"marks":183,"data":184},"Neumorphic design is a combination of skeuomorphic design and flat design. It gives a soft UI vibe with a 3D, nearly-realistic style by cleverly and carefully combining background colours, gradients, shapes, rounded edges and shadows. The design trend is made to feel like the elements are being pushed through and/or out of the page while being one with the background.",[],{},{"nodeType":102,"data":186,"content":187},{},[188,192,201],{"nodeType":101,"value":189,"marks":190,"data":191},"",[],{},{"nodeType":193,"data":194,"content":196},"hyperlink",{"uri":195},"https://codepen.io/jackdomleo7/embed/GRpaNGp",[197],{"nodeType":101,"value":198,"marks":199,"data":200},"CodePen: Neumorphic music player UI",[],{},{"nodeType":101,"value":189,"marks":202,"data":203},[],{},{"nodeType":102,"data":205,"content":206},{},[207],{"nodeType":101,"value":208,"marks":209,"data":210},"\r",[],{},{"nodeType":102,"data":212,"content":213},{},[214],{"nodeType":101,"value":215,"marks":216,"data":217},"Summarise neumorphic design in a few words:\r",[],{},{"nodeType":219,"data":220,"content":221},"unordered-list",{},[222,233,243,253,263,273],{"nodeType":223,"data":224,"content":225},"list-item",{},[226],{"nodeType":102,"data":227,"content":228},{},[229],{"nodeType":101,"value":230,"marks":231,"data":232},"Soft\r",[],{},{"nodeType":223,"data":234,"content":235},{},[236],{"nodeType":102,"data":237,"content":238},{},[239],{"nodeType":101,"value":240,"marks":241,"data":242},"Rounded\r",[],{},{"nodeType":223,"data":244,"content":245},{},[246],{"nodeType":102,"data":247,"content":248},{},[249],{"nodeType":101,"value":250,"marks":251,"data":252},"Smooth\r",[],{},{"nodeType":223,"data":254,"content":255},{},[256],{"nodeType":102,"data":257,"content":258},{},[259],{"nodeType":101,"value":260,"marks":261,"data":262},"Futuristic\r",[],{},{"nodeType":223,"data":264,"content":265},{},[266],{"nodeType":102,"data":267,"content":268},{},[269],{"nodeType":101,"value":270,"marks":271,"data":272},"Modern\r",[],{},{"nodeType":223,"data":274,"content":275},{},[276],{"nodeType":102,"data":277,"content":278},{},[279],{"nodeType":101,"value":280,"marks":281,"data":282},"Anti-accessible\r",[],{},{"nodeType":171,"data":284,"content":285},{},[286],{"nodeType":101,"value":287,"marks":288,"data":289},"Learning neumorphism\r",[],{},{"nodeType":102,"data":291,"content":292},{},[293,297,303,307,315],{"nodeType":101,"value":294,"marks":295,"data":296},"Learning neumorphism was quite difficult for me to begin with because I don't see myself as very design-minded (yet). I really struggled to get the CSS ",[],{},{"nodeType":101,"value":298,"marks":299,"data":302},"box-shadow",[300],{"type":301},"code",{},{"nodeType":101,"value":304,"marks":305,"data":306}," looking right. When I first came across neumorphic design, I was instantly hooked; I was searching ",[],{},{"nodeType":193,"data":308,"content":310},{"uri":309},"https://codepen.io/search/pens?q=neumorphic",[311],{"nodeType":101,"value":312,"marks":313,"data":314},"neumorphic on CodePen",[],{},{"nodeType":101,"value":316,"marks":317,"data":318},", I was searching [neumorphic on Google and was reading many articles on the topic. I find the aesthetics of neumorphic design so inviting to learn more about.\r",[],{},{"nodeType":171,"data":320,"content":321},{},[322],{"nodeType":101,"value":323,"marks":324,"data":325},"Themes\r",[],{},{"nodeType":102,"data":327,"content":328},{},[329],{"nodeType":101,"value":330,"marks":331,"data":332},"Neumorphic design has many themes to consider, I have listed some of the primary themes to kick-start your design.\r",[],{},{"nodeType":334,"data":335,"content":336},"heading-3",{},[337],{"nodeType":101,"value":338,"marks":339,"data":340},"Font\r",[],{},{"nodeType":102,"data":342,"content":343},{},[344,348,354],{"nodeType":101,"value":345,"marks":346,"data":347},"A theme of neumorphic design is roundness, so you should probably consider choosing a font with rounded letters. A rounded font will give your UI the ",[],{},{"nodeType":101,"value":349,"marks":350,"data":353},"soft",[351],{"type":352},"bold",{},{"nodeType":101,"value":355,"marks":356,"data":357}," vibe that comes with neumorphic design, rather than a sharp edge. To further explain this, I created a simple CodePen below:\r",[],{},{"nodeType":102,"data":359,"content":360},{},[361,364,372],{"nodeType":101,"value":189,"marks":362,"data":363},[],{},{"nodeType":193,"data":365,"content":367},{"uri":366},"https://codepen.io/jackdomleo7/embed/dyYEdPg",[368],{"nodeType":101,"value":369,"marks":370,"data":371},"CodePen: Choosing a neumorphic font-family",[],{},{"nodeType":101,"value":189,"marks":373,"data":374},[],{},{"nodeType":334,"data":376,"content":377},{},[378],{"nodeType":101,"value":379,"marks":380,"data":381},"Sizing\r",[],{},{"nodeType":102,"data":383,"content":384},{},[385,389,394],{"nodeType":101,"value":386,"marks":387,"data":388},"When considering sizing with neumorphic, you shouldn't look at it as \"Can a mouse click it?\" You should come from the angle of, \"Will my thumb be able to press it easily on mobile?\" With this in mind, it's natural to have ",[],{},{"nodeType":101,"value":390,"marks":391,"data":393},"larger components",[392],{"type":352},{},{"nodeType":101,"value":395,"marks":396,"data":397},".\r",[],{},{"nodeType":102,"data":399,"content":400},{},[401],{"nodeType":101,"value":402,"marks":403,"data":404},"Naturally, larger components will ultimately prevent you from creating small, cluttered and hard-to-read UIs. Think about padding. Neumorphism should allow for space and keep things distanced apart.\r",[],{},{"nodeType":334,"data":406,"content":407},{},[408],{"nodeType":101,"value":409,"marks":410,"data":411},"Colour\r",[],{},{"nodeType":102,"data":413,"content":414},{},[415],{"nodeType":101,"value":416,"marks":417,"data":418},"This is where your neumorphic design starts looking neumorphic. You should remember that the component and the background colour should be the same or very very similar.\r",[],{},{"nodeType":102,"data":420,"content":421},{},[422],{"nodeType":101,"value":423,"marks":424,"data":425},"It's OK to have components that contrast with the background, as long as the majority of your components blend in. It's also OK to have components that contrast with the background if you apply the shadows correctly...\r",[],{},{"nodeType":334,"data":427,"content":428},{},[429],{"nodeType":101,"value":430,"marks":431,"data":432},"Shadow\r",[],{},{"nodeType":102,"data":434,"content":435},{},[436,440,447],{"nodeType":101,"value":437,"marks":438,"data":439},"Save the best until last. Shadows. This needs to be right, I spent ages learning the complexes of the ",[],{},{"nodeType":193,"data":441,"content":443},{"uri":442},"https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow",[444],{"nodeType":101,"value":298,"marks":445,"data":446},[],{},{"nodeType":101,"value":448,"marks":449,"data":450}," CSS property. I played around with it by adding a shadow to an element, adding two shadows, three shadows, etc. You can't implement neumorphism effectively if you don't know about shadows.\r",[],{},{"nodeType":102,"data":452,"content":453},{},[454,458,462,466,471,475,479],{"nodeType":101,"value":455,"marks":456,"data":457},"Wait! Two shadows, three shadows? Yes. You can apply multiple shadows to a single CSS ",[],{},{"nodeType":101,"value":298,"marks":459,"data":461},[460],{"type":301},{},{"nodeType":101,"value":463,"marks":464,"data":465}," property. Although the R2-D2 below doesn't have anything to do with neumorphic design, it does demonstrate multiple shadows quite well. Below is a CodePen I created a while back of a pixel art R2-D2. It consists of a single ",[],{},{"nodeType":101,"value":467,"marks":468,"data":470},"\u003Cdiv>",[469],{"type":301},{},{"nodeType":101,"value":472,"marks":473,"data":474},", then a very long, but easy-to-understand ",[],{},{"nodeType":101,"value":298,"marks":476,"data":478},[477],{"type":301},{},{"nodeType":101,"value":480,"marks":481,"data":482}," CSS property.\r",[],{},{"nodeType":102,"data":484,"content":485},{},[486,489,497],{"nodeType":101,"value":189,"marks":487,"data":488},[],{},{"nodeType":193,"data":490,"content":492},{"uri":491},"https://codepen.io/jackdomleo7/embed/ZEEqdxy",[493],{"nodeType":101,"value":494,"marks":495,"data":496},"CodePen: Single Div Pixel Art R2-D2",[],{},{"nodeType":101,"value":189,"marks":498,"data":499},[],{},{"nodeType":102,"data":501,"content":502},{},[503,507,511],{"nodeType":101,"value":504,"marks":505,"data":506},"The trick to neumorphic design shadows is there are two shadows on your ",[],{},{"nodeType":101,"value":298,"marks":508,"data":510},[509],{"type":301},{},{"nodeType":101,"value":512,"marks":513,"data":514}," CSS property, one lighter shadow and one darker. Now imagine you have a light source in the top left-hand corner of your page shining from the top left to the bottom right. Since a theme of neumorphism is 3D, you need to think, \"Where will the shadow be?\" Here is a little CodePen I created to help explain it.",[],{},{"nodeType":102,"data":516,"content":517},{},[518,521,529],{"nodeType":101,"value":189,"marks":519,"data":520},[],{},{"nodeType":193,"data":522,"content":524},{"uri":523},"https://codepen.io/jackdomleo7/embed/yLYWqoQ",[525],{"nodeType":101,"value":526,"marks":527,"data":528},"CodePen: Understanding neumorphic design shadows",[],{},{"nodeType":101,"value":189,"marks":530,"data":531},[],{},{"nodeType":102,"data":533,"content":534},{},[535],{"nodeType":101,"value":208,"marks":536,"data":537},[],{},{"nodeType":171,"data":539,"content":540},{},[541],{"nodeType":101,"value":542,"marks":543,"data":544},"Put it all together",[],{},{"nodeType":102,"data":546,"content":547},{},[548],{"nodeType":101,"value":549,"marks":550,"data":551},"When you combine all these themes, ideas, tips and tricks, you can end up with a nice set of components for your design system.\r",[],{},{"nodeType":102,"data":553,"content":554},{},[555,558,566],{"nodeType":101,"value":189,"marks":556,"data":557},[],{},{"nodeType":193,"data":559,"content":561},{"uri":560},"https://codepen.io/jackdomleo7/embed/mdeowoz",[562],{"nodeType":101,"value":563,"marks":564,"data":565},"CodePen: Neumorphic Design Elements",[],{},{"nodeType":101,"value":189,"marks":567,"data":568},[],{},{"nodeType":171,"data":570,"content":571},{},[572],{"nodeType":101,"value":573,"marks":574,"data":575},"When not to use neumorphic design?\r",[],{},{"nodeType":102,"data":577,"content":578},{},[579],{"nodeType":101,"value":580,"marks":581,"data":582},"Neumorphic design became a big trend in early 2020 but was quickly discarded.\r",[],{},{"nodeType":102,"data":584,"content":585},{},[586],{"nodeType":101,"value":587,"marks":588,"data":589},"Neumorphic design became popular for its sexiness. It brought a really nice, Futuristic, 3D-like design to the UI and I have to admit, I do love how it looks. But good UI/UX design in 2020, it's not all about good looks, it needs to be as equally accessible as it is sexy.\r",[],{},{"nodeType":102,"data":591,"content":592},{},[593],{"nodeType":101,"value":594,"marks":595,"data":596},"Neumorphic design lacks colour contrast since an element's background colour should be the same or very similar to the background it sits on to look neumorphic, this makes it difficult for some users to see, therefore making it difficult for them to use your website or application.\r",[],{},{"nodeType":102,"data":598,"content":599},{},[600],{"nodeType":101,"value":601,"marks":602,"data":603},"There are ways around this if you really want to include neumorphic design; you could learn about implementing different themes and offer a \"high contrast\" theme. The high contrast theme wouldn't be neumorphic but at least you're giving user's the option of what vibe they want or need.",[],{},{"nodeType":102,"data":605,"content":606},{},[607],{"nodeType":101,"value":608,"marks":609,"data":610},"In other words, neumorphic is only useful for demonstrations, much like this one and should ideally never be used in the real world.",[],{},{"nodeType":102,"data":612,"content":613},{},[614],{"nodeType":101,"value":615,"marks":616,"data":617},"I had fun learning about neumorphic design, but I feel this is where I part ways with it and never touch on it again.",[],{},{"Asset":619},[141],{"sys":621,"total":21,"skip":38,"limit":21,"items":622},{"type":37},[623],{"fields":624,"sys":635},{"articleDisclaimer":625},{"data":626,"content":627,"nodeType":117},{},[628],{"data":629,"content":630,"nodeType":102},{},[631],{"data":632,"marks":633,"value":634,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":636,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":638,"total":639,"skip":38,"limit":640,"items":641,"includes":767},{"type":37},5,1000,[642,675,707,738],{"fields":643,"sys":673},{"title":644,"description":645,"image":646,"tags":669,"publishDate":671,"slug":672},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":647,"sys":650,"fields":660},{"tags":648,"concepts":649},[],[],{"space":651,"id":653,"type":14,"createdAt":654,"updatedAt":655,"environment":656,"publishedVersion":658,"revision":659,"locale":22},{"sys":652},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":657},{"id":18,"type":10,"linkType":19},9,2,{"title":661,"description":661,"file":662},"Pineapple",{"url":663,"details":664,"fileName":667,"contentType":668},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":665,"image":666},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg",[670],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":674,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":676,"sys":705},{"title":677,"description":678,"image":679,"tags":699,"publishDate":703,"slug":704},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":680,"sys":683,"fields":690},{"tags":681,"concepts":682},[],[],{"space":684,"id":686,"type":14,"createdAt":687,"updatedAt":687,"environment":688,"publishedVersion":152,"revision":21,"locale":22},{"sys":685},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":689},{"id":18,"type":10,"linkType":19},{"title":691,"description":692,"file":693},"When is a clickable div okay","An example modal element",{"url":694,"details":695,"fileName":698,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":696,"image":697},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[700,701,702],"Accessibility","UX","HTML","2023-07-18","when-is-a-clickable-div-okay",{"id":706,"type":48},"brxitJC35PyChlVzusyLP",{"fields":708,"sys":736},{"title":709,"description":710,"image":711,"tags":731,"publishDate":734,"slug":735},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":712,"sys":715,"fields":722},{"tags":713,"concepts":714},[],[],{"space":716,"id":718,"type":14,"createdAt":719,"updatedAt":719,"environment":720,"publishedVersion":639,"revision":21,"locale":22},{"sys":717},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":721},{"id":18,"type":10,"linkType":19},{"title":723,"description":724,"file":725},"clutter","A cluttered office desk",{"url":726,"details":727,"fileName":730,"contentType":668},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":728,"image":729},281805,{"width":31,"height":32},"clutter.jpg",[732,733,702],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":737,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":739,"sys":765},{"title":740,"description":741,"image":742,"tags":762,"publishDate":763,"slug":764},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":743,"sys":746,"fields":753},{"tags":744,"concepts":745},[],[],{"space":747,"id":749,"type":14,"createdAt":750,"updatedAt":750,"environment":751,"publishedVersion":639,"revision":21,"locale":22},{"sys":748},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":752},{"id":18,"type":10,"linkType":19},{"title":754,"description":755,"file":756},"css=hover-media-query-og","CSS media query for hover",{"url":757,"details":758,"fileName":761,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":759,"image":760},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[166],"2020-07-06","hover-css-media-query",{"id":766,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"Asset":768},[742,679,646,711,769],{"metadata":770,"sys":773,"fields":778},{"tags":771,"concepts":772},[],[],{"space":774,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":776,"publishedVersion":152,"revision":21,"locale":22},{"sys":775},{"type":10,"linkType":11,"id":12},{"sys":777},{"id":18,"type":10,"linkType":19},{"title":154,"description":155,"file":779},{"url":157,"details":780,"fileName":161,"contentType":34},{"size":159,"image":781},{"width":31,"height":32},1733533838286] \ No newline at end of file diff --git a/blog/2020/learning-neumorphic-design/index.html b/blog/2020/learning-neumorphic-design/index.html index a3190d9a3..24597a27b 100644 --- a/blog/2020/learning-neumorphic-design/index.html +++ b/blog/2020/learning-neumorphic-design/index.html @@ -23,7 +23,7 @@ - + @@ -83,5 +83,5 @@ -

Learning Neumorphic Design

A music player UI with a neumorphism design

Published:

What is neumorphic design?

Neumorphic design is a combination of skeuomorphic design and flat design. It gives a soft UI vibe with a 3D, nearly-realistic style by cleverly and carefully combining background colours, gradients, shapes, rounded edges and shadows. The design trend is made to feel like the elements are being pushed through and/or out of the page while being one with the background.

See the Pen Neumorphic music player UI by @jackdomleo7 on CodePen

Summarise neumorphic design in a few words:

  • Soft

  • Rounded

  • Smooth

  • Futuristic

  • Modern

  • Anti-accessible

Learning neumorphism

Learning neumorphism was quite difficult for me to begin with because I don't see myself as very design-minded (yet). I really struggled to get the CSS box-shadow looking right. When I first came across neumorphic design, I was instantly hooked; I was searching neumorphic on CodePen, I was searching [neumorphic on Google and was reading many articles on the topic. I find the aesthetics of neumorphic design so inviting to learn more about.

Themes

Neumorphic design has many themes to consider, I have listed some of the primary themes to kick-start your design.

Font

A theme of neumorphic design is roundness, so you should probably consider choosing a font with rounded letters. A rounded font will give your UI the soft vibe that comes with neumorphic design, rather than a sharp edge. To further explain this, I created a simple CodePen below:

See the Pen Choosing a neumorphic font-family by @jackdomleo7 on CodePen

Sizing

When considering sizing with neumorphic, you shouldn't look at it as "Can a mouse click it?" You should come from the angle of, "Will my thumb be able to press it easily on mobile?" With this in mind, it's natural to have larger components.

Naturally, larger components will ultimately prevent you from creating small, cluttered and hard-to-read UIs. Think about padding. Neumorphism should allow for space and keep things distanced apart.

Colour

This is where your neumorphic design starts looking neumorphic. You should remember that the component and the background colour should be the same or very very similar.

It's OK to have components that contrast with the background, as long as the majority of your components blend in. It's also OK to have components that contrast with the background if you apply the shadows correctly...

Shadow

Save the best until last. Shadows. This needs to be right, I spent ages learning the complexes of the box-shadow CSS property. I played around with it by adding a shadow to an element, adding two shadows, three shadows, etc. You can't implement neumorphism effectively if you don't know about shadows.

Wait! Two shadows, three shadows? Yes. You can apply multiple shadows to a single CSS box-shadow property. Although the R2-D2 below doesn't have anything to do with neumorphic design, it does demonstrate multiple shadows quite well. Below is a CodePen I created a while back of a pixel art R2-D2. It consists of a single <div>, then a very long, but easy-to-understand box-shadow CSS property.

See the Pen Single Div Pixel Art R2-D2 by @jackdomleo7 on CodePen

The trick to neumorphic design shadows is there are two shadows on your box-shadow CSS property, one lighter shadow and one darker. Now imagine you have a light source in the top left-hand corner of your page shining from the top left to the bottom right. Since a theme of neumorphism is 3D, you need to think, "Where will the shadow be?" Here is a little CodePen I created to help explain it.

See the Pen Understanding neumorphic design shadows by @jackdomleo7 on CodePen

Put it all together

When you combine all these themes, ideas, tips and tricks, you can end up with a nice set of components for your design system.

See the Pen Neumorphic Design Elements by @jackdomleo7 on CodePen

When not to use neumorphic design?

Neumorphic design became a big trend in early 2020 but was quickly discarded.

Neumorphic design became popular for its sexiness. It brought a really nice, Futuristic, 3D-like design to the UI and I have to admit, I do love how it looks. But good UI/UX design in 2020, it's not all about good looks, it needs to be as equally accessible as it is sexy.

Neumorphic design lacks colour contrast since an element's background colour should be the same or very similar to the background it sits on to look neumorphic, this makes it difficult for some users to see, therefore making it difficult for them to use your website or application.

There are ways around this if you really want to include neumorphic design; you could learn about implementing different themes and offer a "high contrast" theme. The high contrast theme wouldn't be neumorphic but at least you're giving user's the option of what vibe they want or need.

In other words, neumorphic is only useful for demonstrations, much like this one and should ideally never be used in the real world.

I had fun learning about neumorphic design, but I feel this is where I part ways with it and never touch on it again.

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

- \ No newline at end of file +

Learning Neumorphic Design

A music player UI with a neumorphism design

Published:

What is neumorphic design?

Neumorphic design is a combination of skeuomorphic design and flat design. It gives a soft UI vibe with a 3D, nearly-realistic style by cleverly and carefully combining background colours, gradients, shapes, rounded edges and shadows. The design trend is made to feel like the elements are being pushed through and/or out of the page while being one with the background.

See the Pen Neumorphic music player UI by @jackdomleo7 on CodePen

Summarise neumorphic design in a few words:

  • Soft

  • Rounded

  • Smooth

  • Futuristic

  • Modern

  • Anti-accessible

Learning neumorphism

Learning neumorphism was quite difficult for me to begin with because I don't see myself as very design-minded (yet). I really struggled to get the CSS box-shadow looking right. When I first came across neumorphic design, I was instantly hooked; I was searching neumorphic on CodePen, I was searching [neumorphic on Google and was reading many articles on the topic. I find the aesthetics of neumorphic design so inviting to learn more about.

Themes

Neumorphic design has many themes to consider, I have listed some of the primary themes to kick-start your design.

Font

A theme of neumorphic design is roundness, so you should probably consider choosing a font with rounded letters. A rounded font will give your UI the soft vibe that comes with neumorphic design, rather than a sharp edge. To further explain this, I created a simple CodePen below:

See the Pen Choosing a neumorphic font-family by @jackdomleo7 on CodePen

Sizing

When considering sizing with neumorphic, you shouldn't look at it as "Can a mouse click it?" You should come from the angle of, "Will my thumb be able to press it easily on mobile?" With this in mind, it's natural to have larger components.

Naturally, larger components will ultimately prevent you from creating small, cluttered and hard-to-read UIs. Think about padding. Neumorphism should allow for space and keep things distanced apart.

Colour

This is where your neumorphic design starts looking neumorphic. You should remember that the component and the background colour should be the same or very very similar.

It's OK to have components that contrast with the background, as long as the majority of your components blend in. It's also OK to have components that contrast with the background if you apply the shadows correctly...

Shadow

Save the best until last. Shadows. This needs to be right, I spent ages learning the complexes of the box-shadow CSS property. I played around with it by adding a shadow to an element, adding two shadows, three shadows, etc. You can't implement neumorphism effectively if you don't know about shadows.

Wait! Two shadows, three shadows? Yes. You can apply multiple shadows to a single CSS box-shadow property. Although the R2-D2 below doesn't have anything to do with neumorphic design, it does demonstrate multiple shadows quite well. Below is a CodePen I created a while back of a pixel art R2-D2. It consists of a single <div>, then a very long, but easy-to-understand box-shadow CSS property.

See the Pen Single Div Pixel Art R2-D2 by @jackdomleo7 on CodePen

The trick to neumorphic design shadows is there are two shadows on your box-shadow CSS property, one lighter shadow and one darker. Now imagine you have a light source in the top left-hand corner of your page shining from the top left to the bottom right. Since a theme of neumorphism is 3D, you need to think, "Where will the shadow be?" Here is a little CodePen I created to help explain it.

See the Pen Understanding neumorphic design shadows by @jackdomleo7 on CodePen

Put it all together

When you combine all these themes, ideas, tips and tricks, you can end up with a nice set of components for your design system.

See the Pen Neumorphic Design Elements by @jackdomleo7 on CodePen

When not to use neumorphic design?

Neumorphic design became a big trend in early 2020 but was quickly discarded.

Neumorphic design became popular for its sexiness. It brought a really nice, Futuristic, 3D-like design to the UI and I have to admit, I do love how it looks. But good UI/UX design in 2020, it's not all about good looks, it needs to be as equally accessible as it is sexy.

Neumorphic design lacks colour contrast since an element's background colour should be the same or very similar to the background it sits on to look neumorphic, this makes it difficult for some users to see, therefore making it difficult for them to use your website or application.

There are ways around this if you really want to include neumorphic design; you could learn about implementing different themes and offer a "high contrast" theme. The high contrast theme wouldn't be neumorphic but at least you're giving user's the option of what vibe they want or need.

In other words, neumorphic is only useful for demonstrations, much like this one and should ideally never be used in the real world.

I had fun learning about neumorphic design, but I feel this is where I part ways with it and never touch on it again.

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

+ \ No newline at end of file diff --git a/blog/2023/should-you-clean-out-your-blog/_payload.json b/blog/2023/should-you-clean-out-your-blog/_payload.json index 093c2ec9b..c162676ac 100644 --- a/blog/2023/should-you-clean-out-your-blog/_payload.json +++ b/blog/2023/should-you-clean-out-your-blog/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":936},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-should-you-clean-out-your-blog":118,"$rpzcfBTaqR":776,"article-list-should-you-clean-out-your-blog":793},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":774},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"9dijdAHS9ROnOwXit47NQ","2023-02-16T21:37:49.894Z","2024-04-30T18:50:28.239Z",{"sys":132},{"id":18,"type":10,"linkType":19},734,6,{"sys":136},{"type":10,"linkType":57,"id":137},"article",{"title":139,"slug":140,"image":141,"description":163,"publishDate":164,"tags":165,"body":169},"Should you clean out your blog?","should-you-clean-out-your-blog",{"metadata":142,"sys":145,"fields":153},{"tags":143,"concepts":144},[],[],{"space":146,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":150,"publishedVersion":152,"revision":21,"locale":22},{"sys":147},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":151},{"id":18,"type":10,"linkType":19},5,{"title":154,"description":155,"file":156},"clutter","A cluttered office desk",{"url":157,"details":158,"fileName":161,"contentType":162},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":159,"image":160},281805,{"width":31,"height":32},"clutter.jpg","image/jpeg","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.","2023-02-16",[166,167,168],"Tips","Productivity","HTML",{"nodeType":117,"data":170,"content":171},{},[172,178,185,192,227,235,242,249,256,273,296,304,311,323,330,369,377,384,391,398,405,424,455,508,516,523,530,537,544,551,574,581,588,595,602,632,639,670,678,685,692,699,706,713,720,727,734,760,767],{"nodeType":102,"data":173,"content":174},{},[175],{"nodeType":101,"value":163,"marks":176,"data":177},[],{},{"nodeType":102,"data":179,"content":180},{},[181],{"nodeType":101,"value":182,"marks":183,"data":184},"Old and outdated articles are like dust on a coffee table; they're there for everyone to see until you decide to do something about it.",[],{},{"nodeType":102,"data":186,"content":187},{},[188],{"nodeType":101,"value":189,"marks":190,"data":191},"There are three reasons why an article should be considered being cleaned from your blog:",[],{},{"nodeType":193,"data":194,"content":195},"ordered-list",{},[196,207,217],{"nodeType":197,"data":198,"content":199},"list-item",{},[200],{"nodeType":102,"data":201,"content":202},{},[203],{"nodeType":101,"value":204,"marks":205,"data":206},"Outdated content - can be rewritten and updated",[],{},{"nodeType":197,"data":208,"content":209},{},[210],{"nodeType":102,"data":211,"content":212},{},[213],{"nodeType":101,"value":214,"marks":215,"data":216},"Outdated content - cannot be rewritten (the topic is no longer relevant)",[],{},{"nodeType":197,"data":218,"content":219},{},[220],{"nodeType":102,"data":221,"content":222},{},[223],{"nodeType":101,"value":224,"marks":225,"data":226},"Subject or style of writing may no longer align with you or your audience",[],{},{"nodeType":228,"data":229,"content":230},"heading-2",{},[231],{"nodeType":101,"value":232,"marks":233,"data":234},"1. Outdated content - can be rewritten and updated",[],{},{"nodeType":102,"data":236,"content":237},{},[238],{"nodeType":101,"value":239,"marks":240,"data":241},"More often than not, an article's subject or content is likely to become old news.",[],{},{"nodeType":102,"data":243,"content":244},{},[245],{"nodeType":101,"value":246,"marks":247,"data":248},"Depending on the subject, the time in which an article is considered outdated can vary wildly. Typically, in tech (the main focus of my blog), the average time a particular thing is considered relevant and modern is 18 months. This means, after 18 months of an article being published on a given subject, at least some of its content may no longer be relevant.",[],{},{"nodeType":102,"data":250,"content":251},{},[252],{"nodeType":101,"value":253,"marks":254,"data":255},"This can be a perfect opportunity to keep your content fresh and your audience trusting your ability to keep up with the times and not show them anything that may no longer be of any use to them.",[],{},{"nodeType":102,"data":257,"content":258},{},[259,263,269],{"nodeType":101,"value":260,"marks":261,"data":262},"There are two ways to rewrite an article, either approach is fine but should be chosen based on preference and the best need for the blog, and both approaches work for articles with a high organic SEO rating that you'll want to maintain - ",[],{},{"nodeType":101,"value":264,"marks":265,"data":268},"the approach you use may vary between different articles and article subjects within the same blog",[266],{"type":267},"italic",{},{"nodeType":101,"value":270,"marks":271,"data":272},".",[],{},{"nodeType":193,"data":274,"content":275},{},[276,286],{"nodeType":197,"data":277,"content":278},{},[279],{"nodeType":102,"data":280,"content":281},{},[282],{"nodeType":101,"value":283,"marks":284,"data":285},"Keep updating the original article keeping it forever evergreen",[],{},{"nodeType":197,"data":287,"content":288},{},[289],{"nodeType":102,"data":290,"content":291},{},[292],{"nodeType":101,"value":293,"marks":294,"data":295},"Writing an entirely new article",[],{},{"nodeType":297,"data":298,"content":299},"heading-3",{},[300],{"nodeType":101,"value":301,"marks":302,"data":303},"1.1 Keep updating the original article keeping it forever evergreen",[],{},{"nodeType":102,"data":305,"content":306},{},[307],{"nodeType":101,"value":308,"marks":309,"data":310},"This approach is the simpler of the two. Essentially, just keep updating and publishing updates and new content to the original article as if it were a \"living document\".",[],{},{"nodeType":102,"data":312,"content":313},{},[314,318],{"nodeType":101,"value":315,"marks":316,"data":317},"This approach only works, though, if you state, at the top of the article, \"Updated on\" with the date and/or time the article was last updated, otherwise, the user won't know how fresh the content is or if the article ever gets updates. This should be stated below the \"Published on\" line to show that this article gets updates. ",[],{},{"nodeType":101,"value":319,"marks":320,"data":322},"You should refrain, however, from displaying \"Updated on\" if an article has never been updated since \"Updated on\" will show the same date as \"Published on\".",[321],{"type":267},{},{"nodeType":102,"data":324,"content":325},{},[326],{"nodeType":101,"value":327,"marks":328,"data":329},"The advantage of this method is there is no need for redirects or SEO management. Just update the article's content, publish it and away you go.",[],{},{"nodeType":102,"data":331,"content":332},{},[333,337,343,347,356,360,365],{"nodeType":101,"value":334,"marks":335,"data":336},"If you're more technical and want an extra potential SEO boost and to improve your article's metadata, you can add the ",[],{},{"nodeType":101,"value":338,"marks":339,"data":342},"article:modified_time",[340],{"type":341},"code",{},{"nodeType":101,"value":344,"marks":345,"data":346}," ",[],{},{"nodeType":348,"data":349,"content":351},"hyperlink",{"uri":350},"https://ogp.me/",[352],{"nodeType":101,"value":353,"marks":354,"data":355},"Open Graph metadata",[],{},{"nodeType":101,"value":357,"marks":358,"data":359}," to the ",[],{},{"nodeType":101,"value":361,"marks":362,"data":364},"\u003Chead>",[363],{"type":341},{},{"nodeType":101,"value":366,"marks":367,"data":368}," of your HTML.",[],{},{"nodeType":102,"data":370,"content":371},{},[372],{"nodeType":101,"value":373,"marks":374,"data":376},"HTML\n\u003Chead>\n \u003Cmeta property=\"og:type\" content=\"article\" />\n \u003Cmeta property=\"article:published_time\" content=\"2021-10-31\" />\n \u003Cmeta property=\"article:modified_time\" content=\"2023-02-16\" />\n\u003C/head>",[375],{"type":341},{},{"nodeType":102,"data":378,"content":379},{},[380],{"nodeType":101,"value":381,"marks":382,"data":383},"The disadvantage to this approach is if your blog is architected to show newer articles towards the top, any articles you update will likely still be low down in the list. This can be easily remedied (if it is considered an issue) by either rearchitecting the order to define new articles as the latest published or latest updated or by adding a more advanced filter/sort functionality.",[],{},{"nodeType":297,"data":385,"content":386},{},[387],{"nodeType":101,"value":388,"marks":389,"data":390},"1.2 Writing an entirely new article",[],{},{"nodeType":102,"data":392,"content":393},{},[394],{"nodeType":101,"value":395,"marks":396,"data":397},"If updating the same article is not for you and you'd rather write an entirely new article, this should be fine. With a little bit more setup, you can rewrite an article and hopefully have no negative SEO impact.",[],{},{"nodeType":102,"data":399,"content":400},{},[401],{"nodeType":101,"value":402,"marks":403,"data":404},"This new article should be written as if it were brand new and not a rewrite, whereby you should not reference or link to the old article.",[],{},{"nodeType":102,"data":406,"content":407},{},[408,412,420],{"nodeType":101,"value":409,"marks":410,"data":411},"So that your article can get the best SEO benefit, it's best to delete the old article and set up a ",[],{},{"nodeType":348,"data":413,"content":415},{"uri":414},"https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301",[416],{"nodeType":101,"value":417,"marks":418,"data":419},"301 (Permanent redirect)",[],{},{"nodeType":101,"value":421,"marks":422,"data":423}," from the old article URL to the new article URL. By setting up a 301 (Permanent redirect), all the SEO \"juice\" that was earned by the old article will be transferred to the new article, and any backlinks that reference the old article will automatically redirect users to the new version of the article.",[],{},{"nodeType":102,"data":425,"content":426},{},[427,431,439,443,451],{"nodeType":101,"value":428,"marks":429,"data":430},"You could alternatively delete the old article and return a ",[],{},{"nodeType":348,"data":432,"content":434},{"uri":433},"https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404",[435],{"nodeType":101,"value":436,"marks":437,"data":438},"404 (Not found)",[],{},{"nodeType":101,"value":440,"marks":441,"data":442}," or a ",[],{},{"nodeType":348,"data":444,"content":446},{"uri":445},"https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/410",[447],{"nodeType":101,"value":448,"marks":449,"data":450},"410 (Gone)",[],{},{"nodeType":101,"value":452,"marks":453,"data":454}," status code, but you won't get the SEO or UX (user experience) benefits that a 301 (Permanent redirect) will give you.",[],{},{"nodeType":102,"data":456,"content":457},{},[458,462,470,474,479,483,487,491,496,500,504],{"nodeType":101,"value":459,"marks":460,"data":461},"If you're absolutely intent on keeping and not deleting the old article, there are some steps you could take to ensure the maximum benefit of the new article, such as adding a link at the top of the old article that directs the user to a newer version of the article and adding a ",[],{},{"nodeType":348,"data":463,"content":465},{"uri":464},"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#attr-canonical",[466],{"nodeType":101,"value":467,"marks":468,"data":469},"canonical link",[],{},{"nodeType":101,"value":471,"marks":472,"data":473}," and the ",[],{},{"nodeType":101,"value":475,"marks":476,"data":478},"article:expiration_time",[477],{"type":341},{},{"nodeType":101,"value":480,"marks":481,"data":482}," Open Graph metadata to the ",[],{},{"nodeType":101,"value":361,"marks":484,"data":486},[485],{"type":341},{},{"nodeType":101,"value":488,"marks":489,"data":490}," of your HTML. The ",[],{},{"nodeType":101,"value":492,"marks":493,"data":495},"canonical",[494],{"type":341},{},{"nodeType":101,"value":497,"marks":498,"data":499}," link tells search engines that this page is the same as a different page and all organic SEO earned by this page should be given to the other URL. The ",[],{},{"nodeType":101,"value":475,"marks":501,"data":503},[502],{"type":341},{},{"nodeType":101,"value":505,"marks":506,"data":507}," Open Graph metadata provides extra information about when the article will expire or is going to expire.",[],{},{"nodeType":102,"data":509,"content":510},{},[511],{"nodeType":101,"value":512,"marks":513,"data":515},"HTML\n\u003Chead>\n \u003Clink rel=\"canonical\" href=\"NEW_ARTICLE_URL\" />\n \u003Cmeta property=\"og:type\" content=\"article\" />\n \u003Cmeta property=\"article:published_time\" content=\"2021-10-31\" />\n \u003Cmeta property=\"article:expiration_time\" content=\"2023-02-16\" />\n\u003C/head>",[514],{"type":341},{},{"nodeType":102,"data":517,"content":518},{},[519],{"nodeType":101,"value":520,"marks":521,"data":522},"The disadvantages to this approach are it may require more setup to properly delete and rewrite an article by adding redirects or metadata, and it could potentially take longer to completely rewrite an article than it would be to update an existing article.",[],{},{"nodeType":228,"data":524,"content":525},{},[526],{"nodeType":101,"value":527,"marks":528,"data":529},"2. Outdated content - cannot be rewritten (the topic is no longer relevant)",[],{},{"nodeType":102,"data":531,"content":532},{},[533],{"nodeType":101,"value":534,"marks":535,"data":536},"For some topics, it is inevitable that they will reach the point where the entire topic is just no longer relevant. It's not worth rewriting, it can't be updated and it's not adding any value to your blog.",[],{},{"nodeType":102,"data":538,"content":539},{},[540],{"nodeType":101,"value":541,"marks":542,"data":543},"Over time, old articles where content has not been updated for a long time can often start harming your site's global SEO rating because search engines see this as not keeping content up to date and showing neglect.",[],{},{"nodeType":102,"data":545,"content":546},{},[547],{"nodeType":101,"value":548,"marks":549,"data":550},"You have two options:",[],{},{"nodeType":193,"data":552,"content":553},{},[554,564],{"nodeType":197,"data":555,"content":556},{},[557],{"nodeType":102,"data":558,"content":559},{},[560],{"nodeType":101,"value":561,"marks":562,"data":563},"Delete the article",[],{},{"nodeType":197,"data":565,"content":566},{},[567],{"nodeType":102,"data":568,"content":569},{},[570],{"nodeType":101,"value":571,"marks":572,"data":573},"Keep the article",[],{},{"nodeType":297,"data":575,"content":576},{},[577],{"nodeType":101,"value":578,"marks":579,"data":580},"2.1 Delete the article",[],{},{"nodeType":102,"data":582,"content":583},{},[584],{"nodeType":101,"value":585,"marks":586,"data":587},"Simply, if the article is providing no value and is not worth rewriting or updating, delete it.",[],{},{"nodeType":102,"data":589,"content":590},{},[591],{"nodeType":101,"value":592,"marks":593,"data":594},"By default, any backlinks to the article will show a 404 (Not found) error to the user. If you want to provide a better user experience, you could change this to return a 410 (Gone) status code and display a nicer error message that may say \"This article has been removed\" rather than the standard \"Page not found\".",[],{},{"nodeType":102,"data":596,"content":597},{},[598],{"nodeType":101,"value":599,"marks":600,"data":601},"Whether you return a 404 (Not found) or a 410 (Gone) status code, according to Google, will not impact SEO any differently.",[],{},{"nodeType":603,"data":604,"content":605},"blockquote",{},[606,613],{"nodeType":102,"data":607,"content":608},{},[609],{"nodeType":101,"value":610,"marks":611,"data":612},"Currently Google treats 410s (Gone) the same as 404s (Not found), so it’s immaterial to us whether you return one or the other.",[],{},{"nodeType":102,"data":614,"content":615},{},[616,620,628],{"nodeType":101,"value":617,"marks":618,"data":619},"- ",[],{},{"nodeType":348,"data":621,"content":623},{"uri":622},"https://developers.google.com/search/blog/2011/05/do-404s-hurt-my-site",[624],{"nodeType":101,"value":625,"marks":626,"data":627},"Google Search Central",[],{},{"nodeType":101,"value":629,"marks":630,"data":631},"",[],{},{"nodeType":297,"data":633,"content":634},{},[635],{"nodeType":101,"value":636,"marks":637,"data":638},"2.2 Keep the article",[],{},{"nodeType":102,"data":640,"content":641},{},[642,646,650,653,657,661,666],{"nodeType":101,"value":643,"marks":644,"data":645},"If you've identified an old, outdated article but you've decided you want to keep it, you could implement an ",[],{},{"nodeType":101,"value":475,"marks":647,"data":649},[648],{"type":341},{},{"nodeType":101,"value":480,"marks":651,"data":652},[],{},{"nodeType":101,"value":361,"marks":654,"data":656},[655],{"type":341},{},{"nodeType":101,"value":658,"marks":659,"data":660}," of the HTML. This ",[],{},{"nodeType":101,"value":662,"marks":663,"data":665},"could",[664],{"type":267},{},{"nodeType":101,"value":667,"marks":668,"data":669}," provide extra information to search engines that you as the author have identified this article as expired, although no one truly knows how search engines rank pages, so this is just an educated guess, but I don't see any negative to adding this metadata.",[],{},{"nodeType":102,"data":671,"content":672},{},[673],{"nodeType":101,"value":674,"marks":675,"data":677},"HTML\n\u003Chead>\n \u003Cmeta property=\"og:type\" content=\"article\" />\n \u003Cmeta property=\"article:published_time\" content=\"2021-10-31\" />\n \u003Cmeta property=\"article:expiration_time\" content=\"2023-02-16\" />\n\u003C/head>",[676],{"type":341},{},{"nodeType":102,"data":679,"content":680},{},[681],{"nodeType":101,"value":682,"marks":683,"data":684},"To improve user experience, you could add a note to the top of the article that the content is now outdated.",[],{},{"nodeType":102,"data":686,"content":687},{},[688],{"nodeType":101,"value":689,"marks":690,"data":691},"If you want to go one step further, you could hide this article from the blog, so users searching for new articles won't be able to see this outdated article. But this would still mean anyone with the URL and backlinks will still work.",[],{},{"nodeType":228,"data":693,"content":694},{},[695],{"nodeType":101,"value":696,"marks":697,"data":698},"3. Subject or style of writing may no longer align with you or your audience",[],{},{"nodeType":102,"data":700,"content":701},{},[702],{"nodeType":101,"value":703,"marks":704,"data":705},"As your blog progresses, your niche, style of writing or attitude may change. This might make some older articles irrelevant to your blog.",[],{},{"nodeType":102,"data":707,"content":708},{},[709],{"nodeType":101,"value":710,"marks":711,"data":712},"It's very common for blogs to take different turns in their niche as they mature. Your audience may have taken a particular liking to a specific niche that some of your older articles may no longer meet.",[],{},{"nodeType":102,"data":714,"content":715},{},[716],{"nodeType":101,"value":717,"marks":718,"data":719},"In this case, it's time for a decision. Do you delete these irrelevant articles? Do you keep them? Do you rewrite them or update them? What you do may vary from article to article.",[],{},{"nodeType":228,"data":721,"content":722},{},[723],{"nodeType":101,"value":724,"marks":725,"data":726},"What do I do?",[],{},{"nodeType":102,"data":728,"content":729},{},[730],{"nodeType":101,"value":731,"marks":732,"data":733},"I tend to do a mixture of all I've mentioned above. There is no set rule, just whatever works for the specific article you're considering cleaning up. So if you ever come across my blog, just know that all the articles on my website may not be all that I've ever written... there are very likely a lot more articles I have deleted than articles that are active on my blog.",[],{},{"nodeType":102,"data":735,"content":736},{},[737,741,748,752,756],{"nodeType":101,"value":738,"marks":739,"data":740},"I post my articles on ",[],{},{"nodeType":348,"data":742,"content":743},{"uri":73},[744],{"nodeType":101,"value":745,"marks":746,"data":747},"jackdomleo.dev/blog",[],{},{"nodeType":101,"value":749,"marks":750,"data":751},", but I used to also cross-post them onto other blogging platforms, such as DEV.to and Hashnode where I would use ",[],{},{"nodeType":101,"value":492,"marks":753,"data":755},[754],{"type":341},{},{"nodeType":101,"value":757,"marks":758,"data":759}," links to send all the SEO \"juice\" from the articles on the blogging platforms straight to the original articles on my website. So when I was cleaning my blog, I had to also remember to clean the blogging platforms I cross-posted to.",[],{},{"nodeType":228,"data":761,"content":762},{},[763],{"nodeType":101,"value":764,"marks":765,"data":766},"TL;DR",[],{},{"nodeType":102,"data":768,"content":769},{},[770],{"nodeType":101,"value":771,"marks":772,"data":773},"Yes, you should clean out your blog and maintain it. It can provide many benefits such as improved SEO and improved user experience. Cleaning your blog does not necessarily mean deleting articles, it simply means keeping on top of your content so your articles can provide the most value to you, your blog and your audience.",[],{},{"Asset":775},[141],{"sys":777,"total":21,"skip":38,"limit":21,"items":778},{"type":37},[779],{"fields":780,"sys":791},{"articleDisclaimer":781},{"data":782,"content":783,"nodeType":117},{},[784],{"data":785,"content":786,"nodeType":102},{},[787],{"data":788,"marks":789,"value":790,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":792,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":794,"total":152,"skip":38,"limit":795,"items":796,"includes":921},{"type":37},1000,[797,829,861,891],{"fields":798,"sys":827},{"title":799,"description":800,"image":801,"tags":823,"publishDate":825,"slug":826},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":802,"sys":805,"fields":815},{"tags":803,"concepts":804},[],[],{"space":806,"id":808,"type":14,"createdAt":809,"updatedAt":810,"environment":811,"publishedVersion":813,"revision":814,"locale":22},{"sys":807},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":812},{"id":18,"type":10,"linkType":19},9,2,{"title":816,"description":816,"file":817},"Pineapple",{"url":818,"details":819,"fileName":822,"contentType":162},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":820,"image":821},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",[824],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":828,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":830,"sys":859},{"title":831,"description":832,"image":833,"tags":854,"publishDate":857,"slug":858},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":834,"sys":837,"fields":845},{"tags":835,"concepts":836},[],[],{"space":838,"id":840,"type":14,"createdAt":841,"updatedAt":841,"environment":842,"publishedVersion":844,"revision":21,"locale":22},{"sys":839},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":843},{"id":18,"type":10,"linkType":19},7,{"title":846,"description":847,"file":848},"When is a clickable div okay","An example modal element",{"url":849,"details":850,"fileName":853,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":851,"image":852},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[855,856,168],"Accessibility","UX","2023-07-18","when-is-a-clickable-div-okay",{"id":860,"type":48},"brxitJC35PyChlVzusyLP",{"fields":862,"sys":889},{"title":863,"description":864,"image":865,"tags":885,"publishDate":887,"slug":888},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":866,"sys":869,"fields":876},{"tags":867,"concepts":868},[],[],{"space":870,"id":872,"type":14,"createdAt":873,"updatedAt":873,"environment":874,"publishedVersion":152,"revision":21,"locale":22},{"sys":871},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":875},{"id":18,"type":10,"linkType":19},{"title":877,"description":878,"file":879},"css=hover-media-query-og","CSS media query for hover",{"url":880,"details":881,"fileName":884,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":882,"image":883},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[886],"CSS","2020-07-06","hover-css-media-query",{"id":890,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"fields":892,"sys":919},{"title":893,"description":894,"image":895,"tags":915,"publishDate":917,"slug":918},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":896,"sys":899,"fields":906},{"tags":897,"concepts":898},[],[],{"space":900,"id":902,"type":14,"createdAt":903,"updatedAt":903,"environment":904,"publishedVersion":844,"revision":21,"locale":22},{"sys":901},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":905},{"id":18,"type":10,"linkType":19},{"title":907,"description":908,"file":909},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":910,"details":911,"fileName":914,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":912,"image":913},6959,{"width":31,"height":32},"neumorphic-design-og.png",[916,886],"Design","2020-05-27","learning-neumorphic-design",{"id":920,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":922},[865,833,801,923,895],{"metadata":924,"sys":927,"fields":932},{"tags":925,"concepts":926},[],[],{"space":928,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":930,"publishedVersion":152,"revision":21,"locale":22},{"sys":929},{"type":10,"linkType":11,"id":12},{"sys":931},{"id":18,"type":10,"linkType":19},{"title":154,"description":155,"file":933},{"url":157,"details":934,"fileName":161,"contentType":162},{"size":159,"image":935},{"width":31,"height":32},1733447471197] \ No newline at end of file +[{"data":1,"prerenderedAt":936},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-should-you-clean-out-your-blog":118,"$rpzcfBTaqR":776,"article-list-should-you-clean-out-your-blog":793},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":774},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"9dijdAHS9ROnOwXit47NQ","2023-02-16T21:37:49.894Z","2024-04-30T18:50:28.239Z",{"sys":132},{"id":18,"type":10,"linkType":19},734,6,{"sys":136},{"type":10,"linkType":57,"id":137},"article",{"title":139,"slug":140,"image":141,"description":163,"publishDate":164,"tags":165,"body":169},"Should you clean out your blog?","should-you-clean-out-your-blog",{"metadata":142,"sys":145,"fields":153},{"tags":143,"concepts":144},[],[],{"space":146,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":150,"publishedVersion":152,"revision":21,"locale":22},{"sys":147},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":151},{"id":18,"type":10,"linkType":19},5,{"title":154,"description":155,"file":156},"clutter","A cluttered office desk",{"url":157,"details":158,"fileName":161,"contentType":162},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":159,"image":160},281805,{"width":31,"height":32},"clutter.jpg","image/jpeg","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.","2023-02-16",[166,167,168],"Tips","Productivity","HTML",{"nodeType":117,"data":170,"content":171},{},[172,178,185,192,227,235,242,249,256,273,296,304,311,323,330,369,377,384,391,398,405,424,455,508,516,523,530,537,544,551,574,581,588,595,602,632,639,670,678,685,692,699,706,713,720,727,734,760,767],{"nodeType":102,"data":173,"content":174},{},[175],{"nodeType":101,"value":163,"marks":176,"data":177},[],{},{"nodeType":102,"data":179,"content":180},{},[181],{"nodeType":101,"value":182,"marks":183,"data":184},"Old and outdated articles are like dust on a coffee table; they're there for everyone to see until you decide to do something about it.",[],{},{"nodeType":102,"data":186,"content":187},{},[188],{"nodeType":101,"value":189,"marks":190,"data":191},"There are three reasons why an article should be considered being cleaned from your blog:",[],{},{"nodeType":193,"data":194,"content":195},"ordered-list",{},[196,207,217],{"nodeType":197,"data":198,"content":199},"list-item",{},[200],{"nodeType":102,"data":201,"content":202},{},[203],{"nodeType":101,"value":204,"marks":205,"data":206},"Outdated content - can be rewritten and updated",[],{},{"nodeType":197,"data":208,"content":209},{},[210],{"nodeType":102,"data":211,"content":212},{},[213],{"nodeType":101,"value":214,"marks":215,"data":216},"Outdated content - cannot be rewritten (the topic is no longer relevant)",[],{},{"nodeType":197,"data":218,"content":219},{},[220],{"nodeType":102,"data":221,"content":222},{},[223],{"nodeType":101,"value":224,"marks":225,"data":226},"Subject or style of writing may no longer align with you or your audience",[],{},{"nodeType":228,"data":229,"content":230},"heading-2",{},[231],{"nodeType":101,"value":232,"marks":233,"data":234},"1. Outdated content - can be rewritten and updated",[],{},{"nodeType":102,"data":236,"content":237},{},[238],{"nodeType":101,"value":239,"marks":240,"data":241},"More often than not, an article's subject or content is likely to become old news.",[],{},{"nodeType":102,"data":243,"content":244},{},[245],{"nodeType":101,"value":246,"marks":247,"data":248},"Depending on the subject, the time in which an article is considered outdated can vary wildly. Typically, in tech (the main focus of my blog), the average time a particular thing is considered relevant and modern is 18 months. This means, after 18 months of an article being published on a given subject, at least some of its content may no longer be relevant.",[],{},{"nodeType":102,"data":250,"content":251},{},[252],{"nodeType":101,"value":253,"marks":254,"data":255},"This can be a perfect opportunity to keep your content fresh and your audience trusting your ability to keep up with the times and not show them anything that may no longer be of any use to them.",[],{},{"nodeType":102,"data":257,"content":258},{},[259,263,269],{"nodeType":101,"value":260,"marks":261,"data":262},"There are two ways to rewrite an article, either approach is fine but should be chosen based on preference and the best need for the blog, and both approaches work for articles with a high organic SEO rating that you'll want to maintain - ",[],{},{"nodeType":101,"value":264,"marks":265,"data":268},"the approach you use may vary between different articles and article subjects within the same blog",[266],{"type":267},"italic",{},{"nodeType":101,"value":270,"marks":271,"data":272},".",[],{},{"nodeType":193,"data":274,"content":275},{},[276,286],{"nodeType":197,"data":277,"content":278},{},[279],{"nodeType":102,"data":280,"content":281},{},[282],{"nodeType":101,"value":283,"marks":284,"data":285},"Keep updating the original article keeping it forever evergreen",[],{},{"nodeType":197,"data":287,"content":288},{},[289],{"nodeType":102,"data":290,"content":291},{},[292],{"nodeType":101,"value":293,"marks":294,"data":295},"Writing an entirely new article",[],{},{"nodeType":297,"data":298,"content":299},"heading-3",{},[300],{"nodeType":101,"value":301,"marks":302,"data":303},"1.1 Keep updating the original article keeping it forever evergreen",[],{},{"nodeType":102,"data":305,"content":306},{},[307],{"nodeType":101,"value":308,"marks":309,"data":310},"This approach is the simpler of the two. Essentially, just keep updating and publishing updates and new content to the original article as if it were a \"living document\".",[],{},{"nodeType":102,"data":312,"content":313},{},[314,318],{"nodeType":101,"value":315,"marks":316,"data":317},"This approach only works, though, if you state, at the top of the article, \"Updated on\" with the date and/or time the article was last updated, otherwise, the user won't know how fresh the content is or if the article ever gets updates. This should be stated below the \"Published on\" line to show that this article gets updates. ",[],{},{"nodeType":101,"value":319,"marks":320,"data":322},"You should refrain, however, from displaying \"Updated on\" if an article has never been updated since \"Updated on\" will show the same date as \"Published on\".",[321],{"type":267},{},{"nodeType":102,"data":324,"content":325},{},[326],{"nodeType":101,"value":327,"marks":328,"data":329},"The advantage of this method is there is no need for redirects or SEO management. Just update the article's content, publish it and away you go.",[],{},{"nodeType":102,"data":331,"content":332},{},[333,337,343,347,356,360,365],{"nodeType":101,"value":334,"marks":335,"data":336},"If you're more technical and want an extra potential SEO boost and to improve your article's metadata, you can add the ",[],{},{"nodeType":101,"value":338,"marks":339,"data":342},"article:modified_time",[340],{"type":341},"code",{},{"nodeType":101,"value":344,"marks":345,"data":346}," ",[],{},{"nodeType":348,"data":349,"content":351},"hyperlink",{"uri":350},"https://ogp.me/",[352],{"nodeType":101,"value":353,"marks":354,"data":355},"Open Graph metadata",[],{},{"nodeType":101,"value":357,"marks":358,"data":359}," to the ",[],{},{"nodeType":101,"value":361,"marks":362,"data":364},"\u003Chead>",[363],{"type":341},{},{"nodeType":101,"value":366,"marks":367,"data":368}," of your HTML.",[],{},{"nodeType":102,"data":370,"content":371},{},[372],{"nodeType":101,"value":373,"marks":374,"data":376},"HTML\n\u003Chead>\n \u003Cmeta property=\"og:type\" content=\"article\" />\n \u003Cmeta property=\"article:published_time\" content=\"2021-10-31\" />\n \u003Cmeta property=\"article:modified_time\" content=\"2023-02-16\" />\n\u003C/head>",[375],{"type":341},{},{"nodeType":102,"data":378,"content":379},{},[380],{"nodeType":101,"value":381,"marks":382,"data":383},"The disadvantage to this approach is if your blog is architected to show newer articles towards the top, any articles you update will likely still be low down in the list. This can be easily remedied (if it is considered an issue) by either rearchitecting the order to define new articles as the latest published or latest updated or by adding a more advanced filter/sort functionality.",[],{},{"nodeType":297,"data":385,"content":386},{},[387],{"nodeType":101,"value":388,"marks":389,"data":390},"1.2 Writing an entirely new article",[],{},{"nodeType":102,"data":392,"content":393},{},[394],{"nodeType":101,"value":395,"marks":396,"data":397},"If updating the same article is not for you and you'd rather write an entirely new article, this should be fine. With a little bit more setup, you can rewrite an article and hopefully have no negative SEO impact.",[],{},{"nodeType":102,"data":399,"content":400},{},[401],{"nodeType":101,"value":402,"marks":403,"data":404},"This new article should be written as if it were brand new and not a rewrite, whereby you should not reference or link to the old article.",[],{},{"nodeType":102,"data":406,"content":407},{},[408,412,420],{"nodeType":101,"value":409,"marks":410,"data":411},"So that your article can get the best SEO benefit, it's best to delete the old article and set up a ",[],{},{"nodeType":348,"data":413,"content":415},{"uri":414},"https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301",[416],{"nodeType":101,"value":417,"marks":418,"data":419},"301 (Permanent redirect)",[],{},{"nodeType":101,"value":421,"marks":422,"data":423}," from the old article URL to the new article URL. By setting up a 301 (Permanent redirect), all the SEO \"juice\" that was earned by the old article will be transferred to the new article, and any backlinks that reference the old article will automatically redirect users to the new version of the article.",[],{},{"nodeType":102,"data":425,"content":426},{},[427,431,439,443,451],{"nodeType":101,"value":428,"marks":429,"data":430},"You could alternatively delete the old article and return a ",[],{},{"nodeType":348,"data":432,"content":434},{"uri":433},"https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404",[435],{"nodeType":101,"value":436,"marks":437,"data":438},"404 (Not found)",[],{},{"nodeType":101,"value":440,"marks":441,"data":442}," or a ",[],{},{"nodeType":348,"data":444,"content":446},{"uri":445},"https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/410",[447],{"nodeType":101,"value":448,"marks":449,"data":450},"410 (Gone)",[],{},{"nodeType":101,"value":452,"marks":453,"data":454}," status code, but you won't get the SEO or UX (user experience) benefits that a 301 (Permanent redirect) will give you.",[],{},{"nodeType":102,"data":456,"content":457},{},[458,462,470,474,479,483,487,491,496,500,504],{"nodeType":101,"value":459,"marks":460,"data":461},"If you're absolutely intent on keeping and not deleting the old article, there are some steps you could take to ensure the maximum benefit of the new article, such as adding a link at the top of the old article that directs the user to a newer version of the article and adding a ",[],{},{"nodeType":348,"data":463,"content":465},{"uri":464},"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#attr-canonical",[466],{"nodeType":101,"value":467,"marks":468,"data":469},"canonical link",[],{},{"nodeType":101,"value":471,"marks":472,"data":473}," and the ",[],{},{"nodeType":101,"value":475,"marks":476,"data":478},"article:expiration_time",[477],{"type":341},{},{"nodeType":101,"value":480,"marks":481,"data":482}," Open Graph metadata to the ",[],{},{"nodeType":101,"value":361,"marks":484,"data":486},[485],{"type":341},{},{"nodeType":101,"value":488,"marks":489,"data":490}," of your HTML. The ",[],{},{"nodeType":101,"value":492,"marks":493,"data":495},"canonical",[494],{"type":341},{},{"nodeType":101,"value":497,"marks":498,"data":499}," link tells search engines that this page is the same as a different page and all organic SEO earned by this page should be given to the other URL. The ",[],{},{"nodeType":101,"value":475,"marks":501,"data":503},[502],{"type":341},{},{"nodeType":101,"value":505,"marks":506,"data":507}," Open Graph metadata provides extra information about when the article will expire or is going to expire.",[],{},{"nodeType":102,"data":509,"content":510},{},[511],{"nodeType":101,"value":512,"marks":513,"data":515},"HTML\n\u003Chead>\n \u003Clink rel=\"canonical\" href=\"NEW_ARTICLE_URL\" />\n \u003Cmeta property=\"og:type\" content=\"article\" />\n \u003Cmeta property=\"article:published_time\" content=\"2021-10-31\" />\n \u003Cmeta property=\"article:expiration_time\" content=\"2023-02-16\" />\n\u003C/head>",[514],{"type":341},{},{"nodeType":102,"data":517,"content":518},{},[519],{"nodeType":101,"value":520,"marks":521,"data":522},"The disadvantages to this approach are it may require more setup to properly delete and rewrite an article by adding redirects or metadata, and it could potentially take longer to completely rewrite an article than it would be to update an existing article.",[],{},{"nodeType":228,"data":524,"content":525},{},[526],{"nodeType":101,"value":527,"marks":528,"data":529},"2. Outdated content - cannot be rewritten (the topic is no longer relevant)",[],{},{"nodeType":102,"data":531,"content":532},{},[533],{"nodeType":101,"value":534,"marks":535,"data":536},"For some topics, it is inevitable that they will reach the point where the entire topic is just no longer relevant. It's not worth rewriting, it can't be updated and it's not adding any value to your blog.",[],{},{"nodeType":102,"data":538,"content":539},{},[540],{"nodeType":101,"value":541,"marks":542,"data":543},"Over time, old articles where content has not been updated for a long time can often start harming your site's global SEO rating because search engines see this as not keeping content up to date and showing neglect.",[],{},{"nodeType":102,"data":545,"content":546},{},[547],{"nodeType":101,"value":548,"marks":549,"data":550},"You have two options:",[],{},{"nodeType":193,"data":552,"content":553},{},[554,564],{"nodeType":197,"data":555,"content":556},{},[557],{"nodeType":102,"data":558,"content":559},{},[560],{"nodeType":101,"value":561,"marks":562,"data":563},"Delete the article",[],{},{"nodeType":197,"data":565,"content":566},{},[567],{"nodeType":102,"data":568,"content":569},{},[570],{"nodeType":101,"value":571,"marks":572,"data":573},"Keep the article",[],{},{"nodeType":297,"data":575,"content":576},{},[577],{"nodeType":101,"value":578,"marks":579,"data":580},"2.1 Delete the article",[],{},{"nodeType":102,"data":582,"content":583},{},[584],{"nodeType":101,"value":585,"marks":586,"data":587},"Simply, if the article is providing no value and is not worth rewriting or updating, delete it.",[],{},{"nodeType":102,"data":589,"content":590},{},[591],{"nodeType":101,"value":592,"marks":593,"data":594},"By default, any backlinks to the article will show a 404 (Not found) error to the user. If you want to provide a better user experience, you could change this to return a 410 (Gone) status code and display a nicer error message that may say \"This article has been removed\" rather than the standard \"Page not found\".",[],{},{"nodeType":102,"data":596,"content":597},{},[598],{"nodeType":101,"value":599,"marks":600,"data":601},"Whether you return a 404 (Not found) or a 410 (Gone) status code, according to Google, will not impact SEO any differently.",[],{},{"nodeType":603,"data":604,"content":605},"blockquote",{},[606,613],{"nodeType":102,"data":607,"content":608},{},[609],{"nodeType":101,"value":610,"marks":611,"data":612},"Currently Google treats 410s (Gone) the same as 404s (Not found), so it’s immaterial to us whether you return one or the other.",[],{},{"nodeType":102,"data":614,"content":615},{},[616,620,628],{"nodeType":101,"value":617,"marks":618,"data":619},"- ",[],{},{"nodeType":348,"data":621,"content":623},{"uri":622},"https://developers.google.com/search/blog/2011/05/do-404s-hurt-my-site",[624],{"nodeType":101,"value":625,"marks":626,"data":627},"Google Search Central",[],{},{"nodeType":101,"value":629,"marks":630,"data":631},"",[],{},{"nodeType":297,"data":633,"content":634},{},[635],{"nodeType":101,"value":636,"marks":637,"data":638},"2.2 Keep the article",[],{},{"nodeType":102,"data":640,"content":641},{},[642,646,650,653,657,661,666],{"nodeType":101,"value":643,"marks":644,"data":645},"If you've identified an old, outdated article but you've decided you want to keep it, you could implement an ",[],{},{"nodeType":101,"value":475,"marks":647,"data":649},[648],{"type":341},{},{"nodeType":101,"value":480,"marks":651,"data":652},[],{},{"nodeType":101,"value":361,"marks":654,"data":656},[655],{"type":341},{},{"nodeType":101,"value":658,"marks":659,"data":660}," of the HTML. This ",[],{},{"nodeType":101,"value":662,"marks":663,"data":665},"could",[664],{"type":267},{},{"nodeType":101,"value":667,"marks":668,"data":669}," provide extra information to search engines that you as the author have identified this article as expired, although no one truly knows how search engines rank pages, so this is just an educated guess, but I don't see any negative to adding this metadata.",[],{},{"nodeType":102,"data":671,"content":672},{},[673],{"nodeType":101,"value":674,"marks":675,"data":677},"HTML\n\u003Chead>\n \u003Cmeta property=\"og:type\" content=\"article\" />\n \u003Cmeta property=\"article:published_time\" content=\"2021-10-31\" />\n \u003Cmeta property=\"article:expiration_time\" content=\"2023-02-16\" />\n\u003C/head>",[676],{"type":341},{},{"nodeType":102,"data":679,"content":680},{},[681],{"nodeType":101,"value":682,"marks":683,"data":684},"To improve user experience, you could add a note to the top of the article that the content is now outdated.",[],{},{"nodeType":102,"data":686,"content":687},{},[688],{"nodeType":101,"value":689,"marks":690,"data":691},"If you want to go one step further, you could hide this article from the blog, so users searching for new articles won't be able to see this outdated article. But this would still mean anyone with the URL and backlinks will still work.",[],{},{"nodeType":228,"data":693,"content":694},{},[695],{"nodeType":101,"value":696,"marks":697,"data":698},"3. Subject or style of writing may no longer align with you or your audience",[],{},{"nodeType":102,"data":700,"content":701},{},[702],{"nodeType":101,"value":703,"marks":704,"data":705},"As your blog progresses, your niche, style of writing or attitude may change. This might make some older articles irrelevant to your blog.",[],{},{"nodeType":102,"data":707,"content":708},{},[709],{"nodeType":101,"value":710,"marks":711,"data":712},"It's very common for blogs to take different turns in their niche as they mature. Your audience may have taken a particular liking to a specific niche that some of your older articles may no longer meet.",[],{},{"nodeType":102,"data":714,"content":715},{},[716],{"nodeType":101,"value":717,"marks":718,"data":719},"In this case, it's time for a decision. Do you delete these irrelevant articles? Do you keep them? Do you rewrite them or update them? What you do may vary from article to article.",[],{},{"nodeType":228,"data":721,"content":722},{},[723],{"nodeType":101,"value":724,"marks":725,"data":726},"What do I do?",[],{},{"nodeType":102,"data":728,"content":729},{},[730],{"nodeType":101,"value":731,"marks":732,"data":733},"I tend to do a mixture of all I've mentioned above. There is no set rule, just whatever works for the specific article you're considering cleaning up. So if you ever come across my blog, just know that all the articles on my website may not be all that I've ever written... there are very likely a lot more articles I have deleted than articles that are active on my blog.",[],{},{"nodeType":102,"data":735,"content":736},{},[737,741,748,752,756],{"nodeType":101,"value":738,"marks":739,"data":740},"I post my articles on ",[],{},{"nodeType":348,"data":742,"content":743},{"uri":73},[744],{"nodeType":101,"value":745,"marks":746,"data":747},"jackdomleo.dev/blog",[],{},{"nodeType":101,"value":749,"marks":750,"data":751},", but I used to also cross-post them onto other blogging platforms, such as DEV.to and Hashnode where I would use ",[],{},{"nodeType":101,"value":492,"marks":753,"data":755},[754],{"type":341},{},{"nodeType":101,"value":757,"marks":758,"data":759}," links to send all the SEO \"juice\" from the articles on the blogging platforms straight to the original articles on my website. So when I was cleaning my blog, I had to also remember to clean the blogging platforms I cross-posted to.",[],{},{"nodeType":228,"data":761,"content":762},{},[763],{"nodeType":101,"value":764,"marks":765,"data":766},"TL;DR",[],{},{"nodeType":102,"data":768,"content":769},{},[770],{"nodeType":101,"value":771,"marks":772,"data":773},"Yes, you should clean out your blog and maintain it. It can provide many benefits such as improved SEO and improved user experience. Cleaning your blog does not necessarily mean deleting articles, it simply means keeping on top of your content so your articles can provide the most value to you, your blog and your audience.",[],{},{"Asset":775},[141],{"sys":777,"total":21,"skip":38,"limit":21,"items":778},{"type":37},[779],{"fields":780,"sys":791},{"articleDisclaimer":781},{"data":782,"content":783,"nodeType":117},{},[784],{"data":785,"content":786,"nodeType":102},{},[787],{"data":788,"marks":789,"value":790,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":792,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":794,"total":152,"skip":38,"limit":795,"items":796,"includes":921},{"type":37},1000,[797,829,861,891],{"fields":798,"sys":827},{"title":799,"description":800,"image":801,"tags":823,"publishDate":825,"slug":826},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":802,"sys":805,"fields":815},{"tags":803,"concepts":804},[],[],{"space":806,"id":808,"type":14,"createdAt":809,"updatedAt":810,"environment":811,"publishedVersion":813,"revision":814,"locale":22},{"sys":807},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":812},{"id":18,"type":10,"linkType":19},9,2,{"title":816,"description":816,"file":817},"Pineapple",{"url":818,"details":819,"fileName":822,"contentType":162},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":820,"image":821},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",[824],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":828,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":830,"sys":859},{"title":831,"description":832,"image":833,"tags":854,"publishDate":857,"slug":858},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":834,"sys":837,"fields":845},{"tags":835,"concepts":836},[],[],{"space":838,"id":840,"type":14,"createdAt":841,"updatedAt":841,"environment":842,"publishedVersion":844,"revision":21,"locale":22},{"sys":839},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":843},{"id":18,"type":10,"linkType":19},7,{"title":846,"description":847,"file":848},"When is a clickable div okay","An example modal element",{"url":849,"details":850,"fileName":853,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":851,"image":852},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[855,856,168],"Accessibility","UX","2023-07-18","when-is-a-clickable-div-okay",{"id":860,"type":48},"brxitJC35PyChlVzusyLP",{"fields":862,"sys":889},{"title":863,"description":864,"image":865,"tags":885,"publishDate":887,"slug":888},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":866,"sys":869,"fields":876},{"tags":867,"concepts":868},[],[],{"space":870,"id":872,"type":14,"createdAt":873,"updatedAt":873,"environment":874,"publishedVersion":152,"revision":21,"locale":22},{"sys":871},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":875},{"id":18,"type":10,"linkType":19},{"title":877,"description":878,"file":879},"css=hover-media-query-og","CSS media query for hover",{"url":880,"details":881,"fileName":884,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":882,"image":883},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[886],"CSS","2020-07-06","hover-css-media-query",{"id":890,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"fields":892,"sys":919},{"title":893,"description":894,"image":895,"tags":915,"publishDate":917,"slug":918},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":896,"sys":899,"fields":906},{"tags":897,"concepts":898},[],[],{"space":900,"id":902,"type":14,"createdAt":903,"updatedAt":903,"environment":904,"publishedVersion":844,"revision":21,"locale":22},{"sys":901},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":905},{"id":18,"type":10,"linkType":19},{"title":907,"description":908,"file":909},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":910,"details":911,"fileName":914,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":912,"image":913},6959,{"width":31,"height":32},"neumorphic-design-og.png",[916,886],"Design","2020-05-27","learning-neumorphic-design",{"id":920,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":922},[865,833,801,923,895],{"metadata":924,"sys":927,"fields":932},{"tags":925,"concepts":926},[],[],{"space":928,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":930,"publishedVersion":152,"revision":21,"locale":22},{"sys":929},{"type":10,"linkType":11,"id":12},{"sys":931},{"id":18,"type":10,"linkType":19},{"title":154,"description":155,"file":933},{"url":157,"details":934,"fileName":161,"contentType":162},{"size":159,"image":935},{"width":31,"height":32},1733533838286] \ No newline at end of file diff --git a/blog/2023/should-you-clean-out-your-blog/index.html b/blog/2023/should-you-clean-out-your-blog/index.html index 26994b6fb..5069d8eb3 100644 --- a/blog/2023/should-you-clean-out-your-blog/index.html +++ b/blog/2023/should-you-clean-out-your-blog/index.html @@ -22,7 +22,7 @@ - + @@ -95,5 +95,5 @@ <meta property="og:type" content="article" /> <meta property="article:published_time" content="2021-10-31" /> <meta property="article:expiration_time" content="2023-02-16" /> -</head>

To improve user experience, you could add a note to the top of the article that the content is now outdated.

If you want to go one step further, you could hide this article from the blog, so users searching for new articles won't be able to see this outdated article. But this would still mean anyone with the URL and backlinks will still work.

3. Subject or style of writing may no longer align with you or your audience

As your blog progresses, your niche, style of writing or attitude may change. This might make some older articles irrelevant to your blog.

It's very common for blogs to take different turns in their niche as they mature. Your audience may have taken a particular liking to a specific niche that some of your older articles may no longer meet.

In this case, it's time for a decision. Do you delete these irrelevant articles? Do you keep them? Do you rewrite them or update them? What you do may vary from article to article.

What do I do?

I tend to do a mixture of all I've mentioned above. There is no set rule, just whatever works for the specific article you're considering cleaning up. So if you ever come across my blog, just know that all the articles on my website may not be all that I've ever written... there are very likely a lot more articles I have deleted than articles that are active on my blog.

I post my articles on jackdomleo.dev/blog, but I used to also cross-post them onto other blogging platforms, such as DEV.to and Hashnode where I would use canonical links to send all the SEO "juice" from the articles on the blogging platforms straight to the original articles on my website. So when I was cleaning my blog, I had to also remember to clean the blogging platforms I cross-posted to.

TL;DR

Yes, you should clean out your blog and maintain it. It can provide many benefits such as improved SEO and improved user experience. Cleaning your blog does not necessarily mean deleting articles, it simply means keeping on top of your content so your articles can provide the most value to you, your blog and your audience.

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

- \ No newline at end of file +</head>

To improve user experience, you could add a note to the top of the article that the content is now outdated.

If you want to go one step further, you could hide this article from the blog, so users searching for new articles won't be able to see this outdated article. But this would still mean anyone with the URL and backlinks will still work.

3. Subject or style of writing may no longer align with you or your audience

As your blog progresses, your niche, style of writing or attitude may change. This might make some older articles irrelevant to your blog.

It's very common for blogs to take different turns in their niche as they mature. Your audience may have taken a particular liking to a specific niche that some of your older articles may no longer meet.

In this case, it's time for a decision. Do you delete these irrelevant articles? Do you keep them? Do you rewrite them or update them? What you do may vary from article to article.

What do I do?

I tend to do a mixture of all I've mentioned above. There is no set rule, just whatever works for the specific article you're considering cleaning up. So if you ever come across my blog, just know that all the articles on my website may not be all that I've ever written... there are very likely a lot more articles I have deleted than articles that are active on my blog.

I post my articles on jackdomleo.dev/blog, but I used to also cross-post them onto other blogging platforms, such as DEV.to and Hashnode where I would use canonical links to send all the SEO "juice" from the articles on the blogging platforms straight to the original articles on my website. So when I was cleaning my blog, I had to also remember to clean the blogging platforms I cross-posted to.

TL;DR

Yes, you should clean out your blog and maintain it. It can provide many benefits such as improved SEO and improved user experience. Cleaning your blog does not necessarily mean deleting articles, it simply means keeping on top of your content so your articles can provide the most value to you, your blog and your audience.

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

+ \ No newline at end of file diff --git a/blog/2023/when-is-a-clickable-div-okay/_payload.json b/blog/2023/when-is-a-clickable-div-okay/_payload.json index 4947989ff..d975e2b3d 100644 --- a/blog/2023/when-is-a-clickable-div-okay/_payload.json +++ b/blog/2023/when-is-a-clickable-div-okay/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":648},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-when-is-a-clickable-div-okay":118,"$rpzcfBTaqR":488,"article-list-when-is-a-clickable-div-okay":505},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":486},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"brxitJC35PyChlVzusyLP","2023-07-18T19:03:23.464Z","2023-07-18T19:37:51.212Z",{"sys":132},{"id":18,"type":10,"linkType":19},262,2,{"sys":136},{"type":10,"linkType":57,"id":137},"article",{"title":139,"slug":140,"image":141,"description":162,"publishDate":163,"tags":164,"body":168},"When is a clickable div okay?","when-is-a-clickable-div-okay",{"metadata":142,"sys":145,"fields":153},{"tags":143,"concepts":144},[],[],{"space":146,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":150,"publishedVersion":152,"revision":21,"locale":22},{"sys":147},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":151},{"id":18,"type":10,"linkType":19},7,{"title":154,"description":155,"file":156},"When is a clickable div okay","An example modal element",{"url":157,"details":158,"fileName":161,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":159,"image":160},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?","2023-07-18",[165,166,167],"Accessibility","UX","HTML",{"nodeType":117,"data":169,"content":170},{},[171,191,199,224,256,290,297,304,311,318,336,343,387,402,427,458,465],{"nodeType":102,"data":172,"content":173},{},[174,178,187],{"nodeType":101,"value":175,"marks":176,"data":177},"A ",[],{},{"nodeType":179,"data":180,"content":182},"hyperlink",{"uri":181},"https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event",[183],{"nodeType":101,"value":184,"marks":185,"data":186},"click event",[],{},{"nodeType":101,"value":188,"marks":189,"data":190}," is an event listener that listens for a user's click (or a tap if on a touchscreen device), and then some custom JavaScript can be run once triggered. JavaScript and HTML allow us to put click events on any HTML element, but just because we can doesn't mean we should.",[],{},{"nodeType":192,"data":193,"content":194},"heading-2",{},[195],{"nodeType":101,"value":196,"marks":197,"data":198},"Why is putting a click event on a div a bad idea?",[],{},{"nodeType":102,"data":200,"content":201},{},[202,206,212,216,220],{"nodeType":101,"value":203,"marks":204,"data":205},"There are countless articles on the web advising not to put click events on ",[],{},{"nodeType":101,"value":207,"marks":208,"data":211},"\u003Cdiv>",[209],{"type":210},"code",{},{"nodeType":101,"value":213,"marks":214,"data":215}," HTML elements, but that's not the focus of this article, this article is quite the opposite so here is a TL;DR of why you should not put click events on ",[],{},{"nodeType":101,"value":207,"marks":217,"data":219},[218],{"type":210},{},{"nodeType":101,"value":221,"marks":222,"data":223}," HTML elements.",[],{},{"nodeType":102,"data":225,"content":226},{},[227,230,234,238,243,247,252],{"nodeType":101,"value":175,"marks":228,"data":229},[],{},{"nodeType":101,"value":207,"marks":231,"data":233},[232],{"type":210},{},{"nodeType":101,"value":235,"marks":236,"data":237}," HTML element, with no ",[],{},{"nodeType":101,"value":239,"marks":240,"data":242},"role",[241],{"type":210},{},{"nodeType":101,"value":244,"marks":245,"data":246}," attribute, is semantic-less: i.e. it has no semantic value at all, it solely exists for layout and styling purposes. This means, screenreaders or tabbing on a keyboard for example, will completely skip all semantic-less elements. A ",[],{},{"nodeType":101,"value":248,"marks":249,"data":251},"\u003Cspan>",[250],{"type":210},{},{"nodeType":101,"value":253,"marks":254,"data":255}," is also a semantic-less HTML element. If these elements are being skipped, users who rely on screenreaders or keyboards are going to have a difficult time interacting with your element (hint: they won't be able to at all).",[],{},{"nodeType":102,"data":257,"content":258},{},[259,263,268,272,277,281,286],{"nodeType":101,"value":260,"marks":261,"data":262},"You could put ",[],{},{"nodeType":101,"value":264,"marks":265,"data":267},"tabindex=\"0\"",[266],{"type":210},{},{"nodeType":101,"value":269,"marks":270,"data":271}," on the semantic-less element, meaning keyboards can now focus the element, but you lose so much other semantic value by not using the correct HTML in the first place: ",[],{},{"nodeType":101,"value":273,"marks":274,"data":276},"\u003Cbutton onclick=\"\">...\u003C/button>",[275],{"type":210},{},{"nodeType":101,"value":278,"marks":279,"data":280}," (recommended) or ",[],{},{"nodeType":101,"value":282,"marks":283,"data":285},"\u003Cdiv role=\"button\" onclick=\"\">...\u003C/div>",[284],{"type":210},{},{"nodeType":101,"value":287,"marks":288,"data":289},".",[],{},{"nodeType":102,"data":291,"content":292},{},[293],{"nodeType":101,"value":294,"marks":295,"data":296},"You can, by all means, put a click event on any element, you just need to ensure you're using the click event correctly and wisely.",[],{},{"nodeType":192,"data":298,"content":299},{},[300],{"nodeType":101,"value":301,"marks":302,"data":303},"When is it okay to put a click event on a div?",[],{},{"nodeType":102,"data":305,"content":306},{},[307],{"nodeType":101,"value":308,"marks":309,"data":310},"Now that we know it is taboo to put click events on semantic-less elements, let's explore a scenario where it would be considered perfectly fine to put a click event on a semantic-less element.",[],{},{"nodeType":102,"data":312,"content":313},{},[314],{"nodeType":101,"value":315,"marks":316,"data":317},"Behold... The Mighty Modal!",[],{},{"nodeType":102,"data":319,"content":320},{},[321,325,333],{"nodeType":101,"value":322,"marks":323,"data":324},"",[],{},{"nodeType":179,"data":326,"content":328},{"uri":327},"https://codepen.io/jackdomleo7/embed/yLJLOQr",[329],{"nodeType":101,"value":330,"marks":331,"data":332},"CodePen: A11y modal",[],{},{"nodeType":101,"value":322,"marks":334,"data":335},[],{},{"nodeType":102,"data":337,"content":338},{},[339],{"nodeType":101,"value":340,"marks":341,"data":342},"A modal is a fancy name for a pop-up window. When we consider a modal, as users, we typically assume there are 3 methods to close the modal:",[],{},{"nodeType":344,"data":345,"content":346},"ordered-list",{},[347,358,368],{"nodeType":348,"data":349,"content":350},"list-item",{},[351],{"nodeType":102,"data":352,"content":353},{},[354],{"nodeType":101,"value":355,"marks":356,"data":357},"Clicking the cross in the top corner",[],{},{"nodeType":348,"data":359,"content":360},{},[361],{"nodeType":102,"data":362,"content":363},{},[364],{"nodeType":101,"value":365,"marks":366,"data":367},"Clicking the greyed-out area behind the modal",[],{},{"nodeType":348,"data":369,"content":370},{},[371],{"nodeType":102,"data":372,"content":373},{},[374,378,383],{"nodeType":101,"value":375,"marks":376,"data":377},"Pressing the ",[],{},{"nodeType":101,"value":379,"marks":380,"data":382},"Esc",[381],{"type":210},{},{"nodeType":101,"value":384,"marks":385,"data":386}," key on the keyboard",[],{},{"nodeType":102,"data":388,"content":389},{},[390,394,398],{"nodeType":101,"value":391,"marks":392,"data":393},"There may also be a \"Cancel\", \"Close\" or similar call-to-action button on the modal. In this case, we can ignore the ",[],{},{"nodeType":101,"value":379,"marks":395,"data":397},[396],{"type":210},{},{"nodeType":101,"value":399,"marks":400,"data":401}," key method, since this is not related to clicking.",[],{},{"nodeType":102,"data":403,"content":404},{},[405,409,414,418,423],{"nodeType":101,"value":406,"marks":407,"data":408},"So, the 2 ways a user can close a modal by clicking is by clicking the cross, and by clicking the greyed-out area. The cross should obviously be a ",[],{},{"nodeType":101,"value":410,"marks":411,"data":413},"\u003Cbutton>X\u003C/button>",[412],{"type":210},{},{"nodeType":101,"value":415,"marks":416,"data":417}," since it is a user action. But what about the greyed-out area, should this be a ",[],{},{"nodeType":101,"value":419,"marks":420,"data":422},"button",[421],{"type":210},{},{"nodeType":101,"value":424,"marks":425,"data":426}," element too?",[],{},{"nodeType":102,"data":428,"content":429},{},[430,434,438,442,446,450,454],{"nodeType":101,"value":431,"marks":432,"data":433},"It could be a ",[],{},{"nodeType":101,"value":419,"marks":435,"data":437},[436],{"type":210},{},{"nodeType":101,"value":439,"marks":440,"data":441}," element, but it would make the code look ugly and it isn't really necessary in this case. For this modal to be considered accessible, it needs at least 1 way for each type of user to close the modal. We have a semantic ",[],{},{"nodeType":101,"value":419,"marks":443,"data":445},[444],{"type":210},{},{"nodeType":101,"value":447,"marks":448,"data":449}," element for the cross that a user can click or tab to, and we have the ",[],{},{"nodeType":101,"value":379,"marks":451,"data":453},[452],{"type":210},{},{"nodeType":101,"value":455,"marks":456,"data":457}," key handler for keyboard users. This should cover the majority of users if not all.",[],{},{"nodeType":102,"data":459,"content":460},{},[461],{"nodeType":101,"value":462,"marks":463,"data":464},"Clicking the greyed-out area is a nice-to-have minor UX (user experience) improvement. A user who relies on semantic elements so that they can be identified by screenreaders and keyboards is not going to expect that they can interact with the greyed-out area, it might actually confuse them more if they see a huge focus ring around the entire greyed-out section, causing poorer UX for these users since they may not associate it with closing the modal.",[],{},{"nodeType":102,"data":466,"content":467},{},[468,472,477,482],{"nodeType":101,"value":469,"marks":470,"data":471},"In this case, we can add a nice simple ",[],{},{"nodeType":101,"value":473,"marks":474,"data":476},"\u003Cdiv onclick=\"\">\u003C",[475],{"type":210},{},{"nodeType":101,"value":478,"marks":479,"data":481},"/div>",[480],{"type":210},{},{"nodeType":101,"value":483,"marks":484,"data":485}," for the greyed-out area and not have to worry about harming accessibility. Simple.",[],{},{"Asset":487},[141],{"sys":489,"total":21,"skip":38,"limit":21,"items":490},{"type":37},[491],{"fields":492,"sys":503},{"articleDisclaimer":493},{"data":494,"content":495,"nodeType":117},{},[496],{"data":497,"content":498,"nodeType":102},{},[499],{"data":500,"marks":501,"value":502,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":504,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":506,"total":507,"skip":38,"limit":508,"items":509,"includes":633},{"type":37},5,1000,[510,542,573,603],{"fields":511,"sys":540},{"title":512,"description":513,"image":514,"tags":536,"publishDate":538,"slug":539},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":515,"sys":518,"fields":527},{"tags":516,"concepts":517},[],[],{"space":519,"id":521,"type":14,"createdAt":522,"updatedAt":523,"environment":524,"publishedVersion":526,"revision":134,"locale":22},{"sys":520},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":525},{"id":18,"type":10,"linkType":19},9,{"title":528,"description":528,"file":529},"Pineapple",{"url":530,"details":531,"fileName":534,"contentType":535},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":532,"image":533},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg",[537],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":541,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":543,"sys":571},{"title":544,"description":545,"image":546,"tags":566,"publishDate":569,"slug":570},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":547,"sys":550,"fields":557},{"tags":548,"concepts":549},[],[],{"space":551,"id":553,"type":14,"createdAt":554,"updatedAt":554,"environment":555,"publishedVersion":507,"revision":21,"locale":22},{"sys":552},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":556},{"id":18,"type":10,"linkType":19},{"title":558,"description":559,"file":560},"clutter","A cluttered office desk",{"url":561,"details":562,"fileName":565,"contentType":535},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":563,"image":564},281805,{"width":31,"height":32},"clutter.jpg",[567,568,167],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":572,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":574,"sys":601},{"title":575,"description":576,"image":577,"tags":597,"publishDate":599,"slug":600},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":578,"sys":581,"fields":588},{"tags":579,"concepts":580},[],[],{"space":582,"id":584,"type":14,"createdAt":585,"updatedAt":585,"environment":586,"publishedVersion":507,"revision":21,"locale":22},{"sys":583},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":587},{"id":18,"type":10,"linkType":19},{"title":589,"description":590,"file":591},"css=hover-media-query-og","CSS media query for hover",{"url":592,"details":593,"fileName":596,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":594,"image":595},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[598],"CSS","2020-07-06","hover-css-media-query",{"id":602,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"fields":604,"sys":631},{"title":605,"description":606,"image":607,"tags":627,"publishDate":629,"slug":630},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":608,"sys":611,"fields":618},{"tags":609,"concepts":610},[],[],{"space":612,"id":614,"type":14,"createdAt":615,"updatedAt":615,"environment":616,"publishedVersion":152,"revision":21,"locale":22},{"sys":613},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":617},{"id":18,"type":10,"linkType":19},{"title":619,"description":620,"file":621},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":622,"details":623,"fileName":626,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":624,"image":625},6959,{"width":31,"height":32},"neumorphic-design-og.png",[628,598],"Design","2020-05-27","learning-neumorphic-design",{"id":632,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":634},[577,635,514,546,607],{"metadata":636,"sys":639,"fields":644},{"tags":637,"concepts":638},[],[],{"space":640,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":642,"publishedVersion":152,"revision":21,"locale":22},{"sys":641},{"type":10,"linkType":11,"id":12},{"sys":643},{"id":18,"type":10,"linkType":19},{"title":154,"description":155,"file":645},{"url":157,"details":646,"fileName":161,"contentType":34},{"size":159,"image":647},{"width":31,"height":32},1733447471197] \ No newline at end of file +[{"data":1,"prerenderedAt":648},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-when-is-a-clickable-div-okay":118,"$rpzcfBTaqR":488,"article-list-when-is-a-clickable-div-okay":505},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":486},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"brxitJC35PyChlVzusyLP","2023-07-18T19:03:23.464Z","2023-07-18T19:37:51.212Z",{"sys":132},{"id":18,"type":10,"linkType":19},262,2,{"sys":136},{"type":10,"linkType":57,"id":137},"article",{"title":139,"slug":140,"image":141,"description":162,"publishDate":163,"tags":164,"body":168},"When is a clickable div okay?","when-is-a-clickable-div-okay",{"metadata":142,"sys":145,"fields":153},{"tags":143,"concepts":144},[],[],{"space":146,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":150,"publishedVersion":152,"revision":21,"locale":22},{"sys":147},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":151},{"id":18,"type":10,"linkType":19},7,{"title":154,"description":155,"file":156},"When is a clickable div okay","An example modal element",{"url":157,"details":158,"fileName":161,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":159,"image":160},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?","2023-07-18",[165,166,167],"Accessibility","UX","HTML",{"nodeType":117,"data":169,"content":170},{},[171,191,199,224,256,290,297,304,311,318,336,343,387,402,427,458,465],{"nodeType":102,"data":172,"content":173},{},[174,178,187],{"nodeType":101,"value":175,"marks":176,"data":177},"A ",[],{},{"nodeType":179,"data":180,"content":182},"hyperlink",{"uri":181},"https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event",[183],{"nodeType":101,"value":184,"marks":185,"data":186},"click event",[],{},{"nodeType":101,"value":188,"marks":189,"data":190}," is an event listener that listens for a user's click (or a tap if on a touchscreen device), and then some custom JavaScript can be run once triggered. JavaScript and HTML allow us to put click events on any HTML element, but just because we can doesn't mean we should.",[],{},{"nodeType":192,"data":193,"content":194},"heading-2",{},[195],{"nodeType":101,"value":196,"marks":197,"data":198},"Why is putting a click event on a div a bad idea?",[],{},{"nodeType":102,"data":200,"content":201},{},[202,206,212,216,220],{"nodeType":101,"value":203,"marks":204,"data":205},"There are countless articles on the web advising not to put click events on ",[],{},{"nodeType":101,"value":207,"marks":208,"data":211},"\u003Cdiv>",[209],{"type":210},"code",{},{"nodeType":101,"value":213,"marks":214,"data":215}," HTML elements, but that's not the focus of this article, this article is quite the opposite so here is a TL;DR of why you should not put click events on ",[],{},{"nodeType":101,"value":207,"marks":217,"data":219},[218],{"type":210},{},{"nodeType":101,"value":221,"marks":222,"data":223}," HTML elements.",[],{},{"nodeType":102,"data":225,"content":226},{},[227,230,234,238,243,247,252],{"nodeType":101,"value":175,"marks":228,"data":229},[],{},{"nodeType":101,"value":207,"marks":231,"data":233},[232],{"type":210},{},{"nodeType":101,"value":235,"marks":236,"data":237}," HTML element, with no ",[],{},{"nodeType":101,"value":239,"marks":240,"data":242},"role",[241],{"type":210},{},{"nodeType":101,"value":244,"marks":245,"data":246}," attribute, is semantic-less: i.e. it has no semantic value at all, it solely exists for layout and styling purposes. This means, screenreaders or tabbing on a keyboard for example, will completely skip all semantic-less elements. A ",[],{},{"nodeType":101,"value":248,"marks":249,"data":251},"\u003Cspan>",[250],{"type":210},{},{"nodeType":101,"value":253,"marks":254,"data":255}," is also a semantic-less HTML element. If these elements are being skipped, users who rely on screenreaders or keyboards are going to have a difficult time interacting with your element (hint: they won't be able to at all).",[],{},{"nodeType":102,"data":257,"content":258},{},[259,263,268,272,277,281,286],{"nodeType":101,"value":260,"marks":261,"data":262},"You could put ",[],{},{"nodeType":101,"value":264,"marks":265,"data":267},"tabindex=\"0\"",[266],{"type":210},{},{"nodeType":101,"value":269,"marks":270,"data":271}," on the semantic-less element, meaning keyboards can now focus the element, but you lose so much other semantic value by not using the correct HTML in the first place: ",[],{},{"nodeType":101,"value":273,"marks":274,"data":276},"\u003Cbutton onclick=\"\">...\u003C/button>",[275],{"type":210},{},{"nodeType":101,"value":278,"marks":279,"data":280}," (recommended) or ",[],{},{"nodeType":101,"value":282,"marks":283,"data":285},"\u003Cdiv role=\"button\" onclick=\"\">...\u003C/div>",[284],{"type":210},{},{"nodeType":101,"value":287,"marks":288,"data":289},".",[],{},{"nodeType":102,"data":291,"content":292},{},[293],{"nodeType":101,"value":294,"marks":295,"data":296},"You can, by all means, put a click event on any element, you just need to ensure you're using the click event correctly and wisely.",[],{},{"nodeType":192,"data":298,"content":299},{},[300],{"nodeType":101,"value":301,"marks":302,"data":303},"When is it okay to put a click event on a div?",[],{},{"nodeType":102,"data":305,"content":306},{},[307],{"nodeType":101,"value":308,"marks":309,"data":310},"Now that we know it is taboo to put click events on semantic-less elements, let's explore a scenario where it would be considered perfectly fine to put a click event on a semantic-less element.",[],{},{"nodeType":102,"data":312,"content":313},{},[314],{"nodeType":101,"value":315,"marks":316,"data":317},"Behold... The Mighty Modal!",[],{},{"nodeType":102,"data":319,"content":320},{},[321,325,333],{"nodeType":101,"value":322,"marks":323,"data":324},"",[],{},{"nodeType":179,"data":326,"content":328},{"uri":327},"https://codepen.io/jackdomleo7/embed/yLJLOQr",[329],{"nodeType":101,"value":330,"marks":331,"data":332},"CodePen: A11y modal",[],{},{"nodeType":101,"value":322,"marks":334,"data":335},[],{},{"nodeType":102,"data":337,"content":338},{},[339],{"nodeType":101,"value":340,"marks":341,"data":342},"A modal is a fancy name for a pop-up window. When we consider a modal, as users, we typically assume there are 3 methods to close the modal:",[],{},{"nodeType":344,"data":345,"content":346},"ordered-list",{},[347,358,368],{"nodeType":348,"data":349,"content":350},"list-item",{},[351],{"nodeType":102,"data":352,"content":353},{},[354],{"nodeType":101,"value":355,"marks":356,"data":357},"Clicking the cross in the top corner",[],{},{"nodeType":348,"data":359,"content":360},{},[361],{"nodeType":102,"data":362,"content":363},{},[364],{"nodeType":101,"value":365,"marks":366,"data":367},"Clicking the greyed-out area behind the modal",[],{},{"nodeType":348,"data":369,"content":370},{},[371],{"nodeType":102,"data":372,"content":373},{},[374,378,383],{"nodeType":101,"value":375,"marks":376,"data":377},"Pressing the ",[],{},{"nodeType":101,"value":379,"marks":380,"data":382},"Esc",[381],{"type":210},{},{"nodeType":101,"value":384,"marks":385,"data":386}," key on the keyboard",[],{},{"nodeType":102,"data":388,"content":389},{},[390,394,398],{"nodeType":101,"value":391,"marks":392,"data":393},"There may also be a \"Cancel\", \"Close\" or similar call-to-action button on the modal. In this case, we can ignore the ",[],{},{"nodeType":101,"value":379,"marks":395,"data":397},[396],{"type":210},{},{"nodeType":101,"value":399,"marks":400,"data":401}," key method, since this is not related to clicking.",[],{},{"nodeType":102,"data":403,"content":404},{},[405,409,414,418,423],{"nodeType":101,"value":406,"marks":407,"data":408},"So, the 2 ways a user can close a modal by clicking is by clicking the cross, and by clicking the greyed-out area. The cross should obviously be a ",[],{},{"nodeType":101,"value":410,"marks":411,"data":413},"\u003Cbutton>X\u003C/button>",[412],{"type":210},{},{"nodeType":101,"value":415,"marks":416,"data":417}," since it is a user action. But what about the greyed-out area, should this be a ",[],{},{"nodeType":101,"value":419,"marks":420,"data":422},"button",[421],{"type":210},{},{"nodeType":101,"value":424,"marks":425,"data":426}," element too?",[],{},{"nodeType":102,"data":428,"content":429},{},[430,434,438,442,446,450,454],{"nodeType":101,"value":431,"marks":432,"data":433},"It could be a ",[],{},{"nodeType":101,"value":419,"marks":435,"data":437},[436],{"type":210},{},{"nodeType":101,"value":439,"marks":440,"data":441}," element, but it would make the code look ugly and it isn't really necessary in this case. For this modal to be considered accessible, it needs at least 1 way for each type of user to close the modal. We have a semantic ",[],{},{"nodeType":101,"value":419,"marks":443,"data":445},[444],{"type":210},{},{"nodeType":101,"value":447,"marks":448,"data":449}," element for the cross that a user can click or tab to, and we have the ",[],{},{"nodeType":101,"value":379,"marks":451,"data":453},[452],{"type":210},{},{"nodeType":101,"value":455,"marks":456,"data":457}," key handler for keyboard users. This should cover the majority of users if not all.",[],{},{"nodeType":102,"data":459,"content":460},{},[461],{"nodeType":101,"value":462,"marks":463,"data":464},"Clicking the greyed-out area is a nice-to-have minor UX (user experience) improvement. A user who relies on semantic elements so that they can be identified by screenreaders and keyboards is not going to expect that they can interact with the greyed-out area, it might actually confuse them more if they see a huge focus ring around the entire greyed-out section, causing poorer UX for these users since they may not associate it with closing the modal.",[],{},{"nodeType":102,"data":466,"content":467},{},[468,472,477,482],{"nodeType":101,"value":469,"marks":470,"data":471},"In this case, we can add a nice simple ",[],{},{"nodeType":101,"value":473,"marks":474,"data":476},"\u003Cdiv onclick=\"\">\u003C",[475],{"type":210},{},{"nodeType":101,"value":478,"marks":479,"data":481},"/div>",[480],{"type":210},{},{"nodeType":101,"value":483,"marks":484,"data":485}," for the greyed-out area and not have to worry about harming accessibility. Simple.",[],{},{"Asset":487},[141],{"sys":489,"total":21,"skip":38,"limit":21,"items":490},{"type":37},[491],{"fields":492,"sys":503},{"articleDisclaimer":493},{"data":494,"content":495,"nodeType":117},{},[496],{"data":497,"content":498,"nodeType":102},{},[499],{"data":500,"marks":501,"value":502,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":504,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":506,"total":507,"skip":38,"limit":508,"items":509,"includes":633},{"type":37},5,1000,[510,542,573,603],{"fields":511,"sys":540},{"title":512,"description":513,"image":514,"tags":536,"publishDate":538,"slug":539},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":515,"sys":518,"fields":527},{"tags":516,"concepts":517},[],[],{"space":519,"id":521,"type":14,"createdAt":522,"updatedAt":523,"environment":524,"publishedVersion":526,"revision":134,"locale":22},{"sys":520},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":525},{"id":18,"type":10,"linkType":19},9,{"title":528,"description":528,"file":529},"Pineapple",{"url":530,"details":531,"fileName":534,"contentType":535},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":532,"image":533},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg",[537],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":541,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":543,"sys":571},{"title":544,"description":545,"image":546,"tags":566,"publishDate":569,"slug":570},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":547,"sys":550,"fields":557},{"tags":548,"concepts":549},[],[],{"space":551,"id":553,"type":14,"createdAt":554,"updatedAt":554,"environment":555,"publishedVersion":507,"revision":21,"locale":22},{"sys":552},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":556},{"id":18,"type":10,"linkType":19},{"title":558,"description":559,"file":560},"clutter","A cluttered office desk",{"url":561,"details":562,"fileName":565,"contentType":535},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":563,"image":564},281805,{"width":31,"height":32},"clutter.jpg",[567,568,167],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":572,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":574,"sys":601},{"title":575,"description":576,"image":577,"tags":597,"publishDate":599,"slug":600},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":578,"sys":581,"fields":588},{"tags":579,"concepts":580},[],[],{"space":582,"id":584,"type":14,"createdAt":585,"updatedAt":585,"environment":586,"publishedVersion":507,"revision":21,"locale":22},{"sys":583},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":587},{"id":18,"type":10,"linkType":19},{"title":589,"description":590,"file":591},"css=hover-media-query-og","CSS media query for hover",{"url":592,"details":593,"fileName":596,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":594,"image":595},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[598],"CSS","2020-07-06","hover-css-media-query",{"id":602,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"fields":604,"sys":631},{"title":605,"description":606,"image":607,"tags":627,"publishDate":629,"slug":630},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":608,"sys":611,"fields":618},{"tags":609,"concepts":610},[],[],{"space":612,"id":614,"type":14,"createdAt":615,"updatedAt":615,"environment":616,"publishedVersion":152,"revision":21,"locale":22},{"sys":613},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":617},{"id":18,"type":10,"linkType":19},{"title":619,"description":620,"file":621},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":622,"details":623,"fileName":626,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":624,"image":625},6959,{"width":31,"height":32},"neumorphic-design-og.png",[628,598],"Design","2020-05-27","learning-neumorphic-design",{"id":632,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":634},[577,635,514,546,607],{"metadata":636,"sys":639,"fields":644},{"tags":637,"concepts":638},[],[],{"space":640,"id":148,"type":14,"createdAt":149,"updatedAt":149,"environment":642,"publishedVersion":152,"revision":21,"locale":22},{"sys":641},{"type":10,"linkType":11,"id":12},{"sys":643},{"id":18,"type":10,"linkType":19},{"title":154,"description":155,"file":645},{"url":157,"details":646,"fileName":161,"contentType":34},{"size":159,"image":647},{"width":31,"height":32},1733533838286] \ No newline at end of file diff --git a/blog/2023/when-is-a-clickable-div-okay/index.html b/blog/2023/when-is-a-clickable-div-okay/index.html index 07baadc03..7dca67be1 100644 --- a/blog/2023/when-is-a-clickable-div-okay/index.html +++ b/blog/2023/when-is-a-clickable-div-okay/index.html @@ -23,7 +23,7 @@ - + @@ -83,5 +83,5 @@ -

When is a clickable div okay?

An example modal element

Published:

A click event is an event listener that listens for a user's click (or a tap if on a touchscreen device), and then some custom JavaScript can be run once triggered. JavaScript and HTML allow us to put click events on any HTML element, but just because we can doesn't mean we should.

Why is putting a click event on a div a bad idea?

There are countless articles on the web advising not to put click events on <div> HTML elements, but that's not the focus of this article, this article is quite the opposite so here is a TL;DR of why you should not put click events on <div> HTML elements.

A <div> HTML element, with no role attribute, is semantic-less: i.e. it has no semantic value at all, it solely exists for layout and styling purposes. This means, screenreaders or tabbing on a keyboard for example, will completely skip all semantic-less elements. A <span> is also a semantic-less HTML element. If these elements are being skipped, users who rely on screenreaders or keyboards are going to have a difficult time interacting with your element (hint: they won't be able to at all).

You could put tabindex="0" on the semantic-less element, meaning keyboards can now focus the element, but you lose so much other semantic value by not using the correct HTML in the first place: <button onclick="">...</button> (recommended) or <div role="button" onclick="">...</div>.

You can, by all means, put a click event on any element, you just need to ensure you're using the click event correctly and wisely.

When is it okay to put a click event on a div?

Now that we know it is taboo to put click events on semantic-less elements, let's explore a scenario where it would be considered perfectly fine to put a click event on a semantic-less element.

Behold... The Mighty Modal!

See the Pen A11y modal by @jackdomleo7 on CodePen

A modal is a fancy name for a pop-up window. When we consider a modal, as users, we typically assume there are 3 methods to close the modal:

  1. Clicking the cross in the top corner

  2. Clicking the greyed-out area behind the modal

  3. Pressing the Esc key on the keyboard

There may also be a "Cancel", "Close" or similar call-to-action button on the modal. In this case, we can ignore the Esc key method, since this is not related to clicking.

So, the 2 ways a user can close a modal by clicking is by clicking the cross, and by clicking the greyed-out area. The cross should obviously be a <button>X</button> since it is a user action. But what about the greyed-out area, should this be a button element too?

It could be a button element, but it would make the code look ugly and it isn't really necessary in this case. For this modal to be considered accessible, it needs at least 1 way for each type of user to close the modal. We have a semantic button element for the cross that a user can click or tab to, and we have the Esc key handler for keyboard users. This should cover the majority of users if not all.

Clicking the greyed-out area is a nice-to-have minor UX (user experience) improvement. A user who relies on semantic elements so that they can be identified by screenreaders and keyboards is not going to expect that they can interact with the greyed-out area, it might actually confuse them more if they see a huge focus ring around the entire greyed-out section, causing poorer UX for these users since they may not associate it with closing the modal.

In this case, we can add a nice simple <div onclick=""></div> for the greyed-out area and not have to worry about harming accessibility. Simple.

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

- \ No newline at end of file +

When is a clickable div okay?

An example modal element

Published:

A click event is an event listener that listens for a user's click (or a tap if on a touchscreen device), and then some custom JavaScript can be run once triggered. JavaScript and HTML allow us to put click events on any HTML element, but just because we can doesn't mean we should.

Why is putting a click event on a div a bad idea?

There are countless articles on the web advising not to put click events on <div> HTML elements, but that's not the focus of this article, this article is quite the opposite so here is a TL;DR of why you should not put click events on <div> HTML elements.

A <div> HTML element, with no role attribute, is semantic-less: i.e. it has no semantic value at all, it solely exists for layout and styling purposes. This means, screenreaders or tabbing on a keyboard for example, will completely skip all semantic-less elements. A <span> is also a semantic-less HTML element. If these elements are being skipped, users who rely on screenreaders or keyboards are going to have a difficult time interacting with your element (hint: they won't be able to at all).

You could put tabindex="0" on the semantic-less element, meaning keyboards can now focus the element, but you lose so much other semantic value by not using the correct HTML in the first place: <button onclick="">...</button> (recommended) or <div role="button" onclick="">...</div>.

You can, by all means, put a click event on any element, you just need to ensure you're using the click event correctly and wisely.

When is it okay to put a click event on a div?

Now that we know it is taboo to put click events on semantic-less elements, let's explore a scenario where it would be considered perfectly fine to put a click event on a semantic-less element.

Behold... The Mighty Modal!

See the Pen A11y modal by @jackdomleo7 on CodePen

A modal is a fancy name for a pop-up window. When we consider a modal, as users, we typically assume there are 3 methods to close the modal:

  1. Clicking the cross in the top corner

  2. Clicking the greyed-out area behind the modal

  3. Pressing the Esc key on the keyboard

There may also be a "Cancel", "Close" or similar call-to-action button on the modal. In this case, we can ignore the Esc key method, since this is not related to clicking.

So, the 2 ways a user can close a modal by clicking is by clicking the cross, and by clicking the greyed-out area. The cross should obviously be a <button>X</button> since it is a user action. But what about the greyed-out area, should this be a button element too?

It could be a button element, but it would make the code look ugly and it isn't really necessary in this case. For this modal to be considered accessible, it needs at least 1 way for each type of user to close the modal. We have a semantic button element for the cross that a user can click or tab to, and we have the Esc key handler for keyboard users. This should cover the majority of users if not all.

Clicking the greyed-out area is a nice-to-have minor UX (user experience) improvement. A user who relies on semantic elements so that they can be identified by screenreaders and keyboards is not going to expect that they can interact with the greyed-out area, it might actually confuse them more if they see a huge focus ring around the entire greyed-out section, causing poorer UX for these users since they may not associate it with closing the modal.

In this case, we can add a nice simple <div onclick=""></div> for the greyed-out area and not have to worry about harming accessibility. Simple.

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

+ \ No newline at end of file diff --git a/blog/2024/how-to-protect-state-in-pinia/_payload.json b/blog/2024/how-to-protect-state-in-pinia/_payload.json index bdf4047ff..24b6b7672 100644 --- a/blog/2024/how-to-protect-state-in-pinia/_payload.json +++ b/blog/2024/how-to-protect-state-in-pinia/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":537},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-how-to-protect-state-in-pinia":118,"$rpzcfBTaqR":376,"article-list-how-to-protect-state-in-pinia":393},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":374},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"7CUW25a1jLiar8pzd8K9Nh","2024-04-07T19:00:42.324Z","2024-04-30T18:52:40.840Z",{"sys":132},{"id":18,"type":10,"linkType":19},291,2,{"sys":136},{"type":10,"linkType":57,"id":137},"article",{"title":139,"slug":140,"image":141,"description":163,"publishDate":164,"tags":165,"body":167},"How to protect state in Pinia 🍍","how-to-protect-state-in-pinia",{"metadata":142,"sys":145,"fields":154},{"tags":143,"concepts":144},[],[],{"space":146,"id":148,"type":14,"createdAt":149,"updatedAt":150,"environment":151,"publishedVersion":153,"revision":134,"locale":22},{"sys":147},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":152},{"id":18,"type":10,"linkType":19},9,{"title":155,"description":155,"file":156},"Pineapple",{"url":157,"details":158,"fileName":161,"contentType":162},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":159,"image":160},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.","2024-04-07",[166],"Vue",{"nodeType":117,"data":168,"content":169},{},[170,220,237,244,251,267,275,323,346],{"nodeType":102,"data":171,"content":172},{},[173,177,186,190,198,202,210,214],{"nodeType":101,"value":174,"marks":175,"data":176},"",[],{},{"nodeType":178,"data":179,"content":181},"hyperlink",{"uri":180},"https://pinia.vuejs.org/",[182],{"nodeType":101,"value":183,"marks":184,"data":185},"Pinia",[],{},{"nodeType":101,"value":187,"marks":188,"data":189}," is a relatively new state management tool for the Vue ecosystem. It is the new preferred state management tool recommended by the Vue core team replacing ",[],{},{"nodeType":178,"data":191,"content":193},{"uri":192},"https://vuex.vuejs.org/",[194],{"nodeType":101,"value":195,"marks":196,"data":197},"Vuex",[],{},{"nodeType":101,"value":199,"marks":200,"data":201},". Compared to Vuex, Pinia is type-safe by default (",[],{},{"nodeType":178,"data":203,"content":205},{"uri":204},"https://github.com/paroi-tech/direct-vuex",[206],{"nodeType":101,"value":207,"marks":208,"data":209},"direct-vuex",[],{},{"nodeType":101,"value":211,"marks":212,"data":213}," was needed to make Vuex type-safe), extremely lightweight, and modular by design (meaning you can create multiple stores instead of multiple modules inside one store, which optimises performance). Similar to Vuex, Pinia has state, computed properties (getters) and methods (mutations and actions). ",[],{},{"nodeType":101,"value":215,"marks":216,"data":219},"Read more about Pinia and its usage to understand the similarities and differences between Pinia and Vuex.",[217],{"type":218},"italic",{},{"nodeType":102,"data":221,"content":222},{},[223,227,233],{"nodeType":101,"value":224,"marks":225,"data":226},"Vuex's state is automatically protected, whereas Pinia's state is not. In Vuex, you could not directly edit the state, to do so you needed a mutation method that would edit or \"mutate\" the state for you. If you tried editing the state directly in Vuex, you would be faced with the following error message, \"",[],{},{"nodeType":101,"value":228,"marks":229,"data":232},"Error: [vuex] do not mutate vuex store state outside mutation handlers.",[230],{"type":231},"code",{},{"nodeType":101,"value":234,"marks":235,"data":236},"\"",[],{},{"nodeType":102,"data":238,"content":239},{},[240],{"nodeType":101,"value":241,"marks":242,"data":243},"But with Pinia, the state is exposed and can be mutated willy nilly from anywhere within your application. In a lot of cases, this is fine and actually makes state management a lot easier and simpler because in these cases there is no need for a mutation method whose sole purpose is to update a state property with the value you passed to the mutation method.",[],{},{"nodeType":102,"data":245,"content":246},{},[247],{"nodeType":101,"value":248,"marks":249,"data":250},"In some cases though, this might not be ideal. For example, we are building a rugby game in Vue (it's just an example, go with it). Unlike with football (or soccer for you Americans) where the scoring system increments by 1 whenever a goal is scored, rugby's scoring system increases by a different number depending on how those points were scored. 5 points for a try, 3 points for a penalty, 2 points for a conversion, and 3 points for a drop goal.",[],{},{"nodeType":102,"data":252,"content":253},{},[254,258,263],{"nodeType":101,"value":255,"marks":256,"data":257},"We want to be able to protect the ",[],{},{"nodeType":101,"value":259,"marks":260,"data":262},"score",[261],{"type":231},{},{"nodeType":101,"value":264,"marks":265,"data":266}," state property by only allowing it to be mutated in a specific way. We can easily do this by creating an exposed computed property that returns the state, and not exposing the state property.",[],{},{"nodeType":102,"data":268,"content":269},{},[270],{"nodeType":101,"value":271,"marks":272,"data":274},"TYPESCRIPT\nimport { defineStore } from 'pinia';\nimport { ref, computed } from 'vue';\n\nexport const useRugbyStore = defineStore('rugbyStory', () => {\n const _score = ref\u003Cnumber>(0);\n\n const score = computed(() => _score.value);\n\n function scorePoints(type: 'try'|'penalty'|'conversion'|'drop goal'): void {\n switch (type) {\n case 'try':\n _score.value += 5;\n break;\n case 'penalty':\n case 'drop goal':\n _score.value += 3;\n break;\n case 'conversion':\n _score.value += 2;\n break;\n }\n }\n\n return { score, scorePoints };\n})",[273],{"type":231},{},{"nodeType":102,"data":276,"content":277},{},[278,282,287,291,295,299,303,307,311,315,320],{"nodeType":101,"value":279,"marks":280,"data":281},"In the example above, ",[],{},{"nodeType":101,"value":283,"marks":284,"data":286},"_score",[285],{"type":231},{},{"nodeType":101,"value":288,"marks":289,"data":290}," (annotated prefixed with an underscore to show it is internal) can be read via the ",[],{},{"nodeType":101,"value":259,"marks":292,"data":294},[293],{"type":231},{},{"nodeType":101,"value":296,"marks":297,"data":298}," computed property, but cannot be mutated directly. Since ",[],{},{"nodeType":101,"value":259,"marks":300,"data":302},[301],{"type":231},{},{"nodeType":101,"value":304,"marks":305,"data":306}," is a computed property, Vue does not allow its value to be changed, if you try editing the value of ",[],{},{"nodeType":101,"value":259,"marks":308,"data":310},[309],{"type":231},{},{"nodeType":101,"value":312,"marks":313,"data":314},", you will get the following TypeScript error, \"",[],{},{"nodeType":101,"value":316,"marks":317,"data":319},"Cannot assign to \"score\" because it is a read-only property.",[318],{"type":231},{},{"nodeType":101,"value":234,"marks":321,"data":322},[],{},{"nodeType":102,"data":324,"content":325},{},[326,330,334,338,342],{"nodeType":101,"value":327,"marks":328,"data":329},"One caveat to this though is that ",[],{},{"nodeType":101,"value":259,"marks":331,"data":333},[332],{"type":231},{},{"nodeType":101,"value":335,"marks":336,"data":337}," or ",[],{},{"nodeType":101,"value":283,"marks":339,"data":341},[340],{"type":231},{},{"nodeType":101,"value":343,"marks":344,"data":345}," will never appear in Pinia's global state or in the Vue devtools Pinia panel, so keep this in mind.",[],{},{"nodeType":102,"data":347,"content":348},{},[349,353,361,365,370],{"nodeType":101,"value":350,"marks":351,"data":352},"I feel this is quite a simple, neat, easy-to-maintain, and type-safe method of protecting Pinia state. I have found other methods of protecting state such as ",[],{},{"nodeType":178,"data":354,"content":356},{"uri":355},"https://github.com/vuejs/pinia/issues/58#issuecomment-983284955",[357],{"nodeType":101,"value":358,"marks":359,"data":360},"this example",[],{},{"nodeType":101,"value":362,"marks":363,"data":364}," using Vue's ",[],{},{"nodeType":101,"value":366,"marks":367,"data":369},"readonly()",[368],{"type":231},{},{"nodeType":101,"value":371,"marks":372,"data":373}," method but I didn't find this to be type-safe or very nice to use.",[],{},{"Asset":375},[141],{"sys":377,"total":21,"skip":38,"limit":21,"items":378},{"type":37},[379],{"fields":380,"sys":391},{"articleDisclaimer":381},{"data":382,"content":383,"nodeType":117},{},[384],{"data":385,"content":386,"nodeType":102},{},[387],{"data":388,"marks":389,"value":390,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":392,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":394,"total":395,"skip":38,"limit":396,"items":397,"includes":522},{"type":37},5,1000,[398,431,462,492],{"fields":399,"sys":429},{"title":400,"description":401,"image":402,"tags":423,"publishDate":427,"slug":428},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":403,"sys":406,"fields":414},{"tags":404,"concepts":405},[],[],{"space":407,"id":409,"type":14,"createdAt":410,"updatedAt":410,"environment":411,"publishedVersion":413,"revision":21,"locale":22},{"sys":408},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":412},{"id":18,"type":10,"linkType":19},7,{"title":415,"description":416,"file":417},"When is a clickable div okay","An example modal element",{"url":418,"details":419,"fileName":422,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":420,"image":421},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[424,425,426],"Accessibility","UX","HTML","2023-07-18","when-is-a-clickable-div-okay",{"id":430,"type":48},"brxitJC35PyChlVzusyLP",{"fields":432,"sys":460},{"title":433,"description":434,"image":435,"tags":455,"publishDate":458,"slug":459},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":436,"sys":439,"fields":446},{"tags":437,"concepts":438},[],[],{"space":440,"id":442,"type":14,"createdAt":443,"updatedAt":443,"environment":444,"publishedVersion":395,"revision":21,"locale":22},{"sys":441},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":445},{"id":18,"type":10,"linkType":19},{"title":447,"description":448,"file":449},"clutter","A cluttered office desk",{"url":450,"details":451,"fileName":454,"contentType":162},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":452,"image":453},281805,{"width":31,"height":32},"clutter.jpg",[456,457,426],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":461,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":463,"sys":490},{"title":464,"description":465,"image":466,"tags":486,"publishDate":488,"slug":489},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":467,"sys":470,"fields":477},{"tags":468,"concepts":469},[],[],{"space":471,"id":473,"type":14,"createdAt":474,"updatedAt":474,"environment":475,"publishedVersion":395,"revision":21,"locale":22},{"sys":472},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":476},{"id":18,"type":10,"linkType":19},{"title":478,"description":479,"file":480},"css=hover-media-query-og","CSS media query for hover",{"url":481,"details":482,"fileName":485,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":483,"image":484},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[487],"CSS","2020-07-06","hover-css-media-query",{"id":491,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"fields":493,"sys":520},{"title":494,"description":495,"image":496,"tags":516,"publishDate":518,"slug":519},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":497,"sys":500,"fields":507},{"tags":498,"concepts":499},[],[],{"space":501,"id":503,"type":14,"createdAt":504,"updatedAt":504,"environment":505,"publishedVersion":413,"revision":21,"locale":22},{"sys":502},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":506},{"id":18,"type":10,"linkType":19},{"title":508,"description":509,"file":510},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":511,"details":512,"fileName":515,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":513,"image":514},6959,{"width":31,"height":32},"neumorphic-design-og.png",[517,487],"Design","2020-05-27","learning-neumorphic-design",{"id":521,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":523},[466,402,524,435,496],{"metadata":525,"sys":528,"fields":533},{"tags":526,"concepts":527},[],[],{"space":529,"id":148,"type":14,"createdAt":149,"updatedAt":150,"environment":531,"publishedVersion":153,"revision":134,"locale":22},{"sys":530},{"type":10,"linkType":11,"id":12},{"sys":532},{"id":18,"type":10,"linkType":19},{"title":155,"description":155,"file":534},{"url":157,"details":535,"fileName":161,"contentType":162},{"size":159,"image":536},{"width":31,"height":32},1733447471197] \ No newline at end of file +[{"data":1,"prerenderedAt":537},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"article-how-to-protect-state-in-pinia":118,"$rpzcfBTaqR":376,"article-list-how-to-protect-state-in-pinia":393},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120,"includes":374},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"7CUW25a1jLiar8pzd8K9Nh","2024-04-07T19:00:42.324Z","2024-04-30T18:52:40.840Z",{"sys":132},{"id":18,"type":10,"linkType":19},291,2,{"sys":136},{"type":10,"linkType":57,"id":137},"article",{"title":139,"slug":140,"image":141,"description":163,"publishDate":164,"tags":165,"body":167},"How to protect state in Pinia 🍍","how-to-protect-state-in-pinia",{"metadata":142,"sys":145,"fields":154},{"tags":143,"concepts":144},[],[],{"space":146,"id":148,"type":14,"createdAt":149,"updatedAt":150,"environment":151,"publishedVersion":153,"revision":134,"locale":22},{"sys":147},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":152},{"id":18,"type":10,"linkType":19},9,{"title":155,"description":155,"file":156},"Pineapple",{"url":157,"details":158,"fileName":161,"contentType":162},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":159,"image":160},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.","2024-04-07",[166],"Vue",{"nodeType":117,"data":168,"content":169},{},[170,220,237,244,251,267,275,323,346],{"nodeType":102,"data":171,"content":172},{},[173,177,186,190,198,202,210,214],{"nodeType":101,"value":174,"marks":175,"data":176},"",[],{},{"nodeType":178,"data":179,"content":181},"hyperlink",{"uri":180},"https://pinia.vuejs.org/",[182],{"nodeType":101,"value":183,"marks":184,"data":185},"Pinia",[],{},{"nodeType":101,"value":187,"marks":188,"data":189}," is a relatively new state management tool for the Vue ecosystem. It is the new preferred state management tool recommended by the Vue core team replacing ",[],{},{"nodeType":178,"data":191,"content":193},{"uri":192},"https://vuex.vuejs.org/",[194],{"nodeType":101,"value":195,"marks":196,"data":197},"Vuex",[],{},{"nodeType":101,"value":199,"marks":200,"data":201},". Compared to Vuex, Pinia is type-safe by default (",[],{},{"nodeType":178,"data":203,"content":205},{"uri":204},"https://github.com/paroi-tech/direct-vuex",[206],{"nodeType":101,"value":207,"marks":208,"data":209},"direct-vuex",[],{},{"nodeType":101,"value":211,"marks":212,"data":213}," was needed to make Vuex type-safe), extremely lightweight, and modular by design (meaning you can create multiple stores instead of multiple modules inside one store, which optimises performance). Similar to Vuex, Pinia has state, computed properties (getters) and methods (mutations and actions). ",[],{},{"nodeType":101,"value":215,"marks":216,"data":219},"Read more about Pinia and its usage to understand the similarities and differences between Pinia and Vuex.",[217],{"type":218},"italic",{},{"nodeType":102,"data":221,"content":222},{},[223,227,233],{"nodeType":101,"value":224,"marks":225,"data":226},"Vuex's state is automatically protected, whereas Pinia's state is not. In Vuex, you could not directly edit the state, to do so you needed a mutation method that would edit or \"mutate\" the state for you. If you tried editing the state directly in Vuex, you would be faced with the following error message, \"",[],{},{"nodeType":101,"value":228,"marks":229,"data":232},"Error: [vuex] do not mutate vuex store state outside mutation handlers.",[230],{"type":231},"code",{},{"nodeType":101,"value":234,"marks":235,"data":236},"\"",[],{},{"nodeType":102,"data":238,"content":239},{},[240],{"nodeType":101,"value":241,"marks":242,"data":243},"But with Pinia, the state is exposed and can be mutated willy nilly from anywhere within your application. In a lot of cases, this is fine and actually makes state management a lot easier and simpler because in these cases there is no need for a mutation method whose sole purpose is to update a state property with the value you passed to the mutation method.",[],{},{"nodeType":102,"data":245,"content":246},{},[247],{"nodeType":101,"value":248,"marks":249,"data":250},"In some cases though, this might not be ideal. For example, we are building a rugby game in Vue (it's just an example, go with it). Unlike with football (or soccer for you Americans) where the scoring system increments by 1 whenever a goal is scored, rugby's scoring system increases by a different number depending on how those points were scored. 5 points for a try, 3 points for a penalty, 2 points for a conversion, and 3 points for a drop goal.",[],{},{"nodeType":102,"data":252,"content":253},{},[254,258,263],{"nodeType":101,"value":255,"marks":256,"data":257},"We want to be able to protect the ",[],{},{"nodeType":101,"value":259,"marks":260,"data":262},"score",[261],{"type":231},{},{"nodeType":101,"value":264,"marks":265,"data":266}," state property by only allowing it to be mutated in a specific way. We can easily do this by creating an exposed computed property that returns the state, and not exposing the state property.",[],{},{"nodeType":102,"data":268,"content":269},{},[270],{"nodeType":101,"value":271,"marks":272,"data":274},"TYPESCRIPT\nimport { defineStore } from 'pinia';\nimport { ref, computed } from 'vue';\n\nexport const useRugbyStore = defineStore('rugbyStory', () => {\n const _score = ref\u003Cnumber>(0);\n\n const score = computed(() => _score.value);\n\n function scorePoints(type: 'try'|'penalty'|'conversion'|'drop goal'): void {\n switch (type) {\n case 'try':\n _score.value += 5;\n break;\n case 'penalty':\n case 'drop goal':\n _score.value += 3;\n break;\n case 'conversion':\n _score.value += 2;\n break;\n }\n }\n\n return { score, scorePoints };\n})",[273],{"type":231},{},{"nodeType":102,"data":276,"content":277},{},[278,282,287,291,295,299,303,307,311,315,320],{"nodeType":101,"value":279,"marks":280,"data":281},"In the example above, ",[],{},{"nodeType":101,"value":283,"marks":284,"data":286},"_score",[285],{"type":231},{},{"nodeType":101,"value":288,"marks":289,"data":290}," (annotated prefixed with an underscore to show it is internal) can be read via the ",[],{},{"nodeType":101,"value":259,"marks":292,"data":294},[293],{"type":231},{},{"nodeType":101,"value":296,"marks":297,"data":298}," computed property, but cannot be mutated directly. Since ",[],{},{"nodeType":101,"value":259,"marks":300,"data":302},[301],{"type":231},{},{"nodeType":101,"value":304,"marks":305,"data":306}," is a computed property, Vue does not allow its value to be changed, if you try editing the value of ",[],{},{"nodeType":101,"value":259,"marks":308,"data":310},[309],{"type":231},{},{"nodeType":101,"value":312,"marks":313,"data":314},", you will get the following TypeScript error, \"",[],{},{"nodeType":101,"value":316,"marks":317,"data":319},"Cannot assign to \"score\" because it is a read-only property.",[318],{"type":231},{},{"nodeType":101,"value":234,"marks":321,"data":322},[],{},{"nodeType":102,"data":324,"content":325},{},[326,330,334,338,342],{"nodeType":101,"value":327,"marks":328,"data":329},"One caveat to this though is that ",[],{},{"nodeType":101,"value":259,"marks":331,"data":333},[332],{"type":231},{},{"nodeType":101,"value":335,"marks":336,"data":337}," or ",[],{},{"nodeType":101,"value":283,"marks":339,"data":341},[340],{"type":231},{},{"nodeType":101,"value":343,"marks":344,"data":345}," will never appear in Pinia's global state or in the Vue devtools Pinia panel, so keep this in mind.",[],{},{"nodeType":102,"data":347,"content":348},{},[349,353,361,365,370],{"nodeType":101,"value":350,"marks":351,"data":352},"I feel this is quite a simple, neat, easy-to-maintain, and type-safe method of protecting Pinia state. I have found other methods of protecting state such as ",[],{},{"nodeType":178,"data":354,"content":356},{"uri":355},"https://github.com/vuejs/pinia/issues/58#issuecomment-983284955",[357],{"nodeType":101,"value":358,"marks":359,"data":360},"this example",[],{},{"nodeType":101,"value":362,"marks":363,"data":364}," using Vue's ",[],{},{"nodeType":101,"value":366,"marks":367,"data":369},"readonly()",[368],{"type":231},{},{"nodeType":101,"value":371,"marks":372,"data":373}," method but I didn't find this to be type-safe or very nice to use.",[],{},{"Asset":375},[141],{"sys":377,"total":21,"skip":38,"limit":21,"items":378},{"type":37},[379],{"fields":380,"sys":391},{"articleDisclaimer":381},{"data":382,"content":383,"nodeType":117},{},[384],{"data":385,"content":386,"nodeType":102},{},[387],{"data":388,"marks":389,"value":390,"nodeType":101},{},[],"Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.",{"id":392,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":394,"total":395,"skip":38,"limit":396,"items":397,"includes":522},{"type":37},5,1000,[398,431,462,492],{"fields":399,"sys":429},{"title":400,"description":401,"image":402,"tags":423,"publishDate":427,"slug":428},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":403,"sys":406,"fields":414},{"tags":404,"concepts":405},[],[],{"space":407,"id":409,"type":14,"createdAt":410,"updatedAt":410,"environment":411,"publishedVersion":413,"revision":21,"locale":22},{"sys":408},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":412},{"id":18,"type":10,"linkType":19},7,{"title":415,"description":416,"file":417},"When is a clickable div okay","An example modal element",{"url":418,"details":419,"fileName":422,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":420,"image":421},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[424,425,426],"Accessibility","UX","HTML","2023-07-18","when-is-a-clickable-div-okay",{"id":430,"type":48},"brxitJC35PyChlVzusyLP",{"fields":432,"sys":460},{"title":433,"description":434,"image":435,"tags":455,"publishDate":458,"slug":459},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":436,"sys":439,"fields":446},{"tags":437,"concepts":438},[],[],{"space":440,"id":442,"type":14,"createdAt":443,"updatedAt":443,"environment":444,"publishedVersion":395,"revision":21,"locale":22},{"sys":441},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":445},{"id":18,"type":10,"linkType":19},{"title":447,"description":448,"file":449},"clutter","A cluttered office desk",{"url":450,"details":451,"fileName":454,"contentType":162},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":452,"image":453},281805,{"width":31,"height":32},"clutter.jpg",[456,457,426],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":461,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":463,"sys":490},{"title":464,"description":465,"image":466,"tags":486,"publishDate":488,"slug":489},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":467,"sys":470,"fields":477},{"tags":468,"concepts":469},[],[],{"space":471,"id":473,"type":14,"createdAt":474,"updatedAt":474,"environment":475,"publishedVersion":395,"revision":21,"locale":22},{"sys":472},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":476},{"id":18,"type":10,"linkType":19},{"title":478,"description":479,"file":480},"css=hover-media-query-og","CSS media query for hover",{"url":481,"details":482,"fileName":485,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":483,"image":484},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[487],"CSS","2020-07-06","hover-css-media-query",{"id":491,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"fields":493,"sys":520},{"title":494,"description":495,"image":496,"tags":516,"publishDate":518,"slug":519},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":497,"sys":500,"fields":507},{"tags":498,"concepts":499},[],[],{"space":501,"id":503,"type":14,"createdAt":504,"updatedAt":504,"environment":505,"publishedVersion":413,"revision":21,"locale":22},{"sys":502},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":506},{"id":18,"type":10,"linkType":19},{"title":508,"description":509,"file":510},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":511,"details":512,"fileName":515,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":513,"image":514},6959,{"width":31,"height":32},"neumorphic-design-og.png",[517,487],"Design","2020-05-27","learning-neumorphic-design",{"id":521,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":523},[466,402,524,435,496],{"metadata":525,"sys":528,"fields":533},{"tags":526,"concepts":527},[],[],{"space":529,"id":148,"type":14,"createdAt":149,"updatedAt":150,"environment":531,"publishedVersion":153,"revision":134,"locale":22},{"sys":530},{"type":10,"linkType":11,"id":12},{"sys":532},{"id":18,"type":10,"linkType":19},{"title":155,"description":155,"file":534},{"url":157,"details":535,"fileName":161,"contentType":162},{"size":159,"image":536},{"width":31,"height":32},1733533838285] \ No newline at end of file diff --git a/blog/2024/how-to-protect-state-in-pinia/index.html b/blog/2024/how-to-protect-state-in-pinia/index.html index d3deeef41..e0647f221 100644 --- a/blog/2024/how-to-protect-state-in-pinia/index.html +++ b/blog/2024/how-to-protect-state-in-pinia/index.html @@ -22,7 +22,7 @@ - + @@ -106,5 +106,5 @@ } return { score, scorePoints }; -})

In the example above, _score (annotated prefixed with an underscore to show it is internal) can be read via the score computed property, but cannot be mutated directly. Since score is a computed property, Vue does not allow its value to be changed, if you try editing the value of score, you will get the following TypeScript error, "Cannot assign to "score" because it is a read-only property."

One caveat to this though is that score or _score will never appear in Pinia's global state or in the Vue devtools Pinia panel, so keep this in mind.

I feel this is quite a simple, neat, easy-to-maintain, and type-safe method of protecting Pinia state. I have found other methods of protecting state such as this example using Vue's readonly() method but I didn't find this to be type-safe or very nice to use.

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

- \ No newline at end of file +})

In the example above, _score (annotated prefixed with an underscore to show it is internal) can be read via the score computed property, but cannot be mutated directly. Since score is a computed property, Vue does not allow its value to be changed, if you try editing the value of score, you will get the following TypeScript error, "Cannot assign to "score" because it is a read-only property."

One caveat to this though is that score or _score will never appear in Pinia's global state or in the Vue devtools Pinia panel, so keep this in mind.

I feel this is quite a simple, neat, easy-to-maintain, and type-safe method of protecting Pinia state. I have found other methods of protecting state such as this example using Vue's readonly() method but I didn't find this to be type-safe or very nice to use.

Disclaimer: All data and information are correct to the best of my knowledge at the time of writing.

What to read next

+ \ No newline at end of file diff --git a/blog/_payload.json b/blog/_payload.json index 42c0070ed..a57b7a1f2 100644 --- a/blog/_payload.json +++ b/blog/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":299},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"$NjJfml0E8M":118,"article-list-undefined":135},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120},{"type":37},[121],{"fields":122,"sys":133},{"hubDescription":123},{"nodeType":117,"data":124,"content":125},{},[126],{"nodeType":102,"data":127,"content":128},{},[129],{"nodeType":101,"value":130,"marks":131,"data":132},"I write articles about frontend development, careers in tech, my experiences and more. All articles are my own writing.",[],{},{"id":134,"type":48},"3Viop9UQLlIrWglTQjk5Bd",{"sys":136,"total":137,"skip":38,"limit":138,"items":139,"includes":297},{"type":37},5,1000,[140,173,206,237,267],{"fields":141,"sys":171},{"title":142,"description":143,"image":144,"tags":167,"publishDate":169,"slug":170},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":145,"sys":148,"fields":158},{"tags":146,"concepts":147},[],[],{"space":149,"id":151,"type":14,"createdAt":152,"updatedAt":153,"environment":154,"publishedVersion":156,"revision":157,"locale":22},{"sys":150},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":155},{"id":18,"type":10,"linkType":19},9,2,{"title":159,"description":159,"file":160},"Pineapple",{"url":161,"details":162,"fileName":165,"contentType":166},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":163,"image":164},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg",[168],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":172,"type":48},"7CUW25a1jLiar8pzd8K9Nh",{"fields":174,"sys":204},{"title":175,"description":176,"image":177,"tags":198,"publishDate":202,"slug":203},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":178,"sys":181,"fields":189},{"tags":179,"concepts":180},[],[],{"space":182,"id":184,"type":14,"createdAt":185,"updatedAt":185,"environment":186,"publishedVersion":188,"revision":21,"locale":22},{"sys":183},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":187},{"id":18,"type":10,"linkType":19},7,{"title":190,"description":191,"file":192},"When is a clickable div okay","An example modal element",{"url":193,"details":194,"fileName":197,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":195,"image":196},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[199,200,201],"Accessibility","UX","HTML","2023-07-18","when-is-a-clickable-div-okay",{"id":205,"type":48},"brxitJC35PyChlVzusyLP",{"fields":207,"sys":235},{"title":208,"description":209,"image":210,"tags":230,"publishDate":233,"slug":234},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":211,"sys":214,"fields":221},{"tags":212,"concepts":213},[],[],{"space":215,"id":217,"type":14,"createdAt":218,"updatedAt":218,"environment":219,"publishedVersion":137,"revision":21,"locale":22},{"sys":216},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":220},{"id":18,"type":10,"linkType":19},{"title":222,"description":223,"file":224},"clutter","A cluttered office desk",{"url":225,"details":226,"fileName":229,"contentType":166},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":227,"image":228},281805,{"width":31,"height":32},"clutter.jpg",[231,232,201],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":236,"type":48},"9dijdAHS9ROnOwXit47NQ",{"fields":238,"sys":265},{"title":239,"description":240,"image":241,"tags":261,"publishDate":263,"slug":264},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":242,"sys":245,"fields":252},{"tags":243,"concepts":244},[],[],{"space":246,"id":248,"type":14,"createdAt":249,"updatedAt":249,"environment":250,"publishedVersion":137,"revision":21,"locale":22},{"sys":247},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":251},{"id":18,"type":10,"linkType":19},{"title":253,"description":254,"file":255},"css=hover-media-query-og","CSS media query for hover",{"url":256,"details":257,"fileName":260,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":258,"image":259},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[262],"CSS","2020-07-06","hover-css-media-query",{"id":266,"type":48},"5GKjEQKbXAneX7HsUv1qtm",{"fields":268,"sys":295},{"title":269,"description":270,"image":271,"tags":291,"publishDate":293,"slug":294},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":272,"sys":275,"fields":282},{"tags":273,"concepts":274},[],[],{"space":276,"id":278,"type":14,"createdAt":279,"updatedAt":279,"environment":280,"publishedVersion":188,"revision":21,"locale":22},{"sys":277},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":281},{"id":18,"type":10,"linkType":19},{"title":283,"description":284,"file":285},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":286,"details":287,"fileName":290,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":288,"image":289},6959,{"width":31,"height":32},"neumorphic-design-og.png",[292,262],"Design","2020-05-27","learning-neumorphic-design",{"id":296,"type":48},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":298},[241,177,144,210,271],1733447471622] \ No newline at end of file +[{"data":1,"prerenderedAt":299},["ShallowReactive",2],{"$siNM9WAguS":3,"$NjJfml0E8M":35,"$mMA9bTNYLP":58,"article-list-undefined":135},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"fields":41,"sys":55},{"hubDescription":42},{"nodeType":43,"data":44,"content":45},"document",{},[46],{"nodeType":47,"data":48,"content":49},"paragraph",{},[50],{"nodeType":51,"value":52,"marks":53,"data":54},"text","I write articles about frontend development, careers in tech, my experiences and more. All articles are my own writing.",[],{},{"id":56,"type":57},"3Viop9UQLlIrWglTQjk5Bd","Entry",{"sys":59,"total":21,"skip":38,"limit":21,"items":60},{"type":37},[61],{"metadata":62,"sys":65,"fields":79},{"tags":63,"concepts":64},[],[],{"space":66,"id":68,"type":57,"createdAt":69,"updatedAt":70,"environment":71,"publishedVersion":73,"revision":74,"contentType":75,"locale":22},{"sys":67},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":72},{"id":18,"type":10,"linkType":19},61,13,{"sys":76},{"type":10,"linkType":77,"id":78},"ContentType","footer",{"name":80,"quickLinks":81,"socialLinks":98,"legalText":111},"Footer",[82,86,90,94],{"id":83,"key":84,"value":85},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":87,"key":88,"value":89},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":91,"key":92,"value":93},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":95,"key":96,"value":97},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[99,103,107],{"id":100,"key":101,"value":102},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":104,"key":105,"value":106},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":108,"key":109,"value":110},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":112,"content":113,"nodeType":43},{},[114,121,128],{"data":115,"content":116,"nodeType":47},{},[117],{"data":118,"marks":119,"value":120,"nodeType":51},{},[],"©2018-2024",{"data":122,"content":123,"nodeType":47},{},[124],{"data":125,"marks":126,"value":127,"nodeType":51},{},[],"All rights reserved.",{"data":129,"content":130,"nodeType":47},{},[131],{"data":132,"marks":133,"value":134,"nodeType":51},{},[],"Jack Domleo",{"sys":136,"total":137,"skip":38,"limit":138,"items":139,"includes":297},{"type":37},5,1000,[140,173,206,237,267],{"fields":141,"sys":171},{"title":142,"description":143,"image":144,"tags":167,"publishDate":169,"slug":170},"How to protect state in Pinia 🍍","Pinia, unlike Vuex, allows the state to be mutated directly, but sometimes we want to protect the state from being changed willy-nilly.",{"metadata":145,"sys":148,"fields":158},{"tags":146,"concepts":147},[],[],{"space":149,"id":151,"type":14,"createdAt":152,"updatedAt":153,"environment":154,"publishedVersion":156,"revision":157,"locale":22},{"sys":150},{"type":10,"linkType":11,"id":12},"5iurYkErtwupD6LkJba4Jd","2024-03-23T20:34:09.782Z","2024-03-23T20:36:22.415Z",{"sys":155},{"id":18,"type":10,"linkType":19},9,2,{"title":159,"description":159,"file":160},"Pineapple",{"url":161,"details":162,"fileName":165,"contentType":166},"//images.ctfassets.net/l1wujzr3g1ab/5iurYkErtwupD6LkJba4Jd/eb717e6e4789957a33423f5f9fea4197/sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg",{"size":163,"image":164},153411,{"width":31,"height":32},"sumner-mahaffey-7vCt_lFxKx4-unsplash.jpg","image/jpeg",[168],"Vue","2024-04-07","how-to-protect-state-in-pinia",{"id":172,"type":57},"7CUW25a1jLiar8pzd8K9Nh",{"fields":174,"sys":204},{"title":175,"description":176,"image":177,"tags":198,"publishDate":202,"slug":203},"When is a clickable div okay?","When it comes to accessibility, putting a click event on a div is taboo, but when is it okay to do so?",{"metadata":178,"sys":181,"fields":189},{"tags":179,"concepts":180},[],[],{"space":182,"id":184,"type":14,"createdAt":185,"updatedAt":185,"environment":186,"publishedVersion":188,"revision":21,"locale":22},{"sys":183},{"type":10,"linkType":11,"id":12},"3nzHtHCAq4EKudWvrOOw4p","2023-07-11T21:23:08.036Z",{"sys":187},{"id":18,"type":10,"linkType":19},7,{"title":190,"description":191,"file":192},"When is a clickable div okay","An example modal element",{"url":193,"details":194,"fileName":197,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nzHtHCAq4EKudWvrOOw4p/8bd8a51d97f431c933084f4413036eec/when-is-a-clickable-div-okay.png",{"size":195,"image":196},133997,{"width":31,"height":32},"when-is-a-clickable-div-okay.png",[199,200,201],"Accessibility","UX","HTML","2023-07-18","when-is-a-clickable-div-okay",{"id":205,"type":57},"brxitJC35PyChlVzusyLP",{"fields":207,"sys":235},{"title":208,"description":209,"image":210,"tags":230,"publishDate":233,"slug":234},"Should you clean out your blog?","If like me, you own a blog, you may ask yourself if it's ever a good idea to clean it out from time to time.",{"metadata":211,"sys":214,"fields":221},{"tags":212,"concepts":213},[],[],{"space":215,"id":217,"type":14,"createdAt":218,"updatedAt":218,"environment":219,"publishedVersion":137,"revision":21,"locale":22},{"sys":216},{"type":10,"linkType":11,"id":12},"6Fk3J1WEn0YRhIGUawl63P","2023-02-15T20:26:31.807Z",{"sys":220},{"id":18,"type":10,"linkType":19},{"title":222,"description":223,"file":224},"clutter","A cluttered office desk",{"url":225,"details":226,"fileName":229,"contentType":166},"//images.ctfassets.net/l1wujzr3g1ab/6Fk3J1WEn0YRhIGUawl63P/a98a9a5ba72aef1afc04111bc7a9e5f9/clutter.jpg",{"size":227,"image":228},281805,{"width":31,"height":32},"clutter.jpg",[231,232,201],"Tips","Productivity","2023-02-16","should-you-clean-out-your-blog",{"id":236,"type":57},"9dijdAHS9ROnOwXit47NQ",{"fields":238,"sys":265},{"title":239,"description":240,"image":241,"tags":261,"publishDate":263,"slug":264},"@media (hover: hover) - CSS Media Query","The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",{"metadata":242,"sys":245,"fields":252},{"tags":243,"concepts":244},[],[],{"space":246,"id":248,"type":14,"createdAt":249,"updatedAt":249,"environment":250,"publishedVersion":137,"revision":21,"locale":22},{"sys":247},{"type":10,"linkType":11,"id":12},"1BWwf3Fg2A0y1RhcY7oNqq","2023-01-22T21:55:22.730Z",{"sys":251},{"id":18,"type":10,"linkType":19},{"title":253,"description":254,"file":255},"css=hover-media-query-og","CSS media query for hover",{"url":256,"details":257,"fileName":260,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1BWwf3Fg2A0y1RhcY7oNqq/0dadb7c242364de5ac4f5b63dd57f1b6/css_hover-media-query-og.png",{"size":258,"image":259},13019,{"width":31,"height":32},"css=hover-media-query-og.png",[262],"CSS","2020-07-06","hover-css-media-query",{"id":266,"type":57},"5GKjEQKbXAneX7HsUv1qtm",{"fields":268,"sys":295},{"title":269,"description":270,"image":271,"tags":291,"publishDate":293,"slug":294},"Learning Neumorphic Design","The awesome design trend that never took off! What are the fundamentals to neumorphic design?",{"metadata":272,"sys":275,"fields":282},{"tags":273,"concepts":274},[],[],{"space":276,"id":278,"type":14,"createdAt":279,"updatedAt":279,"environment":280,"publishedVersion":188,"revision":21,"locale":22},{"sys":277},{"type":10,"linkType":11,"id":12},"T6RRM5TpnSzYm6UQolMMf","2023-01-24T20:35:16.287Z",{"sys":281},{"id":18,"type":10,"linkType":19},{"title":283,"description":284,"file":285},"neumorphic-design-og","A music player UI with a neumorphism design",{"url":286,"details":287,"fileName":290,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/T6RRM5TpnSzYm6UQolMMf/a51b32aea0faa8885d8e525c436b5073/neumorphic-design-og.png",{"size":288,"image":289},6959,{"width":31,"height":32},"neumorphic-design-og.png",[292,262],"Design","2020-05-27","learning-neumorphic-design",{"id":296,"type":57},"2KWdODn6oaRYNzG4Qz4yd3",{"Asset":298},[241,177,144,210,271],1733533838701] \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index a7a5d4fda..992a96f35 100644 --- a/blog/index.html +++ b/blog/index.html @@ -25,7 +25,7 @@ - + @@ -80,5 +80,5 @@ -

Blog

I write articles about frontend development, careers in tech, my experiences and more. All articles are my own writing.

- \ No newline at end of file +

Blog

I write articles about frontend development, careers in tech, my experiences and more. All articles are my own writing.

+ \ No newline at end of file diff --git a/index.html b/index.html index 803080bb6..d5e68f12d 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ - + @@ -77,5 +77,5 @@ -
Jack Domleo portrait

Jack Domleo

Senior Frontend Developer

Jack Domleo portrait

About me

Hi, I'm Jack Domleo, a Nottinghamshire-based developer in the UK, currently working as a Senior Frontend Developer at Ocean Finance.

I have just over 6 years of professional experience working as a developer. I often work with Vue.js, TypeScript, Vite, Vitest, SCSS, Storybook, and PlayWright.

I have a passion for frontend technologies, and writing clean websites and applications while maintaining high accessibility standards.

Skills

  • Vue.js
  • Nuxt.js
  • TypeScript
  • Jest
  • Storybook
  • Sass/SCSS
  • Accessibility
  • Node.js
  • npm
  • VS Code
  • JavaScript
  • HTML

Projects

Check out more of my work
- \ No newline at end of file +
Jack Domleo portrait

Jack Domleo

Senior Frontend Developer

Jack Domleo portrait

About me

Hi, I'm Jack Domleo, a Nottinghamshire-based developer in the UK, currently working as a Senior Frontend Developer at Ocean Finance.

I have just over 6 years of professional experience working as a developer. I often work with Vue.js, TypeScript, Vite, Vitest, SCSS, Storybook, and PlayWright.

I have a passion for frontend technologies, and writing clean websites and applications while maintaining high accessibility standards.

Skills

  • Vue.js
  • Nuxt.js
  • TypeScript
  • Jest
  • Storybook
  • Sass/SCSS
  • Accessibility
  • Node.js
  • npm
  • VS Code
  • JavaScript
  • HTML

Projects

Check out more of my work
+ \ No newline at end of file diff --git a/links/_payload.json b/links/_payload.json index 2440d1f20..f65c1e3c1 100644 --- a/links/_payload.json +++ b/links/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":157},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"$jGglCoQTCg":118},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120},{"type":37},[121],{"metadata":122,"sys":125,"fields":136},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":53,"revision":54,"contentType":133,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"7wQfnGkr6ugDbtBc01Oo3q","2023-01-29T22:34:29.625Z","2024-04-30T18:48:13.573Z",{"sys":132},{"id":18,"type":10,"linkType":19},{"sys":134},{"type":10,"linkType":57,"id":135},"links",{"title":76,"links":137},{"items":138},[139,142,144,146,149,151,153],{"name":140,"url":65,"icon":141},"Website","j_icon",{"name":72,"url":73,"icon":143},"blog",{"name":81,"url":82,"icon":145},"github",{"name":147,"url":148,"icon":145},"GitHub Gists","https://gist.github.com/jackdomleo7",{"name":85,"url":86,"icon":150},"codepen",{"name":89,"url":90,"icon":152},"linkedin",{"name":154,"url":155,"icon":156},"Goodreads","https://www.goodreads.com/author/show/21046556.Jack_Domleo","goodreads",1733447471623] \ No newline at end of file +[{"data":1,"prerenderedAt":157},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"$jGglCoQTCg":118},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120},{"type":37},[121],{"metadata":122,"sys":125,"fields":136},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":53,"revision":54,"contentType":133,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"7wQfnGkr6ugDbtBc01Oo3q","2023-01-29T22:34:29.625Z","2024-04-30T18:48:13.573Z",{"sys":132},{"id":18,"type":10,"linkType":19},{"sys":134},{"type":10,"linkType":57,"id":135},"links",{"title":76,"links":137},{"items":138},[139,142,144,146,149,151,153],{"name":140,"url":65,"icon":141},"Website","j_icon",{"name":72,"url":73,"icon":143},"blog",{"name":81,"url":82,"icon":145},"github",{"name":147,"url":148,"icon":145},"GitHub Gists","https://gist.github.com/jackdomleo7",{"name":85,"url":86,"icon":150},"codepen",{"name":89,"url":90,"icon":152},"linkedin",{"name":154,"url":155,"icon":156},"Goodreads","https://www.goodreads.com/author/show/21046556.Jack_Domleo","goodreads",1733533838702] \ No newline at end of file diff --git a/links/index.html b/links/index.html index 49b8ee045..71368d08b 100644 --- a/links/index.html +++ b/links/index.html @@ -18,7 +18,7 @@ - + @@ -70,5 +70,5 @@ -

Links

- \ No newline at end of file +

Links

+ \ No newline at end of file diff --git a/privacy-policy/_payload.json b/privacy-policy/_payload.json index 9d82656cb..ea8a44cb0 100644 --- a/privacy-policy/_payload.json +++ b/privacy-policy/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":214},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"basicpage-privacy-policy":118},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"5BhyWcixuuIzHusSjOmiNu","2023-01-31T07:57:09.214Z","2024-11-09T14:31:51.151Z",{"sys":132},{"id":18,"type":10,"linkType":19},40,4,{"sys":136},{"type":10,"linkType":57,"id":137},"basicPage",{"title":139,"slug":140,"body":141},"Privacy Policy","privacy-policy",{"nodeType":117,"data":142,"content":143},{},[144,157,177,184,191,198],{"nodeType":102,"data":145,"content":146},{},[147,153],{"nodeType":101,"value":148,"marks":149,"data":152},"Definitions",[150],{"type":151},"bold",{},{"nodeType":101,"value":154,"marks":155,"data":156},": 'I', 'me', 'my': Jack Domleo - owner of this website.",[],{},{"nodeType":102,"data":158,"content":159},{},[160,164,173],{"nodeType":101,"value":161,"marks":162,"data":163},"Your privacy is important to me. It is my policy to respect your privacy regarding any information I may collect from you across this website, ",[],{},{"nodeType":165,"data":166,"content":168},"hyperlink",{"uri":167},"https://jackdomleo.dev",[169],{"nodeType":101,"value":170,"marks":171,"data":172},"jackdomleo.dev",[],{},{"nodeType":101,"value":174,"marks":175,"data":176},".",[],{},{"nodeType":102,"data":178,"content":179},{},[180],{"nodeType":101,"value":181,"marks":182,"data":183},"I do not collect any personal information. I do not use cookies or any tracking software.",[],{},{"nodeType":102,"data":185,"content":186},{},[187],{"nodeType":101,"value":188,"marks":189,"data":190},"My website may link to external sites that are not operated by me. Please be aware that I have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.",[],{},{"nodeType":102,"data":192,"content":193},{},[194],{"nodeType":101,"value":195,"marks":196,"data":197},"My website may link to external sites via an affiliate link. Please be aware that each site may have its own way of tracking the affiliate back to me, whether it be via cookies or my own discount code. Please review their respective privacy policies regarding affiliate tracking.",[],{},{"nodeType":102,"data":199,"content":200},{},[201,205,211],{"nodeType":101,"value":202,"marks":203,"data":204},"Your continued use of my website will be regarded as acceptance of my practices around privacy and personal information. If you have any questions about how I handle user data and personal information, feel free to contact me via ",[],{},{"nodeType":165,"data":206,"content":207},{"uri":90},[208],{"nodeType":101,"value":89,"marks":209,"data":210},[],{},{"nodeType":101,"value":174,"marks":212,"data":213},[],{},1733447471197] \ No newline at end of file +[{"data":1,"prerenderedAt":214},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"basicpage-privacy-policy":118},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120},{"type":37},[121],{"metadata":122,"sys":125,"fields":138},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":134,"contentType":135,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"5BhyWcixuuIzHusSjOmiNu","2023-01-31T07:57:09.214Z","2024-11-09T14:31:51.151Z",{"sys":132},{"id":18,"type":10,"linkType":19},40,4,{"sys":136},{"type":10,"linkType":57,"id":137},"basicPage",{"title":139,"slug":140,"body":141},"Privacy Policy","privacy-policy",{"nodeType":117,"data":142,"content":143},{},[144,157,177,184,191,198],{"nodeType":102,"data":145,"content":146},{},[147,153],{"nodeType":101,"value":148,"marks":149,"data":152},"Definitions",[150],{"type":151},"bold",{},{"nodeType":101,"value":154,"marks":155,"data":156},": 'I', 'me', 'my': Jack Domleo - owner of this website.",[],{},{"nodeType":102,"data":158,"content":159},{},[160,164,173],{"nodeType":101,"value":161,"marks":162,"data":163},"Your privacy is important to me. It is my policy to respect your privacy regarding any information I may collect from you across this website, ",[],{},{"nodeType":165,"data":166,"content":168},"hyperlink",{"uri":167},"https://jackdomleo.dev",[169],{"nodeType":101,"value":170,"marks":171,"data":172},"jackdomleo.dev",[],{},{"nodeType":101,"value":174,"marks":175,"data":176},".",[],{},{"nodeType":102,"data":178,"content":179},{},[180],{"nodeType":101,"value":181,"marks":182,"data":183},"I do not collect any personal information. I do not use cookies or any tracking software.",[],{},{"nodeType":102,"data":185,"content":186},{},[187],{"nodeType":101,"value":188,"marks":189,"data":190},"My website may link to external sites that are not operated by me. Please be aware that I have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.",[],{},{"nodeType":102,"data":192,"content":193},{},[194],{"nodeType":101,"value":195,"marks":196,"data":197},"My website may link to external sites via an affiliate link. Please be aware that each site may have its own way of tracking the affiliate back to me, whether it be via cookies or my own discount code. Please review their respective privacy policies regarding affiliate tracking.",[],{},{"nodeType":102,"data":199,"content":200},{},[201,205,211],{"nodeType":101,"value":202,"marks":203,"data":204},"Your continued use of my website will be regarded as acceptance of my practices around privacy and personal information. If you have any questions about how I handle user data and personal information, feel free to contact me via ",[],{},{"nodeType":165,"data":206,"content":207},{"uri":90},[208],{"nodeType":101,"value":89,"marks":209,"data":210},[],{},{"nodeType":101,"value":174,"marks":212,"data":213},[],{},1733533838286] \ No newline at end of file diff --git a/privacy-policy/index.html b/privacy-policy/index.html index 7f50c513b..8a3d94f15 100644 --- a/privacy-policy/index.html +++ b/privacy-policy/index.html @@ -18,7 +18,7 @@ - + @@ -70,5 +70,5 @@ -

Privacy Policy

Last updated:

Definitions: 'I', 'me', 'my': Jack Domleo - owner of this website.

Your privacy is important to me. It is my policy to respect your privacy regarding any information I may collect from you across this website, jackdomleo.dev.

I do not collect any personal information. I do not use cookies or any tracking software.

My website may link to external sites that are not operated by me. Please be aware that I have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.

My website may link to external sites via an affiliate link. Please be aware that each site may have its own way of tracking the affiliate back to me, whether it be via cookies or my own discount code. Please review their respective privacy policies regarding affiliate tracking.

Your continued use of my website will be regarded as acceptance of my practices around privacy and personal information. If you have any questions about how I handle user data and personal information, feel free to contact me via LinkedIn.

- \ No newline at end of file +

Privacy Policy

Last updated:

Definitions: 'I', 'me', 'my': Jack Domleo - owner of this website.

Your privacy is important to me. It is my policy to respect your privacy regarding any information I may collect from you across this website, jackdomleo.dev.

I do not collect any personal information. I do not use cookies or any tracking software.

My website may link to external sites that are not operated by me. Please be aware that I have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.

My website may link to external sites via an affiliate link. Please be aware that each site may have its own way of tracking the affiliate back to me, whether it be via cookies or my own discount code. Please review their respective privacy policies regarding affiliate tracking.

Your continued use of my website will be regarded as acceptance of my practices around privacy and personal information. If you have any questions about how I handle user data and personal information, feel free to contact me via LinkedIn.

+ \ No newline at end of file diff --git a/projects/_payload.json b/projects/_payload.json index 62ac79527..0e041be53 100644 --- a/projects/_payload.json +++ b/projects/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":940},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"$YWCdSV8Jub":118,"project-list-undefined":169},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120},{"type":37},[121],{"metadata":122,"sys":125,"fields":137},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":54,"contentType":134,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"4Og1KH2T7fvFl3RgBWX1rL","2023-01-27T22:02:37.696Z","2023-01-28T19:14:25.079Z",{"sys":132},{"id":18,"type":10,"linkType":19},33,{"sys":135},{"type":10,"linkType":57,"id":136},"projects",{"title":68,"description":138},{"data":139,"content":140,"nodeType":117},{},[141],{"data":142,"content":143,"nodeType":102},{},[144,148,155,159,165],{"data":145,"marks":146,"value":147,"nodeType":101},{},[],"I enjoy creating different types of projects in my spare time using a range of technologies. You can find all of my featured projects here, and many more projects on ",{"data":149,"content":150,"nodeType":154},{"uri":82},[151],{"data":152,"marks":153,"value":81,"nodeType":101},{},[],"hyperlink",{"data":156,"marks":157,"value":158,"nodeType":101},{},[]," and ",{"data":160,"content":161,"nodeType":154},{"uri":86},[162],{"data":163,"marks":164,"value":85,"nodeType":101},{},[],{"data":166,"marks":167,"value":168,"nodeType":101},{},[],".",{"sys":170,"total":171,"skip":38,"limit":172,"items":173,"includes":938},{"type":37},15,1000,[174,233,286,335,386,440,488,540,590,639,690,740,789,837,886],{"metadata":175,"sys":178,"fields":189},{"tags":176,"concepts":177},[],[],{"space":179,"id":181,"type":48,"createdAt":182,"updatedAt":182,"environment":183,"publishedVersion":185,"revision":21,"contentType":186,"locale":22},{"sys":180},{"type":10,"linkType":11,"id":12},"4Kiex9dMPsL87rteSvnG2h","2023-01-28T19:13:41.069Z",{"sys":184},{"id":18,"type":10,"linkType":19},10,{"sys":187},{"type":10,"linkType":57,"id":188},"project",{"name":190,"type":191,"url":192,"description":193,"tech":203,"tags":208,"image":210},"Grassverse NFT","Client","https://www.grassverse.org/",{"data":194,"content":195,"nodeType":117},{},[196],{"data":197,"content":198,"nodeType":102},{},[199],{"data":200,"marks":201,"value":202,"nodeType":101},{},[],"This website came with pre-existing designs and includes a CMS and an account section for Grassverse asset owners to log in to view their assets and fellow owners of assets.",[204,205,206,207],"Nuxt 2","Web3","TypeScript","SCSS",[209],"NFT",{"metadata":211,"sys":214,"fields":222},{"tags":212,"concepts":213},[],[],{"space":215,"id":217,"type":14,"createdAt":218,"updatedAt":218,"environment":219,"publishedVersion":221,"revision":21,"locale":22},{"sys":216},{"type":10,"linkType":11,"id":12},"01rxXuPpEQ6phTc1Bvt9W9","2023-01-28T19:13:34.307Z",{"sys":220},{"id":18,"type":10,"linkType":19},3,{"title":223,"description":224,"file":225},"grassverse-project-img","",{"url":226,"details":227,"fileName":232,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/01rxXuPpEQ6phTc1Bvt9W9/5d347eb3e2a3731922c0aa7046273780/grassverse-project-img.png",{"size":228,"image":229},163210,{"width":230,"height":231},600,315,"grassverse-project-img.png",{"metadata":234,"sys":237,"fields":246},{"tags":235,"concepts":236},[],[],{"space":238,"id":240,"type":48,"createdAt":241,"updatedAt":241,"environment":242,"publishedVersion":20,"revision":21,"contentType":244,"locale":22},{"sys":239},{"type":10,"linkType":11,"id":12},"2JxOvMguZVHxM565SKDspu","2023-01-28T18:25:42.700Z",{"sys":243},{"id":18,"type":10,"linkType":19},{"sys":245},{"type":10,"linkType":57,"id":188},{"name":247,"type":248,"url":249,"description":250,"tech":260,"tags":263,"image":265},"npx jackdomleo7","Mini","https://github.com/jackdomleo7/npx_business_card",{"data":251,"content":252,"nodeType":117},{},[253],{"data":254,"content":255,"nodeType":102},{},[256],{"data":257,"marks":258,"value":259,"nodeType":101},{},[],"A simple npm script to show some details about me right in the console.",[261,262],"JavaScript","npx",[264],"npm package",{"metadata":266,"sys":269,"fields":277},{"tags":267,"concepts":268},[],[],{"space":270,"id":272,"type":14,"createdAt":273,"updatedAt":273,"environment":274,"publishedVersion":276,"revision":21,"locale":22},{"sys":271},{"type":10,"linkType":11,"id":12},"2ilJcH34gnOn1SEfkJqlJj","2023-01-28T18:25:36.903Z",{"sys":275},{"id":18,"type":10,"linkType":19},5,{"title":278,"description":247,"file":279},"npx-jackdomleo7-project-img",{"url":280,"details":281,"fileName":284,"contentType":285},"//images.ctfassets.net/l1wujzr3g1ab/2ilJcH34gnOn1SEfkJqlJj/69c7b64c07e828439e60e1287e47828c/npx-jackdomleo7-project-img.gif",{"size":282,"image":283},30415,{"width":230,"height":231},"npx-jackdomleo7-project-img.gif","image/gif",{"metadata":287,"sys":290,"fields":299},{"tags":288,"concepts":289},[],[],{"space":291,"id":293,"type":48,"createdAt":294,"updatedAt":294,"environment":295,"publishedVersion":185,"revision":21,"contentType":297,"locale":22},{"sys":292},{"type":10,"linkType":11,"id":12},"1y1gYckxXHOqS4a811GoMM","2023-01-28T18:10:23.588Z",{"sys":296},{"id":18,"type":10,"linkType":19},{"sys":298},{"type":10,"linkType":57,"id":188},{"name":300,"type":191,"url":301,"description":302,"tech":312,"tags":313,"image":314},"Mad Parrot Crew NFT","https://www.madparrotcrew.com/",{"data":303,"content":304,"nodeType":117},{},[305],{"data":306,"content":307,"nodeType":102},{},[308],{"data":309,"marks":310,"value":311,"nodeType":101},{},[],"Created a fully responsive minting website based on existing designs for the Mad Parrot Crew NFT.",[204,206,207],[209],{"metadata":315,"sys":318,"fields":326},{"tags":316,"concepts":317},[],[],{"space":319,"id":321,"type":14,"createdAt":322,"updatedAt":322,"environment":323,"publishedVersion":325,"revision":21,"locale":22},{"sys":320},{"type":10,"linkType":11,"id":12},"4yYU2VsDfEvMnOIFnWe8s6","2023-01-28T18:10:15.589Z",{"sys":324},{"id":18,"type":10,"linkType":19},6,{"title":327,"description":328,"file":329},"mad-parrot-crew-project-img","Screenshot of Mad Parrot Crew home page",{"url":330,"details":331,"fileName":334,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/4yYU2VsDfEvMnOIFnWe8s6/550e38a11ea5618096b160698925405c/mad-parrot-crew-project-img.png",{"size":332,"image":333},148413,{"width":230,"height":231},"mad-parrot-crew-project-img.png",{"metadata":336,"sys":339,"fields":349},{"tags":337,"concepts":338},[],[],{"space":340,"id":342,"type":48,"createdAt":343,"updatedAt":343,"environment":344,"publishedVersion":346,"revision":21,"contentType":347,"locale":22},{"sys":341},{"type":10,"linkType":11,"id":12},"6OEC4mGGiIzD1ebZVuCeke","2023-01-28T17:54:35.724Z",{"sys":345},{"id":18,"type":10,"linkType":19},7,{"sys":348},{"type":10,"linkType":57,"id":188},{"name":350,"type":351,"url":352,"description":353,"tech":363,"image":365},"Spring Clean Twitter Bot","Project","https://github.com/jackdomleo7/Spring_Clean_Twitter_Bot",{"data":354,"content":355,"nodeType":117},{},[356],{"data":357,"content":358,"nodeType":102},{},[359],{"data":360,"marks":361,"value":362,"nodeType":101},{},[],"A Twitter bot to automatically clean up my Twitter account.",[206,364],"CRON",{"metadata":366,"sys":369,"fields":377},{"tags":367,"concepts":368},[],[],{"space":370,"id":372,"type":14,"createdAt":373,"updatedAt":373,"environment":374,"publishedVersion":376,"revision":21,"locale":22},{"sys":371},{"type":10,"linkType":11,"id":12},"5zb0pDWNBVdorGnCnM0gwb","2023-01-28T17:54:30.356Z",{"sys":375},{"id":18,"type":10,"linkType":19},4,{"title":378,"description":379,"file":380},"twitter-spring-clean-bot-project-img","Twitter spring clean",{"url":381,"details":382,"fileName":385,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/5zb0pDWNBVdorGnCnM0gwb/d9cf343aeb2136f44ab17dc6b0410281/twitter-spring-clean-bot-project-img.png",{"size":383,"image":384},150202,{"width":230,"height":231},"twitter-spring-clean-bot-project-img.png",{"metadata":387,"sys":390,"fields":399},{"tags":388,"concepts":389},[],[],{"space":391,"id":393,"type":48,"createdAt":394,"updatedAt":394,"environment":395,"publishedVersion":185,"revision":21,"contentType":397,"locale":22},{"sys":392},{"type":10,"linkType":11,"id":12},"5kzQZ2SXoScnodt56Ulmiv","2023-01-28T17:37:10.177Z",{"sys":396},{"id":18,"type":10,"linkType":19},{"sys":398},{"type":10,"linkType":57,"id":188},{"name":400,"type":248,"url":401,"description":402,"tech":416,"tags":418,"image":420},"Colour Theme Watcher & Switcher","https://codepen.io/jackdomleo7/full/OJWaeem",{"data":403,"content":404,"nodeType":117},{},[405],{"data":406,"content":407,"nodeType":102},{},[408,412],{"data":409,"marks":410,"value":411,"nodeType":101},{},[],"A pure JavaScript snippet to watch",{"data":413,"marks":414,"value":415,"nodeType":101},{},[],"/detect a user's colour theme and allow them to change it.",[261,417],"CSS",[419],"Utility",{"metadata":421,"sys":424,"fields":431},{"tags":422,"concepts":423},[],[],{"space":425,"id":427,"type":14,"createdAt":428,"updatedAt":428,"environment":429,"publishedVersion":276,"revision":21,"locale":22},{"sys":426},{"type":10,"linkType":11,"id":12},"5u50SbmPUZoqIhzqtV7UaL","2023-01-28T17:37:05.167Z",{"sys":430},{"id":18,"type":10,"linkType":19},{"title":432,"description":433,"file":434},"colour-theme-picker-project-img","Changing colour theme from dark to light",{"url":435,"details":436,"fileName":439,"contentType":285},"//images.ctfassets.net/l1wujzr3g1ab/5u50SbmPUZoqIhzqtV7UaL/b7abf17a991a5e6b491ed212cd8e1c49/colour-theme-picker-project-img.gif",{"size":437,"image":438},123783,{"width":230,"height":231},"colour-theme-picker-project-img.gif",{"metadata":441,"sys":444,"fields":453},{"tags":442,"concepts":443},[],[],{"space":445,"id":447,"type":48,"createdAt":448,"updatedAt":448,"environment":449,"publishedVersion":20,"revision":21,"contentType":451,"locale":22},{"sys":446},{"type":10,"linkType":11,"id":12},"2qHSazjv6Ro4OXfCrkVkwg","2023-01-28T17:31:17.504Z",{"sys":450},{"id":18,"type":10,"linkType":19},{"sys":452},{"type":10,"linkType":57,"id":188},{"name":454,"type":248,"url":455,"description":456,"tech":466,"image":468},"Custom Car Colour Preview","https://codepen.io/jackdomleo7/full/wvoYjNP",{"data":457,"content":458,"nodeType":117},{},[459],{"data":460,"content":461,"nodeType":102},{},[462],{"data":463,"marks":464,"value":465,"nodeType":101},{},[],"An application to preview different colours of a car.",[467,207],"SVG",{"metadata":469,"sys":472,"fields":479},{"tags":470,"concepts":471},[],[],{"space":473,"id":475,"type":14,"createdAt":476,"updatedAt":476,"environment":477,"publishedVersion":276,"revision":21,"locale":22},{"sys":474},{"type":10,"linkType":11,"id":12},"1ZmqPLpQtjTJPsWiUB8ihd","2023-01-28T17:31:09.936Z",{"sys":478},{"id":18,"type":10,"linkType":19},{"title":480,"description":481,"file":482},"car-colour-picker-project-img","A car changing colour",{"url":483,"details":484,"fileName":487,"contentType":285},"//images.ctfassets.net/l1wujzr3g1ab/1ZmqPLpQtjTJPsWiUB8ihd/89be01caacd54b1d9e5975e584056260/car-colour-picker-project-img.gif",{"size":485,"image":486},439705,{"width":230,"height":231},"car-colour-picker-project-img.gif",{"metadata":489,"sys":492,"fields":504},{"tags":490,"concepts":491},[],[],{"space":493,"id":495,"type":48,"createdAt":496,"updatedAt":497,"environment":498,"publishedVersion":500,"revision":501,"contentType":502,"locale":22},{"sys":494},{"type":10,"linkType":11,"id":12},"wpQfsnzkVT7y1Eg4ANU24","2023-01-28T17:25:18.524Z","2023-01-28T17:37:25.464Z",{"sys":499},{"id":18,"type":10,"linkType":19},14,2,{"sys":503},{"type":10,"linkType":57,"id":188},{"name":505,"type":351,"url":506,"description":507,"tech":517,"tags":519,"image":520},"Checka11y.css","https://checka11y.jackdomleo.dev/",{"data":508,"content":509,"nodeType":117},{},[510],{"data":511,"content":512,"nodeType":102},{},[513],{"data":514,"marks":515,"value":516,"nodeType":101},{},[],"A CSS stylesheet to quickly highlight a11y concerns and a really good education project for those wanting to learn about accessibility.",[207,518],"Cypress",[264,419],{"metadata":521,"sys":524,"fields":531},{"tags":522,"concepts":523},[],[],{"space":525,"id":527,"type":14,"createdAt":528,"updatedAt":528,"environment":529,"publishedVersion":276,"revision":21,"locale":22},{"sys":526},{"type":10,"linkType":11,"id":12},"3nPJwMFNQ8OZ7OlHMED3YJ","2023-01-28T17:25:13.225Z",{"sys":530},{"id":18,"type":10,"linkType":19},{"title":532,"description":533,"file":534},"checka11y-project-img","Checka11y.css logo",{"url":535,"details":536,"fileName":539,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nPJwMFNQ8OZ7OlHMED3YJ/9350ee10587c33b4e9dd71464aa1173d/checka11y-project-img.png",{"size":537,"image":538},28340,{"width":230,"height":231},"checka11y-project-img.png",{"metadata":541,"sys":544,"fields":553},{"tags":542,"concepts":543},[],[],{"space":545,"id":547,"type":48,"createdAt":548,"updatedAt":548,"environment":549,"publishedVersion":20,"revision":21,"contentType":551,"locale":22},{"sys":546},{"type":10,"linkType":11,"id":12},"6egKMvjf6ugswngEWd7bzb","2023-01-28T17:19:29.418Z",{"sys":550},{"id":18,"type":10,"linkType":19},{"sys":552},{"type":10,"linkType":57,"id":188},{"name":554,"type":248,"url":555,"description":556,"tech":566,"tags":568,"image":570},"Spinning Smiley Face","https://codepen.io/jackdomleo7/full/wvKLjVb",{"data":557,"content":558,"nodeType":117},{},[559],{"data":560,"content":561,"nodeType":102},{},[562],{"data":563,"marks":564,"value":565,"nodeType":101},{},[],"A cute spinning smiley face while learning GSAP.",[567,207],"GSAP",[569],"Animation",{"metadata":571,"sys":574,"fields":581},{"tags":572,"concepts":573},[],[],{"space":575,"id":577,"type":14,"createdAt":578,"updatedAt":578,"environment":579,"publishedVersion":276,"revision":21,"locale":22},{"sys":576},{"type":10,"linkType":11,"id":12},"6i901gWFLWWSjs2ZYc9rpL","2023-01-28T17:19:17.739Z",{"sys":580},{"id":18,"type":10,"linkType":19},{"title":582,"description":583,"file":584},"spinning-smiley-face-project-img","Spinning smiley face animation",{"url":585,"details":586,"fileName":589,"contentType":285},"//images.ctfassets.net/l1wujzr3g1ab/6i901gWFLWWSjs2ZYc9rpL/e32d8b3cb14a794272c70360d1a39ac9/spinning-smiley-face-project-img.gif",{"size":587,"image":588},232759,{"width":230,"height":231},"spinning-smiley-face-project-img.gif",{"metadata":591,"sys":594,"fields":603},{"tags":592,"concepts":593},[],[],{"space":595,"id":597,"type":48,"createdAt":598,"updatedAt":598,"environment":599,"publishedVersion":346,"revision":21,"contentType":601,"locale":22},{"sys":596},{"type":10,"linkType":11,"id":12},"1rx3EwhjpCdMESgcFDv0CY","2023-01-28T17:10:10.423Z",{"sys":600},{"id":18,"type":10,"linkType":19},{"sys":602},{"type":10,"linkType":57,"id":188},{"name":604,"type":248,"url":605,"description":606,"tech":616,"tags":617,"image":619},"CSS Union Jack Flag","https://codepen.io/jackdomleo7/full/abvrgEo",{"nodeType":117,"data":607,"content":608},{},[609],{"nodeType":102,"data":610,"content":611},{},[612],{"nodeType":101,"value":613,"marks":614,"data":615},"A pure CSS pixel-perfect Union Jack flag.",[],{},[207],[618],"CSS Art",{"metadata":620,"sys":623,"fields":630},{"tags":621,"concepts":622},[],[],{"space":624,"id":626,"type":14,"createdAt":627,"updatedAt":627,"environment":628,"publishedVersion":276,"revision":21,"locale":22},{"sys":625},{"type":10,"linkType":11,"id":12},"2220otIqCHTmP1a6UkmHTO","2023-01-28T17:10:05.172Z",{"sys":629},{"id":18,"type":10,"linkType":19},{"title":631,"description":632,"file":633},"union-jack-project-img","Union Jack Flag",{"url":634,"details":635,"fileName":638,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2220otIqCHTmP1a6UkmHTO/1b888dd09c45cbb842cd476585c54eaf/union-jack-project-img.png",{"size":636,"image":637},29999,{"width":230,"height":231},"union-jack-project-img.png",{"metadata":640,"sys":643,"fields":654},{"tags":641,"concepts":642},[],[],{"space":644,"id":646,"type":48,"createdAt":647,"updatedAt":648,"environment":649,"publishedVersion":651,"revision":501,"contentType":652,"locale":22},{"sys":645},{"type":10,"linkType":11,"id":12},"3NkVQqDSFreEt3KgDspqhk","2023-01-28T12:20:29.489Z","2023-01-28T17:37:59.428Z",{"sys":650},{"id":18,"type":10,"linkType":19},9,{"sys":653},{"type":10,"linkType":57,"id":188},{"name":655,"type":248,"url":656,"description":657,"tech":667,"tags":668,"image":670},"Neumorphic Design Elements","https://codepen.io/jackdomleo7/full/mdeowoz",{"data":658,"content":659,"nodeType":117},{},[660],{"data":661,"content":662,"nodeType":102},{},[663],{"data":664,"marks":665,"value":666,"nodeType":101},{},[],"Some common UI elements in the style of neumorphic design.",[207],[669],"Popular",{"metadata":671,"sys":674,"fields":681},{"tags":672,"concepts":673},[],[],{"space":675,"id":677,"type":14,"createdAt":678,"updatedAt":678,"environment":679,"publishedVersion":276,"revision":21,"locale":22},{"sys":676},{"type":10,"linkType":11,"id":12},"5Qg1EnfhYLYpuJAT0qkaNc","2023-01-28T12:19:53.096Z",{"sys":680},{"id":18,"type":10,"linkType":19},{"title":682,"description":683,"file":684},"neumorphic-design-project-img","Neumorphic design components",{"url":685,"details":686,"fileName":689,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/5Qg1EnfhYLYpuJAT0qkaNc/43107f82a221c1809ab117bfd206170f/neumorphic-design-project-img.png",{"size":687,"image":688},31790,{"width":230,"height":231},"neumorphic-design-project-img.png",{"metadata":691,"sys":694,"fields":703},{"tags":692,"concepts":693},[],[],{"space":695,"id":697,"type":48,"createdAt":698,"updatedAt":698,"environment":699,"publishedVersion":20,"revision":21,"contentType":701,"locale":22},{"sys":696},{"type":10,"linkType":11,"id":12},"7vaOyrQvl5V0jGSDY3EsM2","2023-01-28T11:36:08.387Z",{"sys":700},{"id":18,"type":10,"linkType":19},{"sys":702},{"type":10,"linkType":57,"id":188},{"name":704,"type":191,"url":705,"description":706,"tech":716,"tags":718,"image":720},"TMD Interior Projects & Building Services Ltd","https://github.com/jackdomleo7/tmdip.co.uk",{"data":707,"content":708,"nodeType":117},{},[709],{"data":710,"content":711,"nodeType":102},{},[712],{"data":713,"marks":714,"value":715,"nodeType":101},{},[],"Designed and built a fully responsive static website for a small shop-fitting & interior design company. This website needed a modern but minimal feel to it so they could clearly get their message across to visitors. Unfortunately, the company closed in October 2021.",[204,206,717,207],"Prismic",[719],"Website",{"metadata":721,"sys":724,"fields":731},{"tags":722,"concepts":723},[],[],{"space":725,"id":727,"type":14,"createdAt":728,"updatedAt":728,"environment":729,"publishedVersion":325,"revision":21,"locale":22},{"sys":726},{"type":10,"linkType":11,"id":12},"v3W2zbHXA5PrqQNtVPUMm","2023-01-28T11:36:03.512Z",{"sys":730},{"id":18,"type":10,"linkType":19},{"title":732,"description":733,"file":734},"tmdip-project-img","Screenshot of TMD Interior Projects home page",{"url":735,"details":736,"fileName":739,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/v3W2zbHXA5PrqQNtVPUMm/1053b757abf68582bfa0f410077806c8/tmdip-project-img.png",{"size":737,"image":738},102678,{"width":230,"height":231},"tmdip-project-img.png",{"metadata":741,"sys":744,"fields":755},{"tags":742,"concepts":743},[],[],{"space":745,"id":747,"type":48,"createdAt":748,"updatedAt":749,"environment":750,"publishedVersion":752,"revision":501,"contentType":753,"locale":22},{"sys":746},{"type":10,"linkType":11,"id":12},"4ujuAFszSXcHDSvTByVFDD","2023-01-27T22:02:31.611Z","2023-01-28T17:37:41.676Z",{"sys":751},{"id":18,"type":10,"linkType":19},12,{"sys":754},{"type":10,"linkType":57,"id":188},{"name":756,"type":351,"url":757,"description":758,"tech":768,"tags":769,"image":770},"Cooltipz.css","https://cooltipz.jackdomleo.dev",{"data":759,"content":760,"nodeType":117},{},[761],{"data":762,"content":763,"nodeType":102},{},[764],{"data":765,"marks":766,"value":767,"nodeType":101},{},[],"A pure CSS solution for adding highly customisable, accessible tooltips to HTML.",[207],[264,669,419],{"metadata":771,"sys":774,"fields":781},{"tags":772,"concepts":773},[],[],{"space":775,"id":777,"type":14,"createdAt":778,"updatedAt":778,"environment":779,"publishedVersion":221,"revision":21,"locale":22},{"sys":776},{"type":10,"linkType":11,"id":12},"26fP6efyZsX7tw8rGCVrDL","2023-01-27T22:02:21.767Z",{"sys":780},{"id":18,"type":10,"linkType":19},{"title":782,"description":224,"file":783},"cooltipz-project-img",{"url":784,"details":785,"fileName":788,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/26fP6efyZsX7tw8rGCVrDL/0bc668a492f6b7eb375a3ad568df6c83/cooltipz-project-img.png",{"size":786,"image":787},11929,{"width":230,"height":231},"cooltipz-project-img.png",{"metadata":790,"sys":793,"fields":802},{"tags":791,"concepts":792},[],[],{"space":794,"id":796,"type":48,"createdAt":797,"updatedAt":797,"environment":798,"publishedVersion":54,"revision":21,"contentType":800,"locale":22},{"sys":795},{"type":10,"linkType":11,"id":12},"6YB39UZiiMFBSFf5YBFqaO","2023-01-27T21:57:40.389Z",{"sys":799},{"id":18,"type":10,"linkType":19},{"sys":801},{"type":10,"linkType":57,"id":188},{"name":803,"type":248,"url":804,"description":805,"tech":815,"tags":816,"image":818},"Jumping into Lightspeed","https://codepen.io/jackdomleo7/full/rNOYdwz",{"data":806,"content":807,"nodeType":117},{},[808],{"data":809,"content":810,"nodeType":102},{},[811],{"data":812,"marks":813,"value":814,"nodeType":101},{},[],"A mini animation demonstrating Star Wars lightspeed using HTML, CSS & JS.",[261,417],[817,569],"Star Wars",{"metadata":819,"sys":822,"fields":829},{"tags":820,"concepts":821},[],[],{"space":823,"id":825,"type":14,"createdAt":826,"updatedAt":826,"environment":827,"publishedVersion":221,"revision":21,"locale":22},{"sys":824},{"type":10,"linkType":11,"id":12},"zXmBtqvpORf1Zffobl22F","2023-01-27T21:57:26.116Z",{"sys":828},{"id":18,"type":10,"linkType":19},{"title":830,"description":224,"file":831},"lightspeed-project-img",{"url":832,"details":833,"fileName":836,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/zXmBtqvpORf1Zffobl22F/c4a75a537080960d72f5930149bf2817/lightspeed-project-img.png",{"size":834,"image":835},100927,{"width":230,"height":231},"lightspeed-project-img.png",{"metadata":838,"sys":841,"fields":850},{"tags":839,"concepts":840},[],[],{"space":842,"id":844,"type":48,"createdAt":845,"updatedAt":845,"environment":846,"publishedVersion":752,"revision":21,"contentType":848,"locale":22},{"sys":843},{"type":10,"linkType":11,"id":12},"4aZX5AexMhJjo66sZ0Nm03","2023-01-27T21:51:09.097Z",{"sys":847},{"id":18,"type":10,"linkType":19},{"sys":849},{"type":10,"linkType":57,"id":188},{"name":851,"type":248,"url":852,"description":853,"tech":863,"tags":864,"image":866},"Pixel Art R2-D2","https://codepen.io/jackdomleo7/full/ZEEqdxy",{"data":854,"content":855,"nodeType":117},{},[856],{"data":857,"content":858,"nodeType":102},{},[859],{"data":860,"marks":861,"value":862,"nodeType":101},{},[],"A pure CSS, single div pixel art of the beloved Star Wars droid, R2-D2.",[417],[618,865,817],"Single div",{"metadata":867,"sys":870,"fields":877},{"tags":868,"concepts":869},[],[],{"space":871,"id":873,"type":14,"createdAt":874,"updatedAt":874,"environment":875,"publishedVersion":276,"revision":21,"locale":22},{"sys":872},{"type":10,"linkType":11,"id":12},"1lG3pACHA8YGmbbpQ2fpA7","2023-01-27T21:50:58.303Z",{"sys":876},{"id":18,"type":10,"linkType":19},{"title":878,"description":879,"file":880},"r2-d2-project-img","R2-D2 from Star Wars as pixel art",{"url":881,"details":882,"fileName":885,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1lG3pACHA8YGmbbpQ2fpA7/6ed00265778f38c5bd7f1bc395eb484d/r2-d2-project-img.png",{"size":883,"image":884},37976,{"width":230,"height":231},"r2-d2-project-img.png",{"metadata":887,"sys":890,"fields":901},{"tags":888,"concepts":889},[],[],{"space":891,"id":893,"type":48,"createdAt":894,"updatedAt":895,"environment":896,"publishedVersion":898,"revision":221,"contentType":899,"locale":22},{"sys":892},{"type":10,"linkType":11,"id":12},"4RGkQbZ9QFaahqn14RB3fg","2023-01-27T21:40:30.860Z","2023-12-18T23:39:32.367Z",{"sys":897},{"id":18,"type":10,"linkType":19},20,{"sys":900},{"type":10,"linkType":57,"id":188},{"name":902,"type":351,"url":903,"description":904,"tech":914,"tags":917,"image":918},"My website","https://github.com/jackdomleo7/jackdomleo.dev",{"data":905,"content":906,"nodeType":117},{},[907],{"data":908,"content":909,"nodeType":102},{},[910],{"data":911,"marks":912,"value":913,"nodeType":101},{},[],"Designed and built a fully responsive static website and blog for myself. This has been through many design variations as my UI skills have developed.",[915,916,206,207],"Nuxt 3","Contentful",[719],{"metadata":919,"sys":922,"fields":929},{"tags":920,"concepts":921},[],[],{"space":923,"id":925,"type":14,"createdAt":926,"updatedAt":926,"environment":927,"publishedVersion":346,"revision":21,"locale":22},{"sys":924},{"type":10,"linkType":11,"id":12},"7fXjHpN3LyWRS6iULHyR02","2023-01-27T21:40:19.986Z",{"sys":928},{"id":18,"type":10,"linkType":19},{"title":930,"description":931,"file":932},"jackdomleo.dev-project-img","Screenshot of jackdomleo.dev homepage",{"url":933,"details":934,"fileName":937,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/7fXjHpN3LyWRS6iULHyR02/8b59f60fb2404576a0c93553694fb1b6/jackdomleo.dev-project-img.png",{"size":935,"image":936},44662,{"width":230,"height":231},"jackdomleo.dev-project-img.png",{"Asset":939},[210,468,866,619,770,265,520,314,670,420,365,570,918,720,818],1733447471621] \ No newline at end of file +[{"data":1,"prerenderedAt":940},["ShallowReactive",2],{"$siNM9WAguS":3,"$mMA9bTNYLP":35,"$YWCdSV8Jub":118,"project-list-undefined":169},{"metadata":4,"sys":7,"fields":23},{"tags":5,"concepts":6},[],[],{"space":8,"id":13,"type":14,"createdAt":15,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"locale":22},{"sys":9},{"type":10,"linkType":11,"id":12},"Link","Space","l1wujzr3g1ab","2HwSTbJwsbPDLabrSltaa3","Asset","2023-02-04T20:48:16.198Z",{"sys":17},{"id":18,"type":10,"linkType":19},"master","Environment",8,1,"en-GB",{"title":24,"description":25,"file":26},"Open Graphic","Jack Domleo. Frontend & UX Developer.",{"url":27,"details":28,"fileName":33,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2HwSTbJwsbPDLabrSltaa3/b8c5098e2bfd7f192665fccfa3e3380e/og.png",{"size":29,"image":30},8570,{"width":31,"height":32},1200,630,"og.png","image/png",{"sys":36,"total":21,"skip":38,"limit":21,"items":39},{"type":37},"Array",0,[40],{"metadata":41,"sys":44,"fields":59},{"tags":42,"concepts":43},[],[],{"space":45,"id":47,"type":48,"createdAt":49,"updatedAt":50,"environment":51,"publishedVersion":53,"revision":54,"contentType":55,"locale":22},{"sys":46},{"type":10,"linkType":11,"id":12},"6LjVGiRVd7SMt9ewdVBNbQ","Entry","2023-01-01T15:40:18.235Z","2024-10-27T19:05:34.977Z",{"sys":52},{"id":18,"type":10,"linkType":19},61,13,{"sys":56},{"type":10,"linkType":57,"id":58},"ContentType","footer",{"name":60,"quickLinks":61,"socialLinks":78,"legalText":91},"Footer",[62,66,70,74],{"id":63,"key":64,"value":65},"dbd24c1c-5840-4132-af46-08b3762b393b","Home","/",{"id":67,"key":68,"value":69},"3b093617-4c9c-41b7-ab57-72a53a2cb400","Projects","/projects",{"id":71,"key":72,"value":73},"6d25b987-cc30-4b09-93f3-fd6d947c7ffc","Blog","/blog",{"id":75,"key":76,"value":77},"ceaccf06-ba0a-41d5-9202-56beaaa5f242","Links","/links",[79,83,87],{"id":80,"key":81,"value":82},"6ca24d29-3228-4215-8b8e-32ad04743b65","GitHub","https://github.com/jackdomleo7",{"id":84,"key":85,"value":86},"46719126-f516-4853-9444-e40cd0576918","CodePen","https://codepen.io/jackdomleo7",{"id":88,"key":89,"value":90},"c1581e8d-c729-4232-8944-0f767d94177d","LinkedIn","https://linkedin.com/in/jackdomleo7",{"data":92,"content":93,"nodeType":117},{},[94,103,110],{"data":95,"content":96,"nodeType":102},{},[97],{"data":98,"marks":99,"value":100,"nodeType":101},{},[],"©2018-2024","text","paragraph",{"data":104,"content":105,"nodeType":102},{},[106],{"data":107,"marks":108,"value":109,"nodeType":101},{},[],"All rights reserved.",{"data":111,"content":112,"nodeType":102},{},[113],{"data":114,"marks":115,"value":116,"nodeType":101},{},[],"Jack Domleo","document",{"sys":119,"total":21,"skip":38,"limit":21,"items":120},{"type":37},[121],{"metadata":122,"sys":125,"fields":137},{"tags":123,"concepts":124},[],[],{"space":126,"id":128,"type":48,"createdAt":129,"updatedAt":130,"environment":131,"publishedVersion":133,"revision":54,"contentType":134,"locale":22},{"sys":127},{"type":10,"linkType":11,"id":12},"4Og1KH2T7fvFl3RgBWX1rL","2023-01-27T22:02:37.696Z","2023-01-28T19:14:25.079Z",{"sys":132},{"id":18,"type":10,"linkType":19},33,{"sys":135},{"type":10,"linkType":57,"id":136},"projects",{"title":68,"description":138},{"data":139,"content":140,"nodeType":117},{},[141],{"data":142,"content":143,"nodeType":102},{},[144,148,155,159,165],{"data":145,"marks":146,"value":147,"nodeType":101},{},[],"I enjoy creating different types of projects in my spare time using a range of technologies. You can find all of my featured projects here, and many more projects on ",{"data":149,"content":150,"nodeType":154},{"uri":82},[151],{"data":152,"marks":153,"value":81,"nodeType":101},{},[],"hyperlink",{"data":156,"marks":157,"value":158,"nodeType":101},{},[]," and ",{"data":160,"content":161,"nodeType":154},{"uri":86},[162],{"data":163,"marks":164,"value":85,"nodeType":101},{},[],{"data":166,"marks":167,"value":168,"nodeType":101},{},[],".",{"sys":170,"total":171,"skip":38,"limit":172,"items":173,"includes":938},{"type":37},15,1000,[174,233,286,335,386,440,488,540,590,639,690,740,789,837,886],{"metadata":175,"sys":178,"fields":189},{"tags":176,"concepts":177},[],[],{"space":179,"id":181,"type":48,"createdAt":182,"updatedAt":182,"environment":183,"publishedVersion":185,"revision":21,"contentType":186,"locale":22},{"sys":180},{"type":10,"linkType":11,"id":12},"4Kiex9dMPsL87rteSvnG2h","2023-01-28T19:13:41.069Z",{"sys":184},{"id":18,"type":10,"linkType":19},10,{"sys":187},{"type":10,"linkType":57,"id":188},"project",{"name":190,"type":191,"url":192,"description":193,"tech":203,"tags":208,"image":210},"Grassverse NFT","Client","https://www.grassverse.org/",{"data":194,"content":195,"nodeType":117},{},[196],{"data":197,"content":198,"nodeType":102},{},[199],{"data":200,"marks":201,"value":202,"nodeType":101},{},[],"This website came with pre-existing designs and includes a CMS and an account section for Grassverse asset owners to log in to view their assets and fellow owners of assets.",[204,205,206,207],"Nuxt 2","Web3","TypeScript","SCSS",[209],"NFT",{"metadata":211,"sys":214,"fields":222},{"tags":212,"concepts":213},[],[],{"space":215,"id":217,"type":14,"createdAt":218,"updatedAt":218,"environment":219,"publishedVersion":221,"revision":21,"locale":22},{"sys":216},{"type":10,"linkType":11,"id":12},"01rxXuPpEQ6phTc1Bvt9W9","2023-01-28T19:13:34.307Z",{"sys":220},{"id":18,"type":10,"linkType":19},3,{"title":223,"description":224,"file":225},"grassverse-project-img","",{"url":226,"details":227,"fileName":232,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/01rxXuPpEQ6phTc1Bvt9W9/5d347eb3e2a3731922c0aa7046273780/grassverse-project-img.png",{"size":228,"image":229},163210,{"width":230,"height":231},600,315,"grassverse-project-img.png",{"metadata":234,"sys":237,"fields":246},{"tags":235,"concepts":236},[],[],{"space":238,"id":240,"type":48,"createdAt":241,"updatedAt":241,"environment":242,"publishedVersion":20,"revision":21,"contentType":244,"locale":22},{"sys":239},{"type":10,"linkType":11,"id":12},"2JxOvMguZVHxM565SKDspu","2023-01-28T18:25:42.700Z",{"sys":243},{"id":18,"type":10,"linkType":19},{"sys":245},{"type":10,"linkType":57,"id":188},{"name":247,"type":248,"url":249,"description":250,"tech":260,"tags":263,"image":265},"npx jackdomleo7","Mini","https://github.com/jackdomleo7/npx_business_card",{"data":251,"content":252,"nodeType":117},{},[253],{"data":254,"content":255,"nodeType":102},{},[256],{"data":257,"marks":258,"value":259,"nodeType":101},{},[],"A simple npm script to show some details about me right in the console.",[261,262],"JavaScript","npx",[264],"npm package",{"metadata":266,"sys":269,"fields":277},{"tags":267,"concepts":268},[],[],{"space":270,"id":272,"type":14,"createdAt":273,"updatedAt":273,"environment":274,"publishedVersion":276,"revision":21,"locale":22},{"sys":271},{"type":10,"linkType":11,"id":12},"2ilJcH34gnOn1SEfkJqlJj","2023-01-28T18:25:36.903Z",{"sys":275},{"id":18,"type":10,"linkType":19},5,{"title":278,"description":247,"file":279},"npx-jackdomleo7-project-img",{"url":280,"details":281,"fileName":284,"contentType":285},"//images.ctfassets.net/l1wujzr3g1ab/2ilJcH34gnOn1SEfkJqlJj/69c7b64c07e828439e60e1287e47828c/npx-jackdomleo7-project-img.gif",{"size":282,"image":283},30415,{"width":230,"height":231},"npx-jackdomleo7-project-img.gif","image/gif",{"metadata":287,"sys":290,"fields":299},{"tags":288,"concepts":289},[],[],{"space":291,"id":293,"type":48,"createdAt":294,"updatedAt":294,"environment":295,"publishedVersion":185,"revision":21,"contentType":297,"locale":22},{"sys":292},{"type":10,"linkType":11,"id":12},"1y1gYckxXHOqS4a811GoMM","2023-01-28T18:10:23.588Z",{"sys":296},{"id":18,"type":10,"linkType":19},{"sys":298},{"type":10,"linkType":57,"id":188},{"name":300,"type":191,"url":301,"description":302,"tech":312,"tags":313,"image":314},"Mad Parrot Crew NFT","https://www.madparrotcrew.com/",{"data":303,"content":304,"nodeType":117},{},[305],{"data":306,"content":307,"nodeType":102},{},[308],{"data":309,"marks":310,"value":311,"nodeType":101},{},[],"Created a fully responsive minting website based on existing designs for the Mad Parrot Crew NFT.",[204,206,207],[209],{"metadata":315,"sys":318,"fields":326},{"tags":316,"concepts":317},[],[],{"space":319,"id":321,"type":14,"createdAt":322,"updatedAt":322,"environment":323,"publishedVersion":325,"revision":21,"locale":22},{"sys":320},{"type":10,"linkType":11,"id":12},"4yYU2VsDfEvMnOIFnWe8s6","2023-01-28T18:10:15.589Z",{"sys":324},{"id":18,"type":10,"linkType":19},6,{"title":327,"description":328,"file":329},"mad-parrot-crew-project-img","Screenshot of Mad Parrot Crew home page",{"url":330,"details":331,"fileName":334,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/4yYU2VsDfEvMnOIFnWe8s6/550e38a11ea5618096b160698925405c/mad-parrot-crew-project-img.png",{"size":332,"image":333},148413,{"width":230,"height":231},"mad-parrot-crew-project-img.png",{"metadata":336,"sys":339,"fields":349},{"tags":337,"concepts":338},[],[],{"space":340,"id":342,"type":48,"createdAt":343,"updatedAt":343,"environment":344,"publishedVersion":346,"revision":21,"contentType":347,"locale":22},{"sys":341},{"type":10,"linkType":11,"id":12},"6OEC4mGGiIzD1ebZVuCeke","2023-01-28T17:54:35.724Z",{"sys":345},{"id":18,"type":10,"linkType":19},7,{"sys":348},{"type":10,"linkType":57,"id":188},{"name":350,"type":351,"url":352,"description":353,"tech":363,"image":365},"Spring Clean Twitter Bot","Project","https://github.com/jackdomleo7/Spring_Clean_Twitter_Bot",{"data":354,"content":355,"nodeType":117},{},[356],{"data":357,"content":358,"nodeType":102},{},[359],{"data":360,"marks":361,"value":362,"nodeType":101},{},[],"A Twitter bot to automatically clean up my Twitter account.",[206,364],"CRON",{"metadata":366,"sys":369,"fields":377},{"tags":367,"concepts":368},[],[],{"space":370,"id":372,"type":14,"createdAt":373,"updatedAt":373,"environment":374,"publishedVersion":376,"revision":21,"locale":22},{"sys":371},{"type":10,"linkType":11,"id":12},"5zb0pDWNBVdorGnCnM0gwb","2023-01-28T17:54:30.356Z",{"sys":375},{"id":18,"type":10,"linkType":19},4,{"title":378,"description":379,"file":380},"twitter-spring-clean-bot-project-img","Twitter spring clean",{"url":381,"details":382,"fileName":385,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/5zb0pDWNBVdorGnCnM0gwb/d9cf343aeb2136f44ab17dc6b0410281/twitter-spring-clean-bot-project-img.png",{"size":383,"image":384},150202,{"width":230,"height":231},"twitter-spring-clean-bot-project-img.png",{"metadata":387,"sys":390,"fields":399},{"tags":388,"concepts":389},[],[],{"space":391,"id":393,"type":48,"createdAt":394,"updatedAt":394,"environment":395,"publishedVersion":185,"revision":21,"contentType":397,"locale":22},{"sys":392},{"type":10,"linkType":11,"id":12},"5kzQZ2SXoScnodt56Ulmiv","2023-01-28T17:37:10.177Z",{"sys":396},{"id":18,"type":10,"linkType":19},{"sys":398},{"type":10,"linkType":57,"id":188},{"name":400,"type":248,"url":401,"description":402,"tech":416,"tags":418,"image":420},"Colour Theme Watcher & Switcher","https://codepen.io/jackdomleo7/full/OJWaeem",{"data":403,"content":404,"nodeType":117},{},[405],{"data":406,"content":407,"nodeType":102},{},[408,412],{"data":409,"marks":410,"value":411,"nodeType":101},{},[],"A pure JavaScript snippet to watch",{"data":413,"marks":414,"value":415,"nodeType":101},{},[],"/detect a user's colour theme and allow them to change it.",[261,417],"CSS",[419],"Utility",{"metadata":421,"sys":424,"fields":431},{"tags":422,"concepts":423},[],[],{"space":425,"id":427,"type":14,"createdAt":428,"updatedAt":428,"environment":429,"publishedVersion":276,"revision":21,"locale":22},{"sys":426},{"type":10,"linkType":11,"id":12},"5u50SbmPUZoqIhzqtV7UaL","2023-01-28T17:37:05.167Z",{"sys":430},{"id":18,"type":10,"linkType":19},{"title":432,"description":433,"file":434},"colour-theme-picker-project-img","Changing colour theme from dark to light",{"url":435,"details":436,"fileName":439,"contentType":285},"//images.ctfassets.net/l1wujzr3g1ab/5u50SbmPUZoqIhzqtV7UaL/b7abf17a991a5e6b491ed212cd8e1c49/colour-theme-picker-project-img.gif",{"size":437,"image":438},123783,{"width":230,"height":231},"colour-theme-picker-project-img.gif",{"metadata":441,"sys":444,"fields":453},{"tags":442,"concepts":443},[],[],{"space":445,"id":447,"type":48,"createdAt":448,"updatedAt":448,"environment":449,"publishedVersion":20,"revision":21,"contentType":451,"locale":22},{"sys":446},{"type":10,"linkType":11,"id":12},"2qHSazjv6Ro4OXfCrkVkwg","2023-01-28T17:31:17.504Z",{"sys":450},{"id":18,"type":10,"linkType":19},{"sys":452},{"type":10,"linkType":57,"id":188},{"name":454,"type":248,"url":455,"description":456,"tech":466,"image":468},"Custom Car Colour Preview","https://codepen.io/jackdomleo7/full/wvoYjNP",{"data":457,"content":458,"nodeType":117},{},[459],{"data":460,"content":461,"nodeType":102},{},[462],{"data":463,"marks":464,"value":465,"nodeType":101},{},[],"An application to preview different colours of a car.",[467,207],"SVG",{"metadata":469,"sys":472,"fields":479},{"tags":470,"concepts":471},[],[],{"space":473,"id":475,"type":14,"createdAt":476,"updatedAt":476,"environment":477,"publishedVersion":276,"revision":21,"locale":22},{"sys":474},{"type":10,"linkType":11,"id":12},"1ZmqPLpQtjTJPsWiUB8ihd","2023-01-28T17:31:09.936Z",{"sys":478},{"id":18,"type":10,"linkType":19},{"title":480,"description":481,"file":482},"car-colour-picker-project-img","A car changing colour",{"url":483,"details":484,"fileName":487,"contentType":285},"//images.ctfassets.net/l1wujzr3g1ab/1ZmqPLpQtjTJPsWiUB8ihd/89be01caacd54b1d9e5975e584056260/car-colour-picker-project-img.gif",{"size":485,"image":486},439705,{"width":230,"height":231},"car-colour-picker-project-img.gif",{"metadata":489,"sys":492,"fields":504},{"tags":490,"concepts":491},[],[],{"space":493,"id":495,"type":48,"createdAt":496,"updatedAt":497,"environment":498,"publishedVersion":500,"revision":501,"contentType":502,"locale":22},{"sys":494},{"type":10,"linkType":11,"id":12},"wpQfsnzkVT7y1Eg4ANU24","2023-01-28T17:25:18.524Z","2023-01-28T17:37:25.464Z",{"sys":499},{"id":18,"type":10,"linkType":19},14,2,{"sys":503},{"type":10,"linkType":57,"id":188},{"name":505,"type":351,"url":506,"description":507,"tech":517,"tags":519,"image":520},"Checka11y.css","https://checka11y.jackdomleo.dev/",{"data":508,"content":509,"nodeType":117},{},[510],{"data":511,"content":512,"nodeType":102},{},[513],{"data":514,"marks":515,"value":516,"nodeType":101},{},[],"A CSS stylesheet to quickly highlight a11y concerns and a really good education project for those wanting to learn about accessibility.",[207,518],"Cypress",[264,419],{"metadata":521,"sys":524,"fields":531},{"tags":522,"concepts":523},[],[],{"space":525,"id":527,"type":14,"createdAt":528,"updatedAt":528,"environment":529,"publishedVersion":276,"revision":21,"locale":22},{"sys":526},{"type":10,"linkType":11,"id":12},"3nPJwMFNQ8OZ7OlHMED3YJ","2023-01-28T17:25:13.225Z",{"sys":530},{"id":18,"type":10,"linkType":19},{"title":532,"description":533,"file":534},"checka11y-project-img","Checka11y.css logo",{"url":535,"details":536,"fileName":539,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/3nPJwMFNQ8OZ7OlHMED3YJ/9350ee10587c33b4e9dd71464aa1173d/checka11y-project-img.png",{"size":537,"image":538},28340,{"width":230,"height":231},"checka11y-project-img.png",{"metadata":541,"sys":544,"fields":553},{"tags":542,"concepts":543},[],[],{"space":545,"id":547,"type":48,"createdAt":548,"updatedAt":548,"environment":549,"publishedVersion":20,"revision":21,"contentType":551,"locale":22},{"sys":546},{"type":10,"linkType":11,"id":12},"6egKMvjf6ugswngEWd7bzb","2023-01-28T17:19:29.418Z",{"sys":550},{"id":18,"type":10,"linkType":19},{"sys":552},{"type":10,"linkType":57,"id":188},{"name":554,"type":248,"url":555,"description":556,"tech":566,"tags":568,"image":570},"Spinning Smiley Face","https://codepen.io/jackdomleo7/full/wvKLjVb",{"data":557,"content":558,"nodeType":117},{},[559],{"data":560,"content":561,"nodeType":102},{},[562],{"data":563,"marks":564,"value":565,"nodeType":101},{},[],"A cute spinning smiley face while learning GSAP.",[567,207],"GSAP",[569],"Animation",{"metadata":571,"sys":574,"fields":581},{"tags":572,"concepts":573},[],[],{"space":575,"id":577,"type":14,"createdAt":578,"updatedAt":578,"environment":579,"publishedVersion":276,"revision":21,"locale":22},{"sys":576},{"type":10,"linkType":11,"id":12},"6i901gWFLWWSjs2ZYc9rpL","2023-01-28T17:19:17.739Z",{"sys":580},{"id":18,"type":10,"linkType":19},{"title":582,"description":583,"file":584},"spinning-smiley-face-project-img","Spinning smiley face animation",{"url":585,"details":586,"fileName":589,"contentType":285},"//images.ctfassets.net/l1wujzr3g1ab/6i901gWFLWWSjs2ZYc9rpL/e32d8b3cb14a794272c70360d1a39ac9/spinning-smiley-face-project-img.gif",{"size":587,"image":588},232759,{"width":230,"height":231},"spinning-smiley-face-project-img.gif",{"metadata":591,"sys":594,"fields":603},{"tags":592,"concepts":593},[],[],{"space":595,"id":597,"type":48,"createdAt":598,"updatedAt":598,"environment":599,"publishedVersion":346,"revision":21,"contentType":601,"locale":22},{"sys":596},{"type":10,"linkType":11,"id":12},"1rx3EwhjpCdMESgcFDv0CY","2023-01-28T17:10:10.423Z",{"sys":600},{"id":18,"type":10,"linkType":19},{"sys":602},{"type":10,"linkType":57,"id":188},{"name":604,"type":248,"url":605,"description":606,"tech":616,"tags":617,"image":619},"CSS Union Jack Flag","https://codepen.io/jackdomleo7/full/abvrgEo",{"nodeType":117,"data":607,"content":608},{},[609],{"nodeType":102,"data":610,"content":611},{},[612],{"nodeType":101,"value":613,"marks":614,"data":615},"A pure CSS pixel-perfect Union Jack flag.",[],{},[207],[618],"CSS Art",{"metadata":620,"sys":623,"fields":630},{"tags":621,"concepts":622},[],[],{"space":624,"id":626,"type":14,"createdAt":627,"updatedAt":627,"environment":628,"publishedVersion":276,"revision":21,"locale":22},{"sys":625},{"type":10,"linkType":11,"id":12},"2220otIqCHTmP1a6UkmHTO","2023-01-28T17:10:05.172Z",{"sys":629},{"id":18,"type":10,"linkType":19},{"title":631,"description":632,"file":633},"union-jack-project-img","Union Jack Flag",{"url":634,"details":635,"fileName":638,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/2220otIqCHTmP1a6UkmHTO/1b888dd09c45cbb842cd476585c54eaf/union-jack-project-img.png",{"size":636,"image":637},29999,{"width":230,"height":231},"union-jack-project-img.png",{"metadata":640,"sys":643,"fields":654},{"tags":641,"concepts":642},[],[],{"space":644,"id":646,"type":48,"createdAt":647,"updatedAt":648,"environment":649,"publishedVersion":651,"revision":501,"contentType":652,"locale":22},{"sys":645},{"type":10,"linkType":11,"id":12},"3NkVQqDSFreEt3KgDspqhk","2023-01-28T12:20:29.489Z","2023-01-28T17:37:59.428Z",{"sys":650},{"id":18,"type":10,"linkType":19},9,{"sys":653},{"type":10,"linkType":57,"id":188},{"name":655,"type":248,"url":656,"description":657,"tech":667,"tags":668,"image":670},"Neumorphic Design Elements","https://codepen.io/jackdomleo7/full/mdeowoz",{"data":658,"content":659,"nodeType":117},{},[660],{"data":661,"content":662,"nodeType":102},{},[663],{"data":664,"marks":665,"value":666,"nodeType":101},{},[],"Some common UI elements in the style of neumorphic design.",[207],[669],"Popular",{"metadata":671,"sys":674,"fields":681},{"tags":672,"concepts":673},[],[],{"space":675,"id":677,"type":14,"createdAt":678,"updatedAt":678,"environment":679,"publishedVersion":276,"revision":21,"locale":22},{"sys":676},{"type":10,"linkType":11,"id":12},"5Qg1EnfhYLYpuJAT0qkaNc","2023-01-28T12:19:53.096Z",{"sys":680},{"id":18,"type":10,"linkType":19},{"title":682,"description":683,"file":684},"neumorphic-design-project-img","Neumorphic design components",{"url":685,"details":686,"fileName":689,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/5Qg1EnfhYLYpuJAT0qkaNc/43107f82a221c1809ab117bfd206170f/neumorphic-design-project-img.png",{"size":687,"image":688},31790,{"width":230,"height":231},"neumorphic-design-project-img.png",{"metadata":691,"sys":694,"fields":703},{"tags":692,"concepts":693},[],[],{"space":695,"id":697,"type":48,"createdAt":698,"updatedAt":698,"environment":699,"publishedVersion":20,"revision":21,"contentType":701,"locale":22},{"sys":696},{"type":10,"linkType":11,"id":12},"7vaOyrQvl5V0jGSDY3EsM2","2023-01-28T11:36:08.387Z",{"sys":700},{"id":18,"type":10,"linkType":19},{"sys":702},{"type":10,"linkType":57,"id":188},{"name":704,"type":191,"url":705,"description":706,"tech":716,"tags":718,"image":720},"TMD Interior Projects & Building Services Ltd","https://github.com/jackdomleo7/tmdip.co.uk",{"data":707,"content":708,"nodeType":117},{},[709],{"data":710,"content":711,"nodeType":102},{},[712],{"data":713,"marks":714,"value":715,"nodeType":101},{},[],"Designed and built a fully responsive static website for a small shop-fitting & interior design company. This website needed a modern but minimal feel to it so they could clearly get their message across to visitors. Unfortunately, the company closed in October 2021.",[204,206,717,207],"Prismic",[719],"Website",{"metadata":721,"sys":724,"fields":731},{"tags":722,"concepts":723},[],[],{"space":725,"id":727,"type":14,"createdAt":728,"updatedAt":728,"environment":729,"publishedVersion":325,"revision":21,"locale":22},{"sys":726},{"type":10,"linkType":11,"id":12},"v3W2zbHXA5PrqQNtVPUMm","2023-01-28T11:36:03.512Z",{"sys":730},{"id":18,"type":10,"linkType":19},{"title":732,"description":733,"file":734},"tmdip-project-img","Screenshot of TMD Interior Projects home page",{"url":735,"details":736,"fileName":739,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/v3W2zbHXA5PrqQNtVPUMm/1053b757abf68582bfa0f410077806c8/tmdip-project-img.png",{"size":737,"image":738},102678,{"width":230,"height":231},"tmdip-project-img.png",{"metadata":741,"sys":744,"fields":755},{"tags":742,"concepts":743},[],[],{"space":745,"id":747,"type":48,"createdAt":748,"updatedAt":749,"environment":750,"publishedVersion":752,"revision":501,"contentType":753,"locale":22},{"sys":746},{"type":10,"linkType":11,"id":12},"4ujuAFszSXcHDSvTByVFDD","2023-01-27T22:02:31.611Z","2023-01-28T17:37:41.676Z",{"sys":751},{"id":18,"type":10,"linkType":19},12,{"sys":754},{"type":10,"linkType":57,"id":188},{"name":756,"type":351,"url":757,"description":758,"tech":768,"tags":769,"image":770},"Cooltipz.css","https://cooltipz.jackdomleo.dev",{"data":759,"content":760,"nodeType":117},{},[761],{"data":762,"content":763,"nodeType":102},{},[764],{"data":765,"marks":766,"value":767,"nodeType":101},{},[],"A pure CSS solution for adding highly customisable, accessible tooltips to HTML.",[207],[264,669,419],{"metadata":771,"sys":774,"fields":781},{"tags":772,"concepts":773},[],[],{"space":775,"id":777,"type":14,"createdAt":778,"updatedAt":778,"environment":779,"publishedVersion":221,"revision":21,"locale":22},{"sys":776},{"type":10,"linkType":11,"id":12},"26fP6efyZsX7tw8rGCVrDL","2023-01-27T22:02:21.767Z",{"sys":780},{"id":18,"type":10,"linkType":19},{"title":782,"description":224,"file":783},"cooltipz-project-img",{"url":784,"details":785,"fileName":788,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/26fP6efyZsX7tw8rGCVrDL/0bc668a492f6b7eb375a3ad568df6c83/cooltipz-project-img.png",{"size":786,"image":787},11929,{"width":230,"height":231},"cooltipz-project-img.png",{"metadata":790,"sys":793,"fields":802},{"tags":791,"concepts":792},[],[],{"space":794,"id":796,"type":48,"createdAt":797,"updatedAt":797,"environment":798,"publishedVersion":54,"revision":21,"contentType":800,"locale":22},{"sys":795},{"type":10,"linkType":11,"id":12},"6YB39UZiiMFBSFf5YBFqaO","2023-01-27T21:57:40.389Z",{"sys":799},{"id":18,"type":10,"linkType":19},{"sys":801},{"type":10,"linkType":57,"id":188},{"name":803,"type":248,"url":804,"description":805,"tech":815,"tags":816,"image":818},"Jumping into Lightspeed","https://codepen.io/jackdomleo7/full/rNOYdwz",{"data":806,"content":807,"nodeType":117},{},[808],{"data":809,"content":810,"nodeType":102},{},[811],{"data":812,"marks":813,"value":814,"nodeType":101},{},[],"A mini animation demonstrating Star Wars lightspeed using HTML, CSS & JS.",[261,417],[817,569],"Star Wars",{"metadata":819,"sys":822,"fields":829},{"tags":820,"concepts":821},[],[],{"space":823,"id":825,"type":14,"createdAt":826,"updatedAt":826,"environment":827,"publishedVersion":221,"revision":21,"locale":22},{"sys":824},{"type":10,"linkType":11,"id":12},"zXmBtqvpORf1Zffobl22F","2023-01-27T21:57:26.116Z",{"sys":828},{"id":18,"type":10,"linkType":19},{"title":830,"description":224,"file":831},"lightspeed-project-img",{"url":832,"details":833,"fileName":836,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/zXmBtqvpORf1Zffobl22F/c4a75a537080960d72f5930149bf2817/lightspeed-project-img.png",{"size":834,"image":835},100927,{"width":230,"height":231},"lightspeed-project-img.png",{"metadata":838,"sys":841,"fields":850},{"tags":839,"concepts":840},[],[],{"space":842,"id":844,"type":48,"createdAt":845,"updatedAt":845,"environment":846,"publishedVersion":752,"revision":21,"contentType":848,"locale":22},{"sys":843},{"type":10,"linkType":11,"id":12},"4aZX5AexMhJjo66sZ0Nm03","2023-01-27T21:51:09.097Z",{"sys":847},{"id":18,"type":10,"linkType":19},{"sys":849},{"type":10,"linkType":57,"id":188},{"name":851,"type":248,"url":852,"description":853,"tech":863,"tags":864,"image":866},"Pixel Art R2-D2","https://codepen.io/jackdomleo7/full/ZEEqdxy",{"data":854,"content":855,"nodeType":117},{},[856],{"data":857,"content":858,"nodeType":102},{},[859],{"data":860,"marks":861,"value":862,"nodeType":101},{},[],"A pure CSS, single div pixel art of the beloved Star Wars droid, R2-D2.",[417],[618,865,817],"Single div",{"metadata":867,"sys":870,"fields":877},{"tags":868,"concepts":869},[],[],{"space":871,"id":873,"type":14,"createdAt":874,"updatedAt":874,"environment":875,"publishedVersion":276,"revision":21,"locale":22},{"sys":872},{"type":10,"linkType":11,"id":12},"1lG3pACHA8YGmbbpQ2fpA7","2023-01-27T21:50:58.303Z",{"sys":876},{"id":18,"type":10,"linkType":19},{"title":878,"description":879,"file":880},"r2-d2-project-img","R2-D2 from Star Wars as pixel art",{"url":881,"details":882,"fileName":885,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/1lG3pACHA8YGmbbpQ2fpA7/6ed00265778f38c5bd7f1bc395eb484d/r2-d2-project-img.png",{"size":883,"image":884},37976,{"width":230,"height":231},"r2-d2-project-img.png",{"metadata":887,"sys":890,"fields":901},{"tags":888,"concepts":889},[],[],{"space":891,"id":893,"type":48,"createdAt":894,"updatedAt":895,"environment":896,"publishedVersion":898,"revision":221,"contentType":899,"locale":22},{"sys":892},{"type":10,"linkType":11,"id":12},"4RGkQbZ9QFaahqn14RB3fg","2023-01-27T21:40:30.860Z","2023-12-18T23:39:32.367Z",{"sys":897},{"id":18,"type":10,"linkType":19},20,{"sys":900},{"type":10,"linkType":57,"id":188},{"name":902,"type":351,"url":903,"description":904,"tech":914,"tags":917,"image":918},"My website","https://github.com/jackdomleo7/jackdomleo.dev",{"data":905,"content":906,"nodeType":117},{},[907],{"data":908,"content":909,"nodeType":102},{},[910],{"data":911,"marks":912,"value":913,"nodeType":101},{},[],"Designed and built a fully responsive static website and blog for myself. This has been through many design variations as my UI skills have developed.",[915,916,206,207],"Nuxt 3","Contentful",[719],{"metadata":919,"sys":922,"fields":929},{"tags":920,"concepts":921},[],[],{"space":923,"id":925,"type":14,"createdAt":926,"updatedAt":926,"environment":927,"publishedVersion":346,"revision":21,"locale":22},{"sys":924},{"type":10,"linkType":11,"id":12},"7fXjHpN3LyWRS6iULHyR02","2023-01-27T21:40:19.986Z",{"sys":928},{"id":18,"type":10,"linkType":19},{"title":930,"description":931,"file":932},"jackdomleo.dev-project-img","Screenshot of jackdomleo.dev homepage",{"url":933,"details":934,"fileName":937,"contentType":34},"//images.ctfassets.net/l1wujzr3g1ab/7fXjHpN3LyWRS6iULHyR02/8b59f60fb2404576a0c93553694fb1b6/jackdomleo.dev-project-img.png",{"size":935,"image":936},44662,{"width":230,"height":231},"jackdomleo.dev-project-img.png",{"Asset":939},[210,468,866,619,770,265,520,314,670,420,365,570,918,720,818],1733533838700] \ No newline at end of file diff --git a/projects/index.html b/projects/index.html index da2be51e1..807ca766a 100644 --- a/projects/index.html +++ b/projects/index.html @@ -26,7 +26,7 @@ - + @@ -80,5 +80,5 @@ -

Projects

I enjoy creating different types of projects in my spare time using a range of technologies. You can find all of my featured projects here, and many more projects on GitHub and CodePen.

Mini Projects

Client Projects

- \ No newline at end of file +

Projects

I enjoy creating different types of projects in my spare time using a range of technologies. You can find all of my featured projects here, and many more projects on GitHub and CodePen.

Mini Projects

Client Projects

+ \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 07d3e8262..41d5245a0 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -160,4 +160,4 @@ - \ No newline at end of file + \ No newline at end of file