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

48 posts tagged with "webdev"

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
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

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

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

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

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

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
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
Firefox Developer Tools can do that?

It’s been a while since one of the X can do that posts I’ve been publishing. Furthermore, Firefox Developer tools is just getting better and better everyday, so I thought it’s about time I write one for it.

So, are you ready? 😎

PublishedAug 08, 2019
Time to read6 min
webdevfirefoxdevtoolsRead more
JavaScript: useful features of ECMAScript 2019 reviewed

First of all let me apologise for not writing as frequent as I would’ve liked. It’s been a crazy busy couple of weeks and I had heaps of fun speaking at DDD Perth 2019.

That taken care of, this time I thought let’s go through the new features which are added into the ECMAScript 2019 (aka ES2019 or ES10), because they’re super exciting and make our lives much easier 😎.

PublishedAug 06, 2019
Time to read5 min
webdevjavascriptshowdevRead more
JavaScript can do that?

You might be wondering why I am writing less these days. I assure you, it’s not because I am getting lazy (I am ATM 🤩), it’s just that I am on a long overdue holiday. But to keep my juices going, I thought now that I am having fun, let’s write a fun post 😊.

PublishedJun 26, 2019
Time to read3 min
webdevjavascriptshowdevRead more
Boost your ranking with these 10 tips

For most companies, ranking #1 is like a blessing to their business. However, most of the web developers are not aware of what should be done to reach to that point.

In this article we go through 10 simple steps to increase the ranking organically rather than paying search engines to do that for us. So, are you ready 🧐?

PublishedJun 11, 2019
Time to read8 min
webdevseoshowdevRead more
A world without passwords

Let’s face the reality, we can’t live without passwords these days. In fact our entire online life is depending on them. But with passwords, comes heaps of problems not only for users, but also for us developers.

PublishedJun 05, 2019
Time to read5 min
webdevwebauthnfrontendRead more
What`s new in Angular 8

You might already know that Angular 8 is out now, but what it means for you or your organisation is described below.

PublishedMay 30, 2019
Time to read4 min
angularwebdevshowdevRead more

Most of the times, we write code which is being copy pasted from all over internet. StackOverflow is the main source these days for finding solutions to all sort of problems. But is it OK to blindly copy paste code without really knowing what’s happening behind the scenes?

PublishedMay 20, 2019
Time to read4 min
webdevshowdevjavascriptRead more

Rendering images on a web page can be a very compute heavy operation. This makes it harder to run these kind of operations on the main thread since it might slow down the rendering or affect the user experience.

PublishedMay 11, 2019
Time to read5 min
webdevtipsfrontendRead more
All tags