Back to top
Yaser Adel Mehraban's headshot
Yashints
HomeAboutServicesSpeakingBlogContact
HomeAboutServicesSpeakingBlogContact
Yas Adel Mehraban (Yashints) | showdev

57 posts tagged with "showdev"

Application registration, service principal, system-assigned managed identity, user-assigned managed identity, Enterprise Application, these are just a few concepts in Microsoft Identity Platform which helps businesses protect their applications and provide authentication and authorization using Azure Active Directory (aka AAD).

There are many scenarios which can be covered using these concepts and although Microsoft has a ton of documentation around these, people get confused simply because of sheer amount of information to digest. So the point of these series is to get people to understand these concepts and apply them in their products developed on top of Azure AD without having to get information overload. In this post we will cover the basics.

PublishedJul 02, 2021
Time to read4 min
showdevazureAADRead more

If you have deployed a resource in Microsoft Azure as part of your CI/CD pipeline you have probably worked with ARM templates. These templates can be used to automate your resource deployment to Azure and help you to have consistent environments whether it’s for testing, development or production purposes. However, there are some shortcomings when it comes to complex environments especially when you have many resources and the dependency between them makes the templates to be either super busy, very complex, or unreadable.

For that Microsoft has introduced Bicep which is designed to overcome these issues and help you with your infrastructure as code setup.

PublishedMay 10, 2021
Time to read8 min
showdevazurearmRead more

Azure Functions is one of the the serverless services in Azure which allows you to run your business logic without worrying about where it’s running and how it scales. But it being serverless is not the highlight of this amazing service, the way it’s designed which allows you to leverage a very diverse set of triggers and input/output bindings without writing much code is to me the best of the best. So in this article I’ve decided to take you on a journey with a few of the common triggers and bindings and show you how to set them up quickly and without writing any unnecessary code.

PublishedMar 29, 2021
Time to read6 min
showdevazurefunctionsRead more
How to end-to-end test your Vue.js apps with Playwright 🧪

Playwright is one of the recently released end to end testing frameworks which enables fast, reliable and capable automation and is cross platform. I really like it, but since it’s very easy to setup and the community around it is super cool, I like it even more.

In this article I want to show you how you can write some tests for any Vue.js application which is using Auth0 as an identity provider. However, this could be used with any other provider too, since it covers the basics and makes you ready to write tests which cover different scenarios and user interactions.

PublishedFeb 07, 2021
Time to read8 min
webdevshowdevvueRead more

Azure Cosmos DB is one of the foundational services in Azure, which provides high availability, global scale and an impressive performance. However, it could be a bit costly for developers to spin up an instance during their development especially if they don’t know some of the basics such as what should be the partition key, what throughput they should select and so on that much.

The Azure Cosmos DB Emulator is a service provided by Microsoft which allows you to emulate the Cosmos DB Service locally for development purposes. In addition, no matter whether you’re using Azure CosmosDB or not, at some point you might have to test some sort of DocumentDB locally.

PublishedDec 15, 2020
Time to read3 min
azureshowdevcosmosdbRead more
Add dual screen support to your applications 💻

If you have ever tried to add responsiveness to your web application you would know it’s difficult or at least takes a while to get it right. As progressive web apps (PWAs) are the first class citizens on many devices with the ability to get installed, it’s even more important to make sure user’s have the best experience possible. But technology advances in a much faster pace. We have now foldable devices like the shiny new Microsoft Surface Duo which add more complexity to this equation.

PublishedDec 07, 2020
Time to read8 min
webdevshowdevdual-screenRead more
Access your clipboard on your other devices 😍 📋

How many times have you been working on multiple systems and realised you are trying to paste something which you have copied on the other system? Well with the help of this article you can now share your clipboard between your Windows and Mac devices 😎.

PublishedNov 13, 2020
Time to read1 min
productivitywindowsshowdevRead more

Last week I wanted to setup a Vue.js v3 app with Tailwindcss and although many articles exists for that, I couldn’t get it done. The fact is that you need to use postcss to get your setup working, but with new version of Vue, the postcss config file is not picked up. So after a few try and errors, I finally got it working and thought to jot down what I went through to make it easier for my future self, and hopefully a few of my fellow developers around the world.

PublishedOct 22, 2020
Time to read9 min
showdevwebdevvueRead more

If you’re a windows user like me, you might have heard of PowerToys Utilities from Microsoft. They are a set of utilities which come handy in many situations, but not many people know and use them. So I thought let’s write how and when I use them to help other people be more efficient too.

PublishedOct 09, 2020
Time to read3 min
showdevwindowspowertoysRead more

Searching for items in an array has been the point of discussion for many years and debate on what is the best and optimum way for searching for objects has had many solutions, some effective and some not.

However, with the all new findIndex method on Array.prototype you have the flexibility to search for objects using your own comparison callback method.

PublishedOct 05, 2020
Time to read1 min
showdevwebdevjavascriptRead more

It’s been a while since I last wrote about Intersection Observer V2, partly because I had a lot on my plate and I was feeling exhausted and partly because I was working on my first PluralSight course on web performance for PWAs.

But I am back, and this time we’re going to review how to take a selfie from your webcam using Image Capture API.

PublishedSep 06, 2020
Time to read2 min
showdevwebdevjavascriptRead more

As I mentioned in one of my other posts, Intersection Observer will report when an element appears in the viewport, after applying all overflow and CSS clips. However, there is no way currently to find out whether an item is being put on top of this element, or some filter is applied to it which may alter or obscure the element’s display.

PublishedJun 22, 2020
Time to read2 min
showdevwebdevjavascriptRead more

I remember a while back (not sure how long), Chrome had the ability to save all tabs when you closed the browser regardless of whether it was by accident or not. But they removed that ability and now if you close the window you will lose the tabs.

PublishedJun 17, 2020
Time to read2 min
showdevwebdevchromeRead more
Chrome - Arrange your tabs with tab groups 😍

If you’re one of those people with so many tabs open than you can manage, read on.

PublishedJun 15, 2020
Time to read1 min
showdevwebdevchromeRead more

You probably have used fragments in links to point a link to a part of your page such as a heading. This technique is used in table of content for example and it’s a common pattern.

PublishedJun 14, 2020
Time to read2 min
showdevwebdevjavascriptRead more
Links and JavaScript 🔗

I see some occasions where web developers who are a bit less familiar with accessibility use links incorrectly in different forms. So I thought let’s write a quick guide on Links in JavaScript apps.

PublishedJun 03, 2020
Time to read4 min
showdevwebdevjavascriptRead more
Microsoft Build 2020 highlights 🔣

Microsoft Build went on fully online and it came with some really exciting announcements. For us developers some of these can bring massive efficiencies. So let’s see what’s on offer.

PublishedMay 23, 2020
Time to read4 min
showdevmicrosoftbuildRead more

There may be many different reasons why you’d want to swap two variables be it just changing two item’s location in an array or when sorting collections. The traditional way is just define a new variable, assign one value to it, put one of the items in the old place, then put the temp variable back in the new place. But my question is, is that the only way?

PublishedMay 15, 2020
Time to read2 min
showdevwebdevjavascriptRead more

String is one of the primitive types in JavaScript and we use it in every project we work on no matter what. But how familiar are you with the methods available in JavaScript to work with a string variable? Let’s have a quick look at those in this article.

PublishedMay 11, 2020
Time to read8 min
showdevwebdevjavascriptRead more

There are many different sorting algorithms out there such as quick sort, merge sort, insertion sort, bubble sort, etc., that could be useful in our day to day life, writing code which gets shipped to production. Knowing all of them is not necessary, but if you have a basic understanding of each one, you can decide on the most efficient one for your scenario.

PublishedMay 03, 2020
Time to read7 min
showdevwebdevjavascriptRead more

Using a loop is almost a must in our day to day life. But have you ever thought what kind of loop should you use? Do you know the difference between enumerables and iterables? This article sheds some light in this space, so read on if you’re interested.

PublishedApr 24, 2020
Time to read3 min
showdevwebdevjavascriptRead more

You’ve spent many hours trying to improve your web performance and have got it to a good speed. What happens next? How do you ensure it remains in good shape especially if you’re working in a team with diverse backgrounds and level of coding.

PublishedApr 13, 2020
Time to read6 min
webdevshowdevperformanceRead more

I was working on a project a week ago and had a local branch (with a few commits) I was going to push to upstream to create a PR (pull request). However, after pulling down master and rebasing, I realised all of my code except my first commit is gone after rebase 😱.

PublishedApr 05, 2020
Time to read6 min
showdevgitrecoveryRead more

There are many situations where we want to see what’s wrong with out code without the trouble of changing source code and push the changes again, regardless of whether we’re using local environment or production. Most folks start by writing console.log statements throughout their code base and go step by step to find the place where the bug is happening. That’s OK for beginners and where you have access to source code, but what if you don’t want to waste so much time or you don’t even have access to source code?

PublishedMar 19, 2020
Time to read7 min
webdevshowdevdebuggingRead more

There are many situations where we’d like to see our web page in fullscreen mode. Be it games, online courses, video tutorials, or simply wanting more reading space while reading a book. What we usually do in these sort of scenarios is we manually set our browser’s tab/window in fullscreen mode (F11), but the result is not always what we expect, because some content is not designed to be viewed in fullscreen mode. Besides, what if we help our users to go fullscreen automatically instead, again it all comes to having a better user experience.

PublishedMar 10, 2020
Time to read2 min
webdevshowdevfullscreenapiRead more

I’ve been writing web applications for more than a decade. From classic ASP to PHP, ASP.Net web forms and the list goes on and on. However, something that’s been common between all those years for me has been to care about how performing the site is. One important part of that has been to look out for memory leaks, because they can cause the page to go super slow or even crashing in more serious scenarios.

PublishedFeb 28, 2020
Time to read6 min
webdevshowdevmemoryleakRead more

I help some of my friends perform code reviews on their code bases from time to time as a side activity. I’ve used codelyzer before and it’s very similar to tslint in a sense. However, I wanted to test something new and thought let’s give SonarQube a shot this time.

PublishedFeb 23, 2020
Time to read4 min
webdevshowdevcodeanalysisRead more

One of the first things I learnt to do with HTML was using marquee to move text across the screen horizontally. It was so cool to be able to create advertisements on a page and make users notice things with just a tag. Of course people overused it and then it became a out of fashion item in the new designs just like baggy jeans from 90s.

PublishedFeb 09, 2020
Time to read4 min
webdevshowdevhtmlRead more

If you’ve ever used Puppeteer, you’d know it enables you to control a Chrome instance (or any other Chrome DevTools Protocol based browser) and execute common actions, much like in a real browser - programmatically, through a decent API. The same team has now build a new product called Playwright which apparently is their new favourite.

PublishedJan 24, 2020
Time to read4 min
webdevshowdevtestingRead more

We face many situations in which we need to interact with user’s clipboard. Up until recently, browsers were using document.execCommand for clipboard interactions. It sounded great and it was (and still is) widely supported way to copy, cut, and paste into web apps, but the catch was that clipboard access is asynchronous and can just write to DOM.

PublishedJan 09, 2020
Time to read4 min
webdevshowdevclipboardapiRead more

If you have an image on the page which is 600x200 pixels, what is the chance of it shown exactly with that size? I’d say not likely, because most of the time it’s put inside a container which defined the width and the image is set to width: %100. But the size of the image is not that important at this point, what is important is that you will have a DOM reflow once the image is loaded.

PublishedDec 19, 2019
Time to read2 min
showdevwebdevimageRead more

Tensorflow.js is a library which lets you perform machine learning in the browser or in Node. It uses the GPU or CPU to do training and calculation, but recently the team have done a great job and brought WebAssembly backend to its ecosystem so that you can perform predictions faster. So without further ado, let’s deep dive into this greatness.

PublishedDec 17, 2019
Time to read5 min
showdevwebdevtensorflowjsRead more

Tensorflow.js is a library which lets you perform machine learning in the browser or in Node. A while ago I wrote an intro on it and also gave a few talks including one which had a live demo where I re-trained the Speech Command model and flew a drone using my voice 😍. Many people asked about the details, so I decided to blog the whole thing down.

PublishedDec 16, 2019
Time to read7 min
showdevwebdevtensorflowjsRead more

Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. I’ve written three separate articles on it so far:

We will be looking at state management in Vue.js this time which is the centre of communication in large applications.

PublishedNov 18, 2019
Time to read7 min
showdevwebdevvuejsRead more

This year has been full of articles around how the web is bloated with static assets and how this has impacted users to face a poor user experience when using not so good networks around the world. There are resources like web.dev who are actively publishing content on how to make a better future for the web.

PublishedNov 18, 2019
Time to read4 min
showdevwebdevnetworkinformationRead more

Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. I’ve written two separate articles on it so far:

This time we will have a look at handling form with Vue.js, something which is almost inevitable in enterprise applications.

PublishedNov 10, 2019
Time to read9 min
showdevwebdevvuejsRead more

This post is one of those posts which is related to my consulting side. I was involved in a project where infrastructure as code was the approach from get go and since we had everything on Azure, we chose a mix of ARM templates and PowerShell. I hit a few issues along the way which I think it’s very valuable to be aware of for many people and especially myself in future on a similar project 😊.

PublishedOct 31, 2019
Time to read8 min
showdevazurewildcardcertRead more

Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. I wrote a comprehensive intro a week or so ago and promised to continue adding more each week. This week is about Vue router and how it helps deliver a better user experience.

PublishedOct 30, 2019
Time to read9 min
showdevwebdevvuejsRead more

Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. This core library is focused on building the view layer only. It uses the goodies of Angular (such as template syntax) and React (such as Virtual DOM) and adds a few more enhancements on top.

PublishedOct 18, 2019
Time to read15 min
showdevwebdevvuejsRead more

React Hooks are somewhat a new addition to React. They allow you to use React features without the need to use a class. But I am not going to go through an introduction in this post, there are many great into posts out there. This post shows you eight hooks and what you can achieve with them.

PublishedOct 06, 2019
Time to read7 min
showdevwebdevreactjsRead more

Everybody likes a fast loading web page. In fact, Google has an entire section dedicated to performance and how companies are moving towards a faster web. Wouldn’t it be good if we could measure some critical metrics like page load time in our production environment and constantly monitor them to find out where can be improved?

PublishedSep 29, 2019
Time to read3 min
showdevwebdevjavascriptRead more
Page Visibility API, let's help users save their battery life 😀

Are you want of those people with 200 tabs open? Are you tired of carrying your laptop charger with you all the time? Well, I am here to let you know we can help users save battery, data, and time, if we know how to use the Page Visibility API.

PublishedSep 22, 2019
Time to read3 min
showdevwebdevjavascriptRead more
Let's build a game with Tensorflow.js in 10 minutes 🎮

I’ve been looking into Tensorflow.js recently and have found the whole concept fascinating. Previously I wrote a piece on how to get started, and I intent to write more around all aspects of creating a new model, transfer learning with it, or just use pre-trained models for inference.

PublishedSep 19, 2019
Time to read9 min
showdevwebdevtensorflowjsRead more

Last week I talked about JavaScript and AI using Tensorflow.js at ComponentsConf in Melbourne, Australia. The line up was a killer and I got to listen to some amazing talks, one of which got me hooked. It’s about accessibility and how we can be more inclusive by doing very little at our end.

PublishedSep 14, 2019
Time to read5 min
showdevwebdeva11yRead more

Resize Observer API is another great JavaScript API which lets you get notified when the size of an element changes. Think window.onresize but on element level.

PublishedSep 05, 2019
Time to read2 min
showdevwebdevresizeobserverRead more

How often have you wrote a block of HTML without realising the code you’ve written might not be ideal?

PublishedSep 03, 2019
Time to read6 min
showdevwebdevhtmlRead more

If you ever stumbled upon a piece of vanilla JavaScript code and wanted to refactor it to a module, or have a CommonJS module and want to convert it to ES6 Modules, you might have faced a couple of tricky situations. I had to go through one of those recently and stumbled upon some differences/points that you need to be aware of when working with modules. As always, thought sharing these would help someone else, so here we go 😊.

PublishedAug 27, 2019
Time to read6 min
showdevwebdevjavascriptRead more
Native lazy loading is landed in Chrome

Lazy loading resources is one of the important parts of web performance tuning, simply because offscreen resources can add a lot of weight to your page if loaded eagerly.

PublishedAug 25, 2019
Time to read3 min
showdevwebdevchromeRead more

Sometimes you want to connect to internet without someone watching you. This can be due to restrictions applied by governments, ISPs, etc. Maintaining privacy while using internet is very important to some people, and for me personally, the experience was to bypass a ridiculous censor on sites like Twitter and software like Telegram.

PublishedAug 21, 2019
Time to read3 min
showdevawsvpnRead more
6 points you need to know about async & await in JavaScript

If you have faced a code like below, then this article will help you in multiple ways 😁.

Copy 
fetchPizzas()
  .then((pizzas) =＞ {
    return sortByToppings(pizzas)
      .then((pizzas) =＞ {
        return checkDeliveryOptions(pizzas)
          .then((pizzasWithDelivery) =＞ {
            return checkBirthdayGift(pizzasWithDelivery)
              .then((pizza) =＞ {
                return sendToCustomer(pizza);
              });
          });
      });
  });

PublishedAug 17, 2019
Time to read4 min
showdevwebdevasyncRead more
All tags