22 posts tagged with "frontend"

As a dedicated frontend engineer, complacency is not an option. Staying at the forefront of technology is vital to navigate the ever-evolving landscape and provide innovative solutions to your clients. In this article, we'll explore four unconventional approaches to keeping up with frontend tech that don't involve traditional blogs or podcasts.

1. Follow the Titans​

One effective way to stay informed is by closely monitoring the thought leaders in the industry. These experts not only share their extensive knowledge but also disseminate the latest developments in frontend technology. For instance, Addy Osmani, a prominent figure in this field, is renowned for publishing cutting-edge research and providing real-time updates via Twitter or follow their talks or conferences. Here are some more influential figures to follow:

• Ben Frain
• Jake Archibald
• Lea Verou
• Addy Osmani
• David Walsh
• John Resig
• Paul Irish
• Alex Russell
• Chris Coyier
• Chris Lilley
• Dan Abramov
• David Khourshid
• Harry Roberts
• Kent C. Dodds
• Lin Clark
• Nicole Sullivan
• Sara Soueidan
• Wes Bos

2. Embrace Conferences and Meetups​

Frontend conferences and meetups are a treasure trove of insights. While it might not be feasible to watch every presentation on YouTube, you can gain valuable information by skimming through the talk titles. If a particular topic repeatedly surfaces, it's a clear indication of its significance. Here are some noteworthy conferences and meetups to keep an eye on:

Conferences:

• Smashing Conference (San Francisco, CA, USA)
• React Advanced (London, UK)
• VueConf (Multiple locations)
• Svelte Summit (Multiple locations)
• CSSConf (Multiple locations)
• Front-end Developers Conference (Multiple locations)
• Full-Stack Web Dev Conference (Multiple locations)
• JavaScript Conference (Multiple locations)

Meetups:

• Front-End Developers Meetup
• React Meetup
• Vue Meetup
• Svelte Meetup
• CSS Meetup
• Full-Stack Web Dev Meetup
• JavaScript Meetup
• Web Performance Meetup
• Accessibility Meetup

3. Dive into the Specs​

Frontend development thrives on open standards, and there are no secrets in this domain. A true professional must dive into the technical specifications. Keep a vigilant eye on the following organizations and their corresponding standards:

• For JavaScript, stay updated with TC39.
• For HTML and CSS, rely on W3C.
• Accessibility standards are set by WCAG.
• TypeScript enthusiasts should monitor TypeScript proposals.

Becoming adept at deciphering these proposals can qualify you as a tech speaker and provide instant insights for your fellow developers.

4. Explore Case Studies, Job boards and Journals​

Periodically, top-tier tech companies, such as Slack and Airbnb, release quality blogs that provide invaluable insights. Studying such content, which is tried and tested at scale on millions of users, can lead to innovative breakthroughs in your work. Notable publications, like Thoughtworks' Radar, delve into a wide array of frontend topics discussed at a CTO level, making them a must-read resource for any serious developer.

Conclusion​

Staying updated in frontend tech is no cakewalk. The methods outlined above may not be the easiest or most convenient, but they are highly effective. There is no easy way, the above said methods are not the easiest like skimming a newsletter or tech blog but I believe you can ascend to the ranks of an expert frontend developer with the above 4 strategies.

What are the Date methods?​

I have worked with a bunch of web apps and all of them have date-related code in common. The Date utils are written in plain Javascript using the Date constructor.

var date = new Date()

// Sample date methods
date.getMonth()
date.getFullYear()
date.getDate()

I have also worked on issues where the test suite would pass correctly on the day the tests were authored but they would fail on the other day or in the server. This is because the dates are getting dynamically generated in the test but the matcher value is static.

Why is testing Dates tricky?​

You cannot assert a dynamically generated date. For instance, if your date until returns a new date by applying some logic. You cannot put a test that looks like this.

// WRONG code, don't use without mocking date.getDate

expect(add2DaysToCurrentDate()).toBe("Some hard coded date")

If you want to use a hardcoded date, you should be able to control the output of the add2DaysToCurrentDate method.

How to make dynamic date logic predictable?​

The short answer is JEST mocks. Whenever we want to add 2 days to the current date, we need to ensure the date.getDate() method returns the same value, then we can write a test to assert the returned value.

it("should return new Date which is two days ahead of today", function() {
  jest.spyOn(Date, "getDate").mockImplementation(() => 14) // Mocks the getDate method until this test block
  expect(add2DaysToCurrentDate()).toBe("Some hard coded date")
})

Downsides to this approach​

As I mentioned in the comment, till the end of the test block, we cannot use date.getDate() as if it's a real function. The mock will replace the actual function call in the test block. This might hinder your assertion logic. We need to plan accordingly.

References​

https://stackoverflow.com/questions/29719631/how-do-i-set-a-mock-date-in-jest

From the title it sounds like a lot of cool technologies working side by side isn't it. Let me list them once again

• Turborepo - managing monorepo
• NPM - package manager
• NPM workspaces - also provided by npm, assists in monorepo
• vite - frontend tooling, rollup wrapper
• vite react - template for vite

Use case scenario​

I have a cool monorepo on github which holds all my sample projects, experimental works and code sample which I play around with.

The monorepo is build with npm workspaces & turborepo. I must admit that I hardly use any turbo repo features yet. Its mostly npm workspaces and npm commands at scale.

I encountered vite for frontend tooling and wanted to give it a try. Without a second thought, I created a directory called tooling and started working with vite.

Glitches and resolutions​

1. The first glitch was the node version requirement of vite. I opened a new terminal and used nvm to set the node version to latest. Thats expected bug while working with latest nodeJS tools.

2. The vite module was installed locally within the workspace. However the same vite module was referenced in vite.config.js. npm would try to resolve vite by checking in the global node_modules but it would not be there.

To understand why npm installed vite locally instead of global node_modules was easy. vite was used in npm scripts and if vite were to be installed globally then the npm scripts would fail mercilessly.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

But the same module being used in JS modules was not expected by npm, so we need to instruct npm to install vite in both local and global node_modules.

Resolution​

At this step I found 2 ways to solve the problem.

1. The first way is something hinted by turborepo scaffold itself. I had to add vite as dev dependency at the root of the monorepo. This would ensure that vite is installed into the global node_modules.

2. The second way is to use an alias for vite within the workspace. You can do this with the below command

npm i my-vite@npm:vite -P

This command would ensure that the package vite is alias as my-vite. While checking the global node_modules folder, I noticed a folder with the name my-vite.

The flipside is that, I need to reference the vite package as my-vite within the code.

import { defineConfig } from "my-vite";

Hundreds of React tutorials and videos directly start with a custom hook. Here is my experience, where I had to write a custom react hook for the first time. Sharing the rationale and logic behind the first custom react hook.

The best thing about React props is the ability to send different data structures from parent to child without any code configuration like @input etc. But why do we need an extra construct React.forwardRef for passing ref? let us find out.

As a senior developer or an architect, one of the job demands would be to update the npm-packages of your application. Ironically there is no one single command which would start the update and end the update with all finesse and grace the application would need. here are a few lessons from my job on updating npm packages.

I moved into a design tech team that takes care of enterprise design language. It's completely a front-end job. It has been more than 90 days since I moved into this job and here is my learning experiences. Here are my top 10 learning experiences from my new job role as "Lead design technologist".

Let us say you drop a cheque at the local bank, it goes through several stages and finally, you get your money. Similarly in JavaScript, the working committee throws in an idea that goes through several stages before it becomes a language feature. Let's find out more.