Creating with code
Interactive essays on creative code, mostly using my Solandra framework
React and State
One of the key challenges for React Apps is state; Valtio is an excellent modern approach.
Raymarching with Swift and Metal for Shadertoy-like Graphics
April 2024
Shadertoy is a well known website for creating and sharing shader driven graphics. It works in the browser for a tight feedback loop between…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBCEBD; fill-opacity:0.5;" d="M 0.6428346495386152 -0.48604120444940524 A 1.1209472797337574 1.1209472797337574 0 0 0 -0.47811263019514216 0.6349060752843523 A 1.1209472797337574 1.1209472797337574 0 0 0 1.7637819292723727 0.634906075284352 A 1.1209472797337574 1.1209472797337574 0 0 0 -0.47811263019514216 0.6349060752843526 A 1.1209472797337574 1.1209472797337574 0 0 0 1.7637819292723727 0.6349060752843516" />
<path style="fill:%23DBC1BD; fill-opacity:0.5;" d="M 0.6494993308272644 -0.4090345802186589 A 1.2764774953656617 1.2764774953656617 0 0 0 -0.6269781645383973 0.8674429151470029 A 1.2764774953656617 1.2764774953656617 0 0 0 1.925976826192926 0.8674429151470024 A 1.2764774953656617 1.2764774953656617 0 0 0 -0.6269781645383973 0.8674429151470032 A 1.2764774953656617 1.2764774953656617 0 0 0 1.925976826192926 0.8674429151470021" />
<path style="fill:%23DBBDBE; fill-opacity:0.5;" d="M 0.49762582607041994 0.1906902279090149 A 0.7440809083942977 0.7440809083942977 0 0 0 -0.2464550823238778 0.9347711363033128 A 0.7440809083942977 0.7440809083942977 0 0 0 1.2417067344647177 0.9347711363033124 A 0.7440809083942977 0.7440809083942977 0 0 0 -0.2464550823238778 0.9347711363033129 A 0.7440809083942977 0.7440809083942977 0 0 0 1.2417067344647177 0.9347711363033123" />
<path style="fill:none; stroke-width:0.01; stroke:%233E1386; stroke-opacity:0.29990177130995993; stroke-linecap:round;" d="M 0.127805426258177 0.8580820360792034 C 0.22705423223074128 0.949790694619507, 0.9552938095732201 -0.03662792128204717, 1.0656684748319278 0.0682925261937907" />
<path style="fill:none; stroke-width:0.01; stroke:%23341386; stroke-opacity:0.24354139369062788; stroke-linecap:round;" d="M 0.07096711437990569 0.9671678110477878 C 0.5199135596958953 1.313615499864674, 1.1878460216301892 -0.03849277903945725, 1.035309690912182 -0.19230360588054193" />
<path style="fill:none; stroke-width:0.01; stroke:%23221386; stroke-opacity:0.404578922265247; stroke-linecap:round;" d="M 0.12195587104802666 1.1780279373173963 C 0.6758766928747719 1.6765155165733694, 1.4996798418075308 0.2639556259292062, 1.2519594905830693 -0.003948751406151169" />
<path style="fill:none; stroke-width:0.01; stroke:%23862C13; stroke-opacity:0.34692634650135257; stroke-linecap:round;" d="M -0.002807720325741364 1.15721337792735 C 0.31836450455883125 1.4287092625830655, 1.2543264171776507 -0.17758471809296672, 1.2813730955823104 -0.1870651223406792" />
<path style="fill:none; stroke-width:0.01; stroke:%23211386; stroke-opacity:0.24467088912465562; stroke-linecap:round;" d="M -0.05543187423472282 1.2602085747960117 C 0.5196627607649431 1.6744504124371449, 1.2321990155260862 0.09134986887720165, 1.0060623250955656 -0.11352550069202635" />
<path style="fill:none; stroke-width:0.01; stroke:%23861316; stroke-opacity:0.44452474125591773; stroke-linecap:round;" d="M 0.0631641617413404 0.8717625756582514 C 0.21339141617030027 0.9875427738292218, 0.9109147540392986 -0.2223084712187341, 1.023168284205979 -0.14247158215092878" />
<path style="fill:none; stroke-width:0.01; stroke:%231F1386; stroke-opacity:0.314928893424286; stroke-linecap:round;" d="M 0.11849738995348844 1.0453535708533157 C 0.43603704608330346 1.293383106029962, 0.9915195889395074 0.19981110548606262, 0.9132941536806545 0.11113802818641907" />
<path style="fill:none; stroke-width:0.01; stroke:%23331386; stroke-opacity:0.489586801210534; stroke-linecap:round;" d="M -0.14517346692688357 1.2559154479683077 C 0.5083550246518791 1.6977241516724666, 1.2612437015230267 -0.11479411775152348, 1.0089712440334875 -0.33153969247463566" />
<path style="fill:none; stroke-width:0.01; stroke:%23861313; stroke-opacity:0.42870056623153513; stroke-linecap:round;" d="M -0.303373957121004 1.0432808329406151 C 0.11775888808931667 1.47231312810523, 1.160101235359695 -0.04533113122822008, 1.0636276584164628 -0.1900189075599872" />
<path style="fill:none; stroke-width:0.01; stroke:%231C1386; stroke-opacity:0.3658762064375179; stroke-linecap:round;" d="M 0.02506129685952771 1.2732317139237486 C 0.5387439276901351 1.5602951080608767, 1.0913106245663364 -0.1288685825104987, 0.9556715713458858 -0.2408912814309256" />
<path style="fill:none; stroke-width:0.01; stroke:%23131586; stroke-opacity:0.48589776674373414; stroke-linecap:round;" d="M 0.11864145341963186 1.2090332442897609 C 0.5333263331690477 1.5667392304351533, 1.2894161057162412 0.2317128026850621, 1.1647428194055618 0.08669673547254927" />
<path style="fill:none; stroke-width:0.01; stroke:%23171386; stroke-opacity:0.45943101835002936; stroke-linecap:round;" d="M -0.08327940687147597 0.9263324221520878 C 0.29282064882989106 1.2556050108559023, 1.1217722172096523 -0.1614879985592017, 1.0527864625178207 -0.25885433125902035" />
<path style="fill:none; stroke-width:0.01; stroke:%23181386; stroke-opacity:0.5570995506527144; stroke-linecap:round;" d="M -0.24390159260505398 1.229368969839538 C -0.05523282142904995 1.3625221215741599, 0.7443977628990791 -0.16464161052127035, 0.8892724776441812 -0.06969017528641427" />
<path style="fill:none; stroke-width:0.01; stroke:%231E1386; stroke-opacity:0.4156217157986519; stroke-linecap:round;" d="M -0.2935643324603988 0.870458727788513 C 0.24698918394916747 1.5910659761525232, 1.3371220012934133 0.3419635180256865, 1.057400275249047 -0.09055175033639931" />
<path style="fill:none; stroke-width:0.01; stroke:%23863413; stroke-opacity:0.35627926181754166; stroke-linecap:round;" d="M 0.03398695908692337 1.1595018219620759 C 0.3570966593895729 1.3927949697245119, 1.1046818091182025 -0.15593677237547343, 1.1215663379943026 -0.17264856731770487" />
<path style="fill:none; stroke-width:0.01; stroke:%23862313; stroke-opacity:0.37674650277532173; stroke-linecap:round;" d="M 0.03715791836707025 0.9335797476835546 C 0.29770010658977764 1.1853930997179596, 1.202781105538035 -0.15273048407623901, 1.228878185837536 -0.1570847948149752" />
<path style="fill:none; stroke-width:0.01; stroke:%23861322; stroke-opacity:0.563028569898048; stroke-linecap:round;" d="M -0.19826946405826543 1.0225624754545843 C 0.15820282061894442 1.4080534662791124, 1.2820796349756893 -0.10498964400962008, 1.2469554637060016 -0.18728191768431648" />
<path style="fill:none; stroke-width:0.01; stroke:%2386131A; stroke-opacity:0.2734670469746734; stroke-linecap:round;" d="M -0.02665788744670114 0.9846859394240142 C 0.372237767257726 1.3331686069076176, 1.18410563441735 -0.06812725922521912, 1.0891161751493077 -0.18911463111822693" />
<path style="fill:none; stroke-width:0.01; stroke:%23862413; stroke-opacity:0.318341319773088; stroke-linecap:round;" d="M -0.012976539653146574 1.1756345556918841 C 0.33720059365012706 1.4393011286289288, 1.010992013872178 0.07314382700207445, 0.9603345351268586 0.0038640139629129433" />
<path style="fill:none; stroke-width:0.01; stroke:%23862113; stroke-opacity:0.30046369043746646; stroke-linecap:round;" d="M -0.27452899622270754 1.1166016743487344 C -0.12124617876418042 1.2481114108476719, 1.0698912293352616 -0.4380377824339366, 1.2764064262800916 -0.24593520302528324" />
<path style="fill:none; stroke-width:0.01; stroke:%23351386; stroke-opacity:0.42540360697737994; stroke-linecap:round;" d="M -0.04330386662480776 1.260551190633811 C 0.41632499297764114 1.5922893517514116, 1.1199327916884312 0.06234502136813458, 0.9971328080917734 -0.06356553925947131" />
<path style="fill:none; stroke-width:0.01; stroke:%23862313; stroke-opacity:0.372861775894672; stroke-linecap:round;" d="M 0.0652843234428804 1.2406297178044807 C 0.5235714779220473 1.5827629760416189, 1.3356043191595064 -0.09358547599174216, 1.2452489927406851 -0.20062836008849286" />
<path style="fill:none; stroke-width:0.01; stroke:%23862013; stroke-opacity:0.3326598329064937; stroke-linecap:round;" d="M -0.18883891114056864 1.0098055651510145 C -0.013161691378897444 1.1784193256806463, 0.9505133289534814 -0.1622946273723611, 1.0604686097321312 -0.06973793421088756" />
<path style="fill:none; stroke-width:0.01; stroke:%232B1386; stroke-opacity:0.4382899311281975; stroke-linecap:round;" d="M -0.03299303383184557 0.9159745340931772 C 0.47112768175289343 1.3261165841465434, 1.108332721043253 0.09416834491462556, 0.8734939618625144 -0.1337911792355945" />
<path style="fill:none; stroke-width:0.01; stroke:%23132986; stroke-opacity:0.2990109615306773; stroke-linecap:round;" d="M 0.10219566270533684 1.1348408654277726 C 0.6136909657176695 1.5924208566460734, 1.376914294859668 0.2757716278168012, 1.1509565279473624 0.03203730655606232" />
<path style="fill:none; stroke-width:0.01; stroke:%23862613; stroke-opacity:0.2840493464129406; stroke-linecap:round;" d="M -0.23220395390835677 1.0536796200108107 C 0.07316210307012572 1.4574361277193197, 1.3556522354426987 0.05275191754167463, 1.3420514855825312 -0.013858895073664196" />
<path style="fill:none; stroke-width:0.01; stroke:%23861F13; stroke-opacity:0.5898950749778222; stroke-linecap:round;" d="M -0.11929980378866953 0.8726739409526447 C -0.04592321542640998 0.9581977262127257, 1.0775979879910476 -0.09876540750656182, 1.2194073082930976 0.10629660006109445" />
<path style="fill:none; stroke-width:0.01; stroke:%23864113; stroke-opacity:0.38523990534927516; stroke-linecap:round;" d="M -0.2819740381139557 1.1482642522079223 C -0.572407530328789 0.6915216698380919, 0.7380527453097445 -0.8058072985429603, 1.3410501053629726 -0.002862501573202142" />
<path style="fill:none; stroke-width:0.01; stroke:%23861321; stroke-opacity:0.25234246628299084; stroke-linecap:round;" d="M -0.06944471812876116 1.1601624488143494 C 0.35345329308733997 1.5572370789528522, 1.2063078361753388 0.18831884560253265, 1.0786527020539967 0.027391370866780923" />
<path style="fill:none; stroke-width:0.01; stroke:%23862513; stroke-opacity:0.529506175263952; stroke-linecap:round;" d="M -0.201569609954832 1.0597986549612894 C 0.3904324283412934 1.7692502392055705, 1.3883619889345573 0.4953391598637832, 1.0655001524330523 0.05319691483864711" />
<path style="fill:none; stroke-width:0.01; stroke:%231C1386; stroke-opacity:0.3952146005177666; stroke-linecap:round;" d="M -0.0771549597868619 0.9744699292706392 C 0.616547916675865 1.565911247687502, 1.4011518779526726 0.11558660577933921, 1.0235177622706926 -0.253359253431789" />
<path style="fill:none; stroke-width:0.01; stroke:%23131986; stroke-opacity:0.5010478758649998; stroke-linecap:round;" d="M 0.07382045165388937 1.1428716832611285 C 0.3399187742703876 1.3691798039295862, 1.0266630482451478 0.18034889375814078, 1.0184482742544847 0.14657107220789536" />
<path style="fill:none; stroke-width:0.01; stroke:%23863113; stroke-opacity:0.3698690390704519; stroke-linecap:round;" d="M -0.29657936537346896 1.11859402492494 C -0.29471093665069736 1.0772238263012344, 0.9010967603464731 -0.687819416237055, 1.2772639754934119 -0.31958219328920134" />
<path style="fill:none; stroke-width:0.01; stroke:%23861913; stroke-opacity:0.5327073424968505; stroke-linecap:round;" d="M -0.2618364180856213 0.8904888166117926 C 0.08218605652546629 1.35906192925821, 1.3215211129346538 0.017255411561971745, 1.25581211701346 -0.12594565588925463" />
<path style="fill:none; stroke-width:0.01; stroke:%23862013; stroke-opacity:0.49271578349646566; stroke-linecap:round;" d="M 0.09955070935819357 0.9378761742337809 C 0.5471443617795058 1.412049927054678, 1.4832877282371304 0.08267419633210693, 1.3194435163690845 -0.13704976526152848" />
<path style="fill:none; stroke-width:0.01; stroke:%234C1386; stroke-opacity:0.5361287557137345; stroke-linecap:round;" d="M -0.03888093388827471 0.8715668505550767 C 0.3712809699751812 1.2640279960399887, 1.1374300660193546 0.050472649727745345, 0.9887258396440464 -0.13029408536508666" />
<path style="fill:none; stroke-width:0.01; stroke:%23861E13; stroke-opacity:0.44756040720843804; stroke-linecap:round;" d="M -0.03277971897411128 1.1412496860371284 C 0.08451167206562143 1.2273726545152153, 0.9869328302795075 -0.21333594616453733, 1.1802348003587166 -0.04980068852830147" />
<path style="fill:none; stroke-width:0.01; stroke:%233F1386; stroke-opacity:0.417597494408921; stroke-linecap:round;" d="M 0.14705983175579704 1.2863298301480297 C 0.317130066049492 1.3651948631194286, 0.9388162597786429 -0.40730235107331453, 1.164290059463571 -0.29274672329453966" />
<path style="fill:none; stroke-width:0.01; stroke:%23863C13; stroke-opacity:0.3776336225821292; stroke-linecap:round;" d="M 0.10609422704111768 1.2167269662678426 C 0.478565377095305 1.442623443949243, 0.9447606242105065 0.1764312895691592, 0.8542414032809873 0.09384835175477327" />
<path style="fill:none; stroke-width:0.01; stroke:%23211386; stroke-opacity:0.43583146017011976; stroke-linecap:round;" d="M 0.058536113250395955 1.2984857222289692 C 0.2386884074461127 1.4106807947787146, 0.9056071787788529 -0.05675684893330424, 1.04874065413529 0.026617469244411857" />
<path style="fill:none; stroke-width:0.01; stroke:%23861B13; stroke-opacity:0.4192402133317721; stroke-linecap:round;" d="M 0.06949797767048302 1.02472773357364 C 0.17458129522901095 1.0643934788114149, 0.6656323411873617 -0.4234178146967861, 0.8934093375845522 -0.3078951109821203" />
<path style="fill:none; stroke-width:0.01; stroke:%23861314; stroke-opacity:0.4199378821165244; stroke-linecap:round;" d="M 0.09956417072755133 1.206985284635334 C 0.09003428879743175 1.1639808716150097, 0.9915285014107911 -0.26543805164295375, 1.3090490593014321 0.02669863392087149" />
<path style="fill:none; stroke-width:0.01; stroke:%232A1386; stroke-opacity:0.42371567762261825; stroke-linecap:round;" d="M -0.09836126452235741 1.1464856533936232 C 0.2686724468067479 1.4307045475186966, 1.0100604374982032 -0.020839343051642922, 0.9605666154095892 -0.09258963249356769" />
<path style="fill:none; stroke-width:0.01; stroke:%23351386; stroke-opacity:0.5126014310943757; stroke-linecap:round;" d="M -0.1683513360109806 0.9733146365403091 C -0.029159345053252517 1.0607160001204816, 0.7150048182011739 -0.4228933902034057, 0.9007410513523343 -0.2962989236468785" />
<path style="fill:none; stroke-width:0.01; stroke:%232A1386; stroke-opacity:0.37220990105914603; stroke-linecap:round;" d="M -0.2925843584215774 1.109987725912748 C -0.13776830706550575 1.2337177304557603, 0.9692266481326808 -0.45658002399443415, 1.1774860576552952 -0.2761714645517437" />
<path style="fill:none; stroke-width:0.01; stroke:%23862813; stroke-opacity:0.5093824534174358; stroke-linecap:round;" d="M 0.12503835056250237 0.9961054168401506 C 0.6122914642674611 1.3471985741697048, 1.284091565853965 -0.13092149824048727, 1.122476902916525 -0.28501544366890363" />
<path style="fill:none; stroke-width:0.01; stroke:%23862B13; stroke-opacity:0.45540362677506036; stroke-linecap:round;" d="M 0.09985582155489511 0.9336226850474154 C 0.14923866222786386 0.9627474735959036, 1.0053494179158786 -0.1734078391324892, 1.1969345442784447 0.027977723269942828" />
<path style="fill:none; stroke-width:0.01; stroke:%23251386; stroke-opacity:0.6828263313615823; stroke-linecap:round;" d="M -0.16034086827768593 1.1411527208033225 C 0.33135761587282897 1.7376244249653436, 1.492367637229338 0.29980363074197725, 1.3034858979121098 0.013108349079551301" />
<path style="fill:none; stroke-width:0.01; stroke:%2386131C; stroke-opacity:0.3994916408890343; stroke-linecap:round;" d="M 0.01666768829578072 1.1521686085916123 C 0.5252323435045378 1.5255533918741921, 1.1066314918229658 0.25384867473848327, 0.8781369873851903 0.050747479333140194" />
<path style="fill:none; stroke-width:0.01; stroke:%23131786; stroke-opacity:0.4083058579289754; stroke-linecap:round;" d="M 0.1117035590043948 0.9568971290889225 C 0.2363852524771733 1.0599813871724053, 1.150489698999528 -0.2910023018643972, 1.3151931032096638 -0.14417361531582404" />
<path style="fill:none; stroke-width:0.01; stroke:%23862713; stroke-opacity:0.3125287281010787; stroke-linecap:round;" d="M 0.03349608421134878 1.3115686499462413 C 0.5583742827281875 1.663949476958666, 1.14056850816406 0.24602262870511804, 0.9297780248059306 0.06812772006934256" />
<path style="fill:none; stroke-width:0.01; stroke:%23861316; stroke-opacity:0.31697899654419226; stroke-linecap:round;" d="M -0.169269317862804 0.9296586627613332 C 0.06787596716223326 1.1775766861772898, 0.9262683581476006 0.002618663233563523, 0.9390613334481126 -0.013191813160552207" />
<path style="fill:none; stroke-width:0.01; stroke:%2386131B; stroke-opacity:0.3973051367299164; stroke-linecap:round;" d="M 0.14462200752095314 1.1634438668070113 C 0.5134987578063164 1.3190947127551644, 0.8744294182026711 -0.2881981140933486, 0.8698022508893628 -0.3156689711742454" />
<path style="fill:none; stroke-width:0.01; stroke:%23863413; stroke-opacity:0.3586600767170727; stroke-linecap:round;" d="M -0.1550561735153044 0.983278307330957 C -0.07901804848040028 1.0480343707133994, 0.811771973971409 -0.07801961596995272, 0.9733975406149863 0.09553022364351935" />
</svg>)
No Code Creative Coding: A Case Study
January 2024
When we create generative art, or engage in creative coding, we are creating systems that create art. The process is iterative and we likely…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23D8DBBD; fill-opacity:0.5;" d="M 0.04359909984641175 0.11486434044581828 A 0.31030403985591115 0.31030403985591115 0 0 0 -0.2667049400094994 0.4251683803017295 A 0.31030403985591115 0.31030403985591115 0 0 0 0.3539031397023229 0.4251683803017294 A 0.31030403985591115 0.31030403985591115 0 0 0 -0.2667049400094994 0.42516838030172954 A 0.31030403985591115 0.31030403985591115 0 0 0 0.3539031397023229 0.42516838030172927" />
<path style="fill:%23DBCFBD; fill-opacity:0.5;" d="M 0.1454844977905576 -0.06937727854967435 A 0.5755470919990856 0.5755470919990856 0 0 0 -0.430062594208528 0.5061698134494114 A 0.5755470919990856 0.5755470919990856 0 0 0 0.7210315897896432 0.5061698134494111 A 0.5755470919990856 0.5755470919990856 0 0 0 -0.430062594208528 0.5061698134494115 A 0.5755470919990856 0.5755470919990856 0 0 0 0.7210315897896432 0.5061698134494109" />
<path style="fill:%23DBCCBD; fill-opacity:0.5;" d="M 0.49926771355149147 -0.31705512024502525 A 0.41155409747810123 0.41155409747810123 0 0 0 0.08771361607339023 0.09449897723307604 A 0.41155409747810123 0.41155409747810123 0 0 0 0.9108218110295927 0.09449897723307589 A 0.41155409747810123 0.41155409747810123 0 0 0 0.08771361607339023 0.09449897723307614 A 0.41155409747810123 0.41155409747810123 0 0 0 0.9108218110295927 0.09449897723307578" />
<path style="fill:%23DBCABD; fill-opacity:0.5;" d="M 0.7889183562745901 -0.12872931947859 A 0.6113551028262045 0.6113551028262045 0 0 0 0.17756325344838553 0.4826257833476146 A 0.6113551028262045 0.6113551028262045 0 0 0 1.4002734591007946 0.48262578334761436 A 0.6113551028262045 0.6113551028262045 0 0 0 0.17756325344838553 0.48262578334761475 A 0.6113551028262045 0.6113551028262045 0 0 0 1.4002734591007946 0.48262578334761425" />
<path style="fill:%23DBD5BD; fill-opacity:0.5;" d="M 0.5565604533102778 0.13253762347275466 A 0.6066657333483659 0.6066657333483659 0 0 0 -0.05010528003808812 0.7392033568211207 A 0.6066657333483659 0.6066657333483659 0 0 0 1.1632261866586437 0.7392033568211205 A 0.6066657333483659 0.6066657333483659 0 0 0 -0.05010528003808812 0.7392033568211208 A 0.6066657333483659 0.6066657333483659 0 0 0 1.1632261866586437 0.7392033568211203" />
<path style="fill:%23D8DBBD; fill-opacity:0.5;" d="M 0.11446382111986475 -0.2273704728063648 A 0.6511680350474615 0.6511680350474615 0 0 0 -0.5367042139275967 0.4237975622410967 A 0.6511680350474615 0.6511680350474615 0 0 0 0.7656318561673262 0.4237975622410965 A 0.6511680350474615 0.6511680350474615 0 0 0 -0.5367042139275967 0.4237975622410969 A 0.6511680350474615 0.6511680350474615 0 0 0 0.7656318561673262 0.4237975622410963" />
<path style="fill:%23D5DBBD; fill-opacity:0.5;" d="M 0.5367391840212541 0.514362043250461 A 0.2804628110477362 0.2804628110477362 0 0 0 0.2562763729735179 0.7948248542981972 A 0.2804628110477362 0.2804628110477362 0 0 0 0.8172019950689903 0.794824854298197 A 0.2804628110477362 0.2804628110477362 0 0 0 0.2562763729735179 0.7948248542981973 A 0.2804628110477362 0.2804628110477362 0 0 0 0.8172019950689903 0.794824854298197" />
<path style="fill:none; stroke-width:0.05; stroke:%232A0A5C; stroke-opacity:0.4910861780090845; stroke-linecap:round;" d="M -0.2695888139426663 0.8700372651727146 C -0.49367743495552807 0.5030625954828191, 0.9343961198381091 -0.07502234934840304, 1.0161121158350745 0.021185452127525678" />
<path style="fill:none; stroke-width:0.02; stroke:%235C420A; stroke-opacity:0.29178463820669676; stroke-linecap:round;" d="M -0.023322648343317126 0.8574484705578362 C -0.24301441055888778 0.541033433841306, 1.1694893964450506 -0.13801756955680763, 1.2271662900975682 -0.08730265267705647" />
<path style="fill:none; stroke-width:0.02; stroke:%235C3E0A; stroke-opacity:0.3819850458901584; stroke-linecap:round;" d="M 0.07039168982157609 1.1364382905926074 C -0.0643932753133426 1.0066407863448361, 1.0848789902012554 0.07057048924255899, 1.0120557346838566 -0.00825519152905227" />
<path style="fill:none; stroke-width:0.02; stroke:%235C370A; stroke-opacity:0.4380686858433145; stroke-linecap:round;" d="M 0.11912956199454208 0.9587295500069086 C 0.018806519414565015 0.8742508131039073, 1.0253681718439047 -0.1184915559704694, 0.9096989279814933 -0.21332157902274182" />
<path style="fill:none; stroke-width:0.02; stroke:%231E0A5C; stroke-opacity:0.45958172863080643; stroke-linecap:round;" d="M 0.08993710851595318 1.2474549812382614 C 0.09841344723091561 1.2359381497197046, 1.2081513129291492 0.3031895725258607, 0.9935024444524065 0.11382906299377468" />
<path style="fill:none; stroke-width:0.02; stroke:%23340A5C; stroke-opacity:0.5482762868194722; stroke-linecap:round;" d="M 0.03608690972264464 1.0412121640624654 C -0.12357336098907845 0.8634016461582412, 1.022911140009259 0.09625645351746215, 1.0083948874264799 0.06266443701245464" />
<path style="fill:none; stroke-width:0.02; stroke:%235C2B0A; stroke-opacity:0.40843134553966554; stroke-linecap:round;" d="M -0.06385167341351802 1.112273209316258 C 0.08974649874464924 1.2128371495298165, 1.219029111668055 0.2381708704269161, 0.8505908795083402 -0.06630576252956713" />
<path style="fill:none; stroke-width:0.05; stroke:%233D0A5C; stroke-opacity:0.4119808655995067; stroke-linecap:round;" d="M -0.1489544084192478 1.0423619193951204 C 0.19293603735163123 1.38550512302338, 1.7981950594614515 0.4091681958537095, 1.2317511336154354 -0.2318996430852057" />
<path style="fill:none; stroke-width:0.02; stroke:%235C430A; stroke-opacity:0.2690554447492679; stroke-linecap:round;" d="M 0.003772995361964876 1.084193722732946 C -0.08537138474988892 0.9947202301494775, 1.2097004726495806 -0.13987006510092925, 1.049138171022379 -0.28391369389083254" />
<path style="fill:none; stroke-width:0.05; stroke:%235C360A; stroke-opacity:0.5437196237361588; stroke-linecap:round;" d="M -0.3437921416594584 1.081422679046153 C -0.6290866568951998 0.7901702300355796, 0.8175733249223118 -0.24072230091479663, 0.8706616946602206 -0.2149825017557169" />
<path style="fill:none; stroke-width:0.02; stroke:%235C1B0A; stroke-opacity:0.29266934215034884; stroke-linecap:round;" d="M 0.04462298540449969 1.3332242554436444 C -0.06504672842966297 1.2263648667977407, 1.3077191646192152 0.02965197144832521, 1.1538761743314385 -0.11113211120181812" />
<path style="fill:none; stroke-width:0.02; stroke:%23190A5C; stroke-opacity:0.3468410330207636; stroke-linecap:round;" d="M 0.009599093915523466 1.3309196883591172 C -0.08833875513818223 1.2421727898875037, 1.1629013960945214 0.03980495637373682, 0.9986049614583279 -0.09496870737574306" />
<path style="fill:none; stroke-width:0.05; stroke:%235C330A; stroke-opacity:0.47320504000069513; stroke-linecap:round;" d="M -0.15059496849140955 0.9425938320488454 C 0.22287005991885767 1.441602345115287, 1.8056133486368147 0.7419498794526508, 1.2627068757358497 -0.05598905774717369" />
<path style="fill:none; stroke-width:0.05; stroke:%231D0A5C; stroke-opacity:0.28383414848841265; stroke-linecap:round;" d="M -0.032757747640472706 1.0288890008285914 C 0.10637041672408065 1.1319985538381012, 1.2370751392221508 0.26707329971921756, 0.9047618475979533 -0.04239334908483419" />
</svg>)
use-svg-maker or creating SVGs with React, A Tutorial
November 2022
SVGs are XML descriptions of vector graphics. React is a highly efficient, supported way to create XML-ish stuff. Indeed while dynamic, it…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDD0DB; fill-opacity:0.5;" d="M 0.1347998660626274 0.5111232671021042 A 0.4610077755265863 0.4610077755265863 0 0 0 -0.3262079094639589 0.9721310426286907 A 0.4610077755265863 0.4610077755265863 0 0 0 0.5958076415892137 0.9721310426286904 A 0.4610077755265863 0.4610077755265863 0 0 0 -0.3262079094639589 0.9721310426286908 A 0.4610077755265863 0.4610077755265863 0 0 0 0.5958076415892137 0.9721310426286903" />
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.5120048984947179 -0.056956476004648815 A 0.5556627055110076 0.5556627055110076 0 0 0 -0.04365780701628974 0.49870622950635884 A 0.5556627055110076 0.5556627055110076 0 0 0 1.0676676040057256 0.4987062295063587 A 0.5556627055110076 0.5556627055110076 0 0 0 -0.04365780701628974 0.498706229506359 A 0.5556627055110076 0.5556627055110076 0 0 0 1.0676676040057256 0.4987062295063585" />
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.1542946824806195 0.003744657890673242 A 0.43848339696826977 0.43848339696826977 0 0 0 -0.28418871448765026 0.44222805485894306 A 0.43848339696826977 0.43848339696826977 0 0 0 0.5927780794488893 0.4422280548589429 A 0.43848339696826977 0.43848339696826977 0 0 0 -0.28418871448765026 0.4422280548589432 A 0.43848339696826977 0.43848339696826977 0 0 0 0.5927780794488893 0.4422280548589428" />
<path style="fill:%23BDCADB; fill-opacity:0.5;" d="M 0.5476995733104615 0.5842363837455053 A 0.27836802714721176 0.27836802714721176 0 0 0 0.2693315461632497 0.8626044108927171 A 0.27836802714721176 0.27836802714721176 0 0 0 0.8260676004576732 0.862604410892717 A 0.27836802714721176 0.27836802714721176 0 0 0 0.2693315461632497 0.8626044108927172 A 0.27836802714721176 0.27836802714721176 0 0 0 0.8260676004576732 0.862604410892717" />
<path style="fill:%23BDCDDB; fill-opacity:0.5;" d="M 0.30972684323267585 -0.2830741904410431 A 0.466783880217045 0.466783880217045 0 0 0 -0.15705703698436912 0.18370968977600194 A 0.466783880217045 0.466783880217045 0 0 0 0.7765107234497208 0.18370968977600177 A 0.466783880217045 0.466783880217045 0 0 0 -0.15705703698436912 0.18370968977600205 A 0.466783880217045 0.466783880217045 0 0 0 0.7765107234497208 0.18370968977600166" />
<path style="fill:%23BDC4DB; fill-opacity:0.5;" d="M 0.5174836666923632 0.44832635672626375 A 0.4435509930075341 0.4435509930075341 0 0 0 0.07393267368482914 0.8918773497337978 A 0.4435509930075341 0.4435509930075341 0 0 0 0.9610346596998973 0.8918773497337977 A 0.4435509930075341 0.4435509930075341 0 0 0 0.07393267368482914 0.891877349733798 A 0.4435509930075341 0.4435509930075341 0 0 0 0.9610346596998973 0.8918773497337976" />
<path style="fill:%23CABDDB; fill-opacity:0.5;" d="M 0.6805516655671272 0.15563319305121015 A 0.3056775862003217 0.3056775862003217 0 0 0 0.3748740793668055 0.4613107792515319 A 0.3056775862003217 0.3056775862003217 0 0 0 0.9862292517674489 0.4613107792515318 A 0.3056775862003217 0.3056775862003217 0 0 0 0.3748740793668055 0.46131077925153197 A 0.3056775862003217 0.3056775862003217 0 0 0 0.9862292517674489 0.4613107792515317" />
<path style="fill:none; stroke-width:0.01; stroke:%232A7A1F; stroke-opacity:0.48480113844142625; stroke-linecap:round;" d="M -0.2424434790738265 -0.15460857635941322 C 0.01582226683466897 0.06177457394724639, 0.008499433950316663 2.0602123553896265, 1.248824201702348 1.1757777940045662" />
<path style="fill:none; stroke-width:0.01; stroke:%231F217A; stroke-opacity:0.38370570037184104; stroke-linecap:round;" d="M -0.1905305038778954 -0.2003475929263072 C -0.061638073913150404 0.14266760336166995, -0.22794546044562386 2.1357394482941063, 1.1913180110996284 1.2455044768000731" />
<path style="fill:none; stroke-width:0.01; stroke:%231F217A; stroke-opacity:0.24738612686009043; stroke-linecap:round;" d="M -0.18251438586857754 -0.1524800540043601 C 0.4058573369871273 -0.2917933859582128, 0.3231687114936434 1.6452638704977196, 1.2128357545177013 1.193635174829553" />
<path style="fill:none; stroke-width:0.01; stroke:%233F7A1F; stroke-opacity:0.46599684790271667; stroke-linecap:round;" d="M -0.15336382065183848 -0.15377650204664745 C 0.5435686839047776 -0.3852611961182423, 0.42187624803468593 1.5562921143630297, 1.2194939191787846 1.2245195229697263" />
<path style="fill:none; stroke-width:0.01; stroke:%23457A1F; stroke-opacity:0.451864680525074; stroke-linecap:round;" d="M -0.15427188028895744 -0.22710607065619567 C 0.43193087911688766 -0.3489415971088389, 0.31853019721905773 1.604080450046077, 1.232669067219407 1.1525857932948358" />
<path style="fill:none; stroke-width:0.01; stroke:%234A7A1F; stroke-opacity:0.36380003009359313; stroke-linecap:round;" d="M -0.21824499234694109 -0.19335652643529808 C 0.10635921452499572 -0.05257107651674353, 0.06217384397382556 1.9278707066906462, 1.2351113018062199 1.1526960304471587" />
<path style="fill:none; stroke-width:0.03; stroke:%23277A1F; stroke-opacity:0.42374952414315975; stroke-linecap:round;" d="M -0.18395681797987753 -0.1764610087009135 C 0.19207029473268122 -0.07911447660761761, 0.03725535670033098 1.8794152040999794, 1.1796509909027824 1.2378868688754605" />
<path style="fill:none; stroke-width:0.01; stroke:%231F317A; stroke-opacity:0.5309298240734778; stroke-linecap:round;" d="M -0.2310520236759646 -0.16127547359636576 C 0.3786818372697296 -0.3307529640384801, 0.3041364689136643 1.5858113912523701, 1.15435492237087 1.1651571608634306" />
<path style="fill:none; stroke-width:0.02; stroke:%233A7A1F; stroke-opacity:0.4236072737954938; stroke-linecap:round;" d="M -0.2035715714001881 -0.20747252618128761 C 0.21803644485855597 -0.16135138080839895, 0.08139858961306748 1.7812710906598492, 1.1601782278807815 1.1827211492109604" />
<path style="fill:none; stroke-width:0.01; stroke:%23367A1F; stroke-opacity:0.37617638437423456; stroke-linecap:round;" d="M -0.1717220580858284 -0.18970624644800255 C 0.41631759939721424 -0.32311992214120344, 0.3044852266731969 1.5878142184111672, 1.1847496873231558 1.1609084924856483" />
<path style="fill:none; stroke-width:0.01; stroke:%23467A1F; stroke-opacity:0.3181254727659; stroke-linecap:round;" d="M -0.2391912714234202 -0.1632816080794467 C 0.6238454906541232 -0.6044784853944778, 0.5914677524050674 1.4071862106051802, 1.2453680374295089 1.1946310642097673" />
<path style="fill:none; stroke-width:0.01; stroke:%231F3D7A; stroke-opacity:0.25765072551579304; stroke-linecap:round;" d="M -0.1989959003449831 -0.24810007005509863 C 0.3720471040733507 -0.31990754763449436, 0.1752735531517528 1.6599632548946395, 1.1527715557857934 1.2118084783120173" />
<path style="fill:none; stroke-width:0.02; stroke:%23467A1F; stroke-opacity:0.3170654799619975; stroke-linecap:round;" d="M -0.21879513795652858 -0.22096300788737275 C 0.3288809140574762 -0.29453608314817914, 0.22212237101118973 1.711369351681548, 1.2121402858019006 1.188816341169098" />
<path style="fill:none; stroke-width:0.03; stroke:%231F207A; stroke-opacity:0.5240764789431; stroke-linecap:round;" d="M -0.2318751006400423 -0.24323028711252928 C 0.397872929661926 -0.396425134870394, 0.27020634714728164 1.5871166087246125, 1.1684564330884497 1.167375327692862" />
<path style="fill:none; stroke-width:0.02; stroke:%231F4B7A; stroke-opacity:0.32696320684685415; stroke-linecap:round;" d="M -0.23535217952674053 -0.21256311948409568 C 0.5742145829406785 -0.5718663334936827, 0.5089873415924547 1.4552040418210137, 1.2389622970433147 1.1801557048549474" />
<path style="fill:none; stroke-width:0.03; stroke:%231F327A; stroke-opacity:0.42462722115940893; stroke-linecap:round;" d="M -0.2058206381639435 -0.1681195878159993 C 0.1895616508546516 -0.11009908576065597, 0.09267855528356328 1.8041065932369849, 1.1630112527554683 1.1734723658406419" />
<path style="fill:none; stroke-width:0.03; stroke:%231F417A; stroke-opacity:0.4023455913993396; stroke-linecap:round;" d="M -0.22418336434820038 -0.16398472525531058 C 0.21485370127782588 -0.14785221279107896, 0.17616603139132048 1.8329945454036665, 1.2331209229563513 1.1782204861246974" />
<path style="fill:none; stroke-width:0.03; stroke:%231F387A; stroke-opacity:0.2230343249974608; stroke-linecap:round;" d="M -0.1540187590516011 -0.1976052103353296 C 0.3195550585718283 -0.21599240592707403, 0.2295782756895474 1.7210539844945578, 1.2364914173107573 1.1539590646941789" />
<path style="fill:none; stroke-width:0.01; stroke:%23407A1F; stroke-opacity:0.4613960574325805; stroke-linecap:round;" d="M -0.23252986759315772 -0.19809548548808723 C 0.5656242596216848 -0.5673697570927358, 0.5261012014266421 1.4303586014158942, 1.2368589253306523 1.1559271294443894" />
<path style="fill:none; stroke-width:0.02; stroke:%231F457A; stroke-opacity:0.46027996307075625; stroke-linecap:round;" d="M -0.22306204309515384 -0.1888205868774408 C 0.20007454237002675 -0.15110024760932106, 0.1545942043655687 1.8419263376955755, 1.2388572886232234 1.1665447876342399" />
<path style="fill:none; stroke-width:0.01; stroke:%231F547A; stroke-opacity:0.42105822124428166; stroke-linecap:round;" d="M -0.21083198852864993 -0.243699759870204 C 0.38617420968869487 -0.35583812454402153, 0.26781652183909654 1.6831235556611355, 1.2371609776455115 1.1966785395804282" />
<path style="fill:none; stroke-width:0.01; stroke:%231F527A; stroke-opacity:0.41432563246539017; stroke-linecap:round;" d="M -0.18326623617418789 -0.16463573963427586 C 0.5432028354210245 -0.4543462070319535, 0.469725425324138 1.472417087049406, 1.2104841290594501 1.167758961880593" />
<path style="fill:none; stroke-width:0.02; stroke:%23281F7A; stroke-opacity:0.5060664948485775; stroke-linecap:round;" d="M -0.24864193492699058 -0.21993987991169991 C 0.3397362150058613 -0.34444919793571593, 0.27929259113866906 1.692755699176788, 1.2364311056471329 1.1759165914510592" />
<path style="fill:none; stroke-width:0.03; stroke:%231F4B7A; stroke-opacity:0.25562250094646244; stroke-linecap:round;" d="M -0.16451396441389282 -0.16087990082962358 C 0.4101747312685039 -0.2594761746971258, 0.27693625514274267 1.7145853988669537, 1.2250262797863567 1.2476120222890414" />
<path style="fill:none; stroke-width:0.02; stroke:%231F4C7A; stroke-opacity:0.2501458723649942; stroke-linecap:round;" d="M -0.24013618512254614 -0.1827058597509581 C 0.9410062014480747 -0.9190320363539667, 0.8606020934223324 1.1153539684641096, 1.229593302112954 1.2262251078757542" />
<path style="fill:none; stroke-width:0.02; stroke:%23301F7A; stroke-opacity:0.3391131714944479; stroke-linecap:round;" d="M -0.20693361917226122 -0.2434829153824111 C 0.471116388466696 -0.4505468223940745, 0.3553798877101255 1.5308202896595635, 1.1996791707949819 1.1567495758260016" />
<path style="fill:none; stroke-width:0.01; stroke:%232F7A1F; stroke-opacity:0.4445853101281884; stroke-linecap:round;" d="M -0.22304440483247642 -0.19116868116907168 C 0.31094356614785956 -0.24048442782898038, 0.15401299612395036 1.7417052425075683, 1.1568737608097834 1.2404489176077262" />
<path style="fill:none; stroke-width:0.01; stroke:%23407A1F; stroke-opacity:0.3390248800664217; stroke-linecap:round;" d="M -0.20179706294347033 -0.18538341080942067 C -0.08230268248422168 0.1698114379102068, -0.18221016140908652 2.1489637809891127, 1.2136518145692388 1.2015304209075526" />
<path style="fill:none; stroke-width:0.02; stroke:%233A7A1F; stroke-opacity:0.3993385757170738; stroke-linecap:round;" d="M -0.20887392494730056 -0.24165628265626782 C 0.2835606158942561 -0.24241033092424602, 0.11776104557640332 1.7686497594591415, 1.1867780853428198 1.2157412783488164" />
<path style="fill:none; stroke-width:0.03; stroke:%234A7A1F; stroke-opacity:0.3482492618488239; stroke-linecap:round;" d="M -0.2234132362291933 -0.1555567725953234 C 0.17232323808242722 -0.08167813512400168, 0.07229489650891363 1.9000070528807873, 1.1938517172640744 1.2331267424919874" />
<path style="fill:none; stroke-width:0.02; stroke:%231F377A; stroke-opacity:0.39123969124151037; stroke-linecap:round;" d="M -0.17666975851467573 -0.21656085155662655 C 0.5003794740021947 -0.39422624453815713, 0.342631902894389 1.6338178003250046, 1.2370354551354148 1.2460684634080015" />
<path style="fill:none; stroke-width:0.03; stroke:%231F3C7A; stroke-opacity:0.35591395258906916; stroke-linecap:round;" d="M -0.15684414896077759 -0.15953681407992742 C 0.09367415464129146 0.042550563773614436, -0.024737971871380257 1.9376705815673492, 1.183426237402059 1.1855195434704136" />
<path style="fill:none; stroke-width:0.02; stroke:%23307A1F; stroke-opacity:0.45216489135505256; stroke-linecap:round;" d="M -0.15640447541776964 -0.15030989057590782 C 0.8218568336942211 -0.6567453702566499, 0.6831935833848062 1.2411774880143098, 1.1725383601512986 1.2117655892428227" />
<path style="fill:none; stroke-width:0.01; stroke:%23417A1F; stroke-opacity:0.3138288868151015; stroke-linecap:round;" d="M -0.18357437178130867 -0.2156710631596304 C 0.44132116729014603 -0.3717229031486684, 0.304188569698437 1.5566196363462366, 1.1691568139085589 1.1654258335894692" />
<path style="fill:none; stroke-width:0.01; stroke:%231F447A; stroke-opacity:0.2965050370757806; stroke-linecap:round;" d="M -0.16802745134645716 -0.15210519282213436 C 0.425928442981897 -0.29272551065958297, 0.3072435554936539 1.599573908470085, 1.1699504727164134 1.1912853940426786" />
<path style="fill:none; stroke-width:0.02; stroke:%231F547A; stroke-opacity:0.510607735738321; stroke-linecap:round;" d="M -0.24225713417478256 -0.17342799507592066 C 0.2499012519840526 -0.20466929542556123, 0.19017467845721076 1.7951302556410398, 1.215287925630502 1.1970930396654822" />
<path style="fill:none; stroke-width:0.01; stroke:%231F467A; stroke-opacity:0.3071002106792675; stroke-linecap:round;" d="M -0.20351572036444393 -0.1519910233388226 C 0.4152423014063998 -0.32625646516839213, 0.35634355462466544 1.6391314487581086, 1.2288160283661698 1.195096381456843" />
<path style="fill:none; stroke-width:0.01; stroke:%231F377A; stroke-opacity:0.34663070353283654; stroke-linecap:round;" d="M -0.24907472571376427 -0.21227262841063696 C 0.6509482792869796 -0.6888929291127028, 0.612456532501326 1.3255897139293262, 1.2335408241620767 1.152085486218571" />
<path style="fill:none; stroke-width:0.03; stroke:%23467A1F; stroke-opacity:0.2385848631198488; stroke-linecap:round;" d="M -0.18586365911951616 -0.18076408128117055 C 0.2915126187897945 -0.17715575716887422, 0.1477643487532455 1.81295301714617, 1.2087225807579494 1.246234768854547" />
<path style="fill:none; stroke-width:0.03; stroke:%231F327A; stroke-opacity:0.42669830314348467; stroke-linecap:round;" d="M -0.17801349617382295 -0.16124095053778567 C 0.6761347928665616 -0.5744137170279038, 0.576836520296179 1.3166881789987512, 1.1719206497589896 1.1668420023441943" />
<path style="fill:none; stroke-width:0.03; stroke:%231F557A; stroke-opacity:0.3223766182900798; stroke-linecap:round;" d="M -0.18021155772745964 -0.1586574212316227 C -0.15757235811578038 0.27019959295787754, -0.3101652751889714 2.1901954101623007, 1.156021160548483 1.2284801563115242" />
<path style="fill:none; stroke-width:0.03; stroke:%231F3A7A; stroke-opacity:0.41280409687952935; stroke-linecap:round;" d="M -0.20889502376169672 -0.22609642580511563 C 1.2190509323617642 -1.1974330356866945, 1.1174723888159324 0.8195984967180376, 1.233804092624228 1.1871812053782083" />
</svg>)
SwiftUI for Mini Desktop Apps: A Tutorial
August 2022
A little while ago I wrote about the state of SwiftUI. While I was generally skeptical of the technology as a general purpose/widely used…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBBDBE; fill-opacity:0.5;" d="M 0.46257837942508384 -0.031863446951425844 A 0.5190325042990825 0.5190325042990825 0 0 0 -0.0564541248739987 0.48716905734765675 A 0.5190325042990825 0.5190325042990825 0 0 0 0.9816108837241664 0.4871690573476566 A 0.5190325042990825 0.5190325042990825 0 0 0 -0.0564541248739987 0.48716905734765686 A 0.5190325042990825 0.5190325042990825 0 0 0 0.9816108837241664 0.4871690573476564" />
<path style="fill:%23DBC1BD; fill-opacity:0.5;" d="M 0.8478068291103346 -0.29978330537053777 A 0.5455962063682815 0.5455962063682815 0 0 0 0.302210622742053 0.24581290099774383 A 0.5455962063682815 0.5455962063682815 0 0 0 1.3934030354786162 0.24581290099774364 A 0.5455962063682815 0.5455962063682815 0 0 0 0.302210622742053 0.24581290099774397 A 0.5455962063682815 0.5455962063682815 0 0 0 1.3934030354786162 0.2458129009977435" />
<path style="fill:%23DBCDBD; fill-opacity:0.5;" d="M 0.7649717114510571 -0.09849625599619699 A 0.49241077157757357 0.49241077157757357 0 0 0 0.27256093987348357 0.39391451558137663 A 0.49241077157757357 0.49241077157757357 0 0 0 1.2573824830286306 0.39391451558137647 A 0.49241077157757357 0.49241077157757357 0 0 0 0.27256093987348357 0.39391451558137675 A 0.49241077157757357 0.49241077157757357 0 0 0 1.2573824830286306 0.39391451558137636" />
<path style="fill:%23DBBDCE; fill-opacity:0.5;" d="M 0.28842395890156014 0.0669883525031928 A 0.9000616814412448 0.9000616814412448 0 0 0 -0.6116377225396846 0.9670500339444377 A 0.9000616814412448 0.9000616814412448 0 0 0 1.188485640342805 0.9670500339444373 A 0.9000616814412448 0.9000616814412448 0 0 0 -0.6116377225396846 0.9670500339444379 A 0.9000616814412448 0.9000616814412448 0 0 0 1.188485640342805 0.9670500339444371" />
<path style="fill:%23DBD8BD; fill-opacity:0.5;" d="M 0.22415553779475383 0.25008434825570114 A 0.6374402921279411 0.6374402921279411 0 0 0 -0.41328475433318723 0.8875246403836423 A 0.6374402921279411 0.6374402921279411 0 0 0 0.8615958299226949 0.8875246403836421 A 0.6374402921279411 0.6374402921279411 0 0 0 -0.41328475433318723 0.8875246403836424 A 0.6374402921279411 0.6374402921279411 0 0 0 0.8615958299226949 0.8875246403836419" />
<path style="fill:%23DBD2BD; fill-opacity:0.5;" d="M 0.28472819304405883 -0.20427969661248435 A 0.5377227788908554 0.5377227788908554 0 0 0 -0.25299458584679657 0.3334430822783711 A 0.5377227788908554 0.5377227788908554 0 0 0 0.8224509719349142 0.33344308227837094 A 0.5377227788908554 0.5377227788908554 0 0 0 -0.25299458584679657 0.33344308227837127 A 0.5377227788908554 0.5377227788908554 0 0 0 0.8224509719349142 0.3334430822783708" />
<path style="fill:none; stroke-width:0.01; stroke:%231F0891; stroke-opacity:0.3363699978401685; stroke-linecap:round;" d="M -0.2781507375066805 -0.22970183781942466 C -0.2725513866483483 -0.06524200099985483, 1.7902998768483038 0.545015925831859, 1.2828393876449247 1.25052784089596" />
<path style="fill:none; stroke-width:0.01; stroke:%232F0891; stroke-opacity:0.437417870820742; stroke-linecap:round;" d="M -0.2228967188403894 -0.273521468883679 C -0.11740182516154063 -0.22238837569259523, 1.845870920295642 0.36360323903825836, 1.260383731042889 1.1398805095300757" />
<path style="fill:none; stroke-width:0.01; stroke:%23913408; stroke-opacity:0.6606105631094812; stroke-linecap:round;" d="M -0.25380081264315846 -0.13763909772302121 C -0.3206955414171231 0.07723248576355057, 1.530879510952178 0.6971236482709694, 1.114565810513279 1.2552600416774693" />
<path style="fill:none; stroke-width:0.01; stroke:%23914008; stroke-opacity:0.4787022546938178; stroke-linecap:round;" d="M -0.22966366238972055 -0.29690703220952697 C -0.4521467317227702 0.05423771527390919, 1.4217798407944091 0.7574952587226165, 1.1207723341455174 1.180419807344054" />
<path style="fill:none; stroke-width:0.01; stroke:%23913108; stroke-opacity:0.4534908906978147; stroke-linecap:round;" d="M -0.11946896499424267 -0.2111472052241827 C -0.7456663008583149 0.548624385420283, 1.1266713046359016 1.1852910065604523, 1.2597817822784243 1.2061247769901153" />
<path style="fill:none; stroke-width:0.01; stroke:%23090891; stroke-opacity:0.4534476573351895; stroke-linecap:round;" d="M -0.20962300754610555 -0.16660304747924098 C -0.24861540200681875 0.03700950661470237, 1.6602375505260163 0.5543486792284199, 1.2563350133591595 1.16092340983055" />
<path style="fill:none; stroke-width:0.01; stroke:%2391080C; stroke-opacity:0.4466194309136196; stroke-linecap:round;" d="M -0.18264121132638217 -0.2687480064426788 C -0.12915664874273713 -0.17439225584047485, 1.6910075270030955 0.4770206640470334, 1.1434277942329891 1.1379777704447909" />
<path style="fill:none; stroke-width:0.01; stroke:%23912908; stroke-opacity:0.3719591996780852; stroke-linecap:round;" d="M -0.2109070803557825 -0.1865917738659296 C 0.0742402789874671 -0.34641843931947547, 2.017612982367325 0.14558747188612978, 1.2973091956067944 1.1340334363374691" />
<path style="fill:none; stroke-width:0.01; stroke:%2391080E; stroke-opacity:0.3464188376784608; stroke-linecap:round;" d="M -0.17576723256378268 -0.2832851929321164 C -0.16203276954893042 -0.1392380090065261, 1.81916353648483 0.5903956250125646, 1.2582736427905132 1.2662408025732206" />
<path style="fill:none; stroke-width:0.01; stroke:%23912408; stroke-opacity:0.5103796012192386; stroke-linecap:round;" d="M -0.10204331344548973 -0.25937742029372673 C -0.3991546231055897 0.14055159277397933, 1.3539976088347028 0.831273132362859, 1.146471958557004 1.1519512477300613" />
<path style="fill:none; stroke-width:0.01; stroke:%23230891; stroke-opacity:0.35706885624727674; stroke-linecap:round;" d="M -0.17532242015532895 -0.16706095680085709 C -0.15913266861519937 -0.04086433126055536, 1.588844733293978 0.5052503202167785, 1.1342297612725616 1.113071573158764" />
<path style="fill:none; stroke-width:0.01; stroke:%23090891; stroke-opacity:0.43980261310240115; stroke-linecap:round;" d="M -0.22694269376723772 -0.13070058871883616 C -0.3093828849002117 0.12116803993678577, 1.6041284290714128 0.6405099013916071, 1.2422568282834268 1.2007250690491333" />
<path style="fill:none; stroke-width:0.01; stroke:%2391080F; stroke-opacity:0.3683786822045062; stroke-linecap:round;" d="M -0.24404686402017567 -0.2435830354388352 C -0.33464853031552055 0.018170469535023603, 1.6078814342183718 0.5551406546630038, 1.2430059099281423 1.116723433824998" />
<path style="fill:none; stroke-width:0.01; stroke:%231F0891; stroke-opacity:0.3889513407616614; stroke-linecap:round;" d="M -0.289279404265236 -0.10262122623421908 C -0.29567282225186087 0.0694139220166669, 1.6583292948341275 0.5904269082859201, 1.2152393818000384 1.2486751986165252" />
<path style="fill:none; stroke-width:0.01; stroke:%23912708; stroke-opacity:0.47657339291468204; stroke-linecap:round;" d="M -0.22257688659439606 -0.133365043777287 C 0.029461942942804797 -0.2370652992678426, 1.8894246763854166 0.3552377035051022, 1.16578759172633 1.2387604214139896" />
<path style="fill:none; stroke-width:0.01; stroke:%231E0891; stroke-opacity:0.5232854732244333; stroke-linecap:round;" d="M -0.1873078168460252 -0.228201819799932 C -0.5921698833686124 0.3694607826246106, 1.3102615248917364 0.9039923620955108, 1.2651236071999048 1.1117281153201923" />
<path style="fill:none; stroke-width:0.01; stroke:%23540891; stroke-opacity:0.38844115002242874; stroke-linecap:round;" d="M -0.11101900682484096 -0.2660983953332501 C 0.3823818212131903 -0.5897411786124669, 2.181976805178808 0.050322953188975894, 1.2018745953979841 1.1211775643717112" />
<path style="fill:none; stroke-width:0.01; stroke:%23910B08; stroke-opacity:0.38248774718938594; stroke-linecap:round;" d="M -0.14022230801815297 -0.2686961313414441 C -0.2833923724828813 -0.002561616987948656, 1.5956069282590923 0.7893078346078837, 1.1745060671610836 1.2898881301144691" />
<path style="fill:none; stroke-width:0.01; stroke:%23210891; stroke-opacity:0.34363243800182663; stroke-linecap:round;" d="M -0.26631353588820234 -0.21790895456523796 C -0.948806418575612 0.6163514078893524, 0.9486261681810677 1.2357403471571362, 1.1431408325147776 1.1953608224989896" />
<path style="fill:none; stroke-width:0.01; stroke:%23912008; stroke-opacity:0.5014727287867349; stroke-linecap:round;" d="M -0.16487125032792938 -0.19521921049591717 C -0.049045511700644084 -0.15415537680574737, 1.7738360617381201 0.5791933109945353, 1.1264222929069914 1.2857461887895574" />
<path style="fill:none; stroke-width:0.01; stroke:%232A0891; stroke-opacity:0.39094144102488; stroke-linecap:round;" d="M -0.26143417958109283 -0.10104874978749244 C -0.3143135708389182 0.1326389891606174, 1.5795837502797374 0.5305119303968435, 1.2454327071618283 1.1132420415578432" />
<path style="fill:none; stroke-width:0.01; stroke:%23911F08; stroke-opacity:0.4051574688532242; stroke-linecap:round;" d="M -0.2719810268495766 -0.1100084036990216 C -0.22118410716047587 0.0015477905712164008, 1.768599452699 0.5194748161759875, 1.2658205056254541 1.2547822270045679" />
<path style="fill:none; stroke-width:0.01; stroke:%23911608; stroke-opacity:0.3880856963964377; stroke-linecap:round;" d="M -0.15774539461816844 -0.20575889537314512 C -0.15846407162540121 -0.06117324922348055, 1.645193352902866 0.5738283490093582, 1.1610661612708566 1.17885051340168" />
<path style="fill:none; stroke-width:0.01; stroke:%23450891; stroke-opacity:0.24340091617483153; stroke-linecap:round;" d="M -0.2680127435507175 -0.18803991705951362 C -0.06953727311883173 -0.23405859418334768, 1.8669254509860733 0.3627632075129979, 1.186462953571012 1.2228408685882741" />
<path style="fill:none; stroke-width:0.01; stroke:%23912108; stroke-opacity:0.33591169355311; stroke-linecap:round;" d="M -0.21414736081974028 -0.21909736706789298 C -0.41697622433555676 0.14067177421265098, 1.406142357267435 0.6974011653100125, 1.1575379202292848 1.1046051928945781" />
<path style="fill:none; stroke-width:0.01; stroke:%23914108; stroke-opacity:0.3719829868784965; stroke-linecap:round;" d="M -0.17611882081796737 -0.23605656885131843 C 0.3133100967692236 -0.5652761508927568, 2.2837988189069036 0.07636579778018104, 1.2883273702194744 1.2302065548493768" />
<path style="fill:none; stroke-width:0.01; stroke:%232D0891; stroke-opacity:0.3644913059240042; stroke-linecap:round;" d="M -0.2571503022201903 -0.18364503799638932 C -0.022146454398978332 -0.2872771654481102, 1.9415603485749364 0.19503700538691848, 1.2735837582653746 1.137575838126786" />
<path style="fill:none; stroke-width:0.01; stroke:%23912108; stroke-opacity:0.10166545028908625; stroke-linecap:round;" d="M -0.16637755411132568 -0.2419263528468636 C -0.11382091045091236 -0.14676440864394558, 1.7092263902228035 0.44419016461780014, 1.1897068733834757 1.112238996605998" />
<path style="fill:none; stroke-width:0.01; stroke:%23913208; stroke-opacity:0.34724066375221413; stroke-linecap:round;" d="M -0.2426953045575741 -0.2195534349591468 C -0.4023015560416172 0.09430068361481209, 1.4607105538672145 0.6838030347438613, 1.1496576366935176 1.1514609452145506" />
<path style="fill:none; stroke-width:0.01; stroke:%23915B08; stroke-opacity:0.5007458993080734; stroke-linecap:round;" d="M -0.12841662775482654 -0.13441077959338646 C 0.20358066541022668 -0.33774526641299724, 1.9708349476048794 0.18775214554801584, 1.2076712319972946 1.1361026831200378" />
<path style="fill:none; stroke-width:0.01; stroke:%23340891; stroke-opacity:0.41653740366827097; stroke-linecap:round;" d="M -0.29763011118625804 -0.20066396564735478 C -0.12875901092901754 -0.21193549787976246, 1.8490826322353577 0.4055144026824787, 1.1843502021254044 1.247381715985702" />
<path style="fill:none; stroke-width:0.01; stroke:%23100891; stroke-opacity:0.3281996701271069; stroke-linecap:round;" d="M -0.12093699669054483 -0.2592433328418194 C -0.11881967021296003 -0.12097242009914425, 1.673021574774499 0.5841783320554264, 1.1555002779222512 1.1825057835031225" />
<path style="fill:none; stroke-width:0.01; stroke:%23911D08; stroke-opacity:0.44267329225548285; stroke-linecap:round;" d="M -0.1197190758388357 -0.1292036667393597 C 0.025426634041232576 -0.1363428220974749, 1.8085754846377176 0.377888138586672, 1.235645757479233 1.138486939408051" />
<path style="fill:none; stroke-width:0.01; stroke:%23250891; stroke-opacity:0.38748441564102515; stroke-linecap:round;" d="M -0.2310799777643596 -0.19964881697717654 C -0.4888403813912337 0.21697899681213562, 1.3701153806086173 0.7941748433688636, 1.1632455293407027 1.158558807280247" />
<path style="fill:none; stroke-width:0.01; stroke:%23910813; stroke-opacity:0.3001462435368966; stroke-linecap:round;" d="M -0.2145570184783023 -0.297213895383586 C -0.031740242921196815 -0.30472462647905324, 1.8811995248490094 0.4898966376681037, 1.1291635692148825 1.2792303601361068" />
<path style="fill:none; stroke-width:0.01; stroke:%23320891; stroke-opacity:0.3896401411989216; stroke-linecap:round;" d="M -0.2805692368957808 -0.21126782224340146 C -0.7509711573219133 0.49846908027156567, 1.2303092694944529 0.9941938704709117, 1.2597351134002435 1.1298800837546543" />
<path style="fill:none; stroke-width:0.01; stroke:%231F0891; stroke-opacity:0.4704399928423688; stroke-linecap:round;" d="M -0.26018588744115745 -0.16562349982803054 C 0.11005009486500428 -0.37837120855913464, 2.065882326378328 0.2537711350838536, 1.1955137244805294 1.2855216687556945" />
<path style="fill:none; stroke-width:0.01; stroke:%23910F08; stroke-opacity:0.44829110876315187; stroke-linecap:round;" d="M -0.21330267269798908 -0.23238715757540696 C -0.47027536882454196 0.15182840442101042, 1.452023362406717 0.8822984823943384, 1.1678798588764645 1.291146157249461" />
<path style="fill:none; stroke-width:0.01; stroke:%23911708; stroke-opacity:0.37435642911742406; stroke-linecap:round;" d="M -0.1092537115596939 -0.14390477610170782 C -0.3251861763035081 0.24878792121542123, 1.4795515435953908 0.7301372764689353, 1.2802745195284484 1.1042886121350302" />
</svg>)
On consistency
July 2022
When you talk about software development approaches you often find people advocate consistency, in a unsubstantiated way, the way people…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.9671543420066376 -0.4305345554874185 A 0.7381788155832427 0.7381788155832427 0 0 0 0.22897552642339492 0.30764426009582435 A 0.7381788155832427 0.7381788155832427 0 0 0 1.7053331575898802 0.3076442600958241 A 0.7381788155832427 0.7381788155832427 0 0 0 0.22897552642339492 0.3076442600958245 A 0.7381788155832427 0.7381788155832427 0 0 0 1.7053331575898802 0.30764426009582385" />
<path style="fill:%23BDC8DB; fill-opacity:0.5;" d="M 0.7675142138554242 -0.5484164653929421 A 1.1966377406293116 1.1966377406293116 0 0 0 -0.42912352677388743 0.6482212752363696 A 1.1966377406293116 1.1966377406293116 0 0 0 1.964151954484736 0.6482212752363692 A 1.1966377406293116 1.1966377406293116 0 0 0 -0.42912352677388743 0.64822127523637 A 1.1966377406293116 1.1966377406293116 0 0 0 1.964151954484736 0.648221275236369" />
<path style="fill:%23C3BDDB; fill-opacity:0.5;" d="M 0.1722510925742754 -0.8618092015401955 A 0.9653703235438174 0.9653703235438174 0 0 0 -0.793119230969542 0.10356112200362201 A 0.9653703235438174 0.9653703235438174 0 0 0 1.1376214161180926 0.10356112200362165 A 0.9653703235438174 0.9653703235438174 0 0 0 -0.793119230969542 0.10356112200362225 A 0.9653703235438174 0.9653703235438174 0 0 0 1.1376214161180926 0.10356112200362141" />
<path style="fill:%23C2BDDB; fill-opacity:0.5;" d="M 0.48715222613074083 -0.25744000967854863 A 0.3815761086666801 0.3815761086666801 0 0 0 0.1055761174640607 0.12413609898813154 A 0.3815761086666801 0.3815761086666801 0 0 0 0.868728334797421 0.1241360989881314 A 0.3815761086666801 0.3815761086666801 0 0 0 0.1055761174640607 0.12413609898813163 A 0.3815761086666801 0.3815761086666801 0 0 0 0.868728334797421 0.12413609898813131" />
<path style="fill:none; stroke-width:0.02; stroke:%231F5F7A; stroke-opacity:0.34315625244212133; stroke-linecap:round;" d="M 0.48030838023139816 -0.0730106412939742 C 0.5868007973316178 0.205600786610048, 1.7378962153614266 1.2089489651162524, 0.44324223917952643 1.4535391711617023" />
<path style="fill:none; stroke-width:0.05; stroke:%231F4E7A; stroke-opacity:0.37554456165754124; stroke-linecap:round;" d="M 0.5800662704302686 -0.19722060835839894 C -0.8928349868556135 0.09224716392736232, 0.44270261551653867 1.246561382212939, 0.5446043879980353 1.5676715857374788" />
<path style="fill:none; stroke-width:0.02; stroke:%231F447A; stroke-opacity:0.41475406213637506; stroke-linecap:round;" d="M 0.5525003893739172 -0.002933623191170548 C 2.8873972982890765 0.35347129310647807, 4.042614452976852 1.3783693566608728, 0.501482468889115 1.540549414276969" />
<path style="fill:none; stroke-width:0.02; stroke:%231F447A; stroke-opacity:0.5120079913504799; stroke-linecap:round;" d="M 0.5665789313265127 -0.014946235105485026 C -1.8079249269291071 0.050691917127053565, -0.6872492046211781 1.172595921577853, 0.4188520790274079 1.563901270793339" />
<path style="fill:none; stroke-width:0.02; stroke:%231F457A; stroke-opacity:0.35944718939195724; stroke-linecap:round;" d="M 0.5607183507267173 -0.07862959413289879 C 0.14507343761087477 0.18873345364747063, 1.3361859763977764 1.371520252608725, 0.4111183181417434 1.5933014816303828" />
<path style="fill:none; stroke-width:0.02; stroke:%231F3A7A; stroke-opacity:0.44412397209183985; stroke-linecap:round;" d="M 0.48214295679778646 -0.16446145338833862 C -0.4656668806383365 0.11444893140141899, 0.8356776037452035 1.284360722643247, 0.41284284228947843 1.5840775254311956" />
<path style="fill:none; stroke-width:0.05; stroke:%234F7A1F; stroke-opacity:0.45787517149412404; stroke-linecap:round;" d="M 0.5667028583890631 -0.020767013189512795 C 0.9920790667034187 0.2690385764395823, 2.2131725048617508 1.2918330249903693, 0.5593710440298254 1.5720681676116415" />
<path style="fill:none; stroke-width:0.02; stroke:%231F477A; stroke-opacity:0.31985020057135005; stroke-linecap:round;" d="M 0.41946768471523793 -0.10661488049310625 C -3.053229079802237 0.4317020629146082, -1.7901758919892465 1.3308809139034419, 0.5340596018288328 1.4395722536670468" />
<path style="fill:none; stroke-width:0.02; stroke:%231F537A; stroke-opacity:0.28530522566190186; stroke-linecap:round;" d="M 0.5447505480769148 -0.026308262833318954 C 0.9870389074501397 0.23462112340642838, 2.1435371117942594 1.1632246197225666, 0.5686547125940732 1.456668858008559" />
<path style="fill:none; stroke-width:0.02; stroke:%231F427A; stroke-opacity:0.34466902266207233; stroke-linecap:round;" d="M 0.44610569134354816 -0.10871023723937026 C -1.3890598046209441 0.15969700790652852, -0.22029518682594718 1.1369969048083752, 0.4403683460214113 1.414803104731254" />
<path style="fill:none; stroke-width:0.05; stroke:%231F477A; stroke-opacity:0.3892310624480624; stroke-linecap:round;" d="M 0.4129602778282494 -0.19180924817367048 C -0.4981610841374057 0.20312676506301447, 0.8491713490487837 1.0885710502776362, 0.5919407233391545 1.410464844439503" />
<path style="fill:none; stroke-width:0.02; stroke:%233F7A1F; stroke-opacity:0.4114302567178516; stroke-linecap:round;" d="M 0.5456543012694064 -0.08204116648004485 C -1.8309546243125423 0.21370840795408952, -0.5442352296363885 1.2879974150576996, 0.5406019595775081 1.5941802226159352" />
<path style="fill:none; stroke-width:0.02; stroke:%231F597A; stroke-opacity:0.36231094416589016; stroke-linecap:round;" d="M 0.44141840038645375 -0.11412710155751515 C -3.859543985280128 0.4471809044152603, -2.5961348302556804 1.3644286365036327, 0.5423326205664611 1.4438723898372392" />
<path style="fill:none; stroke-width:0.02; stroke:%231F667A; stroke-opacity:0.35289771688957283; stroke-linecap:round;" d="M 0.4897965466881837 -0.13956274438188038 C -0.3506411490877648 0.11031628634926205, 0.8077576641710673 1.146387361810378, 0.4322121138207036 1.4135036151333706" />
<path style="fill:none; stroke-width:0.02; stroke:%231F3D7A; stroke-opacity:0.3812427051129258; stroke-linecap:round;" d="M 0.5900109118932411 -0.03682839800994624 C -1.9253217070854536 0.19179919940937784, -0.7398377245106752 1.220126739205924, 0.5556816002502264 1.5321366431581136" />
<path style="fill:none; stroke-width:0.02; stroke:%23477A1F; stroke-opacity:0.4308032425276127; stroke-linecap:round;" d="M 0.50371891668396 -0.09483268888110306 C -1.6899630183675787 0.13062495175978717, -0.5271004602445868 1.1443613926843081, 0.46617268588740113 1.4474063267373043" />
</svg>)
@FocusState, TextFields, TextEditor in SwiftUI 3.0
November 2021
I've recently been working with SwiftUI on a couple of projects. One major area of improvement in SwiftUI 3.0 (the Autumn 2021 release) is…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23C0BDDB; fill-opacity:0.5;" d="M 0.21463176571239706 -0.25065347422905926 A 0.5818202717193544 0.5818202717193544 0 0 0 -0.3671885060069573 0.33116679749029515 A 0.5818202717193544 0.5818202717193544 0 0 0 0.7964520374317514 0.33116679749029493 A 0.5818202717193544 0.5818202717193544 0 0 0 -0.3671885060069573 0.3311667974902953 A 0.5818202717193544 0.5818202717193544 0 0 0 0.7964520374317514 0.3311667974902948" />
<path style="fill:%23BDC3DB; fill-opacity:0.5;" d="M 0.3953614195658879 -0.21897815085333394 A 0.8547612812116336 0.8547612812116336 0 0 0 -0.45939986164574576 0.6357831303582998 A 0.8547612812116336 0.8547612812116336 0 0 0 1.2501227007775215 0.6357831303582995 A 0.8547612812116336 0.8547612812116336 0 0 0 -0.45939986164574576 0.6357831303583 A 0.8547612812116336 0.8547612812116336 0 0 0 1.2501227007775215 0.6357831303582993" />
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.7037373509413164 -1.2123089949689114 A 1.6269042771272555 1.6269042771272555 0 0 0 -0.9231669261859391 0.4145952821583442 A 1.6269042771272555 1.6269042771272555 0 0 0 2.330641628068572 0.41459528215834357 A 1.6269042771272555 1.6269042771272555 0 0 0 -0.9231669261859391 0.41459528215834457 A 1.6269042771272555 1.6269042771272555 0 0 0 2.330641628068572 0.4145952821583432" />
<path style="fill:none; stroke-width:0.05; stroke:%23052F61; stroke-opacity:0.3995462491474195; stroke-linecap:round;" d="M -0.1218947705999148 1.1066075511126452 C -0.11623976515321055 0.7563282552410128, 1.6936307571577298 0.8637056900052417, 1.3288994924143434 0.019245041444623717" />
<path style="fill:none; stroke-width:0.02; stroke:%23196105; stroke-opacity:0.43791338069699937; stroke-linecap:round;" d="M -0.3284741019103735 1.0063725141032214 C -0.6735352240575241 0.2369720161740437, 1.1721943349649782 0.27153751982926166, 1.1026479825396582 -0.15973295217833908" />
<path style="fill:none; stroke-width:0.05; stroke:%23166105; stroke-opacity:0.44080208175109525; stroke-linecap:round;" d="M -0.008764340336477633 1.2786379820211748 C -0.5661292009287587 0.6895473106534119, 1.0526844672294082 0.17873607322212226, 0.8968028446793955 -0.15713145835712347" />
<path style="fill:none; stroke-width:0.02; stroke:%23051461; stroke-opacity:0.41138047218522217; stroke-linecap:round;" d="M 0.07669965849437335 0.8524769779220351 C -0.3489782383162031 0.1046435720408263, 0.9451638093872906 0.1123949971319832, 1.069487508333033 0.022274587273907714" />
<path style="fill:none; stroke-width:0.05; stroke:%23052261; stroke-opacity:0.5449369528978687; stroke-linecap:round;" d="M -0.023621325933477183 1.2020545422918107 C -0.6111559033266574 0.5546440804615205, 0.8652261170023685 0.1904133393918675, 0.8679347274996954 -0.02981221441429935" />
<path style="fill:none; stroke-width:0.05; stroke:%23050761; stroke-opacity:0.46062646954712116; stroke-linecap:round;" d="M -0.16562834822936903 0.9866396525198393 C -0.04528206078189523 0.816479369071844, 1.6852894590125689 0.6592084352302979, 1.0536554432344207 -0.2514875491960419" />
<path style="fill:none; stroke-width:0.02; stroke:%23053761; stroke-opacity:0.43062639902499245; stroke-linecap:round;" d="M -0.21453968354511213 1.221453790915361 C -0.6702387399634768 0.404405587894994, 1.1117942415333224 0.34400614709042926, 1.1066097970353952 0.02401749216969054" />
<path style="fill:none; stroke-width:0.05; stroke:%233A6105; stroke-opacity:0.3390640128022331; stroke-linecap:round;" d="M -0.06898175585325825 0.9373971720562058 C -0.3345421115702764 0.19249634129751353, 1.2720929330881063 0.3788398552100452, 1.2777073379145072 0.041613405386666164" />
<path style="fill:none; stroke-width:0.05; stroke:%232E6105; stroke-opacity:0.30493933632717946; stroke-linecap:round;" d="M 0.0719336801602092 0.988509585969172 C -0.5419553542009515 0.3391787733954038, 0.8578615144090457 -0.014287359977209563, 0.9120046433827493 -0.18567368330221287" />
<path style="fill:none; stroke-width:0.02; stroke:%23052861; stroke-opacity:0.14384730697198234; stroke-linecap:round;" d="M -0.058487154727594054 1.1489422782101428 C -0.3722107635189065 0.5784080234400409, 1.4950109419156605 0.2947060682388948, 1.1834131170649873 -0.2739728322417909" />
<path style="fill:none; stroke-width:0.05; stroke:%23052E61; stroke-opacity:0.39818980952700994; stroke-linecap:round;" d="M -0.3044688744703764 1.0868927808086233 C -1.0974933320310294 -0.17735794526299295, 0.9233557064922445 -0.215341403368599, 1.2134442499286375 -0.24772826142296325" />
<path style="fill:none; stroke-width:0.02; stroke:%23050C61; stroke-opacity:0.38131111264808276; stroke-linecap:round;" d="M -0.0952136227690106 1.1475378195437056 C -0.881665988807796 0.04284680899008192, 0.9816680077947038 -0.10681339615611568, 1.2303209223294227 -0.17055547368319493" />
<path style="fill:none; stroke-width:0.05; stroke:%23196105; stroke-opacity:0.32643048422220805; stroke-linecap:round;" d="M 0.08511172303250517 0.9213463313871274 C -0.3453913223070343 0.3356070234576648, 1.1844569219239478 0.04497739568631362, 1.0650291220116856 -0.2888863413221372" />
<path style="fill:none; stroke-width:0.02; stroke:%23054361; stroke-opacity:0.3953246522441248; stroke-linecap:round;" d="M -0.3275110049118246 1.1288763682948522 C -0.486096789364991 0.5030081766826808, 1.4396303229155856 0.6804033296156127, 1.2569501402818792 0.020103699697703176" />
</svg>)
SwiftUI in late 2021
November 2021
I've been reviewing the state of declarative UI frameworks such as Flutter and React Native, now we get to the third (and final) one…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDC1DB; fill-opacity:0.5;" d="M 0.587062332860008 0.4920412437433727 A 0.47427062551590654 0.47427062551590654 0 0 0 0.11279170734410143 0.9663118692592794 A 0.47427062551590654 0.47427062551590654 0 0 0 1.0613329583759146 0.9663118692592791 A 0.47427062551590654 0.47427062551590654 0 0 0 0.11279170734410143 0.9663118692592795 A 0.47427062551590654 0.47427062551590654 0 0 0 1.0613329583759146 0.966311869259279" />
<path style="fill:%23BDBEDB; fill-opacity:0.5;" d="M 0.1321941065602561 0.21241991865227405 A 0.5659158782371614 0.5659158782371614 0 0 0 -0.4337217716769053 0.7783357968894355 A 0.5659158782371614 0.5659158782371614 0 0 0 0.6981099847974175 0.7783357968894353 A 0.5659158782371614 0.5659158782371614 0 0 0 -0.4337217716769053 0.7783357968894357 A 0.5659158782371614 0.5659158782371614 0 0 0 0.6981099847974175 0.7783357968894352" />
<path style="fill:%23C3BDDB; fill-opacity:0.5;" d="M 0.15399727234277516 0.050429141162397995 A 0.497299019733694 0.497299019733694 0 0 0 -0.34330174739091884 0.5477281608960921 A 0.497299019733694 0.497299019733694 0 0 0 0.6512962920764691 0.5477281608960919 A 0.497299019733694 0.497299019733694 0 0 0 -0.34330174739091884 0.5477281608960922 A 0.497299019733694 0.497299019733694 0 0 0 0.6512962920764691 0.5477281608960918" />
<path style="fill:%23BDC0DB; fill-opacity:0.5;" d="M 0.6934862457288721 0.40761559070536024 A 0.4573369648403883 0.4573369648403883 0 0 0 0.23614928088848375 0.8649525555457487 A 0.4573369648403883 0.4573369648403883 0 0 0 1.1508232105692604 0.8649525555457485 A 0.4573369648403883 0.4573369648403883 0 0 0 0.23614928088848375 0.8649525555457488 A 0.4573369648403883 0.4573369648403883 0 0 0 1.1508232105692604 0.8649525555457483" />
<path style="fill:%23BDD8DB; fill-opacity:0.5;" d="M 0.8679572707569011 0.45637742490720623 A 0.2403931276074018 0.2403931276074018 0 0 0 0.6275641431494993 0.6967705525146081 A 0.2403931276074018 0.2403931276074018 0 0 0 1.1083503983643028 0.696770552514608 A 0.2403931276074018 0.2403931276074018 0 0 0 0.6275641431494993 0.6967705525146082 A 0.2403931276074018 0.2403931276074018 0 0 0 1.1083503983643028 0.696770552514608" />
<path style="fill:%23C2BDDB; fill-opacity:0.5;" d="M 0.29070362756076273 0.12770944927200711 A 0.43310194967206017 0.43310194967206017 0 0 0 -0.14239832211129744 0.5608113989440673 A 0.43310194967206017 0.43310194967206017 0 0 0 0.7238055772328229 0.5608113989440672 A 0.43310194967206017 0.43310194967206017 0 0 0 -0.14239832211129744 0.5608113989440674 A 0.43310194967206017 0.43310194967206017 0 0 0 0.7238055772328229 0.5608113989440671" />
<path style="fill:%23C0BDDB; fill-opacity:0.5;" d="M 0.19282765332497154 0.43072503435905685 A 0.5471003854961644 0.5471003854961644 0 0 0 -0.3542727321711928 0.9778254198552213 A 0.5471003854961644 0.5471003854961644 0 0 0 0.7399280388211359 0.9778254198552211 A 0.5471003854961644 0.5471003854961644 0 0 0 -0.3542727321711928 0.9778254198552214 A 0.5471003854961644 0.5471003854961644 0 0 0 0.7399280388211359 0.977825419855221" />
<path style="fill:%23BDC2DB; fill-opacity:0.5;" d="M 0.5838788927455223 -0.38842715597299293 A 0.691530092840319 0.691530092840319 0 0 0 -0.10765120009479667 0.30310293686732614 A 0.691530092840319 0.691530092840319 0 0 0 1.2754089855858413 0.30310293686732587 A 0.691530092840319 0.691530092840319 0 0 0 -0.10765120009479667 0.3031029368673263 A 0.691530092840319 0.691530092840319 0 0 0 1.2754089855858413 0.3031029368673257" />
<path style="fill:none; stroke-width:0.01; stroke:%2329590D; stroke-opacity:0.40651646480535225; stroke-linecap:round;" d="M -0.13499152366408346 1.1143622003509634 C 0.15521163128568383 1.3780343855660786, 1.504746078888732 0.30906927866291856, 1.0503826569322128 -0.13416400162455266" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1559; stroke-opacity:0.3889143748872759; stroke-linecap:round;" d="M -0.1358647859329076 1.0550971126727995 C -0.18453988893846512 0.9918539511020249, 1.156900538708532 0.038948434145841815, 1.05785634483846 -0.07738741575185704" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1E59; stroke-opacity:0.27541736703505104; stroke-linecap:round;" d="M -0.14086294821013337 1.1341327060826623 C -0.0052789900340701745 1.2635165259463668, 1.3877542189842254 0.2654559490843449, 1.0975705913949367 -0.05032869239987982" />
<path style="fill:none; stroke-width:0.01; stroke:%2321590D; stroke-opacity:0.3219775393790953; stroke-linecap:round;" d="M -0.052499785176237206 1.0898987831193723 C 0.12070354475458056 1.2517027263452944, 1.4372681362338537 0.2646699809957804, 1.1117832104874148 -0.07286562549385017" />
<path style="fill:none; stroke-width:0.01; stroke:%2317590D; stroke-opacity:0.2699414369750216; stroke-linecap:round;" d="M -0.0888267513974008 1.0694272965266507 C 0.2890825127191974 1.445125636003643, 1.5917408471928658 0.491795969171619, 1.0664397430417243 -0.05801029237222262" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.2619753355589592; stroke-linecap:round;" d="M -0.07153653360096834 1.1043497263195934 C 0.002400000027311555 1.164155663488247, 1.2852851845226905 0.16102635931757237, 1.057134325212536 -0.06960295158053023" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3659; stroke-opacity:0.48873691660362056; stroke-linecap:round;" d="M -0.06554129787543395 1.1137391350836932 C -0.2040871419341208 0.9746992494953624, 1.082054388908499 -0.07478892492711003, 1.0598184899139977 -0.10656853662755877" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1D59; stroke-opacity:0.45757078188243033; stroke-linecap:round;" d="M -0.08719873318596784 1.080542105989499 C 0.1535346693955395 1.3081574377843974, 1.5079842570426367 0.2861856859720937, 1.109665850125317 -0.12215283296834195" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3759; stroke-opacity:0.5806636799285199; stroke-linecap:round;" d="M -0.06295859652697877 1.1272392786776086 C -0.05082522963449032 1.127165207310783, 1.244114394473709 0.07935548514236623, 1.0713480341963664 -0.09264690923222697" />
<path style="fill:none; stroke-width:0.01; stroke:%231F590D; stroke-opacity:0.36790386784350976; stroke-linecap:round;" d="M -0.05559078383590047 1.1262867189064074 C -0.08387375033040312 1.08570321856534, 1.2737293836130235 0.07760910397832776, 1.146352095404718 -0.0631136881057798" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4159; stroke-opacity:0.4337025447774546; stroke-linecap:round;" d="M -0.14281006058806453 1.09633591993514 C -0.1261409333734571 1.101421510963478, 1.2544335129780892 0.10715808381326258, 1.0838243784031736 -0.08261001502880948" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3C59; stroke-opacity:0.3907929811583224; stroke-linecap:round;" d="M -0.11200343322718406 1.0684116470823204 C -0.047957851658428474 1.12139464691588, 1.3344224066094 0.10306808909020893, 1.1130267665442652 -0.1346116970260266" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.4556962905054024; stroke-linecap:round;" d="M -0.12213444757120345 1.1289445827194056 C -0.008524425981120243 1.2300784071341428, 1.3190182948275848 0.22642950705495823, 1.0506747897417044 -0.05181757922340139" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1C59; stroke-opacity:0.41074443351869444; stroke-linecap:round;" d="M -0.1024048179227889 1.0966145024631149 C 0.12899786684989356 1.3295451145826587, 1.510165702301045 0.35399236084339836, 1.1274546044709057 -0.06389123477497395" />
<path style="fill:none; stroke-width:0.01; stroke:%232D590D; stroke-opacity:0.23755109734692495; stroke-linecap:round;" d="M -0.13717059198356202 1.060834133135285 C 0.36346483512629624 1.5968327135432248, 1.7426010488781398 0.6563482409562, 1.095620837595147 -0.06466710205566203" />
<path style="fill:none; stroke-width:0.01; stroke:%2330590D; stroke-opacity:0.4594037121294681; stroke-linecap:round;" d="M -0.11165645020210968 1.0941547065664166 C 0.3279268085663476 1.533396072036207, 1.6932687951042078 0.5362955145918958, 1.0994976965066539 -0.08545281069051974" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.4124406613958661; stroke-linecap:round;" d="M -0.10604731717327334 1.1261832070297577 C 0.3812114911367157 1.5693963191057017, 1.7370418499826217 0.4773119355586446, 1.0823009378868873 -0.14611891410776726" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.4632539299807747; stroke-linecap:round;" d="M -0.1479683462929471 1.1284892022679986 C -0.20388276736969835 1.0546480587547342, 1.2385841515581237 0.0654863657764756, 1.1406597149871902 -0.05413051122325492" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2559; stroke-opacity:0.26933079305180396; stroke-linecap:round;" d="M -0.09627398961501016 1.1389962107758205 C -0.09751083004543026 1.1262621649572147, 1.2243091724253747 0.05190948292783304, 1.060903029056846 -0.11095704905966558" />
<path style="fill:none; stroke-width:0.01; stroke:%2321590D; stroke-opacity:0.38091462728775777; stroke-linecap:round;" d="M -0.06720123439624628 1.0968245259639988 C -0.1779370570265265 0.9789177621107702, 1.1438629710251695 -0.05641070510367918, 1.0954569937710952 -0.11449136745805283" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.24515816543018293; stroke-linecap:round;" d="M -0.09268223990047574 1.0815128530616913 C -0.30976186435939035 0.8403884039303624, 1.0501184764282039 -0.12470275227347316, 1.1175769493800467 -0.06563499085621088" />
<path style="fill:none; stroke-width:0.01; stroke:%2315590D; stroke-opacity:0.5871109740825863; stroke-linecap:round;" d="M -0.1382565386476576 1.076463313745737 C -0.43473481547730974 0.7577926665840312, 0.9903445849726923 -0.2771260267661536, 1.1267075612245279 -0.14900550489761882" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1B59; stroke-opacity:0.5630873802460069; stroke-linecap:round;" d="M -0.08044396480899774 1.134658725630037 C 0.02696536965529639 1.2255008340752254, 1.4226803740308696 0.13245534256554947, 1.147255199148596 -0.1442171802992915" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.4189984870660297; stroke-linecap:round;" d="M -0.14364044121754752 1.1407791566326533 C -0.1602467530430195 1.1129102395707424, 1.20133553910925 0.04388638216517404, 1.0536530022850272 -0.10950351386656466" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1259; stroke-opacity:0.43854064491048667; stroke-linecap:round;" d="M -0.08536027105291477 1.1412261743680885 C 0.09264540398016774 1.2998908032273624, 1.4649258071907512 0.22418916188299576, 1.1215831380083339 -0.11717564283910882" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3259; stroke-opacity:0.5257287707156222; stroke-linecap:round;" d="M -0.11856340099198891 1.1153864646025005 C -0.015725441881100255 1.2020247194852525, 1.3305884974869446 0.14488789765247734, 1.0652897835586606 -0.12097558627122708" />
<path style="fill:none; stroke-width:0.01; stroke:%2337590D; stroke-opacity:0.43828739006631945; stroke-linecap:round;" d="M -0.07884562275859013 1.0691688435763556 C -0.26943943494355355 0.8742713382255092, 1.037257390851495 -0.14652304774273145, 1.0709089843794537 -0.12562909596487715" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2A59; stroke-opacity:0.29129021618884876; stroke-linecap:round;" d="M -0.057251051667503806 1.0789002493006998 C -0.1218052952138512 1.0066628703235692, 1.143370264693508 0.001817678200598527, 1.053645139130024 -0.09425477489307323" />
<path style="fill:none; stroke-width:0.01; stroke:%233A590D; stroke-opacity:0.28144611165145555; stroke-linecap:round;" d="M -0.14368476990949006 1.1460509203955425 C -0.271543458035019 1.0045290356087557, 1.132059751376898 -0.038505641007310576, 1.0988735264213416 -0.08442548584491677" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2859; stroke-opacity:0.4534867622397718; stroke-linecap:round;" d="M -0.05167927973015407 1.1226198750957832 C 0.37710730610008436 1.5037167394450246, 1.6851132194694438 0.4284669517835792, 1.0916951270714546 -0.1262742521809311" />
<path style="fill:none; stroke-width:0.01; stroke:%2316590D; stroke-opacity:0.5268378735503615; stroke-linecap:round;" d="M -0.07190034005273815 1.1176566076780574 C 0.5048726037238355 1.6414445359198397, 1.7921852041921222 0.5973563389897596, 1.0553800229884085 -0.09747008423309836" />
<path style="fill:none; stroke-width:0.01; stroke:%231E590D; stroke-opacity:0.3044444536257758; stroke-linecap:round;" d="M -0.09888540373093066 1.0546009472652011 C 0.15720885715070032 1.311969601670834, 1.4930929267974573 0.36043283420745686, 1.0895277938394292 -0.07574525598901755" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2259; stroke-opacity:0.463141501394833; stroke-linecap:round;" d="M -0.14811265145309072 1.1436933775285971 C -0.42928978025851283 0.8686468583638469, 0.9505349750711157 -0.24139111023938514, 1.0614596138821804 -0.14976538953472088" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2359; stroke-opacity:0.3682690793918285; stroke-linecap:round;" d="M -0.14962921328057355 1.1333987755881365 C -0.05909201167572098 1.2129602539066235, 1.374921415625244 0.1573221157516863, 1.1212590229482344 -0.11384197078840519" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.43783698495452783; stroke-linecap:round;" d="M -0.06547235083527214 1.0841795942106338 C 0.047179540180934176 1.1835072743114758, 1.3684964844729248 0.1759625327411799, 1.1006241045914438 -0.09956190213910848" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1659; stroke-opacity:0.5170561858063231; stroke-linecap:round;" d="M -0.10590625081583697 1.1282797526817556 C -0.13616656699797525 1.0851883241323097, 1.2445904176858797 0.06994467589659203, 1.1179514613574277 -0.07146264316422045" />
<path style="fill:none; stroke-width:0.01; stroke:%2322590D; stroke-opacity:0.6037680236787286; stroke-linecap:round;" d="M -0.13066061209239047 1.0994544835550806 C 0.03570665717171173 1.2558813047986392, 1.4477162630446505 0.2125546788173973, 1.120178987099401 -0.13249595077763726" />
<path style="fill:none; stroke-width:0.01; stroke:%2313590D; stroke-opacity:0.339413778932679; stroke-linecap:round;" d="M -0.13492140045024203 1.0537351760895124 C -0.310570951723801 0.8583689899775095, 1.0649487614085738 -0.13000594236073543, 1.0875388397934527 -0.118668529599671" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2B59; stroke-opacity:0.3063495864655552; stroke-linecap:round;" d="M -0.07392890849440925 1.073108886195051 C -0.1839707704621299 0.9556068093273932, 1.0939954800089289 -0.03917345653349602, 1.0510490412665467 -0.091884730629073" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2659; stroke-opacity:0.41384550370129336; stroke-linecap:round;" d="M -0.13866153661393688 1.1273213717209436 C -0.42025454904359294 0.8327512398851095, 1.0034052046934874 -0.2344217620309531, 1.1203504162522409 -0.12987957203043565" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2059; stroke-opacity:0.39935065106997825; stroke-linecap:round;" d="M -0.09907169205970745 1.0525907806012365 C 0.05293270202118794 1.1951674248654975, 1.3656191110361138 0.22426128040193016, 1.0636451053712006 -0.09366137261009931" />
<path style="fill:none; stroke-width:0.01; stroke:%2323590D; stroke-opacity:0.23586916639756436; stroke-linecap:round;" d="M -0.0964169353611681 1.0816003635214273 C 0.5173511844670423 1.7005395168462214, 1.8964915954024106 0.6950030696986068, 1.12720870454167 -0.10830388178135883" />
<path style="fill:none; stroke-width:0.01; stroke:%2331590D; stroke-opacity:0.42001906908873493; stroke-linecap:round;" d="M -0.07400886320702191 1.092522386516347 C 0.2361463896629905 1.3854689142049512, 1.5755664844300958 0.36139544268530366, 1.1076800340405493 -0.11013467826065877" />
<path style="fill:none; stroke-width:0.01; stroke:%2315590D; stroke-opacity:0.29058623487944435; stroke-linecap:round;" d="M -0.13308650432672364 1.079966409806885 C -0.26934703402733035 0.9215656623548931, 1.1696823927262614 -0.08625218958306174, 1.1495085539161947 -0.1206386169685522" />
<path style="fill:none; stroke-width:0.01; stroke:%2325590D; stroke-opacity:0.3510058358974758; stroke-linecap:round;" d="M -0.12627946545624896 1.1033384931047088 C -0.1507024981079077 1.0659161207118237, 1.2491644758705083 0.041303360904221154, 1.1151767177512577 -0.10837327029939736" />
<path style="fill:none; stroke-width:0.01; stroke:%232A590D; stroke-opacity:0.27915054883437157; stroke-linecap:round;" d="M -0.10121388264103184 1.0583694025536725 C -0.20255948969536336 0.939238504703615, 1.1752594102352691 -0.039076648279148474, 1.124940646897107 -0.10439907365079128" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3C59; stroke-opacity:0.42958266061084094; stroke-linecap:round;" d="M -0.05993816381024278 1.124654221258875 C 0.23351987571450072 1.4046550471696593, 1.5883494459431002 0.3821031497343885, 1.1372208286089345 -0.07866863408136335" />
<path style="fill:none; stroke-width:0.01; stroke:%2310590D; stroke-opacity:0.2945528499579657; stroke-linecap:round;" d="M -0.12551990043314332 1.149336758068892 C 0.07670047005451686 1.3317844100059268, 1.4520387416847023 0.2570435013398965, 1.0845862717682673 -0.10854496696372795" />
</svg>)
Flutter in late 2021
October 2021
It had been some time since I'd used Flutter and I wanted to take another look. I've mostly been working in React and React Native for the…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBBDC3; fill-opacity:0.5;" d="M 0.9574120480311807 0.4645626032138906 A 0.40493146554617215 0.40493146554617215 0 0 0 0.5524805824850085 0.8694940687600627 A 0.40493146554617215 0.40493146554617215 0 0 0 1.362343513577353 0.8694940687600626 A 0.40493146554617215 0.40493146554617215 0 0 0 0.5524805824850085 0.8694940687600629 A 0.40493146554617215 0.40493146554617215 0 0 0 1.362343513577353 0.8694940687600625" />
<path style="fill:%23DBBEBD; fill-opacity:0.5;" d="M 0.15452068435151822 -0.024739530074953442 A 0.4910310776852116 0.4910310776852116 0 0 0 -0.33651039333369337 0.4662915476102582 A 0.4910310776852116 0.4910310776852116 0 0 0 0.6455517620367298 0.46629154761025804 A 0.4910310776852116 0.4910310776852116 0 0 0 -0.33651039333369337 0.4662915476102583 A 0.4910310776852116 0.4910310776852116 0 0 0 0.6455517620367298 0.46629154761025793" />
<path style="fill:%23DBC4BD; fill-opacity:0.5;" d="M 0.16953157100498328 0.4028554203203135 A 0.23823316148905682 0.23823316148905682 0 0 0 -0.06870159048407354 0.6410885818093703 A 0.23823316148905682 0.23823316148905682 0 0 0 0.4077647324940401 0.6410885818093702 A 0.23823316148905682 0.23823316148905682 0 0 0 -0.06870159048407354 0.6410885818093705 A 0.23823316148905682 0.23823316148905682 0 0 0 0.4077647324940401 0.6410885818093702" />
<path style="fill:%23DBBDBD; fill-opacity:0.5;" d="M 0.6327917040512689 -0.4383949555140672 A 0.4558632149069262 0.4558632149069262 0 0 0 0.17692848914434273 0.017468259392859065 A 0.4558632149069262 0.4558632149069262 0 0 0 1.088654918958195 0.017468259392858898 A 0.4558632149069262 0.4558632149069262 0 0 0 0.17692848914434273 0.017468259392859176 A 0.4558632149069262 0.4558632149069262 0 0 0 1.088654918958195 0.017468259392858787" />
<path style="fill:%23DBC9BD; fill-opacity:0.5;" d="M 0.0991678264700071 -0.19573408747803922 A 0.3371039162201698 0.3371039162201698 0 0 0 -0.23793608975016267 0.14136982874213058 A 0.3371039162201698 0.3371039162201698 0 0 0 0.4362717426901769 0.14136982874213047 A 0.3371039162201698 0.3371039162201698 0 0 0 -0.23793608975016267 0.14136982874213067 A 0.3371039162201698 0.3371039162201698 0 0 0 0.4362717426901769 0.1413698287421304" />
<path style="fill:%23DBBDC4; fill-opacity:0.5;" d="M 0.5191873781745262 -0.19767456375210185 A 0.3071026261786087 0.3071026261786087 0 0 0 0.21208475199591753 0.10942806242650686 A 0.3071026261786087 0.3071026261786087 0 0 0 0.8262900043531349 0.10942806242650675 A 0.3071026261786087 0.3071026261786087 0 0 0 0.21208475199591753 0.10942806242650693 A 0.3071026261786087 0.3071026261786087 0 0 0 0.8262900043531349 0.10942806242650667" />
<path style="fill:%23DBBDC5; fill-opacity:0.5;" d="M 0.5069663034085357 0.16803669933914833 A 0.211908751986555 0.211908751986555 0 0 0 0.29505755142198065 0.37994545132570334 A 0.211908751986555 0.211908751986555 0 0 0 0.7188750553950907 0.3799454513257033 A 0.211908751986555 0.211908751986555 0 0 0 0.29505755142198065 0.3799454513257034 A 0.211908751986555 0.211908751986555 0 0 0 0.7188750553950907 0.37994545132570323" />
<path style="fill:%23DBC6BD; fill-opacity:0.5;" d="M 0.9845500788165527 0.26882191968841607 A 0.43851661608791903 0.43851661608791903 0 0 0 0.5460334627286336 0.7073385357763351 A 0.43851661608791903 0.43851661608791903 0 0 0 1.4230666949044717 0.707338535776335 A 0.43851661608791903 0.43851661608791903 0 0 0 0.5460334627286336 0.7073385357763352 A 0.43851661608791903 0.43851661608791903 0 0 0 1.4230666949044717 0.7073385357763349" />
<path style="fill:%23DBC1BD; fill-opacity:0.5;" d="M 0.904763402369064 -0.13586668249393802 A 0.3879875409135774 0.3879875409135774 0 0 0 0.5167758614554867 0.25212085841963944 A 0.3879875409135774 0.3879875409135774 0 0 0 1.2927509432826414 0.25212085841963927 A 0.3879875409135774 0.3879875409135774 0 0 0 0.5167758614554867 0.25212085841963955 A 0.3879875409135774 0.3879875409135774 0 0 0 1.2927509432826414 0.2521208584196392" />
<path style="fill:%23DBD8BD; fill-opacity:0.5;" d="M 0.17388899953600334 -0.016882297893202308 A 0.21239879909220497 0.21239879909220497 0 0 0 -0.038509799556201624 0.19551650119900268 A 0.21239879909220497 0.21239879909220497 0 0 0 0.3862877986282083 0.1955165011990026 A 0.21239879909220497 0.21239879909220497 0 0 0 -0.038509799556201624 0.19551650119900274 A 0.21239879909220497 0.21239879909220497 0 0 0 0.3862877986282083 0.19551650119900255" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1B59; stroke-opacity:0.588101319479578; stroke-linecap:round;" d="M -1.0171274113866737 0.5178129672920355 C -0.9956532406217121 0.7616283264527584, 1.852708160293326 1.6228998549775075, 1.9518196587043297 0.7185730506454822" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.29526023464216894; stroke-linecap:round;" d="M -1.0420216684465737 0.45868377361965784 C -0.9507459169355887 -0.0336869528183219, 1.906987625677382 0.9531354602950315, 1.9642068007375142 0.7796975843276" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D25; stroke-opacity:0.2724887342334451; stroke-linecap:round;" d="M -0.9939853074094716 0.4906334649900593 C -0.990769549770896 0.8581928130273936, 1.9021967620296394 1.8272048218333095, 2.042586062981757 0.7863912492379205" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.4157256523586849; stroke-linecap:round;" d="M -1.047747310996031 0.49808489318128396 C -1.016869577254274 0.6046773949269648, 1.9251006300676679 1.533539680884531, 2.027579179907161 0.7437285810572113" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4759; stroke-opacity:0.6021056984848888; stroke-linecap:round;" d="M -1.0097087540821044 0.47184325203554006 C -0.9833504741598862 0.6028674714368578, 1.8665392230928646 1.538736427220488, 1.9774520493469818 0.744959204267946" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2B; stroke-opacity:0.4114068834104874; stroke-linecap:round;" d="M -1.0276994209324386 0.45080051661189974 C -1.0354155352684673 0.8729356280437528, 1.8351509774342478 1.8760715896466926, 1.9946927568863124 0.7848355219201879" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.17575068985448433; stroke-linecap:round;" d="M -1.0180278890409173 0.4936746203441516 C -0.9766997796724651 0.4514418622587129, 1.8779526199771799 1.3381023895357327, 1.9627421151465252 0.7177670021714495" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D21; stroke-opacity:0.4132923143343038; stroke-linecap:round;" d="M -0.9786420357009835 0.4543864255222754 C -0.8931671452704086 -0.007548073166886771, 1.9095124742931073 0.9485784116782375, 1.9670520798111581 0.757828483873002" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2859; stroke-opacity:0.34002932362054983; stroke-linecap:round;" d="M -0.9541045326922889 0.5356859801700913 C -0.9196543477620543 0.597702242818515, 1.9580406796088643 1.4489179443620146, 2.041174996514341 0.7200697729101603" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2F59; stroke-opacity:0.5241305828057354; stroke-linecap:round;" d="M -1.0182718606712091 0.4508490531396377 C -0.9255652991137939 -0.051084721689120705, 1.9214418443141206 0.9354016293292602, 1.97742791299207 0.7739401572401831" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2759; stroke-opacity:0.5233660583602887; stroke-linecap:round;" d="M -0.9957045100959302 0.5308178602872486 C -0.9870268629484416 0.8757377915898061, 1.9050563946767325 1.8128355742033158, 2.0328512874758187 0.7956717902364574" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D22; stroke-opacity:0.43303586844475417; stroke-linecap:round;" d="M -1.0050196260928226 0.4790305069021991 C -0.9835190028809412 0.6442545375846889, 1.8939022125632516 1.6340400698634272, 2.0210596696437904 0.7985181387611565" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2F; stroke-opacity:0.4688337716068264; stroke-linecap:round;" d="M -1.004616660078043 0.524406370251295 C -0.9606313029919299 0.44122273655732863, 1.8749783419174348 1.3166864695905383, 1.9550850733396532 0.7418562618671335" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.4999266456637789; stroke-linecap:round;" d="M -1.0231580404883478 0.4900584245688176 C -0.9823833407371056 0.46636699302335916, 1.867928377346356 1.4231958048078506, 1.9691131276044005 0.7835060722092011" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D28; stroke-opacity:0.4352641052515142; stroke-linecap:round;" d="M -1.0232883685578316 0.482597828136115 C -1.0160672442533145 0.7957571554782594, 1.896747217499649 1.788354056567765, 2.037913510735051 0.7968902888529125" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D16; stroke-opacity:0.5715859711644979; stroke-linecap:round;" d="M -1.0155324272309254 0.5245392401004277 C -0.971526939993305 0.4363828410663685, 1.8968036656918414 1.29812071405764, 1.9729800713695254 0.721276808872962" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D22; stroke-opacity:0.3180638203003355; stroke-linecap:round;" d="M -1.0355730797479483 0.481788426313957 C -1.0302631466366439 0.8075610549636514, 1.836822793156085 1.7845552680663006, 1.9775662862792958 0.7911274627936062" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D31; stroke-opacity:0.35383787693090224; stroke-linecap:round;" d="M -1.0483521167394185 0.5146230722469761 C -1.0433610368229633 0.9096804478299565, 1.8837633206120161 1.8562063729193117, 2.0164665269470023 0.7808091200923252" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D20; stroke-opacity:0.49190553693466305; stroke-linecap:round;" d="M -0.9945812118513568 0.5252607613702673 C -1.0104395144883018 1.129069379636606, 1.8207626248274933 2.0521322765810757, 1.9714966874224271 0.7900862903916754" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D10; stroke-opacity:0.5548637032502292; stroke-linecap:round;" d="M -0.9747586692699208 0.4826735410271509 C -0.9461802047415878 0.6008460580122115, 1.8665350604783035 1.4783258478189658, 1.9630834637785188 0.7072209658747778" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.41357316201071365; stroke-linecap:round;" d="M -0.9844009871426067 0.45746526457905995 C -1.0184848521245466 1.1036603068598307, 1.793309499436502 2.0902616347386993, 1.9770081347400856 0.7885629366834492" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2E; stroke-opacity:0.4337216908381747; stroke-linecap:round;" d="M -1.0326931713936809 0.5309211358097199 C -0.9862389674105527 0.4395165676300294, 1.9618316561467286 1.3606482317645003, 2.0468452822605667 0.7676633091066657" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D29; stroke-opacity:0.3910439551900179; stroke-linecap:round;" d="M -0.9838485932235947 0.529405165970935 C -0.9240418020449246 0.24725080810419064, 1.8881323882483247 1.1311552927327986, 1.9549066202025538 0.7603350472307938" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D24; stroke-opacity:0.585714951770405; stroke-linecap:round;" d="M -0.9557289855720597 0.5492764498033027 C -0.9344207761101928 0.8040407086769721, 1.8846339521892634 1.6442029797611355, 1.9799248493386101 0.736035022498366" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D29; stroke-opacity:0.5184857994119196; stroke-linecap:round;" d="M -0.9932602732197866 0.45280877748412574 C -0.8887411980477684 -0.18966827173651973, 1.996351141387116 0.7913459448430624, 2.0383283917561785 0.7620285481753762" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D35; stroke-opacity:0.3090302837758017; stroke-linecap:round;" d="M -1.0364851707381502 0.5270311573240375 C -0.9776064989802582 0.280691185371768, 1.9578323442272727 1.2062377123760375, 2.031732840603355 0.7709077874894016" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2E59; stroke-opacity:0.4208738566794262; stroke-linecap:round;" d="M -0.9816505972667914 0.5266903590575536 C -0.9574780132594967 0.7532443950849744, 1.9042310762419348 1.5988056353955669, 1.9967822260781805 0.70914758931166" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D35; stroke-opacity:0.374762432246895; stroke-linecap:round;" d="M -0.953838316290136 0.517370799886886 C -0.9058767786484956 0.3726661308989021, 1.955567410314384 1.238702338803689, 2.028926726983167 0.7198411843344525" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D16; stroke-opacity:0.4294694650150647; stroke-linecap:round;" d="M -0.9783397359406727 0.49739939410185396 C -0.9622825538425914 0.7709095536503849, 1.888438338633192 1.6741697356397018, 2.0023203929880746 0.7385502990965642" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.4210205652341747; stroke-linecap:round;" d="M -1.0221838128190348 0.5453875337083465 C -0.9754736860773179 0.43902680096720464, 1.8727004848520614 1.3402884070345884, 1.955546352960598 0.7851616989689436" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1459; stroke-opacity:0.31638965517616; stroke-linecap:round;" d="M -0.9869059208668821 0.5144285889177713 C -0.9793200797653185 0.8700536025405812, 1.8559593390034743 1.783197190563507, 1.9809216127063127 0.7686732069652992" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D25; stroke-opacity:0.4941073093127043; stroke-linecap:round;" d="M -1.0092629028915454 0.5401446405603485 C -1.026196080977861 1.2408440224887298, 1.84458625365391 2.144499697445185, 1.991036659450247 0.7771833039182361" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1C; stroke-opacity:0.5289783314488947; stroke-linecap:round;" d="M -0.9536008093131014 0.47789734537926876 C -0.9107108267300164 0.42066536188276166, 1.877094069867904 1.3426437188261282, 1.9699414022625272 0.7513953696917182" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1C; stroke-opacity:0.41570507098297965; stroke-linecap:round;" d="M -0.983033936086673 0.4538712214498039 C -0.9336013316099776 0.34621936131520614, 1.9372057363476953 1.3136836133563659, 2.031595268687702 0.7530886309277803" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2A; stroke-opacity:0.46330925990626515; stroke-linecap:round;" d="M -1.0268649763159392 0.5103460553695587 C -0.983124695857152 0.43007004647162794, 1.9122004843108273 1.2963869226179838, 1.9889815213639888 0.7054940280529409" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D3B; stroke-opacity:0.4280989929756524; stroke-linecap:round;" d="M -1.0097630080714368 0.4721564389853059 C -0.9861775429772016 0.6422579471763599, 1.885940820802198 1.5751791673786832, 1.998399751332998 0.7374161449244897" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1B; stroke-opacity:0.5123196860119893; stroke-linecap:round;" d="M -1.026830730544244 0.5324641948263817 C -0.9467164173417218 0.05982264508085966, 1.9516682349006467 0.9980154474533263, 2.0081115533589333 0.7969725314703952" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3359; stroke-opacity:0.43554837122081014; stroke-linecap:round;" d="M -1.0473626525594304 0.5008194393956682 C -1.054459618119881 1.1105786273964635, 1.866860926304605 2.019551984800853, 2.003380834620503 0.731710026420785" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D20; stroke-opacity:0.4161041300248766; stroke-linecap:round;" d="M -0.9720472165155045 0.4873730249127773 C -0.9807704678082005 0.9961179209488225, 1.8442418626599142 1.925151812377743, 1.9893371039824461 0.7594052748930693" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.4903685979355421; stroke-linecap:round;" d="M -0.9731987533157369 0.5444466603072355 C -0.9327826061055653 0.5126075627136486, 1.9449375498549526 1.3766920259690771, 2.024990371760524 0.7413659989596232" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.4776467895208867; stroke-linecap:round;" d="M -0.9829734139522956 0.4903054996630059 C -0.9131992419401816 0.059597474849757415, 1.9189922008895435 0.9360981284881542, 1.9736296017902293 0.7095322589070868" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1D; stroke-opacity:0.5740801204820797; stroke-linecap:round;" d="M -1.0285998219000176 0.5381306703740876 C -1.0364655025524605 1.302351600696597, 1.8296319355741246 2.145734125180981, 1.9536211856710157 0.7174808012450602" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1859; stroke-opacity:0.39642417047995; stroke-linecap:round;" d="M -1.001995153182994 0.549592927520562 C -0.9595685733473589 0.4859649451779038, 1.8837962162288213 1.3548634256961065, 1.9637924188163505 0.7589060274992032" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1B; stroke-opacity:0.5261706012361709; stroke-linecap:round;" d="M -1.043822672653762 0.514969983455468 C -1.0088280644434726 0.5736062318055355, 1.9249160153315805 1.470769456906209, 2.0163803333355053 0.7315657826355717" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D39; stroke-opacity:0.47776660813048255; stroke-linecap:round;" d="M -0.9988335509046926 0.547263143375027 C -0.9724002268006987 0.7464538348967195, 1.9063394548812784 1.5910366448111084, 1.9959769817902466 0.7249486828901753" />
</svg>)
Reviews
Advanced Swift (5.6 Edition)
10/05/2022 by Chris Eidhof, Ole Begemann, Florian Kugler, and Ben Cohen Fantastic in depth resource on Swift, arriving at a good time. Swift is a big…
Micro State Management with React Hooks: Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global states
24/03/2022 By Daishi Kato Asked to name most prominent people working on React state, you would likely come up with Dan Abramov (Redux) and Michel…
iPad Mini 2021
12/12/2021 The iPad virtually no one should buy. Though technically impressive and at least in Apple-world 'reasonably' priced. This is a wonderfully…
iPhone 12 Pro 256GB
12/12/2021 From the vantage point of post iPhone 13 release, how does the 12 Pro look? Well in terms of design great, as that hasn't changed. Though at…
Remarkable 2
12/12/2021 The Remarkable 2 lives up to its name. It is a modern, beautiful device that delivers an incredible note taking experience. It feels like…