An API is an acronym for Application Programming Interface. API's include various tools, protocols, and routines. API's are used as a way for applications to communicate with various systems.
\nBut what does this mean? Well let me explain what they are with some examples. I am going to be using various API's for these examples.
\nLet's Begin
\nLet's start by looking at a favorite website of mine called The Yoda Speak Generator found here.
\nThis website allows users to enter text and get a return of that same text formatted the way Yoda might say it. This is done with an API.
\nYoda Speak: Fun stuff, api's are! Yes, hmmm.
\nAPI’s contain what is called an endpoint to access this API. The endpoint provides the connection to communicate with the API and give it some text to generate into Yoda Speak. The API would then return the generated Yoda Speak to the location of the request.
\nAnother way to think of an API is to think of it like an egg carton. An egg carton holds the eggs, protects them from damage and allows someone who wants to make breakfast a way to open and close the carton to access the eggs inside. The eggs inside would be the data, and the hand reaching into the carton would be much like the communication using an endpoint from a server.
\nOkay, Let's make breakfast.... Just Kidding!
\nFor those of you who are visual Let's look at some examples of the code. These snippets are in PHP because it is my favorite language. Below is a link to download a small zip file called apidemo.zip.
\nDemo Link
\nYou can host this directory on your localhost or on a website if you choose.
\nAfter you have extracted the zip and have a directory such as localhost/apidemo open a browser and enter http://localhost/apidemo/api.php?request=example&name=yourname where localhost is your domain.
To enter this endpoint in an application that makes API calls try Postman. Here is a link for a chrome extension.
\nTry using a GET and a POST method with parameters request=example for the example function in api.php and name=yourname to output a name
\nYou should now see the output \"Your name is yourname\" in your browser
\nexplore the files api.php, API.class.php and MyAPI.php to explore how this simple API is taking in the parameters and outputting a name
\nHopefully, I have explained API's so you have a basic understanding of what they are. There are many types of API's, one that you may see often is RESTful API's, these unlike this example must abide by constraints that have been defined by the REST architecture.
\n","frontmatter":{"date":"June 23, 2015","updated_date":null,"description":null,"title":"What is an API","tags":["API","Postman"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/2d243d0a5adf35bcbc0248f9e4a5054b/630fb/whats-an-api-300x300.png","srcSet":"/static/2d243d0a5adf35bcbc0248f9e4a5054b/69585/whats-an-api-300x300.png 200w,\n/static/2d243d0a5adf35bcbc0248f9e4a5054b/630fb/whats-an-api-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"Let's face it, at some point you look at a radio or a checkbox button and you're like... this looks like something that starts with an \"s…","fields":{"slug":"/engineering/styling-radio-and-check-buttons-with-css/"},"html":"Let's face it, at some point you look at a radio or a checkbox button and you're like... this looks like something that starts with an \"s\" and ends with a \"hit\". I'm here to stop you from saying that word and go on with your life without worrying about those ugly things.
\nWe're just going to use code here. No images, just pure scalable user interface using code. Cool, eh? Let's get started.
\nLet's create our code structure first.
\n<!-- Radio --> \n<label>\n<input type="radio">\n<span>I'm a radio button</span>\n</label>\n<!-- Checkbox -->\n<label>\n<input type="checkbox">\n<span>I'm a checkbox</span>\n</label>If it looks ugly, don't be alarmed. That's normal for an untamed code from the wild. All you gotta do now is to tame it with our very best tool, CSS.
\nFirst thing you have to do is to hide the element that generates the hideous button, which is... DUN DUN DUN... the input tag. Don't worry, we can still trigger it even though it's hidden. How? by nesting it inside the label tag.
\nNow that the default toggles are gone, we need to create our fake —but amazing— toggles.
\nRadio Button
\nWe can't really customize this toggle that much because it needs other toggles to work properly. Let's just prettify it a bit.
\nlabel input[type="radio"] {\n display: none;\n}\nlabel input[type="radio"] ~ span {\n position: relative;\n display: inline-block;\n padding: 3px 0 3px 25px;\n}\nlabel input[type="radio"] ~ span:before {\n content: "";\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n border-radius: 50%;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 300ms ease-in-out;\n}\nlabel input[type="radio"]:checked ~ span:before {\n border: 5px solid #29d;\n}Oh yes! Beautiful toggle. Bonus! Have you ever seen those toggles where it slides to the left and right when you click it? Did you know you can do that too using CSS? Let's try it. First, we're going to design the default look of an unchecked checkbox. By now you know that we need to hide the default toggle. And then add a space on the left of the span using padding. While you're there, add a position relative to because we need to contain the rest of the elements inside the span. Now, let's create our toggles using CSS pseudo element :before and :after. Why? Because generated CSS is easier to handle. This will generate a box looking element. Since it's targeting both pseudo elements, they will look identical and on top of each other. It's time to start prettifying those pseudo elements. For :after, since this is the background where the :before toggle slides through. We need to modify the width to look bigger. Add an inset shadow to make it look like it's pushed through and a red background for an \"off\" effect. For :before, we just need to make it look like a circle and lift it off a bit using box-shadow. The \"on\" part just needs a little bit of pushing to the side and changing the background to blue or green. The CSS is a bit longer here because there's a lot of elements that need to change, but take a chill pill because CSS won't slow your page down. And that's it. Your pretty checkbox or radio button toggles. Social sharing button offers an easy way to distribute your content to a wider audience. The major social providers allow options to configure the content that will be shared programmatically. In this guide we explore the options that you can use in order to configure the shared content of your social shares including: Message, URL, Image, and Image Caption/Description. Facebook Facebook utilizes Open Graph Tags which are meta tags that can be included on your page and are scrapped by Facebook when determining the content that should be shared with a specific button. These tags can be included in the head section of your page. All meta tags should be formatted with a property value of \"og: Example of og meta tags that can be included in your html head tag: If you are modifying these tags it can take some time for the changes to translate over to Facebook. You can refer to this blog on troubleshooting, testing, and force updating your configured sharing systems. Google Google offers multiple ways that you can set the shared content which it intelligently determines the most relevant details to be displayed in the share. This works to varying degrees with the following options available and taking precedence respectively: Below is an example of basic structured data markup: Below is an example of using basic meta tags to define the shared content: Twitter The best way to customize your Twitter shares is to modify the URL query string parameters that gets triggered when the share icon is clicked. Another way is to customize the Various providers will utilize some of the above methods with open graph tags being one of the most common methods for controlling the shared content. Other systems will customize this content based off of parameters that are passed into the script or URL that is used to trigger the share interface. Getting these to be correctly configured can be a bit of a trial and error process, you can use the resources detailed in this blog post to help test and verify that you have correctly configured your social sharing content. Recently, I was working on an implementation to build an embedded app on Shopify with PHP. I realized that the 3rd party PHP SDK recommended by Shopify called \"phpish\" does not support the feature to \"PUT\" assets into your shopify shop's theme. The link to \"phpish\" git repository can be found here, I'd like to thank these guys for their great work, it saved me lots of time to get the implementation on the right track. So if you want to do a PUT API call to Shopify web service, you can do it in raw PHP by customizing a CURL request, this is not very hard. But prior to make the Asset API call, first you need to retrieve the currently activated theme ID by calling the Shopify Theme API call, this part can be done easily with the help of phpish. Then it is the time to customize your CURL request to do the PUT API call, remember phpish stores our information such as Oauth Token and Shop into the $_SESSION, we can leverage on that or manually fill in the correct information Let me briefly explain this snippet, so first you define an array with key and value, key maps to the file name that you want to create, and value is the actual code or asset you want to pass in. Then you create a curl request with method \"PUT\" like all the other requests Next is something special for Shopify, to make an API call to Shopify you have to specify Oauth_Token in your request to tell Shopify who you are, and so does Content-Type. Last but not least, json encode your data array into JSON format and send the request. The last part is just to catch the returned response or show the error message from your CURL request if something is going wrong. Hope this can help someone, happy coding. Are you having trouble with accessing API endpoint? Unsure why your API is not returning data? Most modern browsers have tools or plugins that allows you to quickly and easily test your API calls and see the sample returned data. In this post we go through some tools available for common browsers and web tools that will cut down the total troubleshooting time. Chrome offers a wide variety of apps that are quick and easy to install through the Chrome app webstore. Postman is one of those app and it offers a very robust REST API testing solution. It allows you to quickly create and format a wide range of API calls, and keeps a record of previously accessed APIs for easy reference and reuse. Postman have an easy to understand interface that allows you to quickly reformat the included parameters, headers, and form data. Returned data can be viewed in multiple different formats depending on your preferences. Another added benefit of Postman is its built-in support for common authentication procedures like: Basic Auth, Digest Auth, and OAuth 1.0/2.0. These \"helpers\" allow you to bypass some of the common tasks that can be troublesome in the mentioned protocols such as signing your request(OAuth 1.0) or requesting an Access token(OAuth 2.0). Poster or RestClient are both useful tools that allow you to test out your API calls within Mozilla Firefox. They offer many similar systems as Postman, allowing you to set various parts of your API quickly and easily. With built in features to set such as Base URL, Auth method, Timeout, Action, Content, headers, and query parameters; It returns a complete response object allowing you to troubleshoot APIs before integrating them into your systems. Both RestClient and Poster allow you to save your requests for future use. Runscope: This is a powerful tool that allows you to set up test cases for your APIs. Which makes it easy for you to not only handle many of the features as described in the above two systems, but to also schedule these requests to perform periodically. This allows you to monitor your APIs and have email notifications sent out when specific conditions are met. You can also mask the API requests to run them from different locations worldwide allowing you to test user cases from a global audience. SoapUI: This is an extremely robust solution that can handle your entire testing environment. It also have built in features to test out RESTful API calls, as well as SOAP calls. This solution is very extensive and has many options that cover the full suite of features detailed in the above technologies. On top of that, they have a well formatted instructions available on their site, detailing how to setup and configure the program. Overview Filter Portfolio can be very useful for websites, especially when there is a lot of images you want to show to users. It is always nice to keep it into different categories and allow your user to play with them. But adding a tag and a div on hundreds of images is definitely not fun. Our goal today is to use PHP to generate the Filter Portfolio instead of manually adding them one by one. The logic is like this, first we have a folder to contain all the portfolio images. It could be like this: \"assets->img->logos->businesses\" I know people hate this, but we are going to use a little pre-built javascript file called MixitUp, I promise it is a very easy but powerful tool to use, see a demo here. There is already very comprehensive tutorial on how to install that plugin in their github repository, you can follow either of these. Click this link git -> src to open the repository for the javascript file, download and save it in your asset folder. You can do this right before the closing body tag. You probably have Jquery installed already, but just in case you don't. It is recommended to link your Mixitup function while your document is ready, so add this after the importing lines. Here is where the fun begins! I am not going to do any stylings in this tutorial, since you can always customize it yourself. Okay, first of first, add a div as a container of your filter portfolio section, so: Next, we need to add those clickable filter buttons to the div we just created. We can add them programmatically, but to be honest, it is not that bad to do it manually. Please note, for these The code is pretty straightforward, just want to label out a couple of things. First, we specified which folders we are working with and then we used a built-in recursive iterators to cycle through the folder. For each item we found in every sub-folder, $it->getSubPath will return the sub-folder name and $it->getSubPathName will return the name of the file. Create a div for each image, and play with those returned parameters to fit them into the pattern of MixitUp. The $it->isDot() function and regular expressions are used to filter out some system hidden files such as \".DS_Store\" and others, since we do not want to them to be shown as images. Easy, right? If you like this post, click share and help people who's having this kind of issue. Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients. What does it mean for user authentication? On one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes). On the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies. In this article, we’ll discuss: Third-party cookie restrictions affect user authentication in three ways, as follows. If your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app. If you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials. If you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future. For example, you have apps at Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO. Usually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits. For example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords. Note: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method). Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative. Specific to authentication, Google recommends the following: CHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds. For example, a user visits If the user visits You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes. If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions. However, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues. With Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage. Storage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context. It is most suitable when loading cross-site resources and interactions, such as: Verifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible. As it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options. With Related Website Sets, you can declare a Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe. It is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature. The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication. Related Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited. FedCM API enables federated SSO without third-party cookies. With FedCM API, a user follows these steps for authentication: You can access a user demo of FedCM here: FedCM. For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide. Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different. We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers. Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out. The proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community. Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does. From LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out. Top-level site: It is the primary site a user has visited. First-party cookie: A cookie set by the top-level site. Third-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited
\nlabel.spin input[type="checkbox"] {\n display: none; /*hides ugly toggle*/\n}\nlabel.spin input[type="checkbox"] ~ span {\n position: relative;\n display: inline-block;\n padding: 3px 0 3px 25px; /*adds spacing on the left*/\n}\n/*create our new toggle*/\nlabel.spin input[type="checkbox"] ~ span:before {\n content: "\\2713"; /*add a new check mark*/\n text-align: center;\n font-size: 13px;\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n color: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n border-radius: 50%;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 500ms ease-in-out;\n}\n/*if checked do this*/\nlabel.spin input[type="checkbox"]:checked ~ span:before {\n transform: rotatez(360deg);\n background: #29d;\n border-color: #29d;\n}
\nlabel input[type="checkbox"] { display: none; }
\nlabel input[type="checkbox"] ~ span { position: relative; display: inline-block; padding: 3px 0 3px 35px; }
\nlabel input[type="checkbox"] ~ span:before, label.slide input[type="checkbox"] ~ span:after {\n content: "";\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 300ms ease-in-out;\n}
\nlabel input[type="checkbox"] ~ span:before {\n width: 30px;\n border-radius: 20px;\n box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.4), inset 0 -2px 0 -1px rgba(255, 255, 255, 0.2);\n background: #F22613;\n}
\nlabel.slide input[type="checkbox"] ~ span:after {\n box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n}
\nlabel.slide input[type="checkbox"]:checked ~ span:before {\n background: #29d;\n}\nlabel.slide input[type="checkbox"]:checked ~ span:after {\n left: 13px;\n}\n
\n
\n<!--\n\n\n\n\n\n-->\n
\n
\n<!--\n Your Site Title \n\n\n A description of your site.\n\n-->
\n<!--\n\n--><a> tag by including data-attribute tags as detailed on Twitters Tweet button creation instructions . If you do not have control over the links or triggers that are being used to activate the Tweet popup you can also set Twitter Card meta tags which handle the Twitter customizations.
\n<!--\n\n\n\n\n-->
\n<!-- array("key" => "snippets/put-asset.liquid", "value" => "this is a test to put assets"));\n$ch = curl_init($_SESSION['shop']."/admin/themes/$theme_id/assets.json");\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");\n$headers = array();\n$headers[] = "X-Shopify-Access-Token: ".echo $_SESSION['oauth_token'];\n$headers[] = "Content-Type: application/json";\ncurl_setopt( $ch, CURLOPT_HTTPHEADER, $headers );\ncurl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($data));\n$response = curl_exec($ch);\necho "";\necho curl_error($ch)."";\nvar_dump($response);\ncurl_close($ch);\n?>-->
\n$ch = curl_init($_SESSION['shop']."/admin/themes/$theme_id/assets.json");\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
\n$headers = array();\n$headers[] = "X-Shopify-Access-Token: ".echo $_SESSION['oauth_token'];\n$headers[] = "Content-Type: application/json";
\ncurl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($data));\n$response = curl_exec($ch);Google Chrome
\nMozilla Firefox
\nOther Systems
\n\n
\n\n
\n\n
\n
\n<!--\n-->
\n<!--\n$(document).ready(function(){\n jQuery(function(){\n $(function() {\n $('#Container').mixItUp();\n });\n });\n});\n-->\n
\n
\n<!---->
\n<!-- All \n Eateries \n Cafes \n Bars, Clubs & Lounges \n Lifestyle \n\n Health & Fitness \n Fashion \n Beauty & Spas \n Entertainment --><a> tags, you need to follow the patterns of MixitUp. Basically in class attribute you need to specify \"filter\" for it, and in data-filter, you need to tell which category it is. Next we are going to write some PHP code, to iterate through the destination folder, and process the files within it.
\n<!--\nvalid()) {\n if (!$it->isDot()) {\n $subject = $it->getSubPathName();\n // Mac OS automatically creates .DS_store file to store metadata\n // The following regex is used to ignore those files\n $pattern = '/\\\\.DS/';\n preg_match( $pattern, $subject, $match );\n if( !$match ) {\n $file_path_name = str_replace("\\\\", "/", $subject);\n?>\n <div class="mix getSubPath(); ?> col-md-3 ">\n <img src="" alt="" class="business-logo-img"/>\n \nnext();\n}\n?>\n-->\n
\nHow is User Authentication Affected?
\nExternal Identity Providers
\nWeb SSO
\nexample.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.Federated SSO
\n\n
\nChrome’s Alternatives for Third-Party Cookies
\n\n
\nCookies Having Independent Partitioned State (CHIPS)
\na.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com. b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.Storage Access API
\nRelated Website Sets
\nprimary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.resuestStorageAccessFor() API.Federated Credential Management (FedCM) API
\n\n
\nHow is LoginRadius Preparing for the Third-party Cookie Phase-out?
\nIn Conclusion
\nGlossary
\na.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.References
\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":288,"currentPage":49,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}