This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
I Broke My Hand So You Don't Have To (First-Hand Accessibility Insights)
A perspective of a temporarily impaired developer on accessibility both from the perspective of a user and of a software engineer. Using the web disabled “surprisingly” makes you think about people’s experience on the web. Let us take you on that journey!...
Dec 6, 2023
Understanding Vue's Reactive Data
A blog post that unravel how Reactivity works in Vue 3...
Nov 22, 2023
Performance Analysis with Chrome DevTools
When it comes to performance, developers often use Lighthouse or similar performance analysis tools. But when the target site has protection against bots, getting information is not that simple. Chrome Devtools can help you with your performance analysis....
Jan 9, 2023
How to Style Using SCSS in Nuxt
Introduction SASS makes working on large projects more organized. It allows you to use variables, nested rules, mixins, and functions. The preferred styling method in Nuxt is component file styling, and integrating SASS into your project can make your component file styling appear more understandable. How to Import SASS in Nuxt To add SASS after setting up your Nuxt application, we will first install SASS and sass-loader. Let's run either of these commands depending on our package manager. ` Component File Styling With SASS and sass-loader installed in our project, we can now write SCSS in our component file. Lets see an example: ` In the example above, all we need to specify is lang="scss" on the style tag, and we can now write scss in that component. Global File Import and Variables To import SCSS files that are global, like variables and mixins files, we need to install style-resources: ` Next, we can update our nuxt.config.js file by adding the module we just installed to the buildModules. ` Next, let's create a global variables.scss file in our assets/style folder. Add a single variable inside: ` Next, we need to import this file inside the nuxt.config file: ` Now we have the variables in our variables.scss available in all our components for use. Next, let's test it out by updating our button component. ` We have updated our button variant color to be our global SCSS variable ($primary and $white). Mixins Mixins in SASS are used to write styles that can be reused in other parts of the code. Let's create a sample mixin to center an item. ` Next, we need to import our mixin in Nuxt config: ` Now, let's update our button component with our mixin: ` Functions Functions in SASS are used to write complex operations or behaviours that can be reused in other parts of the code. Let's create a function to handle a media query for our application. ` This is a basic example of what a function can be used for. More complex cases, like calculating percentage, can also be done. Let's import our mixin in Nuxt config: ` Let's update our button component with our function: ` We have been able to add SASS to our Nuxt project, and also looked at some ways in which SASS can make our codebase look cleaner. I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github....
Aug 17, 2022
State Management with Apollo Client and Vue using Reactive Variable
State Management is an integral part of Software development with tools like VueX, Pinia which is like VueX 5, Redux, Context API, and others. In our example, we will be using Vue3 composition API, a bit of TypeScript. This article will assume that you already have a project setup with Apollo. State Managemnet Before we dive into what state management is and what it offers, lets understand few thing which are integral to it. What is State? State is a part of an application, such as user details, usernames, login information, and website themes(dark or light). In simple terms, state is like a warehouse that's contents you can access when you need to from wherever you are. What is State Management? State Management is just simply a design pattern to help synchronize the state of the application throughout all of the components in the application. This also prevents us from passing too many props accross the application. When to implement State Management: - When the application contains large number of components. - To prevent redundant data, knowing well some other components might need that data. - Prevent passing props across the application, making it messy. For more explainations, you can check the links below: - What does state-management even mean and why does it matter in Front End Web Development with frameworks like React or Vue? by Sean Grogg - What does state-management even mean and why does it matter in Front End Web Development with frameworks like React or Vue? by Robert Polevoi - State management by Tom Nolle How to implement State management? There are so many ways to do it. But in this discussion, we will be implementing it with Vue Apollo. Apollo Client It is the client for Vue Apollo. It helps to easily integrate GraphQL queries and mutation in your application which, in our case, is Vue. Reactive Variables This is a new feature from Apollo Client 3. > Reactive variables are a useful mechanism for representing local state outside of the Apollo Client cache. How to create a Reactive variable in Apollo? This is quite simple since Apollo client provides us with makeVar. ` What the above code means is we make use of makeVar to create a variable of any type be it boolean, number, array, or object. Also, by calling the variable that makeVar is assigned to without passing a parameter will only output its current value, but passing a parameter will update its value. You can learn more about makeVar here. Setup of the Project We will be creating a state for a counter that does increment, decrement, or reset. But first, let's set up our enviroment. Setting up the Reactive variable Lets create our reactive variable in ./variables/counts.js: ` Configuring the cache Lets also update our cache config to something like this: ` Creating a component Let's create ./components/Counter.vue component: ` Please note that you can always get the counts value even without the GraphQL query. All you need to do is call count() like the example about _Reactive variables_, and force a re-render using loading as a ref. Like this: ` loading ref to help re-render when there is a change so as to get the latest value of counts. The manner you will prefer depends on what you want to achieve. But I will go with the example with the query as it still preserves the GraphQL feel. Conclusion State Management with Apollo Client saves you the stress of installing VueX, or Redux (for the React users), as long as the application makes use of Apollo. In this quick training, we learned about state and why state management is important to building and maintaining applications. Further, we learned how to manage state by using a reactive variable in Apollo. If you need any help understanding how to use this training, or additional clarification, please feel free to reach out to me....
Jul 27, 2022
What is Accessibility and Why It Matters
Billions of people around the world use various web applications in their everyday lives. As web developers, we strive to build strong websites that can be used and enjoyed by everyone. But what is accessibility and why should we care about it?...
Jul 21, 2022
How to Set Up OAuth with a Stripe App
May 24, 2022
12 Web Development Podcasts That Inform and Inspire
Podcasts can be a great source of entertainment and education but sometimes it is hard to know what to listen to. In this article, I will share with you my favorite podcasts to listen to that discuss the latest in web technologies and careers....
May 5, 2022
How to Manage Breakpoints using BreakpointObserver in Angular
Defining Breakpoints is important when you start working with Responsive Design and most of the time they're created using CSS code. For example: ` By default, the text size value will be 12px, and this value will be changed to 14px when the viewport gets changed to a smaller screen (a maximum width of 600px). That solution works. However, what about if you need to _listen_ for certain breakpoints to perform changes in your application? This may be needed to configure third-party components, processing events, or any other. Luckily, Angular comes with a handy solution for these scenarios: the BreakpointObserver. Which is a utility for checking the matching state of @media queries. In this post, we will build a sample application to add the ability to configure certain breakpoints, and being able to _listen_ to them. Project Setup Prerequisites You'll need to have installed the following tools in your local environment: - Node.js. Preferably the latest LTS version. - A package manager. You can use either NPM or Yarn. This tutorial will use NPM. Creating the Angular Project Let's start creating a project from scratch using the Angular CLI tool. ` This command will initialize a base project using some configuration options: - --routing. It will create a routing module. - --prefix corp. It defines a prefix to be applied to the selectors for created components(corp in this case). The default value is app. - --style scss. The file extension for the styling files. - --skip-tests. it avoids the generations of the .spec.ts files, which are used for testing Adding Angular Material and Angular CDK Before creating the breakpoints, let's add the Angular Material components, which will install the Angular CDK library under the hood. ` Creating the Home Component We can create a brand new component to handle a couple of views to be updated while the breakpoints are changing. We can do that using the ng generate command. ` Pay attention to the output of the previous command since it will show you the auto-generated files. Update the Routing Configuration Remember we used the flag --routing while creating the project? That parameter has created the main routing configuration file for the application: app-routing.module.ts. Let's update it to be able to render the home component by default. ` Update the App Component template Remove all code except the router-outlet placeholder: ` This will allow rendering the home component by default once the routing configuration is running. Using the BreakpointObserver The application has the Angular CDK installed already, which has a layout package with some utilities to build responsive UIs that _react_ to screen-size changes. Let's update the HomeComponent, and inject the BreakpointObserver as follows. ` Once the BreakpointObserver is injected, we'll be able to evaluate media queries to determine the current screen size, and perform changes accordingly. Then, a breakpoint$ variable references an _observable_ object after a call to the observe method. The observe method gets an observable of results for the given queries, and can be used along with predetermined values defined on Breakpoints as a constant. Also, it's possible to use custom breakpoints such as (min-width: 500px). Please refer to the documentation to find more details about this. Next, you may need to _subscribe_ to the breakpoint$ observable to see the emitted values after matching the given queries. Again, let's update the home.component.ts file to do that. ` In the above code, the ngOnInit method is used to perform a _subscription_ to the breakpoint$ observable and the method breakpointChanged will be invoked every time a breakpoint match occurs. As you may note, the breakpointChanged method verifies what Breakpoint value has a match through isMatched method. In that way, the current component can perform changes after a match happened (in this case, it just updates the value for the currentBreakpoint attribute). Using Breakpoint values on the Template Now, we can set a custom template in the home.component.html file and be able to render a square according to the currentBreakpoint value. ` The previous template will render the current media query value at the top along with a rectangle according to the size: Large, Medium, Small or Custom. Live Demo and Source Code Want to play around with this code? Just open the Stackblitz editor or the preview mode in fullscreen. Find the complete angular project in this GitHub repository: breakpointobserver-example-angular. Do not forget to give it a star ⭐️ and play around with the code. Feel free to reach out on Twitter if you have any questions. Follow me on GitHub to see more about my work....
Apr 14, 2022
What's New in React 18?
Discover the new features released in React 18....
Apr 4, 2022
How to Build a Slideshow App Using Swiper and Angular
Mar 23, 2022
How to Build a Blog with Next.js, Tailwind CSS and MDX
Mar 1, 2022