Frontend

It has been quite a journey since we released Order Status, a feature that will allow our customers to check their order details on delivery day, get updates about their order via push notifications in both Android and iOS app, and receive an email with invoice pdf attachment when the order is packed. Push Notifications for Order Status In the past, some customers, including me, would notice that we didn’t get an SMS message when the was soon to arrive. Sometimes, due to mobile services throttling SMS, messages would not arrive until hours after the delivery was completed. While looking for a better way to deliver SMS messages, we decided to also try sending Push Notifications and open another channel of communication to our customers. We decided that we would use Push Notifications to send messages when a driver is delivering your order and another when the driver has arrived. ...

Update: A chrome extension made using the same technique is available on Google web store now. Like a lot of people working in this industry, I prefer dark themes. If you were to ever look at my iTerm or Sublime Text windows, you would understand how pretty dark theme can be. My iTerm 2 Screenshot A few weeks ago, I came across an blog written by Heydon Pickering (https://inclusive-components.club/a-theme-switcher/), which describes a simple tweak to overwrite the current styles to get a dark theme and provides instructions for a React component to switch it on or off. The idea is neat and requires little time to implement and maintain. As a side note, I am also reading one of Heydon’s books entitled Inclusive Design Patterns, which is worthy of any front-end developer’s time. ...

Naming things and vertically centering things There are only two hard things in Computer Science: cache invalidation and naming things.> — Phil Karlton Without any doubt, the tasks of vertically aligning UI components and creating a good CSS naming scheme are a challenge. In front-end development, there are some unique restrictions which make things even more difficult. In order to develop more reusable and widely supported UI components, the Peapod team has had to devise their own development practices and naming strategies. In this article, I detail the various approaches to controlling vertical alignment and their respective advantages and disadvantages. I then briefly discuss the Peapod development group’s approach to naming elements. ...

The Battle with HTML Email Templates HTML Emails Nearly all online users receive tons of newsletters, advertisements, and account notification emails from various sites and online services. Marketers consider email communication one of the most important channels for converting new customers. Not so long ago, making HTML emails was considered to be bad practice. **When you send an HTML email, you have no guarantee that your message will be A) readable at all or B) visually legible to the recipient. With plain text email, you always have that guarantee, no matter what mail client the recipient is using. ...

The other day, my friends were surprised when I mentioned that Peapod was founded in 1989. They were doubtful that people even did online shopping 28 years ago, but I assured them that Peapod really was doing grocery delivery and taking orders made via a computer. We were all curious what the site looked like, and after a little searching, I was able to assemble a visual history of the Peapod.com website. Enjoy. ...