<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KaXxIQmpqK33RF8JM4OySg.jpeg" /><figcaption>A man viewing a tapestry on display in an exhibition at Shahi Qila, Lahore; image by me.</figcaption></figure>Hello, world!I love using Instagram. Or at least I used to, before my feed was hijacked by all these reels and TikTok reposts. But that hasn’t stopped me from using the platform as a gallery for my photographic endeavors. In this era of ‘content-creators’, that’s probably not the right way of using it but it is what it is and I’m too lazy to switch to another platform.Over the past few days, I’ve been exploring the Instagram API for fetching my account media with the purpose of displaying it on <a href="https://muhammadkasim.com">my website</a>. A few months back I was exploring the API to fetch tagged media from the platform for another pet project. On both accounts, I at least, found the API documentation to be confusing. But I’ve butted my head with it long enough to come out the other end a little saner. In this article, I’ll try to help you fetch an Instagram user’s account info and their media. Let’s get started, shall we?In this guide, I’ll mainly be using <a href="https://www.postman.com/downloads/">Postman</a> to make API calls. I’ve also made <a href="https://www.postman.com/muhammadkasim/workspace/dark-matter/collection/3057829-8ae21def-620b-4fb1-b925-8f51a6600957?ctx=documentation">a Postman collection</a> of all the API endpoints we’ll be hitting to get what we need. I used Postman so that you guys can get code snippets for making those same API calls in whatever language or framework you’re working in.<h3>First things first</h3>Okay so before we get started with the cool stuff, like making API calls, we have to configure our app with the right permissions and stuff on <a href="https://developers.facebook.com/apps">developers.facebook.com</a> by registering our app with Facebook. Remember, you need to register yourself as a developer before you can create an app on the above link. If you don’t already have any apps yet, your apps page should probably look something like this.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3e6jjtgu3BkS0-1K0aD9mA.png" /><figcaption>An empty apps page on <a href="https://developers.facebook.com/apps">https://developers.facebook.com/apps</a>.</figcaption></figure><h3>1. Create App</h3>Go ahead and click on the Create App button. You’ll be presented with a screen to select a type for your app. Because all I want to do is fetch a user’s profile and media, I’ve selected the Consumer type. Click on ‘Next’ to give your app a cool name, like test-app. As you click on ‘Next’ again, you’ll be prompted to enter your account password. Once you do that, you have successfully created a Facebook app. But we are not done just yet.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ry66y86h7V18PC0RX0QSAA.png" /><figcaption>Types of Facebook apps you can create.</figcaption></figure><h3>2. Connect Instagram Basic Display product</h3>The Consumer type allows me to connect different Facebook products with my app. The product that we need for our purpose is Instagram Basic Display. This allows the users of our app to get basic profile information, photos, and videos in their Instagram accounts.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9oyxqeE7trccUP8ENVSURA.png" /><figcaption>Facebook products that can be connected with a ‘Consumer’ type app, Instagram Basic Display highlighted.</figcaption></figure>Go ahead and set up Instagram Basic Display. You’ll be presented with a screen that displays the permissions and use cases for this product in detail. Give these a read and create an Instagram app by clicking on the button sitting below permissions.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*usvMNAgjR2QDzUsiu62xow.png" /><figcaption>Details about the Instagram Basic Display product.</figcaption></figure>You’ll be asked to give your Instagram app a name. This is the name that users of our app will see on the permissions window. I’ve named mine ‘My Test App’ for the purpose of this article.<h3>3. Configure Instagram app</h3>Next, you have to configure some callback URLs for your Instagram app. The first one of these is a Valid OAuth Redirect URL — this is the URL users will be redirected to after successfully logging in and allowing permissions. If you’re working on a web app and haven’t already hosted it anywhere or just running it locally, you can provide a URL like: https://localhost:3000/auth. You can change it later on to an actual URL of your application, but for development purposes — this is fine for now.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ku62YHwKAnO4RfoAxCSWrQ.png" /><figcaption>Callback URLs configured for the Instagram app.</figcaption></figure><h3>4. Configure Permissions</h3>The next thing you should configure is the Permissions section. This contains the permissions that your app will ask the user to allow when they login to Instagram. If you’ve been following this guide to this point, you should probably see just 2 permissions listed in this section of your app. Submit both permissions to be added to your app.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XrNNoOFmd9WSopCiPRe-5g.png" /><figcaption>List of permissions you can configure in Instagram Basic Display.</figcaption></figure>As you do that, Facebook will tell you about any missing requirements that your app needs to fulfill before going live. This is the stuff that your main app (the one we created in step 1) is missing — it’s not the Instagram app you’re configuring permissions for. I know it’s a little confusing — this app within an app structure. In my case, the stuff I was missing was: URL to a privacy policy, data deletion URL (you can provide the same URL you did in the previous section), an app icon image and category. You can ignore these for development purposes, but will need to revisit these when taking your app live.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*S_xovGuVqumKMuj18I914Q.png" /><figcaption>Screenshot pointing out different Settings sections.</figcaption></figure>A really cool tool I came across while working on this article was this <a href="https://privacyterms.io/privacy-policy-generator/">Privacy Policy Generator</a>. It’s very configurable in terms of what sections you want to include in your policy, it has a free basic plan and it provides you a link of the generated document, so you don’t have to host it yourself.<h3>5. Add Test Users</h3>As long as your app is in development mode, and not yet live, it can only be successfully accessed by users that are granted an app role. You can verify this by hovering over the App Mode switch at the top of your browser window.<figure><img alt="" src="https://cdn-images-1.medium.com/max/960/1*OF3BKto_oRBk4YQH1mYkzg.png" /><figcaption>Message informing about users who can access your app.</figcaption></figure>So the next step and final step in our configuration is setting up at least one test Instagram user. To do this, you can go to the App Roles section listed in the sidebar, or click on the Add or Remove Instagram Testers button in the section above permissions. For development purposes, I added <a href="https://instagram.com/hermitullah">my Instagram account</a> as a test user. This creates a pending request that the test user can either choose to accept or decline from the <a href="https://www.instagram.com/accounts/manage_access">Apps and websites</a> section in their account settings.With that being done, we’re done with the configuration part of this guide.<blockquote>I’ve documented the Instagram API calls that we will be making from here onwards in <a href="https://www.postman.com/muhammadkasim/workspace/dark-matter/collection/3057829-8ae21def-620b-4fb1-b925-8f51a6600957?ctx=documentation">this Postman collection</a>. To successfully run the requests in this collection, you will need to update <a href="https://www.postman.com/muhammadkasim/workspace/dark-matter/collection/3057829-8ae21def-620b-4fb1-b925-8f51a6600957?ctx=documentation&amp;tab=variables">collection-level variables</a> step by step as we go.</blockquote>Below, I’ve added a description of the variables created in the collection. Depending on what exactly you are reading this guide for, you might not need the last two.<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/12d70fc302f06ae778ddbcd083e21eb6/href">https://medium.com/media/12d70fc302f06ae778ddbcd083e21eb6/href</a></iframe><h3>6. Implement Authorization Window</h3>Now we can move on to merrier parts of the guide — namely, making API calls to fetch our fancy account media. Doing that requires the proper authentication token. There are two <a href="https://developers.facebook.com/docs/instagram-basic-display-api/overview#instagram-user-access-tokens">types of authentication token</a> you can use to make requests to Instagram API: short-lived token and long-lived token. Short-lived access tokens are valid for 1 hour, but can be exchanged for long-lived tokens. Long-lived tokens are valid for 60 days and can be refreshed before they expire. You can also use <a href="https://developers.facebook.com/tools/debug/accesstoken/">Facebook’s access token debugger tool</a> to know more details about an access token, like its expiry time, validity and app permissions allowed by the user.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gEIvKxJJlcv2GfYHvgPA6Q.jpeg" /><figcaption>Flowchart for getting authentication token to access Instagram API.</figcaption></figure>Copy URL from <a href="https://www.postman.com/muhammadkasim/workspace/dark-matter/request/3057829-623326df-6e4a-4cc9-bc53-bfb0c8b7b253">the first request in Postman collection</a>, paste it in the browser and replace the variables REDIRECT_URL and IG_APP_CLIENT_ID with appropriate values.<pre>https://api.instagram.com/oauth/authorize?client_id={{IG_APP_CLIENT_ID}}&amp;redirect_uri={{REDIRECT_URL}}&amp;scope=user_profile,user_media&amp;response_type=code</pre>You should be able to see an Instagram login window at this point. Go ahead and login using a test Instagram user account you configured. Allow permissions. You should now be redirected at: {REDIRECT_URL}?code=AQDbMy….<h3>7. Get a short-lived token</h3>We can now use authorization code from the URL we’re redirected to, to get a short-lived token. Update variable IG_APP_CLIENT_SECRET in the Postman collection with the correct value, copy-paste the code into <a href="https://www.postman.com/muhammadkasim/workspace/dark-matter/request/3057829-fcf4d62c-bdd9-4d02-abf4-d6b807153171">the second request</a> and hit send.Note that this is a POST request and you have to send the data in request body instead of as parameters.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*x1P0gp0-LPlO3h0SCI9Vpg.png" /><figcaption>Screenshot of the second request in the Postman collection; request to get a short-lived token.</figcaption></figure>Upon hitting send, you should get a response like this:<pre>{ &quot;access_token&quot;: &quot;IGQV...&quot;, &quot;user_id&quot;: 12345678901234567 }</pre><h3>8. Exchange short-lived token for a long-lived one</h3>Copy the access_token from response of the previous call, and update the value of access_token parameter in <a href="https://www.postman.com/muhammadkasim/workspace/dark-matter/request/3057829-437b7d09-0a60-4b17-a8b6-293d456330b2">the third request in Postman collection</a>. Hit send and boom. The response body should look something like this:<pre>{ &quot;access_token&quot;: &quot;IGQV...&quot;, &quot;token_type&quot;: &quot;bearer&quot;, &quot;expires_in&quot;: 5106863 }</pre>You now have a long-lived access token which will expire in 5106863 seconds. That’s about 60 days.When implementing this in your app, you can save either the short-lived or long-lived access token in a cookie — depending on how long you want the user to remain logged in. You can then use token value from the cookie to send requests to Instagram API.<h3>9. Get basic profile info</h3>Now that we have a long-lived token, we can use it to fetch the logged in user’s profile info. Update the value of IG_LONG_LIVED_ACCESS_TOKEN variable in the Postman collection. Open <a href="https://www.postman.com/muhammadkasim/workspace/dark-matter/request/3057829-149e8011-ca1b-46aa-adcd-85bce2517f89">the fourth request </a>and hit send.<pre>https://graph.instagram.com/me?fields=id,username,media_count,account_type&amp;access_token={{IG_LONG_LIVED_ACCESS_TOKEN}}</pre>You should get a response like this:<pre>{ &quot;id&quot;: &quot;1234567890123456&quot;, &quot;username&quot;: &quot;dohnjoe&quot;, &quot;media_count&quot;: 111, &quot;account_type&quot;: &quot;PERSONAL&quot; }</pre>If you carefully compare the user_id and id in response bodies of request 2 (short-lived access token) and 4 (user profile info) — you can see that they differ a lot from each other even though we’re talking about the same user here. I don’t know why this is so, if you have any information regarding this, let me know in the comments below. I tried fetching profile info and media using both these IDs and yielded the same result.<h3>10. Get account media</h3>Using the access token, we can also get account media for the logged in user. If you have been updating the variables in the Postman collection up to this point, you should be able to fetch account media by opening<a href="https://www.postman.com/muhammadkasim/workspace/dark-matter/request/3057829-437b7d09-0a60-4b17-a8b6-293d456330b2"> the fifth request</a> in the collection and hitting send.<pre>https://graph.instagram.com/me/media?fields=id,caption,media_url,media_type,timestamp&amp;limit=10&amp;access_token={{IG_LONG_LIVED_ACCESS_TOKEN}}</pre>You should get a response like this:<pre>{ &quot;data&quot;: [ { &quot;id&quot;: &quot;12345678901234567&quot;, // post ID &quot;caption&quot;: &quot;hello, world #programming&quot;, // post caption, including any hashtags &quot;media_url&quot;: &quot;https://scontent.cdninstagram.com/v/...&quot;, // URL to the uploaded media in this post &quot;media_type&quot;: &quot;IMAGE&quot;, // or VIDEO, CAROUSEL_ALBUM &quot;timestamp&quot;: &quot;2022-11-10T08:23:34+0000&quot; // post publish date in ISO 8601 format }, ... ... ... ], &quot;paging&quot;: { &quot;cursors&quot;: { &quot;before&quot;: &quot;QVFIUlJuZAWRXM0ktTDYxYklMMi02YVBiUkUyQXB2U2QwOGV2RUNhcGlVemZAEQzAta3E4emFLWlh5VS1qd256dUpEeVFVaEw1cTZAuUGZAEcVc0bkJDT0xpVjh3&quot;, &quot;after&quot;: &quot;QVFIUlFEdk8wMDJ4cmZAVcGM2YmR2TVgxd2tyQldyNUg3emhseFlrS0VCLS1ka3YwaWlyRDQzbTFHQ2hkTUZAVTkg1azh3RGJiYzZAiRU43alYwYWRjUGF6dV9B&quot; }, &quot;next&quot;: &quot;https://graph.instagram.com/v15.0/{{USER_ID}}/media?access_token={{IG_LONG_LIEV_ACCESS_TOKEN}}&amp;fields=id%2Ccaption%2Cmedia_url%2Cmedia_type%2Ctimestamp&amp;limit=10&amp;after=QVFIUlFEdk8wMDJ4cmZAVcGM2YmR2TVgxd2tyQldyNUg3emhseFlrS0VCLS1ka3YwaWlyRDQzbTFHQ2hkTUZAVTkg1azh3RGJiYzZAiRU43alYwYWRjUGF6dV9B&quot; } }</pre>You can read up more about <a href="https://developers.facebook.com/docs/instagram-basic-display-api/reference/media#fields">the fields you can fetch</a> on Facebook docs.<h3>11. Fetch carousel media</h3>If you have a lot of carousel albums in your account media and want to fetch all their child posts’ media URLs in a single API call, you can add children{media_url} to the fields parameter in the previous call like this.<pre>https://graph.instagram.com/me/media?fields=id,caption,media_url,media_type,timestamp,children{media_url}&amp;limit=10&amp;access_token={{IG_LONG_LIVED_ACCESS_TOKEN}}</pre>If you only add children to fields, and not children{media_url}, you’ll only get IDs for the children posts.Alternatively, if you want to fetch media URLs for a specific carousel post, you can do something like this.<pre>https://graph.instagram.com/{{IG_POST_ID}}/children?fields=id,media_url&amp;access_token={{IG_LONG_LIVED_ACCESS_TOKEN}}</pre>And there you have it, if you have been following the guide successfully till now — you should be able fetch account media posts for your logged in user. One important thing to note is that you won’t be able to access live data (meaning data of user accounts that are not test users) unless you have a business account and your app is in Live mode.Thanks for reading the post. Hope you’ve picked something up from this guide. Please let me know in the comments below how I can improve the article in terms of reading, or any other suggestions. Ciao!<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2FcXblnKXr2BQOaYnTni%2Ftwitter%2Fiframe&amp;display_name=Giphy&amp;url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FcXblnKXr2BQOaYnTni%2Fgiphy.gif&amp;image=https%3A%2F%2Fi.giphy.com%2Fmedia%2FcXblnKXr2BQOaYnTni%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="362" frameborder="0" scrolling="no"><a href="https://medium.com/media/9136326bdaa1f6d0d4d11e4be6796ef3/href">https://medium.com/media/9136326bdaa1f6d0d4d11e4be6796ef3/href</a></iframe><h4>Additional References</h4><ul><li><a href="https://developers.facebook.com/products/instagram/success-stories/">Instagram API case studies</a></li><li><a href="https://developers.facebook.com/docs/instagram-basic-display-api/">Instagram Basic Display API docs</a></li><li><a href="https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-profiles-and-media">Get User Profiles and User Media</a></li><li><a href="https://developers.facebook.com/docs/instagram-basic-display-api/guides/long-lived-access-tokens">Long-lived access tokens</a></li><li><a href="https://developers.facebook.com/docs/permissions/reference">Permissions and scopes</a></li><li><a href="https://developers.facebook.com/tools/debug/accesstoken/">Access Token Debugger</a></li></ul><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=5ab29c219ab3" width="1" height="1" alt="">

Fetch account media using Instagram API

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1OkYzw5R6T60oabVReYHZA.jpeg" /><figcaption>Sun setting on Islamabad, image by me</figcaption></figure>“Satori” is a Japanese Buddhist term for awakening, comprehension or understanding. Jospeh Cambell, an American philosopher, once said that when we view a piece of art that is meaningful to us, it has the potential to give us the same thing that Buddhists strive for, which is “satori”. Cambell described this as a moment when brain’s chatter stops, just for an instant — a very precious instant. He termed it as “aesthetic arrest”.I’ll be discussing 3 reasons why I believe art is important to our existence. Every child is an artist. We just don’t see them as artists because maybe we don’t understand its importance.What is art in its most basic form? Expression. Just like in the sciences, where equations enable us to express a problem or phenomenon in a way that others can understand, arts enable us to express the human condition. But with arts, you have many modes of expressions available at your disposal — writing, sculpting, painting, music, poetry, film, theater and so many more. Each of these mediums have their own nuances, tools and jargon. One thing I noticed while I was writing this was that no matter what medium you choose to dabble in, you have to get your hands dirty — you have to do the practical. Apparently, you can’t major in theoretical arts. But some people still manage to do just that — they’re called the critics.Art is universal. Okay, maybe not universal but it sure has a far bigger audience, and that’s because, we as humans want that connection with others. Let’s take music here as an example. People listen to music for all kinds of different reasons — when they’re happy, when they just want to groove to a beat or when they’re trying to get over a relationship or trying to cope with the death of a loved one. But to think that someone living in a different part of the world than theirs made a melody that brings home their feelings and emotions about a subject matter — that’s real power. About a couple of years ago, the vocalist of a band I used to listen to as a teenager died. Their initial stuff was pretty loud and angsty, and it made sense at that age. I used to do the whole head banging and silent screaming routine while listening to them — really took out all that teenage anger and frustration. So after he died, I went to YouTube to read people’s comments and reactions about his death and this is what I learned. A lot of people there had been very depressed in their lives for a lot of different reasons, some even to the point of committing suicides — which they didn’t because of the band’s music and how it helped them cope with their depression in their own ways. I think that says a lot about the universality of music, and arts in general.The last thing I want to discuss is how arts connects us to our past. Art is to human race what your browser history is to you; it can tell us things like where we’ve been, what we’ve been up to, what we should’ve and shouldn’t have done or when we’ve been naughty or irrational. That does not mean that art only has meaning once its old. It’s a reflection of societies and their thought processes. It can tell us what a culture thinks about a given subject matter today — and by extension, where they could go from here in the future. To put it more precisely, art connects us to our past and gives us a vision for the future.To sum it all up, the purpose of art is not supposed to just be beautiful and sit in a museum somewhere — art is supposed to be meaningful, controversial and challenging to our very notions and sensibilities. Because “the principles of true art is not to portray, but to evoke”. Because its true purpose is to record the human history and propel us into, an ideally, better future. So I guess the idea is to not let that child inside each of us die, to keep it alive in some way. Because maybe we need to hear what it has to say.<h3>“Hang on to your youthful enthusiasms, you’ll be able to use them better when you’re older.”</h3>— Seneca the Younger<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=b494d508da71" width="1" height="1" alt="">

Why art?

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*g10NWDm4UN8rLCkZgP2-gg.jpeg" /><figcaption>forgotten notes, image by me</figcaption></figure>Hello, world!I’m a software engineer by profession and procrastinator by passion. That second part of who I am makes me a lazy person I guess; but as a lazy person, I try to look for shortcuts to get things done quicker in my day job. And no, I don’t mean writing hack code all the time.I’ve been using VS Code for the past 3 years and I love it. I want to share with you some of its shortcuts that I’ve picked up along the way, so you too can impress your co-workers with your agility and keyboard prowess.<h4>Command Palette</h4>Use Ctrl+Shift+P command to open up VS Code’s command palette. Here you can search for any built-in actions, and the ones that come from any extensions you might have installed.<figure><img alt="" src="https://cdn-images-1.medium.com/max/744/1*aUeaZvovF2yxKjZWvghuvA.png" /><figcaption>Ctrl+Shift+P — Opens up the command palette</figcaption></figure><h4>Quick Open</h4>No matter how good you are, you can’t remember all the files and their paths in a codebase. Ctrl+P command can help you quickly find that one file in your current codebase you need to copy that snippet from.<figure><img alt="" src="https://cdn-images-1.medium.com/max/736/1*hOgaSxA4Fs1oDiABqa2dSw.png" /><figcaption>Ctrl+P — Use it to search for and open a file</figcaption></figure><h4>Find a symbol</h4>Sometimes you remember that function you wrote but can’t remember where you defined it. These shortcuts can help you find symbols (functions, variables, properties and such) quicker across files in your project.<ul><li>Ctrl+Shift+O: Navigate symbols inside a file. By typing : the symbols will be grouped by category.</li><li>Ctrl+T: Some languages support jumping to a symbol across files. You can search for and navigate to symbols across files using this command.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/734/1*nWMUZ3hXo5O-pliB5mtKDg.png" /><figcaption>Ctrl+T — Search for and navigate to symbol across files</figcaption></figure><h4>Find it faster</h4>I’m sure you know all about finding and replacing but I’m still putting it in here in case you are not aware of a few pro-tips.<figure><img alt="" src="https://cdn-images-1.medium.com/max/517/1*7hUqAvjuxk4idx7hNeOYow.png" /><figcaption>Ctrl+F — Find text inside a file, the 3 options on the right make this pretty powerful</figcaption></figure><ul><li>Ctrl+F: Finds text inside a file. But have you noticed the 3 options on the right side of the find bar that comes up when you press Ctrl+F? The 3 options are: Match Case Sensitive, Match Whole Word and Match Regular Expression.</li><li>Ctrl+Shift+F: Finds text across all files in your project or workspace. Here too, you can take advantage of the 3 options I mentioned earlier. You can also exclude or include folders to further scope down your search.</li></ul>Anything that can be found can also be replaced. You can use Ctrl+H or Ctrl+Shift+H to replace text in or across files.<h4>Select occurrences</h4>Making multiple selections and changing stuff is usually faster than the find-replace routine. Use these commands to modify multiple occurrences of a text quickly.<figure><img alt="" src="https://cdn-images-1.medium.com/max/894/1*AVtfxkTDLUSop3qMsm14vQ.png" /><figcaption>Ctrl+D — Multiple selectors at work</figcaption></figure><ul><li>Ctrl+D: Select a piece of text and use this command to select the next occurrence of that text in current file. You can modify selection according to the options we talked about in find.</li><li>Ctrl+Shift+L: Select a piece of text and use this command to select all occurrences of that text in current file.</li></ul><h4>Multiple Cursors</h4>You can set multiple cursors as well — use these to modify text at multiple locations quickly. You can add cursors up or down, or manually by clicking at a location in a file.<ul><li>Ctrl+Alt+Up/Down: Add multiple cursors up or down using this command.</li><li>Ctrl+Click: Use this combo to manually add cursors in random locations in the file.</li></ul><h4>General Useful Commands</h4>These are some additional commands I find helpful in my workflow.<ul><li>Ctrl+B: Hide/show sidebar</li><li>Ctrl+`: Hide/show integrated terminal</li><li>Ctrl+J: Hide/show panel</li><li>Ctrl+|: Split current editor</li><li>Ctrl+K+0: Minimize all brackets within file</li><li>Ctrl+K+J: Expand all brackets within file</li><li>Ctrl+Shift+K: Delete current line</li><li>Alt+Shift+F: Format file according to the formatter for the type of file you’re working with</li><li>Ctrl+Tab: Go to next open tab (by default tabs aren’t cycled sequentially)</li><li>Ctrl+Shift+Tab: Go to previous open tab (by default tabs aren’t cycled sequentially)</li><li>Ctrl+Shift+T: Re-open previous opened tab</li><li>Ctrl+Shift+Up/Down: Copy complete line up or down</li><li>Ctrl+/: Comment out current line</li><li>Ctrl+Shift+A: Add comment block around selected text</li></ul><h4>But remember…</h4>You can always remap shortcuts to a different key combo (you might be stepping on other shortcuts’ toes though) or install a Keymap Extension for the editor you are most used to.You can also add shortcuts to some tasks that might not have been added by default. One shortcut I’ve enabled for my workflow is Ctrl+Alt+S to Save All.I love using shortcuts because it keeps me from reaching for a trackpad to do the most basic stuff and to speed up the menial processes of writing and editing code — this helps me focus on the code instead of the mechanics of actually writing (read copying, cutting, pasting, occasional writing) it.Thanks for reading the post. Hope you’ve picked up a few useful shortcuts. Also do let me know if I haven’t mentioned any cool ones that you use. Clap and share. Ciao!<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2F3aFHz2KKt0EfK%2Ftwitter%2Fiframe&amp;display_name=Giphy&amp;url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F3aFHz2KKt0EfK%2Fgiphy.gif&amp;image=https%3A%2F%2Fi.giphy.com%2Fmedia%2F3aFHz2KKt0EfK%2F200.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="243" frameborder="0" scrolling="no"><a href="https://medium.com/media/3c4227be2f0d8cbc35ba04728d11cb37/href">https://medium.com/media/3c4227be2f0d8cbc35ba04728d11cb37/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=86b74bdde0a9" width="1" height="1" alt="">

Shortcuts are good

<h3>Mood Swings</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IDwe9BmV2DuIQX73-2bl3g.jpeg" /><figcaption>one world, one soul — lyric from Pink Floyd’s Sorrow, image by me</figcaption></figure>I hadn’t smoked a cigarette all day. I thought I could quit smoking just like that. Again. I mean I’ve tried quitting before and failed. This time was no different. It was Eid day, Eid-ul-Azha, the meaty Eid — and I had been having mood swings.First, I had an argument with my dad when we was telling my brother to hurry up and go to my uncle’s for the qurbani. Then later in the day I had an argument with my mom when I said I wanna buy her a new set of glasses. She started fussing about me not saving enough and that even if I buy her that new set of glasses, she should be coming with me. I couldn’t take it so I went to my room and shut the door behind me — rather loudly too. It was all so stupid, I know.Our obnoxious door bell rang, I hurried out of my room to attend the door. I took a peek in the kitchen and saw that my mom was bleeding all over a kitchen cloth. She had accidentally cut herself with a sharp knife while trying to remove fat from the meat. I started panicking, seeing how much she was bleeding and ran to ask my dad to help mom while I went to see who was on the door.This is where I glide over my embarrassing panicky moments and go straight to when I rushed mom to the hospital.It was rather quiet at the hospital, which is always a good thing, but I could still see an ambulance stopping outside of the Emergency and patients being moved around on gurneys. The CMO directed us to the surgical wing where a young doctor was lazily sitting in her chair, chatting up her colleague.The doc took a look at my mom’s finger, which hadn’t stopped bleeding by the way, probably because of that blood thinning med she takes to keep her cholesterol levels in check; old age is a bummer. As the young doc was writing up the prescription, she was telling us that we had to go to the next room for stitches. My mom didn’t want stitches.The doc looked up at my mom with a mild expression of mock disbelief, “Auntie, why don’t you want stitches?”.“Because stitches mean that she won’t be able to get back to the whole meat business in her full working capacity.”, I intervened with a sprinkle of sarcasm in my tone, directed at my mom of course.“Auntie, it’s either the stitches or a bloody meal. You wouldn’t want that, would you?”. The doc continued with the prescription.In the end, my mom ended up not getting any stitches on account of the wound not being very deep.The reason I decided to write this piece was not to tell you this anecdote, rather it was something like this: in that visit to the hospital, I garnered huge praise for the doctors and medical staff who were present there to serve the medical needs of patients on Eid day. They could have been at their homes with their families, barbecuing and making mutton chops or out with friends, partying.I want to extend my praise to all the medical community around the world, who makes itself available on Christmases, Easters, Diwalis, Hanukkahs, Eids, Days of the Dead and all and any public or religious commemorations and holidays.One world, one soul!<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=1a92b3b64ef4" width="1" height="1" alt="">

Mood swings

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rKanz-XWCWYN-8s_IQJa5w.jpeg" /><figcaption>shadow of the day, image by me</figcaption></figure><h3>Shadow of the Day</h3><h4>All time is borrowed time</h4>It’s a funeral. Someone has died. It’s the father of one of my friends from university. We’ve arrived at their house in the village after an hour long drive from Islamabad. I have with me three other friends from back in the day. I kill the engine and we step out of the car.They’ve set up a canopy for the visitors in a grass field beside the house. There’s a cool breeze blowing but it’s still hot and humid. We can see people sitting under the canopy, people moving about — in and out of the house. We’re standing there awkwardly, trying to figure out whether to go take our seats or wait for our friend to appear and console him first.He comes stumbling out of the house; he’s in his pajamas. His eyes are red and swollen and he’s crying hard. We all hug him one at a time. I hug him and I don’t know what to say to him or how to say it. Neither do any of the other guys. We move towards the canopy to take our seats. No one says a word.I sit there allowing my emotions to take over me. But nothing takes over, except a sense of helplessness.At the farther end of the canopy are a couple of charpais, accommodating some men who are smoking their cigarettes and talking politics. They’re all talking in very hush, hush tones and I’m trying to make out what they’re going on about. But a little girl catches my eye — she’s laughing and having the time of her life just watching the water come out of the tap as she moves the cooler’s lever from side to side. She must be wondering why is everyone here gloomy looking. Or maybe not. I smile to myself watching her play.I realize that my friend whose father just passed away is sitting just one seat left of me. I try to put myself in his shoes. I try to imagine what he must be feeling like right then and there. That’s all I could do — imagine. But I don’t think I did a very good job at that either. His shoes were too big for me.After the funeral, as they were proceeding towards the burial, I heard a grown man crying out loud, “By God I loved that man! By God I loved him!”. If Waseem Kashfi, or as people usually called him, Kashfi sahab, a professor of Urdu, has left such an impression on his students in this day and age, is he really gone?As we’re walking back towards the car, I realize that all time is borrowed time. If life means living and breathing, then death is the absence of life, right? What if it’s the other way around? The absence of death, is life. And if you think about that, life is really smaller than death in terms of time.So chop chop fellas! Carpe diem.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=5ab9a5a0904e" width="1" height="1" alt="">

Shadow of the day

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DLGMmgG8XVKjv3Jn-GbWAw.jpeg" /><figcaption>Margallah Hills from Hiking Trail 3, Islamabad — <a href="https://www.instagram.com/p/Boz09x6HKzY/">https://www.instagram.com/p/Boz09x6HKzY/</a></figcaption></figure>Hello, world!JavaScript is a multi-paradigm programming language, which means it supports both procedural and functional programming. Functional programming allows you to do fun, almost magical stuff. A case in point: currying. In this post, we’ll try to understand what currying is and how to implement it in a simple manner.<h4>Higher-Order Functions</h4>In order to implement currying, we need to learn about higher-order functions. So what is a HOF?<blockquote>When we talk about higher-order functions, we mean a function that either takes one or more functions as arguments, or returns a function as its result.</blockquote>You’ll only find higher-order functions in programming languages that support first-class functions (or treat functions as first-class citizens). This means a language that allows us to store functions in variables, pass them around as parameters in function calls or return them as a result of another function call.Whew! That sounds complex. Well, it isn’t. Because most probably, you’re already using HOFs in your code. Remember map, filter and reduce? They are higher-order functions.Let’s make a simple higher-order function.<pre>const doubleFunc = fn =&gt; { return (...args) =&gt; { return 2 * fn(...args); }; };</pre>So what’s going on over here?We wrote a function called doubleFunc that takes a function fn as an argument, and returns a new function that takes an arbitrary number of arguments. Upon our providing these arbitrary number of arguments to this function, it then applies fn to them, multiples the result by 2 and returns the result.We have collected the arbitrary number of arguments into the args array above by using spread/rest (…) operator in ES6. Read more about it in Kyle Simpson’s awesome book <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md#spreadrest">here</a>.<pre>const add = (x, y) =&gt; x + y; const doubleAdd = doubleFunc(add);</pre><pre>console.log(doubleAdd(1, 4)); //=&gt; 10</pre>Cool? Cool.<h4>Currying</h4>Now that we understand what a higher-order function is, how can we leverage this knowledge to make a currying utility? Let’s define currying first.<blockquote>Currying is the process of taking a function with multiple arguments and returning a series of functions that take one argument and eventually resolve to a value.</blockquote>Okay, that’s a bit hard to wrap your head around. In simple terms, currying is the process of transforming a function that takes multiple arguments into a function that takes lesser arguments by fixing some of the arguments.Let’s write a couple of increment functions by modifying add.<pre>const add = x =&gt; y =&gt; x + y; const inc1 = add(1); const inc2 = add(2);</pre><pre>inc1(4); //=&gt; 5 inc2(4); //=&gt; 6</pre>Great! By currying our add function, we have made its logic reusable and pulled out 2 functions from it.That’s fine and all but how can we curry any function? Let’s write a utility for this.<pre>function curry(fn) { return function(...args) { if (args.length &gt;= fn.length) { return fn(...args); }</pre><pre> return function(...more) { return curry(fn)(...args, ...more); }; }; }</pre>Okay, let’s break it down. We wrote a function called curry that takes a function fn as an argument and returns a n-arity function (a function that takes an arbitrary number of arguments). Now, this function does a couple of things.<ol><li>If the number of arguments provided to this function is equal to or greater than the number of arguments needed by the function fn, it simply invokes fn with these arguments.</li><li>Otherwise, it returns another n-arity function which when provided some more arguments, tries to invoke the curried fn with args and more.</li></ol>This process keeps on going until the condition in step 1 is satisfied.If you don’t understand what’s happening here, I encourage you to copy this utility, add loggers to it and use it to curry a simple function of your own.The above snippet is too verbose. Let’s rewrite it with arrow functions.<pre>const curry = fn =&gt; (...args) =&gt; { return args.length &gt;= fn.length ? fn(...args) : (...more) =&gt; curry(fn)(...args, ...more); }</pre>Much cooler! Let’s use this newly found power.<pre>const sort = (ascend, list) =&gt; { const ascCmp = (a, b) =&gt; a &gt; b; const dscCmp = (a, b) =&gt; a &lt; b; return [...list].sort(ascend ? ascCmp : dscCmp); };</pre><pre>const curriedSort = curry(sort);</pre><pre>const sortAsc = curriedSort(true);</pre><pre>const sortDsc = curriedSort(false);</pre><pre>const data = [ 9, 99, 29, 42, 45, 57, 13 ];</pre><pre>sortAsc(data); //=&gt; [ 9, 13, 29, 42, 45, 57, 99 ]</pre><pre>sortDsc(data); //=&gt; [ 99, 57, 45, 42, 29, 13, 9 ]</pre>By currying sort, we were able to partially apply the function by fixing the value of ascend flag and storing the resulting function, which now only takes a list of numbers, to a separate variable.Partially applying functions can help us reuse our functions in a cleaner way. We can even pass these partially applied functions around in our application for delayed evaluation down the execution line when the remaining arguments will be available to us.Higher-order functions are the bread and butter of functional programming, and currying and partially applied functions enable higher-order functions to be used much more effectively and concisely. But HOFs enable a lot more than just currying, things like composition, memoization and transducing, etc.If you liked this taste of functional programming in JS, you should check out these functional programming libraries: <a href="https://ramdajs.com/">Ramda</a> and <a href="https://github.com/lodash/lodash/wiki/FP-Guide">lodash/fp</a>.That’s it for currying, guys. Hope you learned something about this cool technique. If you liked this post, please clap and share. Ciao!<figure><img alt="" src="https://cdn-images-1.medium.com/proxy/1*KQKlUCdcHx9t6jFN0Og6-g.gif" /></figure><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=634d528ed05" width="1" height="1" alt=""><hr><a href="https://blog.emumba.com/currying-in-js-634d528ed05">Currying in JS</a> was originally published in <a href="https://blog.emumba.com">Emumba</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Muhammad Kasim.

Engineer by profession — procrastinator by passion.

Wandering in words

Fetch account media using Instagram API

Why art?

Shortcuts are good

Mood swings

Shadow of the day

Currying in JS