Year: 2023

SQL Server String Split and Agg function

Here is a short example. Let’s say we have this sample JSON output. We would like to split it on “}” characters;

DECLARE @json NVARCHAR(MAX) = '[{
  "text": "Books",
  "nodes": [{
	"text": "Programming Books",
	"rackNumber": "1",
	"moreInfo": [{
			"text": "C# book",
			"price": "$49.99"
		  },
		  {
			"text": "React book",
			"price": "$40.99"
		  }
		]},
		{
	"text": "Database Books",
	"rackNumber": "2",
	"moreInfo": [{
			"text": "SQL Server 2022",
			"price": "$52.99"
  		  },
		  {
			"text": "Maria database",
			"price": "$20.99"
		  }
		]}
	]
}]
'

SQL Server has some handy functions, STRING_Split, to split and to re-create, STRING_AGG. I am going to demo it here;

----split strings to make changes
IF OBJECT_ID('tempdb..#ADDF') IS NOT NULL DROP TABLE #ADDF
;WITH CTE AS
 (
	SELECT value  from STRING_Split(@json, '}')
 )
 SELECT * INTO #ADDF FROM CTE;
 //show me the JSON. The string should be split in two parts
 SELECT * FROM #ADDF

 //TODO..do whatever you want to do with the string JSON array

--return modified string. You should see a single line JSON output here 
SELECT STRING_AGG(value, '}') AS jsonBack
FROM #ADDF;

Happy coding.

Best JavaScript Framework

JavaScript has been widely used for front end development for almost 2 decades. Popular frameworks such as React, AngularJS, and Vue.js are gaining and losing a legion of followers but still manage to rank top in best JavaScript frameworks, while few new competitors have been gaining ground recently to challenge the big 3. As per the State of JS 2022 survey, here are the 8 best JavaScript frameworks for front end development in 2023.

Read more here

20 Best JavaScript Frameworks For 2023

ICONS fonts Vs SVG ICONS

Before the discourse of icon fonts vs SVGs, when browsers had non-existent CSS support, images were the only way for developers to showcase icons using the classic  tag. Here is an example of an image icon.

<a href="contact-us.html">
       <img loading="lazy" src="mail.jpg" alt="email" />
</a>

Icon fonts are vectors making them scalable to any resolution, still they are not free from snags. Using icon fonts can lead to the generation of multiple server requests and can also lead to invisible text flashing during the period when font libraries are still loading. If the browser for some reason does not comprehend the icon font, a blank space is displayed. This is the reason why a lot of developers prefer the latter in icon fonts vs SVG icons.

Verdict on Icon Fonts vs SVG Icons – File Size : As far as file size is concerned Icon font has a slight advantage over SVG. However the difference in file sizes is not that prominent and can be ignored.

Verdict on Icon Fonts vs SVG Icons – Accessibility: When it comes to accessibility, SVG is the clear winner.

Verdict on Icon Fonts vs SVG Icons – Performance: SVGs have a slight edge as Icon fonts are susceptible to occasional failures.

Verdict on Icon Fonts vs SVG Icons – Scalability : In terms of scalability, SVGs have a big advantage over Icon fonts.

Verdict on Icon Fonts vs SVG Icons – Animation : SVGs over a much higher degree of versatility as compared to Icon Fonts in terms of modifications and styling control.

Read more here;

Icon Fonts vs SVG – Clash of the Icons

Chrome Debugging tips

Dev tools are built into the Chrome browser. You can launch the browser and simply launch them with a short cut key (F12 on Windows or CMD_OPT_i on a Mac). Dev tools may launch either docked to a side in your browser or they can be free floating. This behavior can be toggled via the triple dot menu on the top right hand corner of dev tools, as shown in Figure 1.

Figure 1: Changing how dev tools appear

As you can see, dev tools are fairly involved. They’re organized into various tabs, such as Elements, Console, Sources, Network, Performance, and so much more.

Continue reading..