{"id":7094,"date":"2020-05-22T21:21:23","date_gmt":"2020-05-22T16:21:23","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=7094"},"modified":"2020-05-22T21:46:39","modified_gmt":"2020-05-22T16:46:39","slug":"google-fonts-load-faster","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/","title":{"rendered":"Making Google Fonts Load ~20% Faster"},"content":{"rendered":"<p>I&#8217;ve always been obsessed with making websites performant. Many sites that I build use Google Fonts, which are already kind of fast and with the introduction of <code><a href=\"https:\/\/addyosmani.com\/blog\/google-fonts-font-display\/\">font-display: swap<\/a><\/code> it&#8217;s become asynchronous in nature.<\/p>\n<p>It&#8217;s like telling the browser that we are OK with the fact that the font loads right away which is unstyled. It&#8217;s what we call FOUT which means <strong>&#8220;Flash of Unstyled Text&#8221;<\/strong>. Now that when you load a website with Google fonts:<\/p>\n<ol>\n<li>It loads the text right away, unstyled that is<\/li>\n<li>Then when Google fonts are done downloading<\/li>\n<li>The text styles are replaced with the Google font<\/li>\n<\/ol>\n<p>But if you follow <a href=\"https:\/\/csswizardry.com\/2020\/05\/the-fastest-google-fonts\/\">Harry Roberts<\/a> who&#8217;s a literal CSS Wizard, his experiments and research led to making Google Fonts even faster by ~20% to ~30%. Let me quote him:<\/p>\n<blockquote><p>If you\u2019re going to use <code>font-display<\/code> for your Google Fonts then it makes sense to asynchronously load the whole request chain.<\/p><\/blockquote>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h2 id=\"making-google-fonts-fast\">Making Google Fonts Fast<a href=\"#making-google-fonts-fast\" class=\"heading-link\">#<\/a><\/h2>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>Let&#8217;s make Google fonts load faster by following Harry&#8217;s findings.<\/p>\n<h3 id=\"step-0-selecting-a-google-font\">Step #0: Selecting a Google Font<a href=\"#step-0-selecting-a-google-font\" class=\"heading-link\">#<\/a><\/h3>\n<p>Go to <code>fonts.google.com<\/code> and select a font to be used by your site. Let&#8217;s say I selected the <a href=\"https:\/\/fonts.google.com\/specimen\/Montserrat?sidebar.open&amp;selection.family=Montserrat:ital,wght@0,400;0,700;1,400;1,700\">Montserrat font<\/a> with 400 and 700 weight for both regular and italic font styles. Google suggests the following embed URL.<\/p>\n<pre class=\"lang:markup\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap\" rel=\"stylesheet\"&gt;<\/pre>\n<p>Where the CSS URL looks like <code>https:\/\/fonts.googleapis.com\/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap<\/code> \u2014 let&#8217;s call this URL <code>$CSS<\/code> for the sake of simplicity in the following examples. Notice that the <code>$CSS<\/code> URL includes <code>&amp;display=swap<\/code> at the end.<\/p>\n<h3 id=\"step-1-preconnect-with-fonts-origin\">Step #1: Preconnect with fonts&#8217; origin<a href=\"#step-1-preconnect-with-fonts-origin\" class=\"heading-link\">#<\/a><\/h3>\n<p>If you open the <code>$CSS<\/code> URL above you&#8217;ll notice that the fonts are loaded from the origin that looks like <code>https:\/\/fonts.gstatic.com<\/code> \u2014 we can <code>preconnect<\/code> to this origin.<\/p>\n<pre class=\"lang:markup\">&lt;!--  Preconnect to the fonts\u2019 origin. --&gt;\r\n&lt;link rel=\"preconnect\"\r\n      href=\"https:\/\/fonts.gstatic.com\"\r\n      crossorigin \/&gt;<\/pre>\n<p>\u2705 Preconnecting to the fonts&#8217; origin is a good idea. It led up to 1200ms loading time saved on the first web page load.<\/p>\n<h3 id=\"step-2-async-css-fetch\">Step #2: Async CSS Fetch<a href=\"#step-2-async-css-fetch\" class=\"heading-link\">#<\/a><\/h3>\n<p>You can use the <a href=\"https:\/\/www.filamentgroup.com\/lab\/load-css-simpler\/\">Filament Group\u2019s simplest print media type trick<\/a>.<\/p>\n<pre class=\"lang:markup\">&lt;link rel=\"stylesheet\"\r\n      href=\"$CSS&amp;display=swap\"\r\n      media=\"print\" onload=\"this.media='all'\" \/&gt;<\/pre>\n<p>Here we ask the browser to load the CSS asynchronously with the <code>print<\/code> context but as soon as the CSS file is loaded we apply it to the <code>all<\/code> context.<\/p>\n<p>As a result in Harry&#8217;s research, the site&#8217;s First Paint is up by 1.6s to 1.7s. However, the first web font however was loaded 500ms slower due to the low priority. Sadly, the <code>print<\/code> stylesheets are loaded with super low priority.<\/p>\n<p>\u26a0\ufe0f While asynchronous CSS is an overall good idea we need to make the CSS loading a high priority.<\/p>\n<h3 id=\"step-3-high-priority-async-css-fetch\">Step #3: High-priority async CSS Fetch<a href=\"#step-3-high-priority-async-css-fetch\" class=\"heading-link\">#<\/a><\/h3>\n<p>In modern browsers, you can make the async CSS fetch high-priority by <code>preloading<\/code> the <code>$CSS<\/code> file.<\/p>\n<pre class=\"lang:markup\">&lt;link rel=\"preload\"\r\n      as=\"style\"\r\n      href=\"$CSS\" \/&gt;<\/pre>\n<p>Preloading a Google font turns out to be a great idea, Harry found out that the first web font load was 600ms faster than usual. Which means we can use preloading in combination with the print media trick. I&#8217;ll recommend using <code>preload<\/code> trick first and then as a fallback we use the <code>print<\/code> media trick mentioned in step #2.<\/p>\n<p>\u2705 <code>preload<\/code> a Google font is a great idea.<\/p>\n<h3 id=\"step-4-load-css-when-javascript-is-disabled\">Step #4: Load CSS when JavaScript is disabled<a href=\"#step-4-load-css-when-javascript-is-disabled\" class=\"heading-link\">#<\/a><\/h3>\n<p>For instances where a user has intentionally disabled JavaScript in their browser, we can use the <code>&lt;noscript&gt;<\/code> tag to load the original <code>$CSS<\/code> as a fallback to everything.<\/p>\n<pre class=\"lang:markup\">&lt;noscript&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"$CSS&amp;display=swap\" \/&gt;\r\n&lt;\/noscript&gt;<\/pre>\n<h2 id=\"final-snippet\">Final Snippet<a href=\"#final-snippet\" class=\"heading-link\">#<\/a><\/h2>\n<p>Finally we end up with the following snippet.<\/p>\n<pre class=\"lang:markup\">&lt;!-- [STEP #1] --&gt;\r\n&lt;link rel=\"preconnect\"\r\n      href=\"https:\/\/fonts.gstatic.com\"\r\n      crossorigin \/&gt;\r\n\r\n&lt;!-- [STEP #3] --&gt;\r\n&lt;link rel=\"preload\"\r\n      as=\"style\"\r\n      href=\"$CSS&amp;display=swap\" \/&gt;\r\n\r\n&lt;!-- [STEP #2] --&gt;\r\n&lt;link rel=\"stylesheet\"\r\n      href=\"$CSS&amp;display=swap\"\r\n      media=\"print\" onload=\"this.media='all'\" \/&gt;\r\n\r\n&lt;!-- [STEP #4] --&gt;\r\n&lt;noscript&gt;\r\n  &lt;link rel=\"stylesheet\"\r\n        href=\"$CSS&amp;display=swap\" \/&gt;\r\n&lt;\/noscript&gt;<\/pre>\n<p>I most definitely recommend checking out the author&#8217;s research and finding here to gain up to 20% load performance improvement for Google fonts.<\/p>\n<p><a href=\"https:\/\/csswizardry.com\/2020\/05\/the-fastest-google-fonts\/\" target=\"_blank\" class=\"shortbutton gray large\">Direct Link \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google fonts now use the display=swap property to make the CSS file load in async fashion. Gain ~20% faster page load by preconnecting and preloading Google fonts.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[215],"tags":[56,269],"class_list":["post-7094","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-google-fonts"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Making Google Fonts Load ~20% Faster<\/title>\n<meta name=\"description\" content=\"Google fonts now use the display=swap property to make the CSS file load in async fashion. Gain ~20% faster page load by preconnecting and preloading Google fonts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahmadawais.com\/google-fonts-load-faster\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making Google Fonts Load ~20% Faster\" \/>\n<meta property=\"og:description\" content=\"Google fonts now use the display=swap property to make the CSS file load in async fashion. Gain ~20% faster page load by preconnecting and preloading Google fonts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahmadawais.com\/google-fonts-load-faster\/\" \/>\n<meta property=\"og:site_name\" content=\"Ahmad Awais\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-22T16:21:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-22T16:46:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2024\/08\/ahmad-awais.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ahmad Awais\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:site\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ahmad Awais\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/\"},\"author\":{\"name\":\"Ahmad Awais\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"headline\":\"Making Google Fonts Load ~20% Faster\",\"datePublished\":\"2020-05-22T16:21:23+00:00\",\"dateModified\":\"2020-05-22T16:46:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/\"},\"wordCount\":568,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"keywords\":[\"CSS\",\"Google Fonts\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/\",\"name\":\"Making Google Fonts Load ~20% Faster\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\"},\"datePublished\":\"2020-05-22T16:21:23+00:00\",\"dateModified\":\"2020-05-22T16:46:39+00:00\",\"description\":\"Google fonts now use the display=swap property to make the CSS file load in async fashion. Gain ~20% faster page load by preconnecting and preloading Google fonts.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/google-fonts-load-faster\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ahmadawais.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Making Google Fonts Load ~20% Faster\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/\",\"name\":\"Ahmad Awais\",\"description\":\"Founder &amp; CEO of CommandCode.ai f\\\/k\\\/a Langbase | Google Developers Advisory Board (gDAB) founding member\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahmadawais.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\",\"name\":\"Ahmad Awais\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"width\":2299,\"height\":1705,\"caption\":\"Ahmad Awais\"},\"logo\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\"},\"description\":\"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \\\"Awais is an awesome example for developers\\\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\\\/ML\\\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\\\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.\",\"sameAs\":[\"https:\\\/\\\/AhmadAwais.com\\\/\",\"https:\\\/\\\/facebook.com\\\/AhmadAwais\",\"https:\\\/\\\/instagram.com\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/x.com\\\/MrAhmadAwais\",\"https:\\\/\\\/youtube.com\\\/AhmadAwais\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Making Google Fonts Load ~20% Faster","description":"Google fonts now use the display=swap property to make the CSS file load in async fashion. Gain ~20% faster page load by preconnecting and preloading Google fonts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/","og_locale":"en_US","og_type":"article","og_title":"Making Google Fonts Load ~20% Faster","og_description":"Google fonts now use the display=swap property to make the CSS file load in async fashion. Gain ~20% faster page load by preconnecting and preloading Google fonts.","og_url":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/","og_site_name":"Ahmad Awais","article_publisher":"https:\/\/facebook.com\/AhmadAwais","article_author":"https:\/\/facebook.com\/AhmadAwais","article_published_time":"2020-05-22T16:21:23+00:00","article_modified_time":"2020-05-22T16:46:39+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2024\/08\/ahmad-awais.jpg","type":"image\/jpeg"}],"author":"Ahmad Awais","twitter_card":"summary_large_image","twitter_creator":"@MrAhmadAwais","twitter_site":"@MrAhmadAwais","twitter_misc":{"Written by":"Ahmad Awais","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/#article","isPartOf":{"@id":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/"},"author":{"name":"Ahmad Awais","@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"headline":"Making Google Fonts Load ~20% Faster","datePublished":"2020-05-22T16:21:23+00:00","dateModified":"2020-05-22T16:46:39+00:00","mainEntityOfPage":{"@id":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/"},"wordCount":568,"commentCount":4,"publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"keywords":["CSS","Google Fonts"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ahmadawais.com\/google-fonts-load-faster\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/","url":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/","name":"Making Google Fonts Load ~20% Faster","isPartOf":{"@id":"https:\/\/ahmadawais.com\/#website"},"datePublished":"2020-05-22T16:21:23+00:00","dateModified":"2020-05-22T16:46:39+00:00","description":"Google fonts now use the display=swap property to make the CSS file load in async fashion. Gain ~20% faster page load by preconnecting and preloading Google fonts.","breadcrumb":{"@id":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahmadawais.com\/google-fonts-load-faster\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ahmadawais.com\/google-fonts-load-faster\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ahmadawais.com\/"},{"@type":"ListItem","position":2,"name":"Making Google Fonts Load ~20% Faster"}]},{"@type":"WebSite","@id":"https:\/\/ahmadawais.com\/#website","url":"https:\/\/ahmadawais.com\/","name":"Ahmad Awais","description":"Founder &amp; CEO of CommandCode.ai f\/k\/a Langbase | Google Developers Advisory Board (gDAB) founding member","publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahmadawais.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b","name":"Ahmad Awais","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","width":2299,"height":1705,"caption":"Ahmad Awais"},"logo":{"@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg"},"description":"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \"Awais is an awesome example for developers\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\/ML\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.","sameAs":["https:\/\/AhmadAwais.com\/","https:\/\/facebook.com\/AhmadAwais","https:\/\/instagram.com\/MrAhmadAwais\/","https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/","https:\/\/x.com\/MrAhmadAwais","https:\/\/youtube.com\/AhmadAwais"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/comments?post=7094"}],"version-history":[{"count":5,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7094\/revisions"}],"predecessor-version":[{"id":7106,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7094\/revisions\/7106"}],"wp:attachment":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media?parent=7094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/categories?post=7094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/tags?post=7094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}