diff --git a/2017/05/10/about-me/index.html b/2017/05/10/about-me/index.html index aa0861e5e..a9e9daafc 100644 --- a/2017/05/10/about-me/index.html +++ b/2017/05/10/about-me/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -334,7 +334,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

About Me

Fabrizio Duroni

Fabrizio Duroni

·

It's me, Fabrizio Duroni. A software developer with a true passion for his work. A computer graphics lover. But wait, +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

About Me

Fabrizio Duroni

Fabrizio Duroni

·

It's me, Fabrizio Duroni. A software developer with a true passion for his work. A computer graphics lover. But wait, another blog yet? Yes, you're right, it could be boring. I hope this will not be my case.

Hello! I'm Fabrizio Duroni. I live in Como, Italy with my family, my girlfriend Chiara and a lot of computers. I started @@ -481,10 +481,10 @@

Is there something after Computer Science?

to start again to make some signatures on my skin emoji-relieved). I also really like to go with my bicycle. I could say I'm some sort of sportsman.

The presentation is over, and I hope you're not already bored.
-Enjoy the read.

stuff

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+Enjoy the read.

stuff

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/05/12/github-pages-jekyll-blog-born/index.html b/2017/05/12/github-pages-jekyll-blog-born/index.html index 779bd8d87..97969b4ae 100644 --- a/2017/05/12/github-pages-jekyll-blog-born/index.html +++ b/2017/05/12/github-pages-jekyll-blog-born/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Github Pages and Jekyll: chicio coding birth

Fabrizio Duroni

Fabrizio Duroni

·

So, how I created this blog? Let's go through the development process of its creation. This is yet another blog post +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Github Pages and Jekyll: chicio coding birth

Fabrizio Duroni

Fabrizio Duroni

·

So, how I created this blog? Let's go through the development process of its creation. This is yet another blog post about the creation of a website using Github Pages and Jekyll. But you know, I have to do it.

This will be the first official post of my blog. So, the topic from which I want to start is the development of this @@ -418,4 +418,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2017/05/13/first-threejs-scene/index.html b/2017/05/13/first-threejs-scene/index.html index e363c154d..4a3124cb9 100644 --- a/2017/05/13/first-threejs-scene/index.html +++ b/2017/05/13/first-threejs-scene/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A physically based scene with three.js

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will show you how to create a scene using three.js with support for Physically Based Rendering.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A physically based scene with three.js

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will show you how to create a scene using three.js with support for Physically Based Rendering.

NB.: The scene described in this post is no longer available in production (due to a revamp of the entire website). You can find it in the old repository of this website or you can @@ -731,4 +731,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2017/06/02/swift-closure-syntax/index.html b/2017/06/02/swift-closure-syntax/index.html index 91e164973..8ed1857ce 100644 --- a/2017/06/02/swift-closure-syntax/index.html +++ b/2017/06/02/swift-closure-syntax/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Swift Closure: definition and syntax

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about Swift closure: what they are and their syntax.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Swift Closure: definition and syntax

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about Swift closure: what they are and their syntax.

As reported on the official Apple swift documentation @@ -373,10 +373,10 @@ ... }

There is also the possibility to use a shorthand for the parameter: you can call them using $ followed by the index of -the argument in the call. Last but not least, you can capture self and avoid retain cycle using [unowned self] before the parameters. Go and show to the world the power of closure in Swift!! emoji-sunglasses

swiftiosapplemobile application development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+the argument in the call. Last but not least, you can capture self and avoid retain cycle using [unowned self] before the parameters. Go and show to the world the power of closure in Swift!! emoji-sunglasses

swiftiosapplemobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/06/14/swift-closure-demystifying-autoclosure-escaping/index.html b/2017/06/14/swift-closure-demystifying-autoclosure-escaping/index.html index 7c9a418e2..e4c102cbe 100644 --- a/2017/06/14/swift-closure-demystifying-autoclosure-escaping/index.html +++ b/2017/06/14/swift-closure-demystifying-autoclosure-escaping/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Swift Closure: demystifying @escaping and @autoclosure attributes

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about Swift closure and the potential of the @escaping and @autoclosure attributes.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Swift Closure: demystifying @escaping and @autoclosure attributes

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about Swift closure and the potential of the @escaping and @autoclosure attributes.

As reported in the official swift documentation and as we saw in in one of my previous post, closures are:

@@ -445,10 +445,10 @@ } }

You can download the complete example here.
-So basically: no if, no switch, only love emoji-heart for @autoclosure and @escaping emoji-heart_eyes.

swiftiosapplemobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+So basically: no if, no switch, only love emoji-heart for @autoclosure and @escaping emoji-heart_eyes.

swiftiosapplemobile application development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/07/25/a-first-approach-to-contract-test/index.html b/2017/07/25/a-first-approach-to-contract-test/index.html index f28076e89..844494856 100644 --- a/2017/07/25/a-first-approach-to-contract-test/index.html +++ b/2017/07/25/a-first-approach-to-contract-test/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A first approach to contract test

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about contract test: what they are and how you can use them.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A first approach to contract test

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about contract test: what they are and how you can use them.

Sometimes you have to unit test multiple implementations of the same interface. Basically you have the same tests for multiple concrete implementation of the same interface. In a case like this one, contract test could help you save a lot @@ -435,10 +435,10 @@ Wonderful emoji-open_mouthemoji-heart_eyes!!!
Here you can find the complete example (a Maven project developed using IntelliJ, JUnit4, Mockito).
-It's time for you to test contract test on your project emoji-joyemoji-laughing!!!

test driven developmentjava

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+It's time for you to test contract test on your project emoji-joyemoji-laughing!!!

test driven developmentjava

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/07/26/phong-lighting-model/index.html b/2017/07/26/phong-lighting-model/index.html index 181f967ad..e43188682 100644 --- a/2017/07/26/phong-lighting-model/index.html +++ b/2017/07/26/phong-lighting-model/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Phong reflection model

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about phong reflection model: one of the oldest and most popular lighting model in computer +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Phong reflection model

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about phong reflection model: one of the oldest and most popular lighting model in computer graphics.

We live in the era of Physically Based Rendering (PBR). Everyone in the computer graphics field know it is the future. I @@ -455,10 +455,10 @@

Specular component

An example model rendered using Phong model in Spectral BRDF explorer
-

computer graphics

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
+

computer graphics

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/08/11/model-view-presenter-architecture-ios-swift-unit-test/index.html b/2017/08/11/model-view-presenter-architecture-ios-swift-unit-test/index.html index 1b82ecfa0..f5668bfe9 100644 --- a/2017/08/11/model-view-presenter-architecture-ios-swift-unit-test/index.html +++ b/2017/08/11/model-view-presenter-architecture-ios-swift-unit-test/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Model View Presenter on iOS: no more excuses, write your unit test

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about the model view presenter architectural pattern and how it can improve you unit test and +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Model View Presenter on iOS: no more excuses, write your unit test

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about the model view presenter architectural pattern and how it can improve you unit test and your TDD workflow when developing an iOS application.

Unit test in iOS application is in some way "hard". The architectural pattern implemented by default on iOS is @@ -874,10 +874,10 @@

Time to try it yourself in one of your project. If you wanna review the complete project code you can check this Github repository -.

swiftiosapplemobile application developmenttest driven developmentarchitectural pattern

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+.

swiftiosapplemobile application developmenttest driven developmentarchitectural pattern

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/08/25/how-to-calculate-reflection-vector/index.html b/2017/08/25/how-to-calculate-reflection-vector/index.html index 5eae44bf3..fb7c8d0bc 100644 --- a/2017/08/25/how-to-calculate-reflection-vector/index.html +++ b/2017/08/25/how-to-calculate-reflection-vector/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

How to calculate the reflection vector

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about reflection vector used in some lighting models, for example the Phong reflection model. +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

How to calculate the reflection vector

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about reflection vector used in some lighting models, for example the Phong reflection model. I will show you how this vector is calculated.

In a previous post I talked about the Phong lighting model. @@ -420,10 +420,10 @@

R^=(L^⋅N^)N^−L^+(L^⋅N^)N^{\hat {R}} = ({\hat {L}} \cdot {\hat {N}}){\hat {N}} - {\hat {L}} + ({\hat {L}} \cdot {\hat {N}}){\hat {N}}
R=2(N^⋅L^)N^−L^R = 2({\hat{N}}\cdot{\hat{L}}){\hat{N}} - {\hat{L}}

That's it!! We get our formula. Now you're ready to understand in -detail the "magic" of the Phong lighting model emoji-relaxed.

computer graphics

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+detail the "magic" of the Phong lighting model emoji-relaxed.

computer graphics

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/09/11/clean-code-meaningful-names/index.html b/2017/09/11/clean-code-meaningful-names/index.html index 983c6e3ee..6dd425a9b 100644 --- a/2017/09/11/clean-code-meaningful-names/index.html +++ b/2017/09/11/clean-code-meaningful-names/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Clean Code: meaningful names

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about clean code and how important are the name you choose while you're developing software.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Clean Code: meaningful names

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about clean code and how important are the name you choose while you're developing software.

I always cared about the software I developed. I also always though that what makes a real professional software developer is how much he/she care about the software he/she is creating: the approach to the problem, the attention to @@ -520,4 +520,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2017/10/27/model-view-presenter-architecture-android-java/index.html b/2017/10/27/model-view-presenter-architecture-android-java/index.html index a18167000..151f72270 100644 --- a/2017/10/27/model-view-presenter-architecture-android-java/index.html +++ b/2017/10/27/model-view-presenter-architecture-android-java/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Model View Presenter on Android: unit test for everything

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about the model view presenter architectural pattern and how it can improve you unit test and +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Model View Presenter on Android: unit test for everything

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about the model view presenter architectural pattern and how it can improve you unit test and your TDD workflow when developing an Android application.

In @@ -1041,10 +1041,10 @@

Chuck Norris approves the Model View Presenter architectural pattern
-

androidjavamobile application developmenttest driven developmentarchitectural pattern

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+

androidjavamobile application developmenttest driven developmentarchitectural pattern

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/11/14/react-native-realm-custom-manual-linking-app-custom-directories-ios/index.html b/2017/11/14/react-native-realm-custom-manual-linking-app-custom-directories-ios/index.html index 47c830dff..a8e7beddd 100644 --- a/2017/11/14/react-native-realm-custom-manual-linking-app-custom-directories-ios/index.html +++ b/2017/11/14/react-native-realm-custom-manual-linking-app-custom-directories-ios/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native and Realm: custom manual link for an iOS app with custom directory structure

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will show you how to install realm as a dependency in a React Native project with custom folders +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native and Realm: custom manual link for an iOS app with custom directory structure

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will show you how to install realm as a dependency in a React Native project with custom folders structure without using react-native link command.

What is React Native? It is one of the most successful and loved mobile development framework. It let you build real @@ -866,10 +866,10 @@

That's it!! As I told you before you can find the complete example in this github repo. We are -now ready to create our React Native component with realm emoji-bowtie.

react nativerealmswiftiosapplemobile application developmentjavascript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+now ready to create our React Native component with realm emoji-bowtie.

react nativerealmswiftiosapplemobile application developmentjavascript

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/12/07/physically-base-rendering-introduction/index.html b/2017/12/07/physically-base-rendering-introduction/index.html index c32e7aead..048caf713 100644 --- a/2017/12/07/physically-base-rendering-introduction/index.html +++ b/2017/12/07/physically-base-rendering-introduction/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Physically based rendering: informal introduction

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will give you an informal introduction (and my personal understanding) about Physically based +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Physically based rendering: informal introduction

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will give you an informal introduction (and my personal understanding) about Physically based rendering.

Physically Based Rendering (PBR) is one of the latest, and most exciting trend in computer graphics. PBR is "everywhere" @@ -485,10 +485,10 @@

Physically Based Rendering

2nd Edition ed., Burlington, Massachusetts: Morgan Kaufmann, 2010, ch. 5, pp. 261-297.
[2] J. T. Kajiya, “The Rendering Equation,” in SIGGRAPH '86, Dallas, 1986, pp. 143-150.
[3] M. Pharr and G. Humphreys, “Light transport I: surface reflection,” in Physically based rendering: from theory to -implementation, 2nd ed., Burlington, Morgan Kaufmann, 2010, ch. 15, pp. 760-770.

computer graphicsphysically based rendering

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+implementation, 2nd ed., Burlington, Morgan Kaufmann, 2010, ch. 15, pp. 760-770.

computer graphicsphysically based rendering

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2017/12/08/react-native-multiple-instance-rctrootview/index.html b/2017/12/08/react-native-multiple-instance-rctrootview/index.html index 7a315a230..dfd878c86 100644 --- a/2017/12/08/react-native-multiple-instance-rctrootview/index.html +++ b/2017/12/08/react-native-multiple-instance-rctrootview/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native: use multiple RCTRootView instances in an existing iOS app

Fabrizio Duroni

Fabrizio Duroni

·

In this post I show you how it is possible to use multiple RCTRootView instances in an existing iOS app.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native: use multiple RCTRootView instances in an existing iOS app

Fabrizio Duroni

Fabrizio Duroni

·

In this post I show you how it is possible to use multiple RCTRootView instances in an existing iOS app.

If we want to start to use React Native in an existing app, it's really easy. We can have our first React Native component live inside our app by just following @@ -586,10 +586,10 @@ >

The entire source code of the app used as example for this post is contained in this github repo. -Now we're ready to use multiple React Native components at the same time in our app emoji-relieved.

react nativeswiftobjective-ciosapplemobile application developmentjavascript

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
+Now we're ready to use multiple React Native components at the same time in our app emoji-relieved.

react nativeswiftobjective-ciosapplemobile application developmentjavascript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/01/03/scene-kit-physically-based-rendering/index.html b/2018/01/03/scene-kit-physically-based-rendering/index.html index a4809e913..82d89d553 100644 --- a/2018/01/03/scene-kit-physically-based-rendering/index.html +++ b/2018/01/03/scene-kit-physically-based-rendering/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

SceneKit and physically based rendering

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will guide you in the creation of a scene using SceneKit and its physically based rendering features.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

SceneKit and physically based rendering

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will guide you in the creation of a scene using SceneKit and its physically based rendering features.

SceneKit is one of the framework inside the iOS SDK that I love the most. What is SceneKit? Let's see the definition from the developer apple website:

@@ -801,4 +801,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/01/16/ide-refactoring-android-studio-xcode-appcode-webstorm-jetbrains/index.html b/2018/01/16/ide-refactoring-android-studio-xcode-appcode-webstorm-jetbrains/index.html index 065edc21c..ac159fc18 100644 --- a/2018/01/16/ide-refactoring-android-studio-xcode-appcode-webstorm-jetbrains/index.html +++ b/2018/01/16/ide-refactoring-android-studio-xcode-appcode-webstorm-jetbrains/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Android Studio vs Xcode vs AppCode: a brief comparison about coding speed

Fabrizio Duroni

Fabrizio Duroni

Tommaso Resti

Tommaso Resti

Francesco Bonfadelli

Francesco Bonfadelli

·

In this posts I will compare the coding speed that it is possible to achieve with Android Studio, Xcode, and some +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Android Studio vs Xcode vs AppCode: a brief comparison about coding speed

Fabrizio Duroni

Fabrizio Duroni

Tommaso Resti

Tommaso Resti

Francesco Bonfadelli

Francesco Bonfadelli

·

In this posts I will compare the coding speed that it is possible to achieve with Android Studio, Xcode, and some JetBrains IDEs in terms of code creation and refactoring.

IDE, Integrated Development Environment, are the software developer toolboxes. When I started to work @@ -450,10 +450,10 @@

Final thoughts

So no worries: if you want to start to improve you coding speed probably there's an IDE for your favourite language. Xcode will always have a special place in my heart. I will still continue to use it in my daily job as a mobile developer. But... the coding speed I gained with the JetBrains IDEs could not be ignored emoji-smiling_imp. This is why I -started to prefer them emoji-heart.

IDEandroidjavaiosswiftmobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+started to prefer them emoji-heart.

IDEandroidjavaiosswiftmobile application development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/01/31/blender-tutorial-1-user-interface/index.html b/2018/01/31/blender-tutorial-1-user-interface/index.html index 17ffbcf6d..bc1d4daa4 100644 --- a/2018/01/31/blender-tutorial-1-user-interface/index.html +++ b/2018/01/31/blender-tutorial-1-user-interface/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: user interface

Fabrizio Duroni

Fabrizio Duroni

·

In this new series of post I will talk about learning to use Blender, the famous 3D computer graphics software. A +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: user interface

Fabrizio Duroni

Fabrizio Duroni

·

In this new series of post I will talk about learning to use Blender, the famous 3D computer graphics software. A series of tutorial for beginners/newbies (like me).

If you like computer graphics, at some point during your studies you will want to learn to use a 3D content creation @@ -508,10 +508,10 @@

To be noted is the option "Emulate 3 Button mouse" in the input settings. This option let Blender emulates a 3 button mouse using the Alt button. Int this way you can use this setting to use Blender with standard keys for mouse.
-That's enough first post. See you in the second tutorial about selecting and translating objects.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+That's enough first post. See you in the second tutorial about selecting and translating objects.

computer graphicsblender

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/02/08/react-native-debug-on-device-rctbundleurlprovider/index.html b/2018/02/08/react-native-debug-on-device-rctbundleurlprovider/index.html index bc9424083..a2b68c16b 100644 --- a/2018/02/08/react-native-debug-on-device-rctbundleurlprovider/index.html +++ b/2018/02/08/react-native-debug-on-device-rctbundleurlprovider/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native: the power of RCTBundleURLProvider to build, run and debug on an iOS device from Xcode

Fabrizio Duroni

Fabrizio Duroni

Mariano Patafio

Mariano Patafio

·

Do you know how to debug your react native app on a iOS device?

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native: the power of RCTBundleURLProvider to build, run and debug on an iOS device from Xcode

Fabrizio Duroni

Fabrizio Duroni

Mariano Patafio

Mariano Patafio

·

Do you know how to debug your react native app on a iOS device?

In the last few days I was working in pair programming with my colleague Mariano Patafio on some new @@ -689,4 +689,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/02/17/blender-tutorial-2-selecting-transforming-objects/index.html b/2018/02/17/blender-tutorial-2-selecting-transforming-objects/index.html index c8febe0b9..9b6d1a1d0 100644 --- a/2018/02/17/blender-tutorial-2-selecting-transforming-objects/index.html +++ b/2018/02/17/blender-tutorial-2-selecting-transforming-objects/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: selecting and transforming objects

Fabrizio Duroni

Fabrizio Duroni

·

Second post of the "Blender tutorial" series. This time we will learn how to select and move objects.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: selecting and transforming objects

Fabrizio Duroni

Fabrizio Duroni

·

Second post of the "Blender tutorial" series. This time we will learn how to select and move objects.

In the first post of the "Blender tutorial" series @@ -634,4 +634,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/03/02/code-review-whats-it-is-and-why-it-is-important/index.html b/2018/03/02/code-review-whats-it-is-and-why-it-is-important/index.html index 1581a5a04..63b72fb15 100644 --- a/2018/03/02/code-review-whats-it-is-and-why-it-is-important/index.html +++ b/2018/03/02/code-review-whats-it-is-and-why-it-is-important/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Code review: what it is and why it matters

Angelo Sciarra

Angelo Sciarra

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about code review: what it is and why it matters.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Code review: what it is and why it matters

Angelo Sciarra

Angelo Sciarra

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about code review: what it is and why it matters.

In some of my previous posts (for example in this one), I talked about my new experience at lastminute.com group and how much we care @@ -787,4 +787,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/03/20/golden-master-test-characterization-test-legacy-code/index.html b/2018/03/20/golden-master-test-characterization-test-legacy-code/index.html index c100ddf5a..9830342bc 100644 --- a/2018/03/20/golden-master-test-characterization-test-legacy-code/index.html +++ b/2018/03/20/golden-master-test-characterization-test-legacy-code/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Golden master testing aka Characterization test: a powerful tool to win your fight against legacy code

Fabrizio Duroni

Fabrizio Duroni

Emanuele Ianni

Emanuele Ianni

·

In this post I will talk about golden master test aka characterization test: what it is and how to use it.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Golden master testing aka Characterization test: a powerful tool to win your fight against legacy code

Fabrizio Duroni

Fabrizio Duroni

Emanuele Ianni

Emanuele Ianni

·

In this post I will talk about golden master test aka characterization test: what it is and how to use it.

In the last few months the focus during my daily job was not only on mobile. I had the chance to work on some front-end and back-end application of lastminute.com group. In @@ -577,4 +577,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/04/03/blender-tutorial-3-modeling-basics-part-1/index.html b/2018/04/03/blender-tutorial-3-modeling-basics-part-1/index.html index 8a838472c..bcecbb044 100644 --- a/2018/04/03/blender-tutorial-3-modeling-basics-part-1/index.html +++ b/2018/04/03/blender-tutorial-3-modeling-basics-part-1/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: introduction to basics of modeling - part 1

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the Blender tutorial series I will talk about the fundamental of modeling in Blender.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: introduction to basics of modeling - part 1

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the Blender tutorial series I will talk about the fundamental of modeling in Blender.

In the previous post of the "Blender tutorial" series we talked about how we can select and transforms objects. In this new post thing will start to get more interesting: we @@ -551,10 +551,10 @@

Two meshes modified with and without the proportional editing enable

-

In the next post we will continue to talk about the fundamental of modeling.

computer graphicsblender

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+

In the next post we will continue to talk about the fundamental of modeling.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/04/25/clean-code-objects-data-structures-law-demeter/index.html b/2018/04/25/clean-code-objects-data-structures-law-demeter/index.html index 3b8869654..016d7a267 100644 --- a/2018/04/25/clean-code-objects-data-structures-law-demeter/index.html +++ b/2018/04/25/clean-code-objects-data-structures-law-demeter/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Clean Code: data structures vs objects and the law of demeter

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about clean code: data structures, objects vs procedural and the law of demeter.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Clean Code: data structures vs objects and the law of demeter

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about clean code: data structures, objects vs procedural and the law of demeter.

In this previous post I described what Clean Code is and what does it mean to use meaningful names in your code. This time I will talk about Data structures @@ -415,10 +415,10 @@

Uncle bob, the superman of clean code
-

clean code

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+

clean code

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/05/07/born-id3tageditor-mp3id3tagger/index.html b/2018/05/07/born-id3tageditor-mp3id3tagger/index.html index 211461ff5..ee8951577 100644 --- a/2018/05/07/born-id3tageditor-mp3id3tagger/index.html +++ b/2018/05/07/born-id3tageditor-mp3id3tagger/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

The birth of ID3TagEditor and Mp3ID3Tagger and my journey into the ID3 tag standard

Fabrizio Duroni

Fabrizio Duroni

·

The first of a short series of post in which I describe my two latest project: ID3TagEditor and Mp3ID3Tagger. In this +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

The birth of ID3TagEditor and Mp3ID3Tagger and my journey into the ID3 tag standard

Fabrizio Duroni

Fabrizio Duroni

·

The first of a short series of post in which I describe my two latest project: ID3TagEditor and Mp3ID3Tagger. In this post I will talk about why I started to develop them.

Recently I bought a new car. After a lot of searches I finally decided to buy the Renault Clio 2017 1.5 dci. I love this @@ -567,4 +567,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/05/08/id3tageditor-swift-read-write-id3-tag-mp3/index.html b/2018/05/08/id3tageditor-swift-read-write-id3-tag-mp3/index.html index aaf6adb2d..6351ac649 100644 --- a/2018/05/08/id3tageditor-swift-read-write-id3-tag-mp3/index.html +++ b/2018/05/08/id3tageditor-swift-read-write-id3-tag-mp3/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

ID3TagEditor: a Swift framework to read and write ID3 tag of your mp3 files for macOS, iOS, tvOS and watchOS

Fabrizio Duroni

Fabrizio Duroni

·

The second of a short series of posts in which I describe my two latest projects: ID3TagEditor and Mp3ID3Tagger. In +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

ID3TagEditor: a Swift framework to read and write ID3 tag of your mp3 files for macOS, iOS, tvOS and watchOS

Fabrizio Duroni

Fabrizio Duroni

·

The second of a short series of posts in which I describe my two latest projects: ID3TagEditor and Mp3ID3Tagger. In this post I will describe how I created ID3TagEditor.

In this previous post I described @@ -792,10 +792,10 @@ framework you can have a look at my github repo and start to make some contribution emoji-heartemoji-purple_heart. Obviously, you must also continue to read my blog and wait for the other posts about other implementation details I promised above (if you're too lazy to go see by yourself : -kissing_heart:emoji-satisfied).

swiftiosapplemobile application developmentmacostvoswatchos

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+kissing_heart:emoji-satisfied).

swiftiosapplemobile application developmentmacostvoswatchos

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/05/09/mp3id3tagger-macos-tag-mp3-id3-rxswift-rxcocoa/index.html b/2018/05/09/mp3id3tagger-macos-tag-mp3-id3-rxswift-rxcocoa/index.html index 29cf78b24..862d9fcf6 100644 --- a/2018/05/09/mp3id3tagger-macos-tag-mp3-id3-rxswift-rxcocoa/index.html +++ b/2018/05/09/mp3id3tagger-macos-tag-mp3-id3-rxswift-rxcocoa/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Mp3ID3Tagger: a native macOS app to edit the ID3 tag of your mp3 files written using RxSwift and RxCocoa

Fabrizio Duroni

Fabrizio Duroni

·

The third of a short series of post in which I describe my two latest project: ID3TagEditor and Mp3ID3Tagger. In this +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Mp3ID3Tagger: a native macOS app to edit the ID3 tag of your mp3 files written using RxSwift and RxCocoa

Fabrizio Duroni

Fabrizio Duroni

·

The third of a short series of post in which I describe my two latest project: ID3TagEditor and Mp3ID3Tagger. In this post I will talk about Mp3ID3Tagger, a macOS application to edit id3 tag of your mp3 files.

In this previous post I described @@ -950,10 +950,10 @@ of RxSwift and RxCocoa emoji-sunglassesemoji-relieved. Obviously don't forget to see the official Mp3ID3Tagger repo and obviously to download the Mp3ID3Tagger app from this link -and use it!!! emoji-heartpulseemoji-sparkling_heart

swiftmacosapplerxswiftrxcocoa

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+and use it!!! emoji-heartpulseemoji-sparkling_heart

swiftmacosapplerxswiftrxcocoa

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/06/01/async-closure-test-mock-expectation-fulfill/index.html b/2018/06/01/async-closure-test-mock-expectation-fulfill/index.html index ffba6f995..23b945016 100644 --- a/2018/06/01/async-closure-test-mock-expectation-fulfill/index.html +++ b/2018/06/01/async-closure-test-mock-expectation-fulfill/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Asynchronous testing in Swift

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about asynchronous testing in Swift.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Asynchronous testing in Swift

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about asynchronous testing in Swift.

As we saw in this post and also in this other one, closures @@ -501,4 +501,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/06/02/blender-tutorial-4-modeling-basics-part-2/index.html b/2018/06/02/blender-tutorial-4-modeling-basics-part-2/index.html index 8753884fc..e44c853a0 100644 --- a/2018/06/02/blender-tutorial-4-modeling-basics-part-2/index.html +++ b/2018/06/02/blender-tutorial-4-modeling-basics-part-2/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: introduction to basics of modeling - part 2

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will continue to talk about the fundamental of modeling in Blender.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: introduction to basics of modeling - part 2

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will continue to talk about the fundamental of modeling in Blender.

In the previous post of the series "Blender tutorial" we introduced the first part of basics of modeling. Let's continue our exploration with other useful tool we can use for @@ -508,10 +508,10 @@

Subdivision of a mesh

Remember: each number of cuts increment QUADRUPLICATE the number of polygon in your mesh.
-In the next chapter we will talk about advanced modeling techniques and tools.

computer graphicsblender

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+In the next chapter we will talk about advanced modeling techniques and tools.

computer graphicsblender

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/07/04/react-native-typescript-existing-app/index.html b/2018/07/04/react-native-typescript-existing-app/index.html index c17f3e75d..ff496e7bb 100644 --- a/2018/07/04/react-native-typescript-existing-app/index.html +++ b/2018/07/04/react-native-typescript-existing-app/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native + Typescript, love at first sight. Setup in an existing app

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will show you how to setup React Native + Typescript in an existing app.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native + Typescript, love at first sight. Setup in an existing app

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will show you how to setup React Native + Typescript in an existing app.

In the last few months at lastminute.com group I worked on the following project: rebuild the native mobile apps of the main brands lastminute.com, Volagratis @@ -675,10 +675,10 @@

You can check all the code of the sample described above in this github repository and see all the TypeScript components I created for the app I shown you above. That's it!!! React Native + TypeScript: : -hearts: love at first sight emoji-hearts.

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+hearts: love at first sight emoji-hearts.

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/07/05/distribution-enterprise-app-ios-beta/index.html b/2018/07/05/distribution-enterprise-app-ios-beta/index.html index 24b747b85..38505d40c 100644 --- a/2018/07/05/distribution-enterprise-app-ios-beta/index.html +++ b/2018/07/05/distribution-enterprise-app-ios-beta/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Eat Your Own Dog Food: distribute a beta version of your iOS app using Apple Enterprise Developer Program

Giordano Tamburrelli

Giordano Tamburrelli

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will show you how to distribute a beta version of your iOS app using Apple Enterprise Developer +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Eat Your Own Dog Food: distribute a beta version of your iOS app using Apple Enterprise Developer Program

Giordano Tamburrelli

Giordano Tamburrelli

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will show you how to distribute a beta version of your iOS app using Apple Enterprise Developer Program.

In a previous post I talked about @@ -746,4 +746,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/08/02/design-thinking-design-sprint-workshop/index.html b/2018/08/02/design-thinking-design-sprint-workshop/index.html index 6207f6a55..a17aefeee 100644 --- a/2018/08/02/design-thinking-design-sprint-workshop/index.html +++ b/2018/08/02/design-thinking-design-sprint-workshop/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Design thinking and Design sprint: embrace you creativity

Fabrizio Duroni

Fabrizio Duroni

·

In this new post I will talk about my experience with design sprint and design thinking during a workshop I attended.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Design thinking and Design sprint: embrace you creativity

Fabrizio Duroni

Fabrizio Duroni

·

In this new post I will talk about my experience with design sprint and design thinking during a workshop I attended.

As I already told you in a previous post, in the last few @@ -635,4 +635,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/08/21/blender-tutorial-5-advanced-modeling/index.html b/2018/08/21/blender-tutorial-5-advanced-modeling/index.html index 871c7e5d1..41280f2c7 100644 --- a/2018/08/21/blender-tutorial-5-advanced-modeling/index.html +++ b/2018/08/21/blender-tutorial-5-advanced-modeling/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: advanced modeling

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about advanced modeling in Blender.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: advanced modeling

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about advanced modeling in Blender.

In the previous post of the series "Blender tutorial" we talked about the basics of modeling in Blender. In this post we will study Blender advanced modeling tools.
@@ -882,10 +882,10 @@

The vertex group tool

-

In the next post we will discuss about outliner, layers, groups, hierarchies and scenes.

computer graphicsblender

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+

In the next post we will discuss about outliner, layers, groups, hierarchies and scenes.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/09/09/ios-notification-content-extensions/index.html b/2018/09/09/ios-notification-content-extensions/index.html index 907063c01..25725d25f 100644 --- a/2018/09/09/ios-notification-content-extensions/index.html +++ b/2018/09/09/ios-notification-content-extensions/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Rich iOS notifications with Notification Content App Extension

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about iOS notification customization with Notification Content App Extension.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Rich iOS notifications with Notification Content App Extension

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about iOS notification customization with Notification Content App Extension.

During a workshop I recently attended I had the opportunity to explore a new interesting app extension type available in the iOS SDK: Notification Content App Extension. This extension has been added by Apple in iOS 10. By using this @@ -551,10 +551,10 @@ sandbox="allow-same-origin allow-scripts allow-popups" >

-

That's all for Notification Content App Extension on iOS. Let's start to test them in your app emoji-relaxed.

swiftiosapplemobile application development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+

That's all for Notification Content App Extension on iOS. Let's start to test them in your app emoji-relaxed.

swiftiosapplemobile application development

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/09/18/refactoring-if-chain-of-responsibility/index.html b/2018/09/18/refactoring-if-chain-of-responsibility/index.html index 35a06fda1..da18769af 100644 --- a/2018/09/18/refactoring-if-chain-of-responsibility/index.html +++ b/2018/09/18/refactoring-if-chain-of-responsibility/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Refactoring: a real case of a nested if structure transformed into a chain of responsibility

Francesco Bonfadelli

Francesco Bonfadelli

·

In this post my colleague Francesco Bonfadelli will +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Refactoring: a real case of a nested if structure transformed into a chain of responsibility

Francesco Bonfadelli

Francesco Bonfadelli

·

In this post my colleague Francesco Bonfadelli will show you how to transform a nested if structure into a chain of responsibility.

In this post I am going to describe a step by step process used to transform a nested if structure into a chain of @@ -1683,10 +1683,10 @@

Conclusion
classes, loop over it by using the first item of the list that is able to handle the case you are dealing with, inject the list of classes in order to make the class work with any combination of rules that you want. Additionally, we saw some features of Idea IDE that allow us to perform most of the refactoring operations automatically, with only a few -shortcuts.

clean code

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+shortcuts.

clean code

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/10/18/blender-tutorial-6-outliner-layers-groups-hierarchies-scenes/index.html b/2018/10/18/blender-tutorial-6-outliner-layers-groups-hierarchies-scenes/index.html index 1116dd32b..b74d67b1a 100644 --- a/2018/10/18/blender-tutorial-6-outliner-layers-groups-hierarchies-scenes/index.html +++ b/2018/10/18/blender-tutorial-6-outliner-layers-groups-hierarchies-scenes/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: outliner, layers, groups, hierarchies and scenes

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about outliner, layers, groups, hierarchies and scenes.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: outliner, layers, groups, hierarchies and scenes

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about outliner, layers, groups, hierarchies and scenes.

In the previous post of the series "Blender tutorial" we talked about advanced modeling in Blender. In this post we will continue to explore the capabilities of Blender by analyzing @@ -544,4 +544,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2018/11/01/react-native-typescript-conference-voxxed-2018/index.html b/2018/11/01/react-native-typescript-conference-voxxed-2018/index.html index f33cbefa3..f127f6e3e 100644 --- a/2018/11/01/react-native-typescript-conference-voxxed-2018/index.html +++ b/2018/11/01/react-native-typescript-conference-voxxed-2018/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

My first experience as speaker at Voxxed Days 2018: a talk about React, React Native and Typescript

Fabrizio Duroni

Fabrizio Duroni

Alessandro Romano

Alessandro Romano

·

In this post I will talk about my first experience as a speaker at a conference: a talk about React, React Native and +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

My first experience as speaker at Voxxed Days 2018: a talk about React, React Native and Typescript

Fabrizio Duroni

Fabrizio Duroni

Alessandro Romano

Alessandro Romano

·

In this post I will talk about my first experience as a speaker at a conference: a talk about React, React Native and Typescript with Alessandro Romano.

In the last few months I talked a lot @@ -603,10 +603,10 @@

Conclusion

allowfullscreen sandbox="allow-same-origin allow-scripts allow-popups" > -

conferencereact nativereacttypescriptmobile application developmentweb development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+

conferencereact nativereacttypescriptmobile application developmentweb development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/12/02/react-native-modules-bridge-communication-activitiy-fragment-android/index.html b/2018/12/02/react-native-modules-bridge-communication-activitiy-fragment-android/index.html index 466cf964f..82571ceef 100644 --- a/2018/12/02/react-native-modules-bridge-communication-activitiy-fragment-android/index.html +++ b/2018/12/02/react-native-modules-bridge-communication-activitiy-fragment-android/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native: a simple architecture for Native Modules communication with your Activities and Fragments on Android

Felice Giovinazzo

Felice Giovinazzo

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about a simple architecture for communication between React Native Native modules (aka +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native: a simple architecture for Native Modules communication with your Activities and Fragments on Android

Felice Giovinazzo

Felice Giovinazzo

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about a simple architecture for communication between React Native Native modules (aka bridges) and your native code on Android.

Sometimes a React Native app needs to access to the native API or needs/want to call some existing native code you @@ -510,10 +510,10 @@

That's all for our native modules communication architecture on Android. You can find the complete example in this github repository. If you want to know how we managed the same problem on the iOS platform emoji-appleemoji-iphoneemoji-heartbeat you can -read my other post about the same topic.

react nativejavascriptswiftobjective-ciosappleandroidjavamobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+read my other post about the same topic.

react nativejavascriptswiftobjective-ciosappleandroidjavamobile application development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2018/12/03/react-native-modules-bridge-communication-uiviewcontroller-ios/index.html b/2018/12/03/react-native-modules-bridge-communication-uiviewcontroller-ios/index.html index 9e5e33332..2bdd550f4 100644 --- a/2018/12/03/react-native-modules-bridge-communication-uiviewcontroller-ios/index.html +++ b/2018/12/03/react-native-modules-bridge-communication-uiviewcontroller-ios/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native: a simple architecture for Native Modules communication with your UIViewController on iOS

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about a simple architecture for communication between React Native Native modules (aka +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

React Native: a simple architecture for Native Modules communication with your UIViewController on iOS

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about a simple architecture for communication between React Native Native modules (aka bridges) and your native code on iOS.

As we saw in a previous post for fragments/Activities Android, @@ -465,10 +465,10 @@

That's all for our native modules communication architecture iOS. You can find the complete example in this github repository. If you want to know how we managed the same problem on the Android platform emoji-rocket you can -read my other post about the same topic.

react nativejavascriptswiftobjective-ciosappleandroidjavamobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+read my other post about the same topic.

react nativejavascriptswiftobjective-ciosappleandroidjavamobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/01/03/swift-package-manager-linux-macos-create-library-executable/index.html b/2019/01/03/swift-package-manager-linux-macos-create-library-executable/index.html index cefe4b264..71422f65f 100644 --- a/2019/01/03/swift-package-manager-linux-macos-create-library-executable/index.html +++ b/2019/01/03/swift-package-manager-linux-macos-create-library-executable/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Create a Swift library compatible with the Swift Package Manager for macOS and Linux

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about how to create a Swift library compatible with macOS and Linux.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Create a Swift library compatible with the Swift Package Manager for macOS and Linux

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about how to create a Swift library compatible with macOS and Linux.

A few times ago I published ID3TagEditor, a Swift library to read and modify the ID3 tag of mp3 files (I described it @@ -611,4 +611,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2019/02/08/mobile-ui-test-crossplatform-appium/index.html b/2019/02/08/mobile-ui-test-crossplatform-appium/index.html index f936a257f..da4e8ef97 100644 --- a/2019/02/08/mobile-ui-test-crossplatform-appium/index.html +++ b/2019/02/08/mobile-ui-test-crossplatform-appium/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

End to end (e2e) cross platform testing for your mobile apps with Appium

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about how to use Appium to write cross platform end to end tests for you mobile apps.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

End to end (e2e) cross platform testing for your mobile apps with Appium

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about how to use Appium to write cross platform end to end tests for you mobile apps.

During my daily job I'm used to write unit test for my code. In fact, I usually develop using Test Driven Development technique. Anyway at the @@ -480,10 +480,10 @@

Development

npm run test

This job is automatically triggered (cron) every day at 8 PM. That's it!!! This is how we tested our apps with Appium. That's all for appium and mobile end to end tests. If you have any question don't hesitate to comment on this post -below emoji-sparkling_heart.

javascriptswiftobjective-ciosappleandroidjavamobile application developmentreact nativetest driven developmenttypescript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+below emoji-sparkling_heart.

javascriptswiftobjective-ciosappleandroidjavamobile application developmentreact nativetest driven developmenttypescript

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/03/github-pages-progressive-web-app/index.html b/2019/03/03/github-pages-progressive-web-app/index.html index 038f0ca2c..f38f54434 100644 --- a/2019/03/03/github-pages-progressive-web-app/index.html +++ b/2019/03/03/github-pages-progressive-web-app/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Progressive Web App: an app-like experience for your website users

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about how I transformed my blog on Github Pages and Jekyll into a PWA.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Progressive Web App: an app-like experience for your website users

Fabrizio Duroni

Fabrizio Duroni

·

In this post I will talk about how I transformed my blog on Github Pages and Jekyll into a PWA.

In the last few years the gap in terms of features available between web apps and mobile native apps has decreased more and more. Indeed a new standard is emerging that tries to basically close this gap: Progressive Web App, PWA. What is a @@ -578,10 +578,10 @@

Conclusion

part of a PWA emoji-smirk). If you want to see the entire source code of my website/blog discussed here you can have a look at this repository.
So now it's time to start to develop you first PWA or transform you website/ web application in PWA. If you want, you -could share your experience with me in the comments below emoji-two_hearts.

pwaweb developmentjavascript

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+could share your experience with me in the comments below emoji-two_hearts.

pwaweb developmentjavascript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/21/blender-tutorial-7-materials/index.html b/2019/03/21/blender-tutorial-7-materials/index.html index ea023e2f5..ecd5914d7 100644 --- a/2019/03/21/blender-tutorial-7-materials/index.html +++ b/2019/03/21/blender-tutorial-7-materials/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: materials

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about materials.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: materials

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about materials.

In the previous post of the series "Blender tutorial" we talked about the outliner, layers, groups and hierarchies in Blender. In this post we will start to add some details @@ -775,10 +775,10 @@

Subsurface scattering

-

In the next post we will talk about textures.

computer graphicsblender

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+

In the next post we will talk about textures.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/22/blender-tutorial-8-textures-part-1/index.html b/2019/03/22/blender-tutorial-8-textures-part-1/index.html index 36c89ac28..0d958e96e 100644 --- a/2019/03/22/blender-tutorial-8-textures-part-1/index.html +++ b/2019/03/22/blender-tutorial-8-textures-part-1/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: textures - part 1

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about textures.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: textures - part 1

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about textures.

In the previous post of the series "Blender tutorial" we talked about materials in Blender. In this post we will start to learn how to use textures.
@@ -679,4 +679,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/23/blender-tutorial-9-textures-part-2/index.html b/2019/03/23/blender-tutorial-9-textures-part-2/index.html index 734ab356b..34a3549ca 100644 --- a/2019/03/23/blender-tutorial-9-textures-part-2/index.html +++ b/2019/03/23/blender-tutorial-9-textures-part-2/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: textures - part 2

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about other textures techniques.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: textures - part 2

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about other textures techniques.

In the previous post of the series "Blender tutorial" we talked about textures in Blender. In this post we will continue to learn how to use textures in Blender.
@@ -455,10 +455,10 @@

The node editor

-

In the next post we will talk about light.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
+

In the next post we will talk about light.

computer graphicsblender

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/24/blender-tutorial-10-light-part-1/index.html b/2019/03/24/blender-tutorial-10-light-part-1/index.html index e86b47e30..28607aa7a 100644 --- a/2019/03/24/blender-tutorial-10-light-part-1/index.html +++ b/2019/03/24/blender-tutorial-10-light-part-1/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: light - part 1

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about light.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: light - part 1

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about light.

In the previous post of the series "Blender tutorial" we talked about textures in Blender. In this post we will explore lights in Blender.
@@ -659,4 +659,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/25/blender-tutorial-11-light-part-2/index.html b/2019/03/25/blender-tutorial-11-light-part-2/index.html index c6e4c21df..ff1c777ed 100644 --- a/2019/03/25/blender-tutorial-11-light-part-2/index.html +++ b/2019/03/25/blender-tutorial-11-light-part-2/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: light - part 2

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about about how to do other cool stuff with lights in +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: light - part 2

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about about how to do other cool stuff with lights in Blender.

In the previous post of the series "Blender tutorial" we talked @@ -467,10 +467,10 @@

Add ambient occlusion environment lighting

-

In the next post about Blender we will talk about cameras and rendering.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+

In the next post about Blender we will talk about cameras and rendering.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/26/blender-tutorial-12-camera-rendering/index.html b/2019/03/26/blender-tutorial-12-camera-rendering/index.html index b27f3ef4a..4581af917 100644 --- a/2019/03/26/blender-tutorial-12-camera-rendering/index.html +++ b/2019/03/26/blender-tutorial-12-camera-rendering/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: camera and rendering

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about camera and rendering.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: camera and rendering

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about camera and rendering.

In the previous post of the series "Blender tutorial" we talked about light in Blender. In this post we will talk about camera and rendering. Let's start from camera.
@@ -686,10 +686,10 @@

The depth of field final result

-

That's all for camera and rendering. In the next post we will talk about animation.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
+

That's all for camera and rendering. In the next post we will talk about animation.

computer graphicsblender

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/27/blender-tutorial-13-animation/index.html b/2019/03/27/blender-tutorial-13-animation/index.html index a452ece42..32ca56686 100644 --- a/2019/03/27/blender-tutorial-13-animation/index.html +++ b/2019/03/27/blender-tutorial-13-animation/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: animation

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about animations.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: animation

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about animations.

In the previous post of the series "Blender tutorial" we talked about camera and rendering options/effects in Blender. In this post we will talk about animation. Let's start from the @@ -626,10 +626,10 @@

Set path constraint

-

That's all for animation. In the next post we will talk about character rigging.

computer graphicsblender

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+

That's all for animation. In the next post we will talk about character rigging.

computer graphicsblender

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/28/blender-tutorial-14-armatures-character-rigging/index.html b/2019/03/28/blender-tutorial-14-armatures-character-rigging/index.html index 80e1f6b7d..12b86d5ab 100644 --- a/2019/03/28/blender-tutorial-14-armatures-character-rigging/index.html +++ b/2019/03/28/blender-tutorial-14-armatures-character-rigging/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: armatures and character rigging

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about armatures and character rigging.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: armatures and character rigging

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about armatures and character rigging.

In the previous post of the series "Blender tutorial" we talked about animation. In this post we will talk about armatures and character rigging.
@@ -542,10 +542,10 @@ sandbox="allow-same-origin allow-scripts allow-popups" >

-

That's all for character rigging. In the next post we will talk about the rendering engine Cycles.

computer graphicsblender

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+

That's all for character rigging. In the next post we will talk about the rendering engine Cycles.

computer graphicsblender

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/03/29/blender-tutorial-15-cycles/index.html b/2019/03/29/blender-tutorial-15-cycles/index.html index 4570184cf..cefac7c16 100644 --- a/2019/03/29/blender-tutorial-15-cycles/index.html +++ b/2019/03/29/blender-tutorial-15-cycles/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: Cycles overview

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about Cycles rendering engine.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Blender tutorial: Cycles overview

Fabrizio Duroni

Fabrizio Duroni

·

In this new post of the series Blender tutorial I will talk about Cycles rendering engine.

In the previous post of the series "Blender tutorial" we talked about character rigging. In this post we will talk about the Cycles rendering engine. What is exactly Cycles? @@ -436,10 +436,10 @@

We can also use ambient occlusion to improve the realism of light. We can activate it like we did before under the World tab in the properties. That's all my friends for Blender. This was the last post for the "Blender tutorial" series. I -hope you enjoyed these series of tutorials about Blender.

computer graphicsblender

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+hope you enjoyed these series of tutorials about Blender.

computer graphicsblender

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/04/07/flow-javascript-types-typescript/index.html b/2019/04/07/flow-javascript-types-typescript/index.html index a222ac6a1..97c60ef9f 100644 --- a/2019/04/07/flow-javascript-types-typescript/index.html +++ b/2019/04/07/flow-javascript-types-typescript/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Flow, the static type checker for Javascript: how to use it and a brief comparison with TypeScript

Fabrizio Duroni

Fabrizio Duroni

·

Sick and tired of TypeScript? Give a chance to Flow, the JavaScript static type checker from Facebook.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Flow, the static type checker for Javascript: how to use it and a brief comparison with TypeScript

Fabrizio Duroni

Fabrizio Duroni

·

Sick and tired of TypeScript? Give a chance to Flow, the JavaScript static type checker from Facebook.

In my daily job at lastminute.com group I usually work with TypeScript. Instead, my personal website (the one where you are reading this article), has been developed using @@ -563,10 +563,10 @@

Flow vs TypeScript

Conclusion

This is my experience with Flow. In the end I think it's a good alternative to TypeScript, especially for the "true pure -javascript lovers". Let me know in the comments if you like it emoji-cupid or if you prefer TypeScript emoji-smiling_imp.

web developmentjavascripttypescript

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+javascript lovers". Let me know in the comments if you like it emoji-cupid or if you prefer TypeScript emoji-smiling_imp.

web developmentjavascripttypescript

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/05/08/intersection-observer/index.html b/2019/05/08/intersection-observer/index.html index 8f2ffc8b9..5439b769f 100644 --- a/2019/05/08/intersection-observer/index.html +++ b/2019/05/08/intersection-observer/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Intersection Observer API: speed up your web applications with lazy loading

Fabrizio Duroni

Fabrizio Duroni

·

Intersection Observer can improve your web applications performance by helping you to implement lazy loading of +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Intersection Observer API: speed up your web applications with lazy loading

Fabrizio Duroni

Fabrizio Duroni

·

Intersection Observer can improve your web applications performance by helping you to implement lazy loading of images.

In the last few months I worked hard to improved the page speed of my website (yeah, the one you're visiting right now : @@ -487,10 +487,10 @@

Conclusion

developer, I'm still following the iOS, Android and React Native scene and I'm still studying all the new tools and SDKs improvement released by Apple, Google and Facebook. But, you know, technology goes fast I have to be prepared for the future emoji-relaxed. Sooo, long live Intersection Observer!!! Web applications will be much more performant with your -help emoji-green_heart.

web developmentjavascripttypescript

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+help emoji-green_heart.

web developmentjavascripttypescript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/06/13/google-play-store-publish-pwa/index.html b/2019/06/13/google-play-store-publish-pwa/index.html index f8e46e176..8e4fc1ef3 100644 --- a/2019/06/13/google-play-store-publish-pwa/index.html +++ b/2019/06/13/google-play-store-publish-pwa/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Publish your Progressive Web App to the Google Play Store

Fabrizio Duroni

Fabrizio Duroni

·

You can now publish your progressive web apps to the Google Play Store using Trusted Web Activities without writing a +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Publish your Progressive Web App to the Google Play Store

Fabrizio Duroni

Fabrizio Duroni

·

You can now publish your progressive web apps to the Google Play Store using Trusted Web Activities without writing a single line of Java/Kotlin code.

A few months ago I transformed my blog into a Progressive Web App. @@ -706,10 +706,10 @@

Implementation

sandbox="allow-same-origin allow-scripts allow-popups" >

-

Go and download it immediately emoji-cupid!!!!

androidpwajavamobile application developmentweb developmentjavascript

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
+

Go and download it immediately emoji-cupid!!!!

androidpwajavamobile application developmentweb developmentjavascript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/07/28/clean-code-functions/index.html b/2019/07/28/clean-code-functions/index.html index 73e8a9324..baa8e634a 100644 --- a/2019/07/28/clean-code-functions/index.html +++ b/2019/07/28/clean-code-functions/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Clean Code: functions

Fabrizio Duroni

Fabrizio Duroni

·

Let's learn how to write function in a clean way.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Clean Code: functions

Fabrizio Duroni

Fabrizio Duroni

·

Let's learn how to write function in a clean way.

In a previous post I talked about clean code and how much it is important to me. In this new post I will talk about another topic of the uncle bob clean code book: @@ -442,10 +442,10 @@

"Don't repeat yourself"

Conclusion

That's all for Uncle Bob and functions. If you didn't read yet Uncle Bob "Clean Code" book it's time to catch up the gap -and get a copy for yourself emoji-sparkling_heart.

clean code

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+and get a copy for yourself emoji-sparkling_heart.

clean code

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/08/03/html-javascript-to-native-communication-ios/index.html b/2019/08/03/html-javascript-to-native-communication-ios/index.html index df2587166..ebaa32c6a 100644 --- a/2019/08/03/html-javascript-to-native-communication-ios/index.html +++ b/2019/08/03/html-javascript-to-native-communication-ios/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Web to native code communication on iOS using WKScriptMessageHandler

Fabrizio Duroni

Fabrizio Duroni

·

Did you know that it is possible to call Swift code from the JavaScript code of a web page displayed inside a +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Web to native code communication on iOS using WKScriptMessageHandler

Fabrizio Duroni

Fabrizio Duroni

·

Did you know that it is possible to call Swift code from the JavaScript code of a web page displayed inside a WKWebView?

Sooner or later every mobile developer in the world had the following specific need: integrate a website page inside an @@ -501,4 +501,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2019/09/06/html-javascript-to-native-communication-android/index.html b/2019/09/06/html-javascript-to-native-communication-android/index.html index c0b8bfd32..15474f6f0 100644 --- a/2019/09/06/html-javascript-to-native-communication-android/index.html +++ b/2019/09/06/html-javascript-to-native-communication-android/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Web to native code communication on Android using JavaScript Interfaces

Fabrizio Duroni

Fabrizio Duroni

·

Javascript Interface can be helpful when you need to call native code from a WebView on Android.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Web to native code communication on Android using JavaScript Interfaces

Fabrizio Duroni

Fabrizio Duroni

·

Javascript Interface can be helpful when you need to call native code from a WebView on Android.

In a [previous post]( "javascript swift") I described how you can call native Swift code from the JavaScript code of web page loaded inside a WKWebView. Today I will show you how to achieve the same result for tan Android Apps. I will a @@ -421,10 +421,10 @@

Implementation

Conclusion

The JavascriptInterface is really powerful. It lets you implement a deeper web to native integration that could significantly improve the general user experiences. JavascriptInterface, the best web to native integration for : -robot: Android :robot:.

androidjavamobile application developmentjavascriptweb development

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+robot: Android :robot:.

androidjavamobile application developmentjavascriptweb development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2019/11/16/pull-to-refresh-web/index.html b/2019/11/16/pull-to-refresh-web/index.html index 1869c910d..e46a5a5c3 100644 --- a/2019/11/16/pull-to-refresh-web/index.html +++ b/2019/11/16/pull-to-refresh-web/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Implement a pull to refresh component for you web application

Fabrizio Duroni

Fabrizio Duroni

·

Implementing a pull to refresh component in vanilla js for your progressive web app (PWA) it's really easy using +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Implement a pull to refresh component for you web application

Fabrizio Duroni

Fabrizio Duroni

·

Implementing a pull to refresh component in vanilla js for your progressive web app (PWA) it's really easy using cutting edge web technology (service worker, CSS new properties). Let's do it now!

Some months ago @@ -752,4 +752,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2019/12/15/pwa-offiline-tracking-google-analytics/index.html b/2019/12/15/pwa-offiline-tracking-google-analytics/index.html index ec4b293e8..1540944d9 100644 --- a/2019/12/15/pwa-offiline-tracking-google-analytics/index.html +++ b/2019/12/15/pwa-offiline-tracking-google-analytics/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Implement offline tracking with Google Analytics in your Progressive Web App

Fabrizio Duroni

Fabrizio Duroni

·

PWA offer great native alike offline capabilities. But what about tracking? In this tutorial I will show you how simple +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Implement offline tracking with Google Analytics in your Progressive Web App

Fabrizio Duroni

Fabrizio Duroni

·

PWA offer great native alike offline capabilities. But what about tracking? In this tutorial I will show you how simple it is to implement offline tracking with Google Analytics in your PWA.

As you may already understood from my previous post, I felt @@ -420,10 +420,10 @@

Conclusion

native development is closing more and more each day. You can already start to think about giving almost the same user experience to your user on all platforms (web and native). I will say a prayer for this end of the year: please Apple don't stay behind your competitor and remember what you said in 2008 (when web technologies where not as advanced as of -today) emoji-heart.

pwaweb developmentjavascript

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+today) emoji-heart.

pwaweb developmentjavascript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2020/01/18/react-native-activate-hermes/index.html b/2020/01/18/react-native-activate-hermes/index.html index b05af6572..0d4c8c9c2 100644 --- a/2020/01/18/react-native-activate-hermes/index.html +++ b/2020/01/18/react-native-activate-hermes/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

How to: enable Hermes JavaScript engine in your React Native app

Fabrizio Duroni

Fabrizio Duroni

Francesco Bonfadelli

Francesco Bonfadelli

Marco De Lucchi

Marco De Lucchi

·

React native 0.60.4 has a new cool feature for Android: a new JavaScript engine called Hermes. Let's see how you can +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

How to: enable Hermes JavaScript engine in your React Native app

Fabrizio Duroni

Fabrizio Duroni

Francesco Bonfadelli

Francesco Bonfadelli

Marco De Lucchi

Marco De Lucchi

·

React native 0.60.4 has a new cool feature for Android: a new JavaScript engine called Hermes. Let's see how you can turn it on in your React Native application to get all its benefits.

As you already may know, there has been some complains in the past related to the performance of React Native on the @@ -486,4 +486,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2020/03/06/custom-tabbar-swiftui/index.html b/2020/03/06/custom-tabbar-swiftui/index.html index 735f2318d..a26bd0116 100644 --- a/2020/03/06/custom-tabbar-swiftui/index.html +++ b/2020/03/06/custom-tabbar-swiftui/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Create a custom TabBar in SwiftUI

Fabrizio Duroni

Fabrizio Duroni

·

SwiftUI has been introduced by Apple during the last WWDC. I started to use it for a personal project to understand its +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Create a custom TabBar in SwiftUI

Fabrizio Duroni

Fabrizio Duroni

·

SwiftUI has been introduced by Apple during the last WWDC. I started to use it for a personal project to understand its potential. Let's see how I used SwiftUI to create a custom TabBar with modal and detail navigation.

NB.: Considering the success of this blog post, I decided to create a new custom TabBar SwiftUI library called TabBarUIAction. Go and check it out!!!

@@ -580,10 +580,10 @@

Conclusion

great job with SwiftUI and I hope that the framework will receive in the future updates all the missing UIKit pieces ( while still missing a lot of stuff on the web/Safari side). If you already used powerful declarative framework like React or React Native you will feel at home (seems like a copy of each -other emoji-blush). Stay tuned for other post about SwiftUI and Combine soon. emoji-heart.

swiftswiftuiiosapplemobile application development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+other emoji-blush). Stay tuned for other post about SwiftUI and Combine soon. emoji-heart.

swiftswiftuiiosapplemobile application development

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2020/04/19/dependecy-injection-swift/index.html b/2020/04/19/dependecy-injection-swift/index.html index 1c5c5b733..11c889c07 100644 --- a/2020/04/19/dependecy-injection-swift/index.html +++ b/2020/04/19/dependecy-injection-swift/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

How to: create your SUPER simple dependency injector container in Swift

Fabrizio Duroni

Fabrizio Duroni

·

There are a lot of dependency injection framework in the open source swift world with really cool features like object +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

How to: create your SUPER simple dependency injector container in Swift

Fabrizio Duroni

Fabrizio Duroni

·

There are a lot of dependency injection framework in the open source swift world with really cool features like object graph, persistence etc. But what if all you need is a lightweight dependencies container? In this post I will show you how to create it by leveraging the Metatype Type, Generics, the Hashable protocol and the Equatable protocol.

@@ -506,10 +506,10 @@

Conclusion

You can find all the code shown in this post in this Github repo. Remember: sometimes with a couple of classes you can avoid to import big frameworks and library into your projects. You -just need to study hard the languages and SDK fundamental. emoji-heartpulse

swiftiosapplemobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
+just need to study hard the languages and SDK fundamental. emoji-heartpulse

swiftiosapplemobile application development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2020/05/20/dark-mode-css-sass-scss/index.html b/2020/05/20/dark-mode-css-sass-scss/index.html index 8ed2d089a..3cd72857b 100644 --- a/2020/05/20/dark-mode-css-sass-scss/index.html +++ b/2020/05/20/dark-mode-css-sass-scss/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Add dark mode support on your website with SASS and prefers-color-scheme media query

Fabrizio Duroni

Fabrizio Duroni

·

Dark mode support has been around for quite some time. Let's see how you can create a light theme and a dark theme for +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Add dark mode support on your website with SASS and prefers-color-scheme media query

Fabrizio Duroni

Fabrizio Duroni

·

Dark mode support has been around for quite some time. Let's see how you can create a light theme and a dark theme for your website that will be selected automatically based on the user system preference.

Dark mode has been around for a while on all the major platforms: macOS, iOS, Android, Microsoft Windows @@ -556,4 +556,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2020/06/02/dynamic-imports-webpack-chunks/index.html b/2020/06/02/dynamic-imports-webpack-chunks/index.html index 9fc70b985..2f8f2b629 100644 --- a/2020/06/02/dynamic-imports-webpack-chunks/index.html +++ b/2020/06/02/dynamic-imports-webpack-chunks/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Lazy loading of JavaScript modules by using dynamic imports and code splitting with Webpack

Fabrizio Duroni

Fabrizio Duroni

·

Most of the time you have a big JavaScript codebase for your website but you need only a small fraction of it when a +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Lazy loading of JavaScript modules by using dynamic imports and code splitting with Webpack

Fabrizio Duroni

Fabrizio Duroni

·

Most of the time you have a big JavaScript codebase for your website but you need only a small fraction of it when a page is requested. Is it possible to load chunks of JavaScript code only when they are really needed? Yes you can with Webpack and its code splitting feature based on a syntax equal to the one of ES2020 dynamic imports.

@@ -496,10 +496,10 @@

Implementation

Conclusion

Webpack is a wonderful tool. It gives you the ability to bundle your code, styles and resources with a lot of customization thanks to its powerful ecosystem of loaders and plugins. This has been another step to make this site a -true professional blog platform with a strong development toolchain. emoji-heart_eyes

web developmentjavascripttypescript

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+true professional blog platform with a strong development toolchain. emoji-heart_eyes

web developmentjavascripttypescript

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2020/07/02/expose-uikit-to-swiftui/index.html b/2020/07/02/expose-uikit-to-swiftui/index.html index 7ba7abd15..99ec050d8 100644 --- a/2020/07/02/expose-uikit-to-swiftui/index.html +++ b/2020/07/02/expose-uikit-to-swiftui/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Use UIKit components in SwiftUI: UIViewControllerRepresentable and UIViewRepresentable

Fabrizio Duroni

Fabrizio Duroni

·

Do you know that it is possible to use UKit components in SwiftUI? Let's see how you can use UIViewRepresentable and +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Use UIKit components in SwiftUI: UIViewControllerRepresentable and UIViewRepresentable

Fabrizio Duroni

Fabrizio Duroni

·

Do you know that it is possible to use UKit components in SwiftUI? Let's see how you can use UIViewRepresentable and UIViewControllerRepresentable to use your UIKit based component or to fill the gap for missing SwiftUI API.

SwiftUI has been around for more than a year now. With its reactive paradigm approach it is a big step forward when @@ -496,10 +496,10 @@

Conclusion

hesitate to clone it and start to play with the example. UIViewRepresentable and UIViewControllerRepresentable are the tools provided by Apple to let you mix the power and versatility of UIKit with the declarative reactive approach of SwiftUI. I hope that in next future releases of the iOS SDK there will be no need to write this custom wrapper -components at least for all the standard UIKit components.

swiftiosapplemobile application development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+components at least for all the standard UIKit components.

swiftiosapplemobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2020/08/07/webpack-workbox-service-worker-typescript/index.html b/2020/08/07/webpack-workbox-service-worker-typescript/index.html index 48fe5b05d..e3ba0609b 100644 --- a/2020/08/07/webpack-workbox-service-worker-typescript/index.html +++ b/2020/08/07/webpack-workbox-service-worker-typescript/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Create a service worker with Workbox, Webpack and TypeScript

Fabrizio Duroni

Fabrizio Duroni

·

Recently I migrated my website to Webpack and TypeScript. I decided also to give a try to Workbox, a set of Google +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Create a service worker with Workbox, Webpack and TypeScript

Fabrizio Duroni

Fabrizio Duroni

·

Recently I migrated my website to Webpack and TypeScript. I decided also to give a try to Workbox, a set of Google libraries to improve the creation of a Progressive Web App. Let's see how easy it is to create a PWA with this tools.

I already talked extensively in some previous post @@ -656,10 +656,10 @@

Implementation

Conclusion

As you can see, writing a service worker with Typescript and Workbox is really easy. During the last time during my daily job I'm basically doing more and more web development instead of mobile apps. I feel like I'm almost reaching the -mythological status of the "fullstack developer". emoji-laughing Let's see what the future holds for me.

web developmentjavascriptpwatypescript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+mythological status of the "fullstack developer". emoji-laughing Let's see what the future holds for me.

web developmentjavascriptpwatypescript

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2020/10/19/swift-package-manager-resources/index.html b/2020/10/19/swift-package-manager-resources/index.html index df610b78f..8110d3131 100644 --- a/2020/10/19/swift-package-manager-resources/index.html +++ b/2020/10/19/swift-package-manager-resources/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Swift Package Manager: bundling resources with a Swift Package

Fabrizio Duroni

Fabrizio Duroni

·

Recently I upgraded my ID3TagEditor swift package to the latest Swift tools version (5.3). During the upgraded I +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Swift Package Manager: bundling resources with a Swift Package

Fabrizio Duroni

Fabrizio Duroni

·

Recently I upgraded my ID3TagEditor swift package to the latest Swift tools version (5.3). During the upgraded I discovered that now you can bundle reources with your Swift package. In this post I will show you how you can do this, and also a interesting trick in order to be able to build a project as a Swift Package and as a standard project from Xcode.

@@ -594,10 +594,10 @@

Conclusion

developers easier. Even if I still hope that Apple will finally fully embrace PWA ( so that a lot of useless shitty apps that can be web apps can disappear emoji-smirk), it's good to see that developers (of -true useful native apps emoji-grin) will enjoy in using these new tools to build their apps emoji-heart_eyes.

swiftiosapplemobile application developmentmacostvoswatchos

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+true useful native apps emoji-grin) will enjoy in using these new tools to build their apps emoji-heart_eyes.

swiftiosapplemobile application developmentmacostvoswatchos

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2020/12/23/rest-template-webclient-spring-boot/index.html b/2020/12/23/rest-template-webclient-spring-boot/index.html index 853f8734f..262807c72 100644 --- a/2020/12/23/rest-template-webclient-spring-boot/index.html +++ b/2020/12/23/rest-template-webclient-spring-boot/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Spring Boot + Kotlin Rest client cheatsheet: RestTemplate and Webclient

Fabrizio Duroni

Fabrizio Duroni

·

During the last months I worked a lot with Spring Boot backend applications. In this post I explain how you can consume +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Spring Boot + Kotlin Rest client cheatsheet: RestTemplate and Webclient

Fabrizio Duroni

Fabrizio Duroni

·

During the last months I worked a lot with Spring Boot backend applications. In this post I explain how you can consume a REST api from a Spring Boot application using RestTemplate and (the new) WebClient.

In the last few months I started to work as a backend developer during my daily job (and (for now) I @@ -776,4 +776,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2021/01/27/kotlin-junit5-mockk/index.html b/2021/01/27/kotlin-junit5-mockk/index.html index 189ad605a..27359e586 100644 --- a/2021/01/27/kotlin-junit5-mockk/index.html +++ b/2021/01/27/kotlin-junit5-mockk/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Unit testing in Kotlin with JUnit 5 and MockK

Fabrizio Duroni

Fabrizio Duroni

·

I recently discovered MockK, a mocking library created for Kotlin. Let's see how it is possible to write modern unit +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Unit testing in Kotlin with JUnit 5 and MockK

Fabrizio Duroni

Fabrizio Duroni

·

I recently discovered MockK, a mocking library created for Kotlin. Let's see how it is possible to write modern unit tests with MockK + JUnit 5.

As I told you in my last post, in the last months I wrote a lot @@ -774,10 +774,10 @@

Conclusion

in this github repository . As you can see from this post, my journey into the lastminute.com group backend is going on. Let's see if I can -bring you some other backend gems on this blog emoji-heartpulse (and I'm sure I will emoji-sunglasses).

javakotlintest driven development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+bring you some other backend gems on this blog emoji-heartpulse (and I'm sure I will emoji-sunglasses).

javakotlintest driven development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2021/03/08/ios-test-multiple-configuration-test-plan/index.html b/2021/03/08/ios-test-multiple-configuration-test-plan/index.html index 3b60c21f9..9cf37bf2f 100644 --- a/2021/03/08/ios-test-multiple-configuration-test-plan/index.html +++ b/2021/03/08/ios-test-multiple-configuration-test-plan/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Better organize tests and run them against multiple configuration with Xcode Test Plan

Fabrizio Duroni

Fabrizio Duroni

·

Recently I added a lot of Unit and UI tests to RangeUISlider, one of my open source projects. Let's see how I grouped +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Better organize tests and run them against multiple configuration with Xcode Test Plan

Fabrizio Duroni

Fabrizio Duroni

·

Recently I added a lot of Unit and UI tests to RangeUISlider, one of my open source projects. Let's see how I grouped them and run them against multiple configurations with Xcode Test Plan.

If you look at my Github profile, you can see that one of @@ -661,4 +661,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2021/05/31/swift-linux-test-local-ci-docker-container/index.html b/2021/05/31/swift-linux-test-local-ci-docker-container/index.html index 5dc47176e..ce381caa9 100644 --- a/2021/05/31/swift-linux-test-local-ci-docker-container/index.html +++ b/2021/05/31/swift-linux-test-local-ci-docker-container/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

How to test your Swift source code on Linux: locally and on Github Actions

Fabrizio Duroni

Fabrizio Duroni

·

Quick tips (useful for open source projects) for testing your Swift source code on Linux locally +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

How to test your Swift source code on Linux: locally and on Github Actions

Fabrizio Duroni

Fabrizio Duroni

·

Quick tips (useful for open source projects) for testing your Swift source code on Linux locally and with Github Actions.

In my previous posts I already talked a lot (maybe too much emoji-sweat_smile ) about my open source project @@ -402,10 +402,10 @@

Implementation

swift build

Conclusion

Yes that's all for Swift testing on Linux locally and on Github Actions. I promised you it would have been a "quick -tips" post. emoji-stuck_out_tongue_closed_eyes I hope you will find it useful.

swiftiosapplemobile application developmentmacostvoswatchos

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+tips" post. emoji-stuck_out_tongue_closed_eyes I hope you will find it useful.

swiftiosapplemobile application developmentmacostvoswatchos

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2021/06/06/ddd-dictionary/index.html b/2021/06/06/ddd-dictionary/index.html index d0d02be5c..f6064415a 100644 --- a/2021/06/06/ddd-dictionary/index.html +++ b/2021/06/06/ddd-dictionary/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A Domain Driven Design dictionary for newbies

Fabrizio Duroni

Fabrizio Duroni

·

In the last months, I started to hear a lot of stuff about Domain Driven Design. What is DDD? What does it try to +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A Domain Driven Design dictionary for newbies

Fabrizio Duroni

Fabrizio Duroni

·

In the last months, I started to hear a lot of stuff about Domain Driven Design. What is DDD? What does it try to solve? This is a post for all the newbies (like me) that are searching for a definition of what DDD is, which are its main parts and what is its main goal.

@@ -656,10 +656,10 @@

Event sourcing

Conclusion

If you came until here I hope you enjoyed the read, but more important that you found the answers you were searching for. If this post didn’t clarify your doubts, let me know in the comments, so that I can try to add what is missing and -improve it. emoji-kissing_heart

domain driven design

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+improve it. emoji-kissing_heart

domain driven design

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2021/11/05/contract-testing-asynchronous-messaging-pact-junit-mockk/index.html b/2021/11/05/contract-testing-asynchronous-messaging-pact-junit-mockk/index.html index 5aebca07a..c91272a56 100644 --- a/2021/11/05/contract-testing-asynchronous-messaging-pact-junit-mockk/index.html +++ b/2021/11/05/contract-testing-asynchronous-messaging-pact-junit-mockk/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Contract testing asynchronous messaging with Pact and MockK

Fabrizio Duroni

Fabrizio Duroni

Felice Giovinazzo

Felice Giovinazzo

Stefano Varesi

Stefano Varesi

·

In the last weeks I worked with my colleague Felice Giovinazzo on a new feature for the refund +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Contract testing asynchronous messaging with Pact and MockK

Fabrizio Duroni

Fabrizio Duroni

Felice Giovinazzo

Felice Giovinazzo

Stefano Varesi

Stefano Varesi

·

In the last weeks I worked with my colleague Felice Giovinazzo on a new feature for the refund process. Let’s see how we used pact to test a message-based interaction between two microservices with Pact

In the last weeks I worked with my colleague Felice Giovinazzo @@ -1068,10 +1068,10 @@

Conclusion

Github repository. As we saw from the example above Pact is a powerful testing tool. It lets you write consumer driven contract test that are faster than all the E2E/integration testing tools you can use in your application. But most important Pact gives you the ability -to refactor the design of an API/message in a safe and controlled way emoji-passport_control emoji-heart_eyes.

test driven developmentcontract testpactbackend

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+to refactor the design of an API/message in a safe and controlled way emoji-passport_control emoji-heart_eyes.

test driven developmentcontract testpactbackend

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2022/01/02/react-detect-scroll-direction/index.html b/2022/01/02/react-detect-scroll-direction/index.html index 5ed2a629a..7bf9b3284 100644 --- a/2022/01/02/react-detect-scroll-direction/index.html +++ b/2022/01/02/react-detect-scroll-direction/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A simple react hook to detect scroll direction

Fabrizio Duroni

Fabrizio Duroni

·

How do you detect scroll direction using React hooks? Let’s find out in this new post.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A simple react hook to detect scroll direction

Fabrizio Duroni

Fabrizio Duroni

·

How do you detect scroll direction using React hooks? Let’s find out in this new post.

In the last year I migrated this blog on GatsbyJS. This basically means that now this blog is powered by React, a framework I love. In particular, I used only hooks and functional components. One of the thing I had to do was to detect the scroll direction in order to implement the sticky header with hide on scroll feature that you can find at the top of this page (and everywhere on this website). How can we do this? Searching on the web I found this well written post on stackoverflow that contains a raw implementation of what I needed. In this blog post I will show you how I evolved that react hook into into a production ready one that you can use to detect the scroll direction in a page.

Implementation

@@ -426,10 +426,10 @@

Implementation

return scrollDir; };

Conclusion

-

Did you enjoy reading my post? If so, support my work by 💞 starring/funding some of my open source projects 💞.

reactweb developmenttypescript

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+

Did you enjoy reading my post? If so, support my work by 💞 starring/funding some of my open source projects 💞.

reactweb developmenttypescript

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2022/03/02/custom-jackson-module-deserlializer-serializer-object-mapper-java-spi/index.html b/2022/03/02/custom-jackson-module-deserlializer-serializer-object-mapper-java-spi/index.html index e125e35a1..e5cbf7c37 100644 --- a/2022/03/02/custom-jackson-module-deserlializer-serializer-object-mapper-java-spi/index.html +++ b/2022/03/02/custom-jackson-module-deserlializer-serializer-object-mapper-java-spi/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A custom module for Jackson object mapper using Java Service Provider

Fabrizio Duroni

Fabrizio Duroni

Alex Stabile

Alex Stabile

·

Sometimes you have custom Jackson object mapper imported from external modules/libraries. How can you +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

A custom module for Jackson object mapper using Java Service Provider

Fabrizio Duroni

Fabrizio Duroni

Alex Stabile

Alex Stabile

·

Sometimes you have custom Jackson object mapper imported from external modules/libraries. How can you customize their serialization/deserialization? Let's go to discover the power of Java Service Provider Interface.

In the last weeks I started to work in a new team on a new project at lm group. One of the goals we have is to renew the foundations of the company software overall architecture by introducing in the development workflow new technologies. In particular, we are using Axon, a framework to help developer to create Domain Driven Design applications that leverage specific architectural pattern like CQRS and Event Sourcing.
@@ -601,10 +601,10 @@

Implementation

Conclusion

You can find the complete source code of the example show above in this Github repository. Stay tuned for new article on one of the technologies/Pattern above (Axon, CQRS, Event Sourcing, we have a lot of stuff to talk about -emoji-heart ).

javakotlinweb development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+emoji-heart ).

javakotlinweb development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
- \ No newline at end of file + \ No newline at end of file diff --git a/2022/06/06/microfrontend-module-federation-dynamic-configuration/index.html b/2022/06/06/microfrontend-module-federation-dynamic-configuration/index.html index 7fddfa279..f6cbee906 100644 --- a/2022/06/06/microfrontend-module-federation-dynamic-configuration/index.html +++ b/2022/06/06/microfrontend-module-federation-dynamic-configuration/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Create a microfrontend app using module federation and dynamic configuration

Fabrizio Duroni

Fabrizio Duroni

Alex Stabile

Alex Stabile

·

We are used to the term microservice in the backend world. Is there a way to achieve the same architectural indipendence in the frontend world? Let's see how it is possible to create a microfrontend app by leveraging Webpack 5 module federation with a widget-based custom remote configuration.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Create a microfrontend app using module federation and dynamic configuration

Fabrizio Duroni

Fabrizio Duroni

Alex Stabile

Alex Stabile

·

We are used to the term microservice in the backend world. Is there a way to achieve the same architectural indipendence in the frontend world? Let's see how it is possible to create a microfrontend app by leveraging Webpack 5 module federation with a widget-based custom remote configuration.

As you may already know from my previous post, in the last weeks I started to work in a new team on a new project at lm group. The goals we have is to renew the foundations of the company software overall architecture by introducing in the development workflow new technologies. While on the backend we defined a clear path to reach our goal from the beginning (DDD + Axon), on the frontend we still had some doubt. In fact the application we are developing, a new booking cancellation flow, will be integrated in our myarea, an app where the user that manage his/her bookings. We decided to develop this new app with React + Styled Components + Our internal design system, that in lm group is the standard frontend stack (and is in some way already "enough" modern). But there was one problem: coupling between apps.
The myarea app at the moment already loads some widgets (usually associated to specific features) as npm packages. This packages are developed by different teams/external companies. This basically means:

@@ -711,4 +711,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2022/10/03/swiftui-path-svg-scale/index.html b/2022/10/03/swiftui-path-svg-scale/index.html index 31bc40fe4..a02dde8fd 100644 --- a/2022/10/03/swiftui-path-svg-scale/index.html +++ b/2022/10/03/swiftui-path-svg-scale/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Use SwiftUI Path and Shape to render your svg files: a practical example

Fabrizio Duroni

Fabrizio Duroni

Marco De Lucchi

Marco De Lucchi

·

Let's have some fun with SwiftUI by drawing an inspiration title component leveraging Path and Shape.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Use SwiftUI Path and Shape to render your svg files: a practical example

Fabrizio Duroni

Fabrizio Duroni

Marco De Lucchi

Marco De Lucchi

·

Let's have some fun with SwiftUI by drawing an inspiration title component leveraging Path and Shape.

As you may already know, at lastminute.com group we have github repository you can find the implementation fo the example described above. I'm really excited to share with you in the next weeks the entire -project where we used the implementation above. Stay tuned! emoji-ear emoji-rocket

swiftswiftuiiosapplemobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
+project where we used the implementation above. Stay tuned! emoji-ear emoji-rocket

swiftswiftuiiosapplemobile application development

Read next

React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
- \ No newline at end of file + \ No newline at end of file diff --git a/2023/01/10/widget-ios-swiftui-image-problem/index.html b/2023/01/10/widget-ios-swiftui-image-problem/index.html index 769f3d179..fddbbf66e 100644 --- a/2023/01/10/widget-ios-swiftui-image-problem/index.html +++ b/2023/01/10/widget-ios-swiftui-image-problem/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Widget iOS: how to fix the image bundling problem

Fabrizio Duroni

Fabrizio Duroni

Marco De Lucchi

Marco De Lucchi

·

Discover how we had a long day debugging WidgetKit problems with images.

+
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Widget iOS: how to fix the image bundling problem

Fabrizio Duroni

Fabrizio Duroni

Marco De Lucchi

Marco De Lucchi

·

Discover how we had a long day debugging WidgetKit problems with images.

In a recent post on the lastminute.com official blog, we presented our FriYaY project: an inspirational iOS widget. @@ -460,4 +460,4 @@

Conclusion

> window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2023/06/30/swiftui-text-concatenation/index.html b/2023/06/30/swiftui-text-concatenation/index.html index 6d0d0d036..a64650459 100644 --- a/2023/06/30/swiftui-text-concatenation/index.html +++ b/2023/06/30/swiftui-text-concatenation/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

SwiftUI and the Text concatenations super powers

Fabrizio Duroni

Fabrizio Duroni

Marco De Lucchi

Marco De Lucchi

·

Do you need a way to compose beautiful text with images and custom font like you are used with +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

SwiftUI and the Text concatenations super powers

Fabrizio Duroni

Fabrizio Duroni

Marco De Lucchi

Marco De Lucchi

·

Do you need a way to compose beautiful text with images and custom font like you are used with Attributed String. The Text component has everything we need to create some sort of 'attributed text' directly in SwiftUI. Let's go!!!

In some recent posts (have a look here and here ) we show a beautfiul project me and Marco are creating during our Friyay at lastminute.com: some widgets for our iOS apps. @@ -466,10 +466,10 @@

Implementation

} }

Conclusion

-

We love SwiftUI emoji-heart. With every release Apple is making the app developer life easier than ever emoji-rocket. Also with the new additions during WWDC23, SwiftData and Macro above all, developers will have some fun in the near future emoji-rocket. Sooo stay tuned, our new widget where we implemented the custom layout above is going to be released very soon!!! emoji-rocket

swiftswiftuiiosapplemobile-application-development

Read next

React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
Fabrizio Duroni

Fabrizio Duroni

·

A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
+

We love SwiftUI emoji-heart. With every release Apple is making the app developer life easier than ever emoji-rocket. Also with the new additions during WWDC23, SwiftData and Macro above all, developers will have some fun in the near future emoji-rocket. Sooo stay tuned, our new widget where we implemented the custom layout above is going to be released very soon!!! emoji-rocket

swiftswiftuiiosapplemobile-application-development

Read next

Advent of TypeScript 2023: Santa is stuck! (Day 24)
Advent of TypeScript 2023: Santa is stuck! (Day 24)
Fabrizio Duroni

Fabrizio Duroni

·

Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

typescriptadvent of typescript 2023
React Universe 2024
React Universe 2024
Fabrizio Duroni

Fabrizio Duroni

Sam Campisi

Sam Campisi

·

Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

react nativereactswiftiosappleandroidjavamobile application developmentjavascript
- \ No newline at end of file + \ No newline at end of file diff --git a/2023/12/29/advent-of-typescript-2023-favourite-challenges/index.html b/2023/12/29/advent-of-typescript-2023-favourite-challenges/index.html index 7abec96dd..a8bb0f9c1 100644 --- a/2023/12/29/advent-of-typescript-2023-favourite-challenges/index.html +++ b/2023/12/29/advent-of-typescript-2023-favourite-challenges/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Advent of TypeScript 2023: my personal favourite challenges

Fabrizio Duroni

Fabrizio Duroni

·

This year I participated in the first edition of Advent of TypeScript created by TypeHero. In this +

blog logo
CHICIO CODING
Coding. Drawing. Fun.
HomeBlogArtAbout me
blog logo
CHICIO CODING
Coding. Drawing. Fun.

Advent of TypeScript 2023: my personal favourite challenges

Fabrizio Duroni

Fabrizio Duroni

·

This year I participated in the first edition of Advent of TypeScript created by TypeHero. In this new series of article I will show my solutions to the challenges I liked the most.

It's been a long time since I published my last post blog. In these last few months, a lot has happened in my personal @@ -456,10 +456,10 @@

  • Tic Tac Toe
  • Connect 4
  • Santa is stuck!
    • -
    typescriptadvent of typescript 2023

    Read next

    Advent of TypeScript 2023: Santa is stuck! (Day 24)
    Advent of TypeScript 2023: Santa is stuck! (Day 24)
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

    typescriptadvent of typescript 2023
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

    react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
    +
    typescriptadvent of typescript 2023

    Read next

    React Universe 2024
    React Universe 2024
    Fabrizio Duroni

    Fabrizio Duroni

    Sam Campisi

    Sam Campisi

    ·

    Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

    react nativereactswiftiosappleandroidjavamobile application developmentjavascript
    Advent of TypeScript 2023: Santa is stuck! (Day 24)
    Advent of TypeScript 2023: Santa is stuck! (Day 24)
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

    typescriptadvent of typescript 2023
    - \ No newline at end of file + \ No newline at end of file diff --git a/2023/12/30/advent-of-typescript-2023-rock-paper-scissors/index.html b/2023/12/30/advent-of-typescript-2023-rock-paper-scissors/index.html index 7d1eea69a..4c2341426 100644 --- a/2023/12/30/advent-of-typescript-2023-rock-paper-scissors/index.html +++ b/2023/12/30/advent-of-typescript-2023-rock-paper-scissors/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    Advent of TypeScript 2023: Rock paper scissors (Day 17)

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Rock paper scissors, one of the classical kata games you can find at a coding dojo. Can it be +

    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    Advent of TypeScript 2023: Rock paper scissors (Day 17)

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Rock paper scissors, one of the classical kata games you can find at a coding dojo. Can it be implemented using only TypeScript types?

    This is the first of the four challenges I liked the most from "Advent Of TypeScript 2023" by TypeHero. @@ -546,10 +546,10 @@

    Implementation

    type test_8_actual = WhoWins<'✌🏽', '🖐🏾'>; //'lose'

    Conclusion

    As I mentioned at the beginning, this is the first of the four challenges I liked the most from "Advent Of TypeScript -2023" by TypeHero. Check out the other challenges I liked here.

    typescriptadvent of typescript 2023

    Read next

    Advent of TypeScript 2023: Santa is stuck! (Day 24)
    Advent of TypeScript 2023: Santa is stuck! (Day 24)
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system. [...]

    typescriptadvent of typescript 2023
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

    react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
    +2023" by TypeHero. Check out the other challenges I liked here.

    typescriptadvent of typescript 2023

    Read next

    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

    react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
    React Universe 2024
    React Universe 2024
    Fabrizio Duroni

    Fabrizio Duroni

    Sam Campisi

    Sam Campisi

    ·

    Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

    react nativereactswiftiosappleandroidjavamobile application developmentjavascript
    - \ No newline at end of file + \ No newline at end of file diff --git a/2024/01/04/advent-of-typescript-2023-tic-tac-toe/index.html b/2024/01/04/advent-of-typescript-2023-tic-tac-toe/index.html index ccd75f8e4..0a2ff4b6f 100644 --- a/2024/01/04/advent-of-typescript-2023-tic-tac-toe/index.html +++ b/2024/01/04/advent-of-typescript-2023-tic-tac-toe/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    Advent of TypeScript 2023: Tic tac toe (Day 21)

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Tic tac toe, another classical kata game you can find at a coding dojo. A game that is easy to implement with +

    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    Advent of TypeScript 2023: Tic tac toe (Day 21)

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Tic tac toe, another classical kata game you can find at a coding dojo. A game that is easy to implement with functions, variables etc. becomes a real challenge when you try to implement it using only types.

    This is the second of the four challenges I liked the most from "Advent Of TypeScript 2023" by [TypeHero] @@ -888,10 +888,10 @@

    Implementation

    */

    Conclusion

    As I mentioned at the beginning, this is the second of the four challenges I liked the most from "Advent Of TypeScript -2023" by TypeHero. Check out the other challenges I liked here.

    typescriptadvent of typescript 2023

    Read next

    React Universe 2024
    React Universe 2024
    Fabrizio Duroni

    Fabrizio Duroni

    Sam Campisi

    Sam Campisi

    ·

    Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

    react nativereactswiftiosappleandroidjavamobile application developmentjavascript
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

    react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
    +2023" by TypeHero. Check out the other challenges I liked here.

    typescriptadvent of typescript 2023

    Read next

    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

    react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
    React Universe 2024
    React Universe 2024
    Fabrizio Duroni

    Fabrizio Duroni

    Sam Campisi

    Sam Campisi

    ·

    Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

    react nativereactswiftiosappleandroidjavamobile application developmentjavascript
    - \ No newline at end of file + \ No newline at end of file diff --git a/2024/01/20/advent-of-typescript-2023-connect-4/index.html b/2024/01/20/advent-of-typescript-2023-connect-4/index.html index 7ec3c6295..fc157477b 100644 --- a/2024/01/20/advent-of-typescript-2023-connect-4/index.html +++ b/2024/01/20/advent-of-typescript-2023-connect-4/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    Advent of TypeScript 2023: Connect 4 (Day 23)

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Connect 4, a classical family Christmas game. Let's see how to tackle it with the TypeScript type system.

    +
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    Advent of TypeScript 2023: Connect 4 (Day 23)

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Connect 4, a classical family Christmas game. Let's see how to tackle it with the TypeScript type system.

    This is the third of the four challenges I liked the most from "Advent Of TypeScript 2023" by TypeHero. Check out the other challenges I liked here.

    @@ -1209,4 +1209,4 @@

    Conclusion

    > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2024/01/31/advent-of-typescript-2023-santa-is-stuck/index.html b/2024/01/31/advent-of-typescript-2023-santa-is-stuck/index.html index 059f587bd..adf7856ad 100644 --- a/2024/01/31/advent-of-typescript-2023-santa-is-stuck/index.html +++ b/2024/01/31/advent-of-typescript-2023-santa-is-stuck/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    Advent of TypeScript 2023: Santa is stuck! (Day 24)

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system.

    +
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    Advent of TypeScript 2023: Santa is stuck! (Day 24)

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    Santa is stuck! Let's see how I helped him to escape from the maze using the TypeScript type system.

    This is the forth of the four challenges I liked the most from "Advent Of TypeScript 2023" by TypeHero. Check out the other challenges I liked here.

    @@ -1141,10 +1141,10 @@

    Implementation

    */

    Conclusion

    As I mentioned at the beginning, this is the forth of the four challenges I liked the most from "Advent Of TypeScript -2023" by TypeHero. Check out the other challenges I liked here.

    typescriptadvent of typescript 2023

    Read next

    React Universe 2024
    React Universe 2024
    Fabrizio Duroni

    Fabrizio Duroni

    Sam Campisi

    Sam Campisi

    ·

    Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

    react nativereactswiftiosappleandroidjavamobile application developmentjavascript
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

    react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
    +2023" by TypeHero. Check out the other challenges I liked here.

    typescriptadvent of typescript 2023

    Read next

    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG
    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developer often complains that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago [...]

    react nativeswiftiosappleandroidjavamobile application developmentjavascripttypescript
    React Universe 2024
    React Universe 2024
    Fabrizio Duroni

    Fabrizio Duroni

    Sam Campisi

    Sam Campisi

    ·

    Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development. [...]

    react nativereactswiftiosappleandroidjavamobile application developmentjavascript
    - \ No newline at end of file + \ No newline at end of file diff --git a/2024/03/02/react-native-skia-svg-background-shape-text/index.html b/2024/03/02/react-native-skia-svg-background-shape-text/index.html index 6d4354a0f..0a7094897 100644 --- a/2024/03/02/react-native-skia-svg-background-shape-text/index.html +++ b/2024/03/02/react-native-skia-svg-background-shape-text/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developers often complain that React Native is not Native, because it is missing some +

    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    React Native is Native: drawing customized background shapes with React Native Skia and React Native SVG

    Fabrizio Duroni

    Fabrizio Duroni

    ·

    A lot of mobile developers often complain that React Native is not Native, because it is missing some features. This is absolutely not true! In this blog post I will show you how I create a component with a custom background shape, similar to the one I did for a native component ome time ago

    @@ -880,4 +880,4 @@

    Conclusion

    > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/2024/10/21/react-universe-2024/index.html b/2024/10/21/react-universe-2024/index.html index e4002c0fd..9912a731e 100644 --- a/2024/10/21/react-universe-2024/index.html +++ b/2024/10/21/react-universe-2024/index.html @@ -157,9 +157,9 @@ .cFvhWs{position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:#FFFFFF;transition:0.2s;}/*!sc*/ @media (prefers-color-scheme: dark){.cFvhWs{color:#FFFFFF;}}/*!sc*/ data-styled.g31[id="search__SearchAltContainer-sc-tvxne5-6"]{content:"cFvhWs,"}/*!sc*/ -.hRnAwO{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;color:#FFFFFF;border:2px solid #FFFFFF;outline:none;transition:0.5s;}/*!sc*/ -@media (prefers-color-scheme: dark){.hRnAwO{color:#FFFFFF;border:2px solid #FFFFFF;}}/*!sc*/ -data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"hRnAwO,"}/*!sc*/ +.NNGya{padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:18px;border:2px solid #FFFFFF;outline:none;transition:0.5s;color:transparent;}/*!sc*/ +@media (prefers-color-scheme: dark){.NNGya{border:2px solid #FFFFFF;}}/*!sc*/ +data-styled.g32[id="search__SearchBoxInput-sc-tvxne5-7"]{content:"NNGya,"}/*!sc*/ .kIAbSP{height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease 0.4s;opacity:1;}/*!sc*/ @media (min-width: 768px){.kIAbSP{display:none;}}/*!sc*/ data-styled.g33[id="blog-menu__MobileBlogHeaderContainer-sc-18bjd9p-0"]{content:"kIAbSP,"}/*!sc*/ @@ -337,7 +337,7 @@ data-styled.g70[id="post__PostTitle-sc-dbb7o3-0"]{content:"ihivoA,"}/*!sc*/ .knvfyl{margin-top:24px;}/*!sc*/ data-styled.g71[id="post__PostContainer-sc-dbb7o3-1"]{content:"knvfyl,"}/*!sc*/ -
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    React Universe 2024

    Fabrizio Duroni

    Fabrizio Duroni

    Sam Campisi

    Sam Campisi

    ·

    Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key +

    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.
    HomeBlogArtAbout me
    blog logo
    CHICIO CODING
    Coding. Drawing. Fun.

    React Universe 2024

    Fabrizio Duroni

    Fabrizio Duroni

    Sam Campisi

    Sam Campisi

    ·

    Let's dive into the talks from React Universe 2024 that stood out to us the most and share the key insights we gained. From innovative debugging tools to cross-platform development strategies, we’ll walk you through what we found valuable and how it’s shaping our approach to React and React Native development.

    @@ -787,4 +787,4 @@

    References

    > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/404.html b/404.html index 10986f3b4..d59523d33 100644 --- a/404.html +++ b/404.html @@ -37,4 +37,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/404/index.html b/404/index.html index 410d50a0f..1ed563c1b 100644 --- a/404/index.html +++ b/404/index.html @@ -37,4 +37,4 @@ > window.___chunkMapping="{\"app\":[\"/app-118d93bb32abcf1e651e.js\"],\"component---cache-caches-gatsby-plugin-offline-app-shell-js\":[\"/component---cache-caches-gatsby-plugin-offline-app-shell-js-560a20af209b08255404.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-8f26e3fd8222f63f5a27.js\"],\"component---src-pages-art-tsx\":[\"/component---src-pages-art-tsx-6447ca932b38c6d7339d.js\"],\"component---src-pages-blog-archive-tsx\":[\"/component---src-pages-blog-archive-tsx-055fac9c70657ed47d82.js\"],\"component---src-pages-blog-tags-tsx\":[\"/component---src-pages-blog-tags-tsx-a9e0e15e3cd628184305.js\"],\"component---src-pages-cookie-policy-tsx\":[\"/component---src-pages-cookie-policy-tsx-559a62961c8b8efc3494.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-6bdb17686a372ff4e008.js\"],\"component---src-pages-projects-astronave-privacy-policy-tsx\":[\"/component---src-pages-projects-astronave-privacy-policy-tsx-12faebd2ebc7a52cbbad.js\"],\"component---src-pages-projects-chicio-coding-privacy-policy-tsx\":[\"/component---src-pages-projects-chicio-coding-privacy-policy-tsx-212bc0296cd464e9d3b5.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-a39402f48c325e355ff3.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-27c8eed596d56a1096b8.js\"],\"component---src-templates-tag-tsx\":[\"/component---src-templates-tag-tsx-0b199e1085fe1ae636d0.js\"]}"; - \ No newline at end of file + \ No newline at end of file diff --git a/992fa8d325989540aeca99dc38709520a3b7c580-2e24a68e1eee3845d4ed.js b/992fa8d325989540aeca99dc38709520a3b7c580-b53462cbee3821dbcd94.js similarity index 65% rename from 992fa8d325989540aeca99dc38709520a3b7c580-2e24a68e1eee3845d4ed.js rename to 992fa8d325989540aeca99dc38709520a3b7c580-b53462cbee3821dbcd94.js index 05251d564..4af4b9cf3 100644 --- a/992fa8d325989540aeca99dc38709520a3b7c580-2e24a68e1eee3845d4ed.js +++ b/992fa8d325989540aeca99dc38709520a3b7c580-b53462cbee3821dbcd94.js @@ -1,2 +1,2 @@ -"use strict";(self.webpackChunkfabrizioduroni_it=self.webpackChunkfabrizioduroni_it||[]).push([[600],{291:function(e,t,n){n.d(t,{J:function(){return i}});const i=(0,n(5086).css)(["line-height:1.4;color:",";margin:",";font-weight:normal;@media (prefers-color-scheme:dark){color:",";}"],(e=>e.theme.light.primaryTextColor),(e=>e.theme.spacing[0]),(e=>e.theme.dark.primaryTextColor))},3348:function(e,t,n){n.d(t,{a:function(){return a}});var i=n(5086),o=n(4148);const a=i.default.ul.withConfig({displayName:"list__List",componentId:"sc-hcphk6-0"})(["font-size:",";color:",";line-height:",";","{color:",";}"],(e=>e.theme.fontSizes[2]),(e=>e.theme.light.primaryTextColor),(e=>e.theme.lineHeight),o.c.dark,(e=>e.theme.dark.primaryTextColor))},4594:function(e,t,n){n.d(t,{a:function(){return l}});var i=n(5086),o=n(6005),a=n(7294);var r=n(5893);const s=i.default.div.withConfig({displayName:"overlay__StyledOverlay",componentId:"sc-obrcb2-0"})(["position:fixed;top:0;left:0;width:100%;height:100%;z-index:",";background:rgba(0,0,0,0.6);opacity:0;animation:"," 0.25s linear ",";animation-fill-mode:forwards;backdrop-filter:blur(4px);"],(e=>e.$zIndex),o.O,(e=>""+e.$delay)),l=e=>{let{zIndex:t,onClick:n,delay:i}=e;return(0,a.useLayoutEffect)((()=>{const e=window.getComputedStyle(document.body),t=e.position,n=e.top,i=e.left,o=e.right,a=(window.scrollY||document.documentElement.scrollTop)-(document.documentElement.clientTop||0);return document.body.style.top=-a+"px",document.body.style.position="fixed",document.body.style.left="0",document.body.style.right="0",()=>{document.body.style.top=n,document.body.style.position=t,document.body.style.left=i,document.body.style.right=o,window.scrollTo(0,a)}}),[]),(0,r.jsx)(s,{$zIndex:t,onClick:n,$delay:i})}},9495:function(e,t,n){n.d(t,{L:function(){return a}});var i=n(5086),o=n(4148);const a=(0,i.css)(["font-size:",";color:",";text-decoration:none;line-height:",";","{color:",";}&:hover{color:",";","{color:",";}}"],(e=>e.theme.fontSizes[2]),(e=>e.theme.light.accentColor),(e=>e.theme.lineHeight),o.c.dark,(e=>e.theme.dark.accentColor),(e=>e.theme.light.accentColor),o.c.dark,(e=>e.theme.dark.accentColor))},8092:function(e,t,n){n.d(t,{W:function(){return Me}});var i=n(8032),o=n(5086),a=n(4148),r=n(3589),s=n(2589),l=n(5893);const c=o.default.div.withConfig({displayName:"blog-header__BlogHeaderContainer",componentId:"sc-15cvfv8-0"})(["display:flex;align-items:center;","{margin-top:",";margin-bottom:",";}"],a.c.minWidth.sm,(e=>e.theme.spacing[10]),(e=>e.theme.spacing[14])),d=o.default.div.withConfig({displayName:"blog-header__BlogHeaderColumn",componentId:"sc-15cvfv8-1"})(["display:flex;flex-direction:column;justify-content:center;"]),p=o.default.span.withConfig({displayName:"blog-header__BlogTitle",componentId:"sc-15cvfv8-2"})(["color:",";margin:0;font-weight:bold;display:block;line-height:1.5;font-size:",";","{color:",";}","{font-size:",";}","{font-size:",";}"],(e=>e.theme.light.textAbovePrimaryColor),(e=>e.theme.fontSizes[4]),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor),a.c.minWidth.xs,(e=>e.theme.fontSizes[6]),a.c.minWidth.sm,(e=>e.theme.fontSizes[9])),h=o.default.div.withConfig({displayName:"blog-header__BlogDescriptionContainer",componentId:"sc-15cvfv8-3"})(["display:none;overflow:hidden;","{display:block;}"],a.c.minWidth.sm),u=o.default.span.withConfig({displayName:"blog-header__BlogDescription",componentId:"sc-15cvfv8-4"})(["display:none;","{display:block;font-size:",";color:",";line-height:1.5;","{color:",";}}"],a.c.minWidth.sm,(e=>e.theme.fontSizes[4]),(e=>e.theme.light.textAbovePrimaryColor),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor)),m=o.default.div.withConfig({displayName:"blog-header__ImageContainer",componentId:"sc-15cvfv8-5"})(["width:35px;height:35px;margin-right:",";border-radius:10px;box-shadow:1px 1px 4px rgba(0,0,0,0.575);","{width:80px;height:80px;}","{background-color:",";}","{border-radius:10px;}"],(e=>e.theme.spacing[2]),a.c.minWidth.sm,a.c.dark,(e=>e.theme.dark.generalBackgroundLight),r.o),A=o.default.div.withConfig({displayName:"blog-header__DesktopContainer",componentId:"sc-15cvfv8-6"})(["display:none;","{display:block;}"],a.c.minWidth.sm),g=o.default.div.withConfig({displayName:"blog-header__MobileContainer",componentId:"sc-15cvfv8-7"})(["display:flex;height:",";","{display:none;}"],(e=>e.height),a.c.minWidth.sm),f=o.default.div.withConfig({displayName:"blog-header__Background",componentId:"sc-15cvfv8-8"})(["",";height:",";position:absolute;top:0;left:0;right:0;z-index:-100;"],s.g,(e=>e.$big?"400px":"220px")),x=()=>(0,l.jsxs)(c,{children:[(0,l.jsx)(m,{children:(0,l.jsx)(i.S,{src:"../../../images/blog-logo.jpg",loading:"eager",alt:"blog logo",width:80,height:80,placeholder:"blurred",imgStyle:{borderRadius:"10px",boxShadow:"1px 1px 4px rgba(0, 0, 0, 0.575)"},__imageData:n(2114)})}),(0,l.jsxs)(d,{children:[(0,l.jsx)(p,{children:"CHICIO CODING"}),(0,l.jsx)(h,{children:(0,l.jsx)(u,{children:"Coding. Drawing. Fun."})})]})]}),b=e=>{let{big:t}=e;return(0,l.jsxs)(A,{children:[(0,l.jsx)(x,{}),(0,l.jsx)(f,{$big:t})]})},C=e=>{let{height:t}=e;return(0,l.jsx)(g,{height:t,children:(0,l.jsx)(x,{})})};var v=n(1103),y=n(4299),E=n(7294),k=n(6918),w=n(6137),j=n(1944),N=n(5583),S=n(4662),_=n(434),B=n.n(_),D=n(4142),I=E.forwardRef((function(e,t){return E.createElement(D.r,B()({iconAttrs:{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:t}),E.createElement("path",{d:"M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"}))}));I.displayName="Menu";const M=e=>{let{onClick:t}=e;return(0,l.jsx)(S.J,{children:(0,l.jsx)(I,{size:35,onClick:t})})};var O=n(4594);function z(){return z=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{onClick:t}=e;return(0,l.jsx)(S.J,{children:(0,l.jsx)(ee,{size:35,onClick:t})})};var ne=n(5814);let ie=function(e){return e.up="up",e.down="down",e}({});const oe=()=>{const{0:e,1:t}=(0,E.useState)(ie.up);return(0,E.useEffect)((()=>{let e=window.scrollY;const n=()=>{const n=window.scrollY;if((t=>Math.abs(t-e)>100)(n)){const i=(t=>t>e&&!(e>0&&0===t)&&!(t>0&&0===e))(n)?ie.down:ie.up;t(i),e=n>0?n:0}},i=()=>window.requestAnimationFrame(n);return window.addEventListener("scroll",i),()=>window.removeEventListener("scroll",i)}),[]),e};var ae=E.forwardRef((function(e,t){return E.createElement(D.r,B()({iconAttrs:{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:t}),E.createElement("path",{d:"M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"}),E.createElement("path",{d:"M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"}))}));ae.displayName="SearchAlt";var re=n(3348),se=n(281),le=n(1883);var ce=n(8471);const de=(0,o.default)(w.W).withConfig({displayName:"search__SearchListContainer",componentId:"sc-tvxne5-0"})(["position:absolute;top:55px;right:0;left:0;bottom:0;height:80vh;overflow:scroll;",";"],ce.E),pe=(0,o.default)(re.a).withConfig({displayName:"search__SearchHitsList",componentId:"sc-tvxne5-1"})(["list-style:none;padding:",";margin:"," 0;background-color:",";",";","{background-color:",";}"],(e=>e.theme.spacing[2]),(e=>e.theme.spacing[6]),(e=>e.theme.light.generalBackground),ce.E,a.c.dark,(e=>e.theme.dark.generalBackground)),he=o.default.li.withConfig({displayName:"search__SearchHitContainer",componentId:"sc-tvxne5-2"})(["display:flex;flex-direction:column;border-bottom:1px solid ",";","{border-bottom:1px solid ",";}"],(e=>e.theme.light.dividerColor),a.c.dark,(e=>e.theme.dark.dividerColor)),ue=(0,o.default)(le.Link).withConfig({displayName:"search__SearchLink",componentId:"sc-tvxne5-3"})(["text-decoration:none;display:flex;flex-direction:column;"]),me=(0,o.default)(se.n).withConfig({displayName:"search__SearchTitle",componentId:"sc-tvxne5-4"})(["font-size:",";color:",";","{color:",";}"],(e=>e.theme.fontSizes[3]),(e=>e.theme.light.accentColor),a.c.dark,(e=>e.theme.dark.accentColor)),Ae=e=>{let{hits:t}=e;return(0,l.jsx)(de,{children:(0,l.jsx)(pe,{children:t.map(((e,t)=>(0,l.jsx)(he,{children:(0,l.jsxs)(ue,{to:e.slug,children:[(0,l.jsx)(me,{children:e.title}),(0,l.jsx)(se.n,{children:e.description})]})},"SearchResult"+t)))})})},ge=o.default.div.withConfig({displayName:"search__SearchBoxContainer",componentId:"sc-tvxne5-5"})(["transform:translate(0,0);margin-left:auto;position:absolute;top:10px;right:10px;","{position:static;margin-left:auto;}"],a.c.minWidth.sm),fe=o.default.span.withConfig({displayName:"search__SearchAltContainer",componentId:"sc-tvxne5-6"})(["position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:",";transition:0.2s;","{color:",";}",""],(e=>e.theme.light.textAbovePrimaryColor),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor),(e=>e.$startSearch&&(0,o.css)(["opacity:0;z-index:-1;"]))),xe=o.default.input.withConfig({displayName:"search__SearchBoxInput",componentId:"sc-tvxne5-7"})(["padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:",";color:",";border:2px solid ",";outline:none;transition:0.5s;","{color:",";border:2px solid ",";}",""],(e=>e.theme.fontSizes[3]),(e=>e.theme.light.textAbovePrimaryColor),(e=>e.theme.light.textAbovePrimaryColor),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor),(e=>e.theme.dark.textAbovePrimaryColor),(e=>e.$startSearch&&(0,o.css)(["width:200px;background:",";",";","{background:",";}"],(e=>e.theme.light.generalBackground),ce.E,a.c.dark,(e=>e.theme.dark.generalBackground)))),be=e=>{let{startSearch:t,onClick:n,onSearch:i}=e;return(0,l.jsxs)(ge,{children:[(0,l.jsx)(xe,{$startSearch:t,placeholder:t?"Search":"",onChange:e=>i(e.currentTarget.value),disabled:!t}),(0,l.jsx)(fe,{$startSearch:t,onClick:n,children:(0,l.jsx)(ae,{width:20,height:20})})]})},Ce=e=>{let{startSearch:t,setStartSearch:n}=e;const{hits:i,setQuery:o}=(e=>{const{0:t,1:n}=(0,E.useState)(""),{0:i,1:o}=(0,E.useState)([]);return(0,E.useEffect)((()=>{if(e){const{index:e,store:n}=window.__LUNR__.en,i=t.split(" ").map((e=>e+"*")).join(" "),a=e.search(i).map((e=>{let{ref:t}=e;return n[t]}));((e,t)=>null!=e&&(e=>e.length>=3)(e)&&t.length>0)(t,a)?o(a):o([])}}),[t]),{hits:i,setQuery:n}})(t);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(be,{startSearch:t,onClick:()=>n(!t),onSearch:e=>o(e)}),t&&i.length>0&&(0,l.jsx)(Ae,{hits:i})]})},ve="55px",ye=(0,o.default)(ne.M).withConfig({displayName:"blog-menu__MobileBlogHeaderContainer",componentId:"sc-18bjd9p-0"})(["height:",";display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease ",";opacity:",";","{display:none;}"],ve,(e=>e.$hide?"0s":"0.4s"),(e=>e.$hide?0:1),a.c.minWidth.sm),Ee=o.default.div.withConfig({displayName:"blog-menu__Divider",componentId:"sc-18bjd9p-1"})(["height:1px;background-color:",";position:absolute;top:54px;left:",";right:",";opacity:0.2;","{background-color:",";}"],(e=>e.theme.light.textAbovePrimaryColor),(e=>e.theme.spacing[3]),(e=>e.theme.spacing[3]),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor)),ke=o.default.div.withConfig({displayName:"blog-menu__MenuButtonContainer",componentId:"sc-18bjd9p-2"})(["position:absolute;top:10px;left:10px;","{display:none;}"],a.c.minWidth.sm),we=o.default.div.withConfig({displayName:"blog-menu__MenuContainer",componentId:"sc-18bjd9p-3"})(["background-color:",";box-shadow:0 2px 5px rgba(0,0,0,0.5);position:fixed;top:",";left:0;right:0;transition:top 0.3s ease 0s,height 0.3s ease ",";width:100%;z-index:300;height:",";","{background-color:",";}"],(e=>e.theme.light.primaryColorDark),(e=>e.$shouldHide?"-"+ve:0),(e=>e.$delayOpenCloseMenuAnimation+"s"),(e=>e.$shouldOpenMenu?"260px":ve),a.c.dark,(e=>e.theme.dark.primaryColorDark)),je=(0,o.default)(w.W).withConfig({displayName:"blog-menu__NavBar",componentId:"sc-18bjd9p-4"})(["display:flex;flex-direction:column;align-items:center;height:",";","{flex-direction:row;}"],ve,a.c.minWidth.sm),Ne=(0,E.memo)((0,o.default)(N.C).withConfig({displayName:"blog-menu__NavBarMenuItem",componentId:"sc-18bjd9p-5"})(["position:relative;display:inline-block;visibility:",";margin-right:20px;line-height:50px;font-size:",";height:auto;&.opacity-enter{visibility:visible;opacity:0;}&.opacity-enter-active{opacity:1;visibility:visible;transition:opacity "," ease ",";}&.opacity-exit{visibility:visible;opacity:1;}&.opacity-exit-active{opacity:0;transition:opacity "," ease ",";visibility:visible;}","{visibility:visible;opacity:1;height:",";",";}"],(e=>e.shouldOpenMenu?"visible":"hidden"),(e=>e.theme.fontSizes[5]),(e=>e.animationDuration),(e=>e.enterDelayAnimation),(e=>e.animationDuration),(e=>e.exitDelayAnimation),a.c.minWidth.sm,ve,(e=>!e.selected&&(0,o.css)(["","{transition:transform 0.15s;}"],a.c.inputDevice.mouse)))),Se=e=>{let{label:t,slug:n,selected:i,trackingAction:o,trackingCategory:a,shouldOpenMenu:r,enterDelayAnimation:s,exitDelayAnimation:c,onStartAnimation:d,onFinishAnimation:p}=e;return(0,l.jsx)(K,{in:r,classNames:"opacity",addEndListener:(e,t)=>{e.addEventListener("transitionend",t,!1)},onEnter:d,onEntered:p,onExit:d,onExited:p,children:(0,l.jsx)(Ne,{shouldOpenMenu:r,animationDuration:"0.3s",enterDelayAnimation:s,exitDelayAnimation:c,selected:i,to:n,trackingData:{action:o,category:a,label:k.U.label.header},children:t})})},_e=e=>{let{trackingCategory:t,pathname:n}=e;const i=oe(),{0:o,1:a}=(0,E.useState)(!1),{0:r,1:s}=(0,E.useState)(!0),{0:c,1:d}=(0,E.useState)(!1),p=(0,E.useCallback)((()=>s(!1)),[s]),h=(0,E.useCallback)((()=>s(!0)),[s]),u=(0,E.useCallback)(((e,t)=>{e&&a(!t)}),[a]);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(we,{$shouldOpenMenu:o,$shouldHide:i===ie.down,$delayOpenCloseMenuAnimation:o?0:.4,children:(0,l.jsxs)(je,{children:[(0,l.jsxs)(ye,{$hide:c,children:[(0,l.jsx)(C,{height:ve}),o&&(0,l.jsx)(Ee,{})]}),(0,l.jsx)(Se,{label:"Home",slug:"/",selected:"/"===n,trackingAction:k.U.action.open_home,trackingCategory:t,shouldOpenMenu:o,enterDelayAnimation:"0.3s",exitDelayAnimation:"0.4s",onStartAnimation:p,onFinishAnimation:h}),(0,l.jsx)(Se,{label:"Blog",slug:j.H8.blog,selected:n!==j.H8.art&&n!==j.H8.aboutMe,trackingAction:k.U.action.open_blog,trackingCategory:t,shouldOpenMenu:o,enterDelayAnimation:"0.4s",exitDelayAnimation:"0.3s",onStartAnimation:p,onFinishAnimation:h}),(0,l.jsx)(Se,{label:"Art",slug:j.H8.art,selected:n===j.H8.art,trackingAction:k.U.action.open_art,trackingCategory:t,shouldOpenMenu:o,enterDelayAnimation:"0.5s",exitDelayAnimation:"0.2s",onStartAnimation:p,onFinishAnimation:h}),(0,l.jsx)(Se,{label:"About me",slug:j.H8.aboutMe,selected:n===j.H8.aboutMe,trackingAction:k.U.action.open_about_me,trackingCategory:t,shouldOpenMenu:o,enterDelayAnimation:"0.6s",exitDelayAnimation:"0.1s",onStartAnimation:p,onFinishAnimation:h}),!c&&(0,l.jsxs)(ke,{children:[!o&&(0,l.jsx)(M,{onClick:()=>{c||u(r,o)}}),o&&(0,l.jsx)(te,{onClick:()=>u(r,o)})]}),!o&&(0,l.jsx)(Ce,{startSearch:c,setStartSearch:d})]})}),(o||c)&&(0,l.jsx)(O.a,{zIndex:250,delay:"0.4s",onClick:()=>{o&&a(!1),c&&d(!1)}})]})};var Be=n(4101),De=n(1038);const Ie=(0,o.default)(w.W).withConfig({displayName:"blog-page-template__ContentContainer",componentId:"sc-je6wci-0"})(["margin-top:",";flex:1 0 auto;"],(e=>e.theme.spacing[12])),Me=e=>{let{children:t,location:n,author:i,ogPageType:o,ogImage:a,trackingCategory:r,customTitle:s,description:c,date:d,keywords:p,big:h=!1}=e;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(y.F,{url:n.url,pageType:o,imageUrl:a,customTitle:s,description:c,date:d,cookieConsentColor:Be.vW,keywords:p}),(0,l.jsxs)(v.C,{children:[(0,l.jsx)(_e,{trackingCategory:r,pathname:n.pathname}),(0,l.jsxs)(Ie,{children:[(0,l.jsx)(b,{big:h}),t]}),(0,l.jsx)(De.$,{author:i,trackingCategory:r})]})]})}},1103:function(e,t,n){n.d(t,{C:function(){return r}});var i=n(4626),o=n(6055),a=n(5893);const r=e=>{let{children:t}=e;return(0,a.jsx)(o.U,{theme:i.r,children:t})}},2114:function(e){e.exports=JSON.parse('{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAEEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB8C9aYxKqAA//xAAbEAABBAMAAAAAAAAAAAAAAAABAAIDEhARIP/aAAgBAQABBQJaw11TJPccf//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABgQAAIDAAAAAAAAAAAAAAAAAAIgERKR/9oACAEBAAY/Akio4v8A/8QAGxABAAICAwAAAAAAAAAAAAAAAQARECEgUYH/2gAIAQEAAT8hC4oxuNekQ0FdDj//2gAMAwEAAgADAAAAED8PPP/EABYRAAMAAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPxBCP//EABYRAAMAAAAAAAAAAAAAAAAAAAERIP/aAAgBAgEBPxBmP//EABsQAQACAwEBAAAAAAAAAAAAAAEAERAhMUGh/9oACAEBAAE/EE4nUMIAFXgMrBCrE/CO92bw9x//2Q=="},"images":{"fallback":{"src":"/static/c10cb9c09863cc59eaf2f00e35508ee4/499f6/blog-logo.jpg","srcSet":"/static/c10cb9c09863cc59eaf2f00e35508ee4/f4935/blog-logo.jpg 20w,\\n/static/c10cb9c09863cc59eaf2f00e35508ee4/2f28c/blog-logo.jpg 40w,\\n/static/c10cb9c09863cc59eaf2f00e35508ee4/499f6/blog-logo.jpg 80w","sizes":"(min-width: 80px) 80px, 100vw"},"sources":[{"srcSet":"/static/c10cb9c09863cc59eaf2f00e35508ee4/264f2/blog-logo.webp 20w,\\n/static/c10cb9c09863cc59eaf2f00e35508ee4/e73fe/blog-logo.webp 40w,\\n/static/c10cb9c09863cc59eaf2f00e35508ee4/61ca6/blog-logo.webp 80w","type":"image/webp","sizes":"(min-width: 80px) 80px, 100vw"}]},"width":80,"height":80}')}}]); -//# sourceMappingURL=992fa8d325989540aeca99dc38709520a3b7c580-2e24a68e1eee3845d4ed.js.map \ No newline at end of file +"use strict";(self.webpackChunkfabrizioduroni_it=self.webpackChunkfabrizioduroni_it||[]).push([[600],{291:function(e,t,n){n.d(t,{J:function(){return i}});const i=(0,n(5086).css)(["line-height:1.4;color:",";margin:",";font-weight:normal;@media (prefers-color-scheme:dark){color:",";}"],(e=>e.theme.light.primaryTextColor),(e=>e.theme.spacing[0]),(e=>e.theme.dark.primaryTextColor))},3348:function(e,t,n){n.d(t,{a:function(){return a}});var i=n(5086),o=n(4148);const a=i.default.ul.withConfig({displayName:"list__List",componentId:"sc-hcphk6-0"})(["font-size:",";color:",";line-height:",";","{color:",";}"],(e=>e.theme.fontSizes[2]),(e=>e.theme.light.primaryTextColor),(e=>e.theme.lineHeight),o.c.dark,(e=>e.theme.dark.primaryTextColor))},4594:function(e,t,n){n.d(t,{a:function(){return l}});var i=n(5086),o=n(6005),a=n(7294);var r=n(5893);const s=i.default.div.withConfig({displayName:"overlay__StyledOverlay",componentId:"sc-obrcb2-0"})(["position:fixed;top:0;left:0;width:100%;height:100%;z-index:",";background:rgba(0,0,0,0.6);opacity:0;animation:"," 0.25s linear ",";animation-fill-mode:forwards;backdrop-filter:blur(4px);"],(e=>e.$zIndex),o.O,(e=>""+e.$delay)),l=e=>{let{zIndex:t,onClick:n,delay:i}=e;return(0,a.useLayoutEffect)((()=>{const e=window.getComputedStyle(document.body),t=e.position,n=e.top,i=e.left,o=e.right,a=(window.scrollY||document.documentElement.scrollTop)-(document.documentElement.clientTop||0);return document.body.style.top=-a+"px",document.body.style.position="fixed",document.body.style.left="0",document.body.style.right="0",()=>{document.body.style.top=n,document.body.style.position=t,document.body.style.left=i,document.body.style.right=o,window.scrollTo(0,a)}}),[]),(0,r.jsx)(s,{$zIndex:t,onClick:n,$delay:i})}},9495:function(e,t,n){n.d(t,{L:function(){return a}});var i=n(5086),o=n(4148);const a=(0,i.css)(["font-size:",";color:",";text-decoration:none;line-height:",";","{color:",";}&:hover{color:",";","{color:",";}}"],(e=>e.theme.fontSizes[2]),(e=>e.theme.light.accentColor),(e=>e.theme.lineHeight),o.c.dark,(e=>e.theme.dark.accentColor),(e=>e.theme.light.accentColor),o.c.dark,(e=>e.theme.dark.accentColor))},8092:function(e,t,n){n.d(t,{W:function(){return Me}});var i=n(8032),o=n(5086),a=n(4148),r=n(3589),s=n(2589),l=n(5893);const c=o.default.div.withConfig({displayName:"blog-header__BlogHeaderContainer",componentId:"sc-15cvfv8-0"})(["display:flex;align-items:center;","{margin-top:",";margin-bottom:",";}"],a.c.minWidth.sm,(e=>e.theme.spacing[10]),(e=>e.theme.spacing[14])),d=o.default.div.withConfig({displayName:"blog-header__BlogHeaderColumn",componentId:"sc-15cvfv8-1"})(["display:flex;flex-direction:column;justify-content:center;"]),p=o.default.span.withConfig({displayName:"blog-header__BlogTitle",componentId:"sc-15cvfv8-2"})(["color:",";margin:0;font-weight:bold;display:block;line-height:1.5;font-size:",";","{color:",";}","{font-size:",";}","{font-size:",";}"],(e=>e.theme.light.textAbovePrimaryColor),(e=>e.theme.fontSizes[4]),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor),a.c.minWidth.xs,(e=>e.theme.fontSizes[6]),a.c.minWidth.sm,(e=>e.theme.fontSizes[9])),h=o.default.div.withConfig({displayName:"blog-header__BlogDescriptionContainer",componentId:"sc-15cvfv8-3"})(["display:none;overflow:hidden;","{display:block;}"],a.c.minWidth.sm),u=o.default.span.withConfig({displayName:"blog-header__BlogDescription",componentId:"sc-15cvfv8-4"})(["display:none;","{display:block;font-size:",";color:",";line-height:1.5;","{color:",";}}"],a.c.minWidth.sm,(e=>e.theme.fontSizes[4]),(e=>e.theme.light.textAbovePrimaryColor),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor)),m=o.default.div.withConfig({displayName:"blog-header__ImageContainer",componentId:"sc-15cvfv8-5"})(["width:35px;height:35px;margin-right:",";border-radius:10px;box-shadow:1px 1px 4px rgba(0,0,0,0.575);","{width:80px;height:80px;}","{background-color:",";}","{border-radius:10px;}"],(e=>e.theme.spacing[2]),a.c.minWidth.sm,a.c.dark,(e=>e.theme.dark.generalBackgroundLight),r.o),A=o.default.div.withConfig({displayName:"blog-header__DesktopContainer",componentId:"sc-15cvfv8-6"})(["display:none;","{display:block;}"],a.c.minWidth.sm),g=o.default.div.withConfig({displayName:"blog-header__MobileContainer",componentId:"sc-15cvfv8-7"})(["display:flex;height:",";","{display:none;}"],(e=>e.height),a.c.minWidth.sm),f=o.default.div.withConfig({displayName:"blog-header__Background",componentId:"sc-15cvfv8-8"})(["",";height:",";position:absolute;top:0;left:0;right:0;z-index:-100;"],s.g,(e=>e.$big?"400px":"220px")),x=()=>(0,l.jsxs)(c,{children:[(0,l.jsx)(m,{children:(0,l.jsx)(i.S,{src:"../../../images/blog-logo.jpg",loading:"eager",alt:"blog logo",width:80,height:80,placeholder:"blurred",imgStyle:{borderRadius:"10px",boxShadow:"1px 1px 4px rgba(0, 0, 0, 0.575)"},__imageData:n(2114)})}),(0,l.jsxs)(d,{children:[(0,l.jsx)(p,{children:"CHICIO CODING"}),(0,l.jsx)(h,{children:(0,l.jsx)(u,{children:"Coding. Drawing. Fun."})})]})]}),b=e=>{let{big:t}=e;return(0,l.jsxs)(A,{children:[(0,l.jsx)(x,{}),(0,l.jsx)(f,{$big:t})]})},C=e=>{let{height:t}=e;return(0,l.jsx)(g,{height:t,children:(0,l.jsx)(x,{})})};var v=n(1103),y=n(4299),E=n(7294),k=n(6918),w=n(6137),j=n(1944),N=n(5583),S=n(4662),_=n(434),B=n.n(_),D=n(4142),I=E.forwardRef((function(e,t){return E.createElement(D.r,B()({iconAttrs:{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:t}),E.createElement("path",{d:"M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"}))}));I.displayName="Menu";const M=e=>{let{onClick:t}=e;return(0,l.jsx)(S.J,{children:(0,l.jsx)(I,{size:35,onClick:t})})};var O=n(4594);function z(){return z=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{onClick:t}=e;return(0,l.jsx)(S.J,{children:(0,l.jsx)(ee,{size:35,onClick:t})})};var ne=n(5814);let ie=function(e){return e.up="up",e.down="down",e}({});const oe=()=>{const{0:e,1:t}=(0,E.useState)(ie.up);return(0,E.useEffect)((()=>{let e=window.scrollY;const n=()=>{const n=window.scrollY;if((t=>Math.abs(t-e)>100)(n)){const i=(t=>t>e&&!(e>0&&0===t)&&!(t>0&&0===e))(n)?ie.down:ie.up;t(i),e=n>0?n:0}},i=()=>window.requestAnimationFrame(n);return window.addEventListener("scroll",i),()=>window.removeEventListener("scroll",i)}),[]),e};var ae=E.forwardRef((function(e,t){return E.createElement(D.r,B()({iconAttrs:{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:t}),E.createElement("path",{d:"M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"}),E.createElement("path",{d:"M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"}))}));ae.displayName="SearchAlt";var re=n(3348),se=n(281),le=n(1883);var ce=n(8471);const de=(0,o.default)(w.W).withConfig({displayName:"search__SearchListContainer",componentId:"sc-tvxne5-0"})(["position:absolute;top:55px;right:0;left:0;bottom:0;height:80vh;overflow:scroll;",";"],ce.E),pe=(0,o.default)(re.a).withConfig({displayName:"search__SearchHitsList",componentId:"sc-tvxne5-1"})(["list-style:none;padding:",";margin:"," 0;background-color:",";",";","{background-color:",";}"],(e=>e.theme.spacing[2]),(e=>e.theme.spacing[6]),(e=>e.theme.light.generalBackground),ce.E,a.c.dark,(e=>e.theme.dark.generalBackground)),he=o.default.li.withConfig({displayName:"search__SearchHitContainer",componentId:"sc-tvxne5-2"})(["display:flex;flex-direction:column;border-bottom:1px solid ",";","{border-bottom:1px solid ",";}"],(e=>e.theme.light.dividerColor),a.c.dark,(e=>e.theme.dark.dividerColor)),ue=(0,o.default)(le.Link).withConfig({displayName:"search__SearchLink",componentId:"sc-tvxne5-3"})(["text-decoration:none;display:flex;flex-direction:column;"]),me=(0,o.default)(se.n).withConfig({displayName:"search__SearchTitle",componentId:"sc-tvxne5-4"})(["font-size:",";color:",";","{color:",";}"],(e=>e.theme.fontSizes[3]),(e=>e.theme.light.accentColor),a.c.dark,(e=>e.theme.dark.accentColor)),Ae=e=>{let{hits:t}=e;return(0,l.jsx)(de,{children:(0,l.jsx)(pe,{children:t.map(((e,t)=>(0,l.jsx)(he,{children:(0,l.jsxs)(ue,{to:e.slug,children:[(0,l.jsx)(me,{children:e.title}),(0,l.jsx)(se.n,{children:e.description})]})},"SearchResult"+t)))})})},ge=o.default.div.withConfig({displayName:"search__SearchBoxContainer",componentId:"sc-tvxne5-5"})(["transform:translate(0,0);margin-left:auto;position:absolute;top:10px;right:10px;","{position:static;margin-left:auto;}"],a.c.minWidth.sm),fe=o.default.span.withConfig({displayName:"search__SearchAltContainer",componentId:"sc-tvxne5-6"})(["position:absolute;top:50%;right:-3px;transform:translate(-50%,-50%);color:",";transition:0.2s;","{color:",";}",""],(e=>e.theme.light.textAbovePrimaryColor),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor),(e=>e.$startSearch&&(0,o.css)(["opacity:0;z-index:-1;"]))),xe=o.default.input.withConfig({displayName:"search__SearchBoxInput",componentId:"sc-tvxne5-7"})(["padding:10px;width:35px;height:35px;background:none;border-radius:50px;box-sizing:border-box;font-size:",";border:2px solid ",";outline:none;transition:0.5s;color:transparent;","{border:2px solid ",";}",""],(e=>e.theme.fontSizes[3]),(e=>e.theme.light.textAbovePrimaryColor),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor),(e=>e.$startSearch&&(0,o.css)(["color:",";width:200px;background:",";",";","{color:",";background:",";}"],(e=>e.theme.light.textAbovePrimaryColor),(e=>e.theme.light.generalBackground),ce.E,a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor),(e=>e.theme.dark.generalBackground)))),be=e=>{let{startSearch:t,onClick:n,onSearch:i}=e;return(0,l.jsxs)(ge,{children:[(0,l.jsx)(xe,{$startSearch:t,placeholder:t?"Search":"",onChange:e=>i(e.currentTarget.value),disabled:!t}),(0,l.jsx)(fe,{$startSearch:t,onClick:n,children:(0,l.jsx)(ae,{width:20,height:20})})]})},Ce=e=>{let{startSearch:t,setStartSearch:n}=e;const{hits:i,setQuery:o}=(e=>{const{0:t,1:n}=(0,E.useState)(""),{0:i,1:o}=(0,E.useState)([]);return(0,E.useEffect)((()=>{if(e){const{index:e,store:n}=window.__LUNR__.en,i=t.split(" ").map((e=>e+"*")).join(" "),a=e.search(i).map((e=>{let{ref:t}=e;return n[t]}));((e,t)=>null!=e&&(e=>e.length>=3)(e)&&t.length>0)(t,a)?o(a):o([])}}),[t]),{hits:i,setQuery:n}})(t);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(be,{startSearch:t,onClick:()=>n(!t),onSearch:e=>o(e)}),t&&i.length>0&&(0,l.jsx)(Ae,{hits:i})]})},ve="55px",ye=(0,o.default)(ne.M).withConfig({displayName:"blog-menu__MobileBlogHeaderContainer",componentId:"sc-18bjd9p-0"})(["height:",";display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.2s ease ",";opacity:",";","{display:none;}"],ve,(e=>e.$hide?"0s":"0.4s"),(e=>e.$hide?0:1),a.c.minWidth.sm),Ee=o.default.div.withConfig({displayName:"blog-menu__Divider",componentId:"sc-18bjd9p-1"})(["height:1px;background-color:",";position:absolute;top:54px;left:",";right:",";opacity:0.2;","{background-color:",";}"],(e=>e.theme.light.textAbovePrimaryColor),(e=>e.theme.spacing[3]),(e=>e.theme.spacing[3]),a.c.dark,(e=>e.theme.dark.textAbovePrimaryColor)),ke=o.default.div.withConfig({displayName:"blog-menu__MenuButtonContainer",componentId:"sc-18bjd9p-2"})(["position:absolute;top:10px;left:10px;","{display:none;}"],a.c.minWidth.sm),we=o.default.div.withConfig({displayName:"blog-menu__MenuContainer",componentId:"sc-18bjd9p-3"})(["background-color:",";box-shadow:0 2px 5px rgba(0,0,0,0.5);position:fixed;top:",";left:0;right:0;transition:top 0.3s ease 0s,height 0.3s ease ",";width:100%;z-index:300;height:",";","{background-color:",";}"],(e=>e.theme.light.primaryColorDark),(e=>e.$shouldHide?"-"+ve:0),(e=>e.$delayOpenCloseMenuAnimation+"s"),(e=>e.$shouldOpenMenu?"260px":ve),a.c.dark,(e=>e.theme.dark.primaryColorDark)),je=(0,o.default)(w.W).withConfig({displayName:"blog-menu__NavBar",componentId:"sc-18bjd9p-4"})(["display:flex;flex-direction:column;align-items:center;height:",";","{flex-direction:row;}"],ve,a.c.minWidth.sm),Ne=(0,E.memo)((0,o.default)(N.C).withConfig({displayName:"blog-menu__NavBarMenuItem",componentId:"sc-18bjd9p-5"})(["position:relative;display:inline-block;visibility:",";margin-right:20px;line-height:50px;font-size:",";height:auto;&.opacity-enter{visibility:visible;opacity:0;}&.opacity-enter-active{opacity:1;visibility:visible;transition:opacity "," ease ",";}&.opacity-exit{visibility:visible;opacity:1;}&.opacity-exit-active{opacity:0;transition:opacity "," ease ",";visibility:visible;}","{visibility:visible;opacity:1;height:",";",";}"],(e=>e.shouldOpenMenu?"visible":"hidden"),(e=>e.theme.fontSizes[5]),(e=>e.animationDuration),(e=>e.enterDelayAnimation),(e=>e.animationDuration),(e=>e.exitDelayAnimation),a.c.minWidth.sm,ve,(e=>!e.selected&&(0,o.css)(["","{transition:transform 0.15s;}"],a.c.inputDevice.mouse)))),Se=e=>{let{label:t,slug:n,selected:i,trackingAction:o,trackingCategory:a,shouldOpenMenu:r,enterDelayAnimation:s,exitDelayAnimation:c,onStartAnimation:d,onFinishAnimation:p}=e;return(0,l.jsx)(K,{in:r,classNames:"opacity",addEndListener:(e,t)=>{e.addEventListener("transitionend",t,!1)},onEnter:d,onEntered:p,onExit:d,onExited:p,children:(0,l.jsx)(Ne,{shouldOpenMenu:r,animationDuration:"0.3s",enterDelayAnimation:s,exitDelayAnimation:c,selected:i,to:n,trackingData:{action:o,category:a,label:k.U.label.header},children:t})})},_e=e=>{let{trackingCategory:t,pathname:n}=e;const i=oe(),{0:o,1:a}=(0,E.useState)(!1),{0:r,1:s}=(0,E.useState)(!0),{0:c,1:d}=(0,E.useState)(!1),p=(0,E.useCallback)((()=>s(!1)),[s]),h=(0,E.useCallback)((()=>s(!0)),[s]),u=(0,E.useCallback)(((e,t)=>{e&&a(!t)}),[a]);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(we,{$shouldOpenMenu:o,$shouldHide:i===ie.down,$delayOpenCloseMenuAnimation:o?0:.4,children:(0,l.jsxs)(je,{children:[(0,l.jsxs)(ye,{$hide:c,children:[(0,l.jsx)(C,{height:ve}),o&&(0,l.jsx)(Ee,{})]}),(0,l.jsx)(Se,{label:"Home",slug:"/",selected:"/"===n,trackingAction:k.U.action.open_home,trackingCategory:t,shouldOpenMenu:o,enterDelayAnimation:"0.3s",exitDelayAnimation:"0.4s",onStartAnimation:p,onFinishAnimation:h}),(0,l.jsx)(Se,{label:"Blog",slug:j.H8.blog,selected:n!==j.H8.art&&n!==j.H8.aboutMe,trackingAction:k.U.action.open_blog,trackingCategory:t,shouldOpenMenu:o,enterDelayAnimation:"0.4s",exitDelayAnimation:"0.3s",onStartAnimation:p,onFinishAnimation:h}),(0,l.jsx)(Se,{label:"Art",slug:j.H8.art,selected:n===j.H8.art,trackingAction:k.U.action.open_art,trackingCategory:t,shouldOpenMenu:o,enterDelayAnimation:"0.5s",exitDelayAnimation:"0.2s",onStartAnimation:p,onFinishAnimation:h}),(0,l.jsx)(Se,{label:"About me",slug:j.H8.aboutMe,selected:n===j.H8.aboutMe,trackingAction:k.U.action.open_about_me,trackingCategory:t,shouldOpenMenu:o,enterDelayAnimation:"0.6s",exitDelayAnimation:"0.1s",onStartAnimation:p,onFinishAnimation:h}),!c&&(0,l.jsxs)(ke,{children:[!o&&(0,l.jsx)(M,{onClick:()=>{c||u(r,o)}}),o&&(0,l.jsx)(te,{onClick:()=>u(r,o)})]}),!o&&(0,l.jsx)(Ce,{startSearch:c,setStartSearch:d})]})}),(o||c)&&(0,l.jsx)(O.a,{zIndex:250,delay:"0.4s",onClick:()=>{o&&a(!1),c&&d(!1)}})]})};var Be=n(4101),De=n(1038);const Ie=(0,o.default)(w.W).withConfig({displayName:"blog-page-template__ContentContainer",componentId:"sc-je6wci-0"})(["margin-top:",";flex:1 0 auto;"],(e=>e.theme.spacing[12])),Me=e=>{let{children:t,location:n,author:i,ogPageType:o,ogImage:a,trackingCategory:r,customTitle:s,description:c,date:d,keywords:p,big:h=!1}=e;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(y.F,{url:n.url,pageType:o,imageUrl:a,customTitle:s,description:c,date:d,cookieConsentColor:Be.vW,keywords:p}),(0,l.jsxs)(v.C,{children:[(0,l.jsx)(_e,{trackingCategory:r,pathname:n.pathname}),(0,l.jsxs)(Ie,{children:[(0,l.jsx)(b,{big:h}),t]}),(0,l.jsx)(De.$,{author:i,trackingCategory:r})]})]})}},1103:function(e,t,n){n.d(t,{C:function(){return r}});var i=n(4626),o=n(6055),a=n(5893);const r=e=>{let{children:t}=e;return(0,a.jsx)(o.U,{theme:i.r,children:t})}},2114:function(e){e.exports=JSON.parse('{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAEEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB8C9aYxKqAA//xAAbEAABBAMAAAAAAAAAAAAAAAABAAIDEhARIP/aAAgBAQABBQJaw11TJPccf//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABgQAAIDAAAAAAAAAAAAAAAAAAIgERKR/9oACAEBAAY/Akio4v8A/8QAGxABAAICAwAAAAAAAAAAAAAAAQARECEgUYH/2gAIAQEAAT8hC4oxuNekQ0FdDj//2gAMAwEAAgADAAAAED8PPP/EABYRAAMAAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPxBCP//EABYRAAMAAAAAAAAAAAAAAAAAAAERIP/aAAgBAgEBPxBmP//EABsQAQACAwEBAAAAAAAAAAAAAAEAERAhMUGh/9oACAEBAAE/EE4nUMIAFXgMrBCrE/CO92bw9x//2Q=="},"images":{"fallback":{"src":"/static/c10cb9c09863cc59eaf2f00e35508ee4/499f6/blog-logo.jpg","srcSet":"/static/c10cb9c09863cc59eaf2f00e35508ee4/f4935/blog-logo.jpg 20w,\\n/static/c10cb9c09863cc59eaf2f00e35508ee4/2f28c/blog-logo.jpg 40w,\\n/static/c10cb9c09863cc59eaf2f00e35508ee4/499f6/blog-logo.jpg 80w","sizes":"(min-width: 80px) 80px, 100vw"},"sources":[{"srcSet":"/static/c10cb9c09863cc59eaf2f00e35508ee4/264f2/blog-logo.webp 20w,\\n/static/c10cb9c09863cc59eaf2f00e35508ee4/e73fe/blog-logo.webp 40w,\\n/static/c10cb9c09863cc59eaf2f00e35508ee4/61ca6/blog-logo.webp 80w","type":"image/webp","sizes":"(min-width: 80px) 80px, 100vw"}]},"width":80,"height":80}')}}]); +//# sourceMappingURL=992fa8d325989540aeca99dc38709520a3b7c580-b53462cbee3821dbcd94.js.map \ No newline at end of file diff --git a/992fa8d325989540aeca99dc38709520a3b7c580-2e24a68e1eee3845d4ed.js.map b/992fa8d325989540aeca99dc38709520a3b7c580-b53462cbee3821dbcd94.js.map similarity index 78% rename from 992fa8d325989540aeca99dc38709520a3b7c580-2e24a68e1eee3845d4ed.js.map rename to 992fa8d325989540aeca99dc38709520a3b7c580-b53462cbee3821dbcd94.js.map index cbb8c84ff..5ac093ebb 100644 --- a/992fa8d325989540aeca99dc38709520a3b7c580-2e24a68e1eee3845d4ed.js.map +++ b/992fa8d325989540aeca99dc38709520a3b7c580-b53462cbee3821dbcd94.js.map @@ -1 +1 @@ -{"version":3,"file":"992fa8d325989540aeca99dc38709520a3b7c580-2e24a68e1eee3845d4ed.js","mappings":"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","sources":["webpack://fabrizioduroni.it/./src/components/design-system/atoms/heading-style.ts","webpack://fabrizioduroni.it/./src/components/design-system/atoms/list.tsx","webpack://fabrizioduroni.it/./src/components/design-system/atoms/overlay.tsx","webpack://fabrizioduroni.it/./src/components/design-system/hooks/use-lock-body-scroll.ts","webpack://fabrizioduroni.it/./src/components/design-system/atoms/standard-link-style.tsx","webpack://fabrizioduroni.it/./src/components/design-system/organism/blog-header.tsx","webpack://fabrizioduroni.it/./node_modules/@styled-icons/boxicons-regular/Menu/Menu.esm.js","webpack://fabrizioduroni.it/./src/components/design-system/molecules/hamburger-menu.tsx","webpack://fabrizioduroni.it/./node_modules/@babel/runtime/helpers/esm/extends.js","webpack://fabrizioduroni.it/./node_modules/dom-helpers/esm/removeClass.js","webpack://fabrizioduroni.it/./node_modules/react-transition-group/esm/config.js","webpack://fabrizioduroni.it/./node_modules/react-transition-group/esm/TransitionGroupContext.js","webpack://fabrizioduroni.it/./node_modules/react-transition-group/esm/utils/reflow.js","webpack://fabrizioduroni.it/./node_modules/react-transition-group/esm/Transition.js","webpack://fabrizioduroni.it/./node_modules/react-transition-group/esm/CSSTransition.js","webpack://fabrizioduroni.it/./node_modules/dom-helpers/esm/addClass.js","webpack://fabrizioduroni.it/./node_modules/dom-helpers/esm/hasClass.js","webpack://fabrizioduroni.it/./node_modules/@styled-icons/boxicons-regular/X/X.esm.js","webpack://fabrizioduroni.it/./src/components/design-system/molecules/close.tsx","webpack://fabrizioduroni.it/./src/components/design-system/hooks/use-scroll-direction.ts","webpack://fabrizioduroni.it/./node_modules/@styled-icons/boxicons-regular/SearchAlt/SearchAlt.esm.js","webpack://fabrizioduroni.it/./src/components/design-system/molecules/search.tsx","webpack://fabrizioduroni.it/./src/components/design-system/hooks/use-search.ts","webpack://fabrizioduroni.it/./src/components/design-system/organism/blog-menu.tsx","webpack://fabrizioduroni.it/./src/components/design-system/templates/blog-page-template.tsx","webpack://fabrizioduroni.it/./src/components/design-system/templates/blog-theme-page.tsx"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const headingStyle = css`\n line-height: 1.4;\n color: ${(props) => props.theme.light.primaryTextColor};\n margin: ${(props) => props.theme.spacing[0]};\n font-weight: normal;\n\n @media (prefers-color-scheme: dark) {\n color: ${(props) => props.theme.dark.primaryTextColor};\n }\n`;\n","import styled from \"styled-components\";\nimport { mediaQuery } from \"../utils-css/media-query\";\n\nexport const List = styled.ul`\n font-size: ${(props) => props.theme.fontSizes[2]};\n color: ${(props) => props.theme.light.primaryTextColor};\n line-height: ${(props) => props.theme.lineHeight};\n\n ${mediaQuery.dark} {\n color: ${(props) => props.theme.dark.primaryTextColor};\n }\n`;\n","import styled from \"styled-components\";\nimport { opacity } from \"../utils-css/opacity-keyframes\";\nimport { FC } from \"react\";\nimport { useLockBodyScroll } from \"../hooks/use-lock-body-scroll\";\n\nexport interface OverlayProps {\n zIndex: number;\n delay: string;\n}\n\nconst StyledOverlay = styled.div>`\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: ${(props) => props.$zIndex};\n background: rgba(0, 0, 0, 0.6);\n opacity: 0;\n animation: ${opacity} 0.25s linear ${(props) => `${props.$delay}`};\n animation-fill-mode: forwards;\n backdrop-filter: blur(4px);\n`;\n\nexport const Overlay: FC void }> = ({\n zIndex,\n onClick,\n delay,\n}) => {\n useLockBodyScroll();\n\n return ;\n};\n","import { useLayoutEffect } from \"react\";\n\nexport const useLockBodyScroll = () => {\n useLayoutEffect(() => {\n const originalStyle = window.getComputedStyle(document.body);\n const originalPositionStyle = originalStyle.position;\n const originalTopStyle = originalStyle.top;\n const originalLeftStyle = originalStyle.left;\n const originalRightStyle = originalStyle.right;\n const currentScrollYPosition =\n (window.scrollY || document.documentElement.scrollTop) -\n (document.documentElement.clientTop || 0);\n document.body.style.top = -currentScrollYPosition + \"px\";\n document.body.style.position = \"fixed\";\n document.body.style.left = \"0\";\n document.body.style.right = \"0\";\n return () => {\n document.body.style.top = originalTopStyle;\n document.body.style.position = originalPositionStyle;\n document.body.style.left = originalLeftStyle;\n document.body.style.right = originalRightStyle;\n window.scrollTo(0, currentScrollYPosition);\n };\n }, []);\n};\n","import { css } from \"styled-components\";\nimport { mediaQuery } from \"../utils-css/media-query\";\n\nexport const standardLinkStyle = css`\n font-size: ${(props) => props.theme.fontSizes[2]};\n color: ${(props) => props.theme.light.accentColor};\n text-decoration: none;\n line-height: ${(props) => props.theme.lineHeight};\n\n ${mediaQuery.dark} {\n color: ${(props) => props.theme.dark.accentColor};\n }\n\n &:hover {\n color: ${(props) => props.theme.light.accentColor};\n\n ${mediaQuery.dark} {\n color: ${(props) => props.theme.dark.accentColor};\n }\n }\n`;\n","import { FC } from \"react\";\nimport { StaticImage } from \"gatsby-plugin-image\";\nimport styled from \"styled-components\";\nimport { mediaQuery } from \"../utils-css/media-query\";\nimport { gatsbyImagePlaceholderSelector } from \"../utils-css/gatsby-image-selector\";\nimport { backgroundGradients } from \"../atoms/gradients\";\n\nconst BlogHeaderContainer = styled.div`\n display: flex;\n align-items: center;\n\n ${mediaQuery.minWidth.sm} {\n margin-top: ${(props) => props.theme.spacing[10]};\n margin-bottom: ${(props) => props.theme.spacing[14]};\n }\n`;\n\nconst BlogHeaderColumn = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nconst BlogTitle = styled.span`\n color: ${(props) => props.theme.light.textAbovePrimaryColor};\n margin: 0;\n font-weight: bold;\n display: block;\n line-height: 1.5;\n font-size: ${(props) => props.theme.fontSizes[4]};\n\n ${mediaQuery.dark} {\n color: ${(props) => props.theme.dark.textAbovePrimaryColor};\n }\n\n ${mediaQuery.minWidth.xs} {\n font-size: ${(props) => props.theme.fontSizes[6]};\n }\n\n ${mediaQuery.minWidth.sm} {\n font-size: ${(props) => props.theme.fontSizes[9]};\n }\n`;\n\nconst BlogDescriptionContainer = styled.div`\n display: none;\n overflow: hidden;\n\n ${mediaQuery.minWidth.sm} {\n display: block;\n }\n`;\n\nconst BlogDescription = styled.span`\n display: none;\n\n ${mediaQuery.minWidth.sm} {\n display: block;\n font-size: ${(props) => props.theme.fontSizes[4]};\n color: ${(props) => props.theme.light.textAbovePrimaryColor};\n line-height: 1.5;\n\n ${mediaQuery.dark} {\n color: ${(props) => props.theme.dark.textAbovePrimaryColor};\n }\n }\n`;\n\nconst ImageContainer = styled.div`\n width: 35px;\n height: 35px;\n margin-right: ${(props) => props.theme.spacing[2]};\n border-radius: 10px;\n box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.575);\n\n ${mediaQuery.minWidth.sm} {\n width: 80px;\n height: 80px;\n }\n\n ${mediaQuery.dark} {\n background-color: ${(props) => props.theme.dark.generalBackgroundLight};\n }\n\n ${gatsbyImagePlaceholderSelector} {\n border-radius: 10px;\n }\n`;\n\nconst DesktopContainer = styled.div`\n display: none;\n\n ${mediaQuery.minWidth.sm} {\n display: block;\n }\n`;\n\ninterface MobileContainerProps {\n height: string;\n}\n\nconst MobileContainer = styled.div`\n display: flex;\n height: ${(props) => props.height};\n\n ${mediaQuery.minWidth.sm} {\n display: none;\n }\n`;\n\nconst Background = styled.div>`\n ${backgroundGradients};\n height: ${(props) => (props.$big ? \"400px\" : \"220px\")};\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: -100;\n`;\n\nexport const BlogHeader: FC = () => (\n \n \n \n \n \n CHICIO CODING\n \n Coding. Drawing. Fun.\n \n \n \n);\n\ninterface DesktopHeaderProps {\n big: boolean;\n}\n\nexport const DesktopBlogHeader: FC = ({ big }) => (\n \n \n \n \n);\n\nexport const MobileBlogHeader: FC = ({ height }) => (\n \n \n \n);\n","import _extends from \"@babel/runtime/helpers/extends\";\nimport * as React from 'react';\nimport { StyledIconBase } from '@styled-icons/styled-icon';\nexport var Menu = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var attrs = {\n \"fill\": \"currentColor\",\n \"xmlns\": \"http://www.w3.org/2000/svg\"\n };\n return /*#__PURE__*/React.createElement(StyledIconBase, _extends({\n iconAttrs: attrs,\n iconVerticalAlign: \"middle\",\n iconViewBox: \"0 0 24 24\"\n }, props, {\n ref: ref\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z\"\n }));\n});\nMenu.displayName = 'Menu';\nexport var MenuDimensions = {\n height: 24,\n width: 24\n};","import { Icon } from \"../atoms/icon\";\nimport { Menu } from \"@styled-icons/boxicons-regular/Menu\";\nimport { FC } from \"react\";\n\ninterface HamburgerMenuProps {\n onClick: () => void;\n}\n\nexport const HamburgerMenu: FC = ({ onClick }) => (\n \n \n \n);\n","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","function replaceClassName(origClass, classToRemove) {\n return origClass.replace(new RegExp(\"(^|\\\\s)\" + classToRemove + \"(?:\\\\s|$)\", 'g'), '$1').replace(/\\s+/g, ' ').replace(/^\\s*|\\s*$/g, '');\n}\n/**\n * Removes a CSS class from a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\n\nexport default function removeClass(element, className) {\n if (element.classList) {\n element.classList.remove(className);\n } else if (typeof element.className === 'string') {\n element.className = replaceClassName(element.className, className);\n } else {\n element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));\n }\n}","export default {\n disabled: false\n};","import React from 'react';\nexport default React.createContext(null);","export var forceReflow = function forceReflow(node) {\n return node.scrollTop;\n};","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { forceReflow } from './utils/reflow';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n *
    \n * I'm a fade Transition!\n *
    \n * )}\n *     \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
    \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
    \n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n * {state => (\n * \n * )}\n * \n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n\n /**\n * Show the component; triggers the enter or exit states\n */\n in: PropTypes.bool,\n\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n\n /**\n * By default the child component does not perform the enter transition when\n * it first mounts, regardless of the value of `in`. If you want this\n * behavior, set both `appear` and `in` to `true`.\n *\n * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop\n * > only adds an additional enter transition. However, in the\n * > `` component that first enter transition does result in\n * > additional `.appear-*` classes, that way you can choose to style it\n * > differently.\n */\n appear: PropTypes.bool,\n\n /**\n * Enable or disable enter transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * Enable or disable exit transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * The duration of the transition, in milliseconds.\n * Required unless `addEndListener` is provided.\n *\n * You may specify a single timeout for all transitions:\n *\n * ```jsx\n * timeout={500}\n * ```\n *\n * or individually:\n *\n * ```jsx\n * timeout={{\n * appear: 500,\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * - `appear` defaults to the value of `enter`\n * - `enter` defaults to `0`\n * - `exit` defaults to `0`\n *\n * @type {number | { enter?: number, exit?: number, appear?: number }}\n */\n timeout: function timeout(props) {\n var pt = timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return pt.apply(void 0, [props].concat(args));\n },\n\n /**\n * Add a custom transition end trigger. Called with the transitioning\n * DOM node and a `done` callback. Allows for more fine grained transition end\n * logic. Timeouts are still used as a fallback if provided.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * ```jsx\n * addEndListener={(node, done) => {\n * // use the css transitionend event to mark the finish of a transition\n * node.addEventListener('transitionend', done, false);\n * }}\n * ```\n */\n addEndListener: PropTypes.func,\n\n /**\n * Callback fired before the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired after the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired after the \"entered\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired before the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired after the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExiting: PropTypes.func,\n\n /**\n * Callback fired after the \"exited\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func\n} : {}; // Name the function so it is clearer in the documentation\n\nfunction noop() {}\n\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nexport default Transition;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport addOneClass from 'dom-helpers/addClass';\nimport removeOneClass from 'dom-helpers/removeClass';\nimport React from 'react';\nimport Transition from './Transition';\nimport { classNamesShape } from './utils/PropTypes';\nimport { forceReflow } from './utils/reflow';\n\nvar _addClass = function addClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return addOneClass(node, c);\n });\n};\n\nvar removeClass = function removeClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return removeOneClass(node, c);\n });\n};\n/**\n * A transition component inspired by the excellent\n * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should\n * use it if you're using CSS transitions or animations. It's built upon the\n * [`Transition`](https://reactcommunity.org/react-transition-group/transition)\n * component, so it inherits all of its props.\n *\n * `CSSTransition` applies a pair of class names during the `appear`, `enter`,\n * and `exit` states of the transition. The first class is applied and then a\n * second `*-active` class in order to activate the CSS transition. After the\n * transition, matching `*-done` class names are applied to persist the\n * transition state.\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
    \n * \n *
    \n * {\"I'll receive my-node-* classes\"}\n *
    \n *     \n * \n *
    \n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**, so it's\n * important to add `transition` declaration only to them, otherwise transitions\n * might not behave as intended! This might not be obvious when the transitions\n * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in\n * the example above (minus `transition`), but it becomes apparent in more\n * complex transitions.\n *\n * **Note**: If you're using the\n * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)\n * prop, make sure to define styles for `.appear-*` classes as well.\n */\n\n\nvar CSSTransition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n\n function CSSTransition() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.appliedClasses = {\n appear: {},\n enter: {},\n exit: {}\n };\n\n _this.onEnter = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument[0],\n appearing = _this$resolveArgument[1];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, appearing ? 'appear' : 'enter', 'base');\n\n if (_this.props.onEnter) {\n _this.props.onEnter(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntering = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument2[0],\n appearing = _this$resolveArgument2[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.addClass(node, type, 'active');\n\n if (_this.props.onEntering) {\n _this.props.onEntering(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntered = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument3[0],\n appearing = _this$resolveArgument3[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.removeClasses(node, type);\n\n _this.addClass(node, type, 'done');\n\n if (_this.props.onEntered) {\n _this.props.onEntered(maybeNode, maybeAppearing);\n }\n };\n\n _this.onExit = function (maybeNode) {\n var _this$resolveArgument4 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument4[0];\n\n _this.removeClasses(node, 'appear');\n\n _this.removeClasses(node, 'enter');\n\n _this.addClass(node, 'exit', 'base');\n\n if (_this.props.onExit) {\n _this.props.onExit(maybeNode);\n }\n };\n\n _this.onExiting = function (maybeNode) {\n var _this$resolveArgument5 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument5[0];\n\n _this.addClass(node, 'exit', 'active');\n\n if (_this.props.onExiting) {\n _this.props.onExiting(maybeNode);\n }\n };\n\n _this.onExited = function (maybeNode) {\n var _this$resolveArgument6 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument6[0];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, 'exit', 'done');\n\n if (_this.props.onExited) {\n _this.props.onExited(maybeNode);\n }\n };\n\n _this.resolveArguments = function (maybeNode, maybeAppearing) {\n return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`\n : [maybeNode, maybeAppearing];\n };\n\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + \"-\" : '';\n var baseClassName = isStringClassNames ? \"\" + prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? baseClassName + \"-active\" : classNames[type + \"Active\"];\n var doneClassName = isStringClassNames ? baseClassName + \"-done\" : classNames[type + \"Done\"];\n return {\n baseClassName: baseClassName,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n\n return _this;\n }\n\n var _proto = CSSTransition.prototype;\n\n _proto.addClass = function addClass(node, type, phase) {\n var className = this.getClassNames(type)[phase + \"ClassName\"];\n\n var _this$getClassNames = this.getClassNames('enter'),\n doneClassName = _this$getClassNames.doneClassName;\n\n if (type === 'appear' && phase === 'done' && doneClassName) {\n className += \" \" + doneClassName;\n } // This is to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n\n\n if (phase === 'active') {\n if (node) forceReflow(node);\n }\n\n if (className) {\n this.appliedClasses[type][phase] = className;\n\n _addClass(node, className);\n }\n };\n\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$appliedClasses$ = this.appliedClasses[type],\n baseClassName = _this$appliedClasses$.base,\n activeClassName = _this$appliedClasses$.active,\n doneClassName = _this$appliedClasses$.done;\n this.appliedClasses[type] = {};\n\n if (baseClassName) {\n removeClass(node, baseClassName);\n }\n\n if (activeClassName) {\n removeClass(node, activeClassName);\n }\n\n if (doneClassName) {\n removeClass(node, doneClassName);\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n _ = _this$props.classNames,\n props = _objectWithoutPropertiesLoose(_this$props, [\"classNames\"]);\n\n return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n\n return CSSTransition;\n}(React.Component);\n\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, Transition.propTypes, {\n /**\n * The animation classNames applied to the component as it appears, enters,\n * exits or has finished the transition. A single name can be provided, which\n * will be suffixed for each stage, e.g. `classNames=\"fade\"` applies:\n *\n * - `fade-appear`, `fade-appear-active`, `fade-appear-done`\n * - `fade-enter`, `fade-enter-active`, `fade-enter-done`\n * - `fade-exit`, `fade-exit-active`, `fade-exit-done`\n *\n * A few details to note about how these classes are applied:\n *\n * 1. They are _joined_ with the ones that are already defined on the child\n * component, so if you want to add some base styles, you can use\n * `className` without worrying that it will be overridden.\n *\n * 2. If the transition component mounts with `in={false}`, no classes are\n * applied yet. You might be expecting `*-exit-done`, but if you think\n * about it, a component cannot finish exiting if it hasn't entered yet.\n *\n * 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This\n * allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply\n * an epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: classNamesShape,\n\n /**\n * A `` callback fired immediately after the 'enter' or 'appear' class is\n * applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEnter: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'enter-active' or\n * 'appear-active' class is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'enter' or\n * 'appear' classes are **removed** and the `done` class is added to the DOM node.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntered: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit' class is\n * applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExit: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit-active' is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExiting: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit' classes\n * are **removed** and the `exit-done` class is added to the DOM node.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExited: PropTypes.func\n}) : {};\nexport default CSSTransition;","import hasClass from './hasClass';\n/**\n * Adds a CSS class to a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\nexport default function addClass(element, className) {\n if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + \" \" + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + \" \" + className);\n}","/**\n * Checks if a given element has a CSS class.\n * \n * @param element the element\n * @param className the CSS class name\n */\nexport default function hasClass(element, className) {\n if (element.classList) return !!className && element.classList.contains(className);\n return (\" \" + (element.className.baseVal || element.className) + \" \").indexOf(\" \" + className + \" \") !== -1;\n}","import _extends from \"@babel/runtime/helpers/extends\";\nimport * as React from 'react';\nimport { StyledIconBase } from '@styled-icons/styled-icon';\nexport var X = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var attrs = {\n \"fill\": \"currentColor\",\n \"xmlns\": \"http://www.w3.org/2000/svg\"\n };\n return /*#__PURE__*/React.createElement(StyledIconBase, _extends({\n iconAttrs: attrs,\n iconVerticalAlign: \"middle\",\n iconViewBox: \"0 0 24 24\"\n }, props, {\n ref: ref\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z\"\n }));\n});\nX.displayName = 'X';\nexport var XDimensions = {\n height: 24,\n width: 24\n};","import { Icon } from \"../atoms/icon\";\nimport { X } from \"@styled-icons/boxicons-regular/X\";\nimport { FC } from \"react\";\n\ninterface CloseProps {\n onClick: () => void;\n}\n\nexport const Close: FC = ({ onClick }) => (\n \n \n \n);\n","import { useEffect, useState } from \"react\";\n\nexport enum ScrollDirection {\n up = \"up\",\n down = \"down\",\n}\n\nexport const useScrollDirection = () => {\n const threshold = 100;\n const [scrollDir, setScrollDir] = useState(ScrollDirection.up);\n\n useEffect(() => {\n let previousScrollYPosition = window.scrollY;\n\n const scrolledMoreThanThreshold = (currentScrollYPosition: number) =>\n Math.abs(currentScrollYPosition - previousScrollYPosition) > threshold;\n\n const isScrollingUp = (currentScrollYPosition: number) =>\n currentScrollYPosition > previousScrollYPosition &&\n !(previousScrollYPosition > 0 && currentScrollYPosition === 0) &&\n !(currentScrollYPosition > 0 && previousScrollYPosition === 0);\n\n const updateScrollDir = () => {\n const currentScrollYPosition = window.scrollY;\n\n if (scrolledMoreThanThreshold(currentScrollYPosition)) {\n const newScrollDirection = isScrollingUp(currentScrollYPosition)\n ? ScrollDirection.down\n : ScrollDirection.up;\n setScrollDir(newScrollDirection);\n previousScrollYPosition =\n currentScrollYPosition > 0 ? currentScrollYPosition : 0;\n }\n };\n\n const onScroll = () => window.requestAnimationFrame(updateScrollDir);\n\n window.addEventListener(\"scroll\", onScroll);\n\n return () => window.removeEventListener(\"scroll\", onScroll);\n }, []);\n\n return scrollDir;\n};\n","import _extends from \"@babel/runtime/helpers/extends\";\nimport * as React from 'react';\nimport { StyledIconBase } from '@styled-icons/styled-icon';\nexport var SearchAlt = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var attrs = {\n \"fill\": \"currentColor\",\n \"xmlns\": \"http://www.w3.org/2000/svg\"\n };\n return /*#__PURE__*/React.createElement(StyledIconBase, _extends({\n iconAttrs: attrs,\n iconVerticalAlign: \"middle\",\n iconViewBox: \"0 0 24 24\"\n }, props, {\n ref: ref\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z\"\n }));\n});\nSearchAlt.displayName = 'SearchAlt';\nexport var SearchAltDimensions = {\n height: 24,\n width: 24\n};","import { FC } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { SearchAlt } from \"@styled-icons/boxicons-regular\";\nimport { mediaQuery } from \"../utils-css/media-query\";\nimport { Container } from \"../atoms/container\";\nimport { List } from \"../atoms/list\";\nimport { Paragraph } from \"../atoms/paragraph\";\nimport { Link } from \"gatsby\";\nimport { SearchResult } from \"../lunr\";\nimport { useSearch } from \"../hooks/use-search\";\nimport { borderRadius } from \"../atoms/border-radius\";\n\nconst SearchListContainer = styled(Container)`\n position: absolute;\n top: 55px;\n right: 0;\n left: 0;\n bottom: 0;\n height: 80vh;\n overflow: scroll;\n ${borderRadius};\n`;\n\nconst SearchHitsList = styled(List)`\n list-style: none;\n padding: ${(props) => props.theme.spacing[2]};\n margin: ${(props) => props.theme.spacing[6]} 0;\n background-color: ${(props) => props.theme.light.generalBackground};\n ${borderRadius};\n\n ${mediaQuery.dark} {\n background-color: ${(props) => props.theme.dark.generalBackground};\n }\n`;\n\nconst SearchHitContainer = styled.li`\n display: flex;\n flex-direction: column;\n border-bottom: 1px solid ${(props) => props.theme.light.dividerColor};\n\n ${mediaQuery.dark} {\n border-bottom: 1px solid ${(props) => props.theme.dark.dividerColor};\n }\n`;\n\nconst SearchLink = styled(Link)`\n text-decoration: none;\n display: flex;\n flex-direction: column;\n`;\n\nconst SearchTitle = styled(Paragraph)`\n font-size: ${(props) => props.theme.fontSizes[3]};\n color: ${(props) => props.theme.light.accentColor};\n\n ${mediaQuery.dark} {\n color: ${(props) => props.theme.dark.accentColor};\n }\n`;\n\nconst SearchHits: FC<{ hits: SearchResult[] }> = ({ hits }) => (\n \n \n {hits.map((hit, index) => (\n \n \n {hit.title}\n {hit.description}\n \n \n ))}\n \n \n);\n\nconst SearchBoxContainer = styled.div`\n transform: translate(0, 0);\n margin-left: auto;\n position: absolute;\n top: 10px;\n right: 10px;\n\n ${mediaQuery.minWidth.sm} {\n position: static;\n margin-left: auto;\n }\n`;\n\ninterface StartSearchProps {\n startSearch: boolean;\n}\n\nconst SearchAltContainer = styled.span>`\n position: absolute;\n top: 50%;\n right: -3px;\n transform: translate(-50%, -50%);\n color: ${(props) => props.theme.light.textAbovePrimaryColor};\n transition: 0.2s;\n\n ${mediaQuery.dark} {\n color: ${(props) => props.theme.dark.textAbovePrimaryColor};\n }\n\n ${(props) =>\n props.$startSearch &&\n css`\n opacity: 0;\n z-index: -1;\n `}\n`;\n\nconst SearchBoxInput = styled.input>`\n padding: 10px;\n width: 35px;\n height: 35px;\n background: none;\n border-radius: 50px;\n box-sizing: border-box;\n font-size: ${(props) => props.theme.fontSizes[3]};\n color: ${(props) => props.theme.light.textAbovePrimaryColor};\n border: 2px solid ${(props) => props.theme.light.textAbovePrimaryColor};\n outline: none;\n transition: 0.5s;\n\n ${mediaQuery.dark} {\n color: ${(props) => props.theme.dark.textAbovePrimaryColor};\n border: 2px solid ${(props) => props.theme.dark.textAbovePrimaryColor};\n }\n\n ${(props) =>\n props.$startSearch &&\n css`\n width: 200px;\n background: ${(props) => props.theme.light.generalBackground};\n ${borderRadius};\n\n ${mediaQuery.dark} {\n background: ${(props) => props.theme.dark.generalBackground};\n }\n `}\n`;\n\ninterface OnClickProp {\n onClick: () => void;\n}\n\nconst SearchBox: FC<\n StartSearchProps & OnClickProp & { onSearch: (searchValue: string) => void }\n> = ({ startSearch, onClick, onSearch }) => (\n \n onSearch(event.currentTarget.value)}\n disabled={!startSearch}\n />\n \n \n \n \n);\n\ninterface SearchProps {\n startSearch: boolean;\n setStartSearch: (value: ((prevState: boolean) => boolean) | boolean) => void;\n}\n\nexport const Search: FC = ({ startSearch, setStartSearch }) => {\n const { hits, setQuery } = useSearch(startSearch);\n\n return (\n <>\n setStartSearch(!startSearch)}\n onSearch={(value) => setQuery(value)}\n />\n {startSearch && hits.length > 0 && }\n \n );\n};\n","import { useEffect, useState } from \"react\";\nimport { SearchResult } from \"../lunr\";\n\nconst hasMinimumCharsToSearch = (query: string): boolean => query.length >= 3;\n\nconst isASearchInProgressUsing = (\n query: string,\n hits: SearchResult[],\n): boolean =>\n query !== null &&\n query !== undefined &&\n hasMinimumCharsToSearch(query) &&\n hits.length > 0;\n\nexport const useSearch = (startSearch: boolean) => {\n const [query, setQuery] = useState(\"\");\n const [hits, setHits] = useState([]);\n\n useEffect(() => {\n if (startSearch) {\n const { index, store } = window.__LUNR__.en;\n const enhancedQuery = query\n .split(\" \")\n .map((term) => `${term}*`)\n .join(\" \");\n const searchResults = index.search(enhancedQuery);\n const hits = searchResults.map(({ ref }) => store[ref]);\n if (isASearchInProgressUsing(query, hits)) {\n setHits(hits);\n } else {\n setHits([]);\n }\n }\n }, [query]);\n\n return {\n hits,\n setQuery,\n };\n};\n","import { FC, memo, useCallback, useState } from \"react\";\nimport { tracking } from \"../../../logic/tracking\";\nimport styled, { css } from \"styled-components\";\nimport { Container } from \"../atoms/container\";\nimport { slugs } from \"../../../logic/slug\";\nimport { MenuItemWithTracking } from \"../../tracking/menu-item-with-tracking\";\nimport { HamburgerMenu } from \"../molecules/hamburger-menu\";\nimport { Overlay } from \"../atoms/overlay\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { Close } from \"../molecules/close\";\nimport { mediaQuery } from \"../utils-css/media-query\";\nimport { MobileBlogHeader } from \"./blog-header\";\nimport { ContainerFluid } from \"../atoms/container-fluid\";\nimport {\n ScrollDirection,\n useScrollDirection,\n} from \"../hooks/use-scroll-direction\";\nimport { Search } from \"../molecules/search\";\n\nexport const menuHeight = \"55px\";\n\nconst MobileBlogHeaderContainer = styled(ContainerFluid)<{ $hide: boolean }>`\n height: ${menuHeight};\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: opacity 0.2s ease ${(props) => (props.$hide ? \"0s\" : \"0.4s\")};\n opacity: ${(props) => (props.$hide ? 0 : 1)};\n\n ${mediaQuery.minWidth.sm} {\n display: none;\n }\n`;\n\nconst Divider = styled.div`\n height: 1px;\n background-color: ${(props) => props.theme.light.textAbovePrimaryColor};\n position: absolute;\n top: 54px;\n left: ${(props) => props.theme.spacing[3]};\n right: ${(props) => props.theme.spacing[3]};\n opacity: 0.2;\n\n ${mediaQuery.dark} {\n background-color: ${(props) => props.theme.dark.textAbovePrimaryColor};\n }\n`;\n\nconst MenuButtonContainer = styled.div`\n position: absolute;\n top: 10px;\n left: 10px;\n\n ${mediaQuery.minWidth.sm} {\n display: none;\n }\n`;\n\nconst MenuContainer = styled.div<{\n $shouldHide: boolean;\n $shouldOpenMenu: boolean;\n $delayOpenCloseMenuAnimation: number;\n}>`\n background-color: ${(props) => props.theme.light.primaryColorDark};\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);\n position: fixed;\n top: ${(props) => (props.$shouldHide ? `-${menuHeight}` : 0)};\n left: 0;\n right: 0;\n transition:\n top 0.3s ease 0s,\n height 0.3s ease ${(props) => `${props.$delayOpenCloseMenuAnimation}s`};\n width: 100%;\n z-index: 300;\n height: ${(props) => (props.$shouldOpenMenu ? \"260px\" : menuHeight)};\n\n ${mediaQuery.dark} {\n background-color: ${(props) => props.theme.dark.primaryColorDark};\n }\n`;\n\nconst NavBar = styled(Container)`\n display: flex;\n flex-direction: column;\n align-items: center;\n height: ${menuHeight};\n\n ${mediaQuery.minWidth.sm} {\n flex-direction: row;\n }\n`;\n\ninterface NavBarMenuItemProps {\n shouldOpenMenu: boolean;\n animationDuration: string;\n enterDelayAnimation: string;\n exitDelayAnimation: string;\n}\n\nconst NavBarMenuItem = memo(styled(MenuItemWithTracking)`\n position: relative;\n display: inline-block;\n visibility: ${(props) => (props.shouldOpenMenu ? \"visible\" : \"hidden\")};\n margin-right: 20px;\n line-height: 50px;\n font-size: ${(props) => props.theme.fontSizes[5]};\n height: auto;\n\n &.opacity-enter {\n visibility: visible;\n opacity: 0;\n }\n\n &.opacity-enter-active {\n opacity: 1;\n visibility: visible;\n transition: opacity ${(props) => props.animationDuration} ease\n ${(props) => props.enterDelayAnimation};\n }\n\n &.opacity-exit {\n visibility: visible;\n opacity: 1;\n }\n\n &.opacity-exit-active {\n opacity: 0;\n transition: opacity ${(props) => props.animationDuration} ease\n ${(props) => props.exitDelayAnimation};\n visibility: visible;\n }\n\n ${mediaQuery.minWidth.sm} {\n visibility: visible;\n opacity: 1;\n height: ${menuHeight};\n\n ${(props) =>\n !props.selected &&\n css`\n ${mediaQuery.inputDevice.mouse} {\n transition: transform 0.15s;\n }\n `};\n }\n`);\n\ninterface AnimatedNavBarItemProps {\n label: string;\n slug: string;\n selected: boolean;\n trackingAction: string;\n trackingCategory: string;\n shouldOpenMenu: boolean;\n enterDelayAnimation: string;\n exitDelayAnimation: string;\n onStartAnimation: () => void;\n onFinishAnimation: () => void;\n}\n\nconst AnimatedNavBarItem: FC = ({\n label,\n slug,\n selected,\n trackingAction,\n trackingCategory,\n shouldOpenMenu,\n enterDelayAnimation,\n exitDelayAnimation,\n onStartAnimation,\n onFinishAnimation,\n}) => (\n {\n node.addEventListener(\"transitionend\", done, false);\n }}\n onEnter={onStartAnimation}\n onEntered={onFinishAnimation}\n onExit={onStartAnimation}\n onExited={onFinishAnimation}\n >\n \n {label}\n \n     \n);\n\nexport interface MenuProps {\n trackingCategory: string;\n pathname: string;\n}\n\nexport const BlogMenu: FC = ({ trackingCategory, pathname }) => {\n const direction = useScrollDirection();\n const [shouldOpenMenu, setShouldOpenMenu] = useState(false);\n const [enableMenuButton, setEnableMenuButton] = useState(true);\n const [startSearch, setStartSearch] = useState(false);\n\n const onStartAnimation = useCallback(\n () => setEnableMenuButton(false),\n [setEnableMenuButton],\n );\n const onFinishAnimation = useCallback(\n () => setEnableMenuButton(true),\n [setEnableMenuButton],\n );\n const changeMenuStatus = useCallback(\n (enableMenuButton: boolean, shouldOpenMenu: boolean) => {\n if (enableMenuButton) {\n setShouldOpenMenu(!shouldOpenMenu);\n }\n },\n [setShouldOpenMenu],\n );\n\n return (\n <>\n \n \n \n \n {shouldOpenMenu && }\n \n \n \n \n \n {!startSearch && (\n \n {!shouldOpenMenu && (\n {\n if (!startSearch) {\n changeMenuStatus(enableMenuButton, shouldOpenMenu);\n }\n }}\n />\n )}\n {shouldOpenMenu && (\n \n changeMenuStatus(enableMenuButton, shouldOpenMenu)\n }\n />\n )}\n \n )}\n {!shouldOpenMenu && (\n \n )}\n \n \n {(shouldOpenMenu || startSearch) && (\n {\n if (shouldOpenMenu) {\n setShouldOpenMenu(false);\n }\n if (startSearch) {\n setStartSearch(false);\n }\n }}\n />\n )}\n \n );\n};\n","import { DesktopBlogHeader } from \"../organism/blog-header\";\nimport { OgPageType } from \"../../../logic/seo\";\nimport { CurrentLocation } from \"../../../logic/current-location\";\nimport { BlogThemePage } from \"./blog-theme-page\";\nimport { Head } from \"../../head\";\nimport { BlogMenu } from \"../organism/blog-menu\";\nimport styled from \"styled-components\";\nimport { Container } from \"../atoms/container\";\nimport { blogPrimaryColor } from \"../themes/blog-colors\";\nimport { FC, ReactNode } from \"react\";\nimport { Footer } from \"../organism/footer\";\n\nconst ContentContainer = styled(Container)`\n margin-top: ${(props) => props.theme.spacing[12]};\n flex: 1 0 auto;\n`;\n\nexport interface BlogPageProps {\n location: CurrentLocation;\n author: string;\n ogPageType: OgPageType;\n ogImage: string;\n trackingCategory: string;\n customTitle?: string;\n description?: string;\n date?: string;\n big?: boolean;\n keywords?: ReadonlyArray;\n children?: ReactNode;\n}\n\nexport const BlogPageTemplate: FC = ({\n children,\n location,\n author,\n ogPageType,\n ogImage,\n trackingCategory,\n customTitle,\n description,\n date,\n keywords,\n big = false,\n}) => (\n <>\n \n \n \n \n \n {children}\n \n