Web Tricks

Monthly Web Development Update 5/2018: Browser Performance, Iteration Zero, And Web AuthenticationMonthly Web Development Update 5/2018: Browser Performance, Iteration Zero, And Web Authentication Anselm Hannemann 2018-05-18T13:51:17+02:00 2018-06-05T11:39:14+00:00 As developers, we often talk about performance and request browsers to render things faster. But when they finally do, we demand even more performance. Alex Russel from the Chrome team now shared some thoughts on developers abusing browser performance and explains why websites are still slow even though browsers reinvented themselves with incredibly fast rendering engines. This is in line with an art...

One of the biggest distractions to any software team building web and mobile applications is the act of fixing up problems in previously written code. I'm willing to bet that your personal performance is measured on how much you build, innovative and deploy rather than how much error free code you release or how much technical debt you manage to scoop up on your way. So it always seems like a huge hassle or distraction to be having to go back and fix up bugs. Trying to diagnose and fix those problems is terribly inefficient too. Digging through log files, matching time and date stamps and asking non technical users over support tickets what happened and when cause a lot of frustration. But it doesn't have to be that way. Here we'll talk about how effective error monitoring in production me...

In a bid to lower the load times of a website, several techniques have been developed. One such technique is the lazy loading of images on the page. TL, DR As seen above, in this challenge we shall be lazy loading the images on the page. When the page is loaded, only the image placeholders which appear completely in the viewport are fetched. Hint: The code from this previous challenge could be helpful. The Challenge As a performance improvement technique, lazy loading involves the loading of only images whose placeholders come into view. Implement this lazy loading feature on the provided page containing quite funny animal memes. Placeholder images with smaller dimensions and size are stretched to fit the image size. A larger image is specified using the data-src attribute but isn...

A lot of new web technologies and design paradigms have emerged in the last couple of years. Some programming languages are beginning to gain increasing popularity. It's very likely to have heard about concepts like responsive design, hybrid mobile/desktop apps, progressive web apps(PWAs), single page applications(SPAs), server-side rendered(SSR) apps, serverless architechture, the list goes on. While every modern web developer aims at getting up to speed with these technologies, there are a few less popular web concepts and techniques that are quite useful - one of which is web scraping. In this tutorial, we will take a look at web scraping and practical ways we can harness the technique. What is Web Scraping? In very simple terms, web scraping is the technique of extracting data from web...

This content is sponsored via Syndicate Ads Adding authentication to web pages can be pretty annoying. While I'd like to say that over the course of my programming tenure I've learned to easily add authentication to any app I create, my attempts tend to devolve into me bickering with myself endlessly over a User schema and the most efficient way to share my user data between components. One of the greatest things that's happened in recent years, however, is the proliferation of identity and user management API services like Okta, which handle many of the typical authentication woes for you, including: User registration User login Multi-factor authentication Authorization (groups, permissions, etc.) Social login Okta essentially handles all the bullshit you typically need to build when you ...

One of MongoDB’s key strengths has always been developer empowerment: by relying on a flexible schema architecture, MongoDB makes it easier and faster for applications to move through the development stages from proof-of-concept to production and iterate over update cycles as requirements evolve. However, as applications mature and scale, they tend to reach a stable stage where frequent schema changes are no longer critical or must be rolled out in a more controlled fashion, to prevent undesirable data from being inserted into the database. These controls are especially important when multiple applications write into the same database, or when analytics processes rely on predefined data structu...

What are developers without code editors? I can't seem to think of a clear answer to that. In recent times, code editors have evolved from traditional IDEs to smarter and faster tools. While some favor speed with a minimal user interface (Sublime Text), others choose extended functionality at the cost of lesser speed (Atom, WebStorm). Sublime Text is one such code editor that favors speed. It is still incredibly fast Following the recent release of the Sublime Text 3.1, we shall be discussing awesome features and improvements made in this version, from better support for high res devices to improved color schemes, ligatures, file system management and improved performance. Here are the top 8 features and/or improvements in version 3.1 Improved Text Rendering and Ligature Support While a...

When building React applications, one thing developers don’t like to utilize is routing in React - usually because of the assumed learning curve involved. In this article, we are going to debunk that myth and show you how easy it is to implement routing and serving responsive routes in your React applications. In layman’s terms, responsive routing is pretty much serving different routes to users based on the viewport of their device. CSS media queries are usually used to achieve this. The only issue with this is the fact that with media queries, you’re restricted to either showing or not showing different elements by using the CSS props. With responsive routes, you can now serve entire separate views our React applications to different users based directly on their screen sizes. What we’ll...

Last week we put out a challenge to build out a scroll-spy navbar. Scroll-spy navbars are great and highlights the navbar menu when a specific element or portion of the page comes into view. Are you yet to take the challenge? Do so and showcase your submission in the comment section of the post or on Twitter using the hashtag #scotchchallenge to receive reviews. This challenge can be completed using any language, tool, technique or technology. In this post we shall be solving this challenge by implementing the scroll-spy on the provided base code using Vanilla JavaScript and in-view.js. This will be achieved in about 11 lines of code. In-view.js is a JavaScript utility which notifies us when a DOM element enters or exits a viewport. The Base Base code was provided for this challenge which ...

With the high demand for SEO and high-performant web application, server-side rendering has become innevitable for commercial websites since they need to be found and ranked higher than their competitors. Building SSR with frontend frameoworks/libraries like React is quite challenging and the flow can get tricky. Next.js is a platform that simplifies SSR and helps the developr focus on just building a React app. Why NextJS Next.js was built to bridge the gap between frontend and backend development. Since it is built on React, there is a really low learning curve for frontend developers who want to start building fullstack Javascript web applications. It also has some incredible features that come built in. Here’s a list of some Next.js features: Ease of use Automatic code splitting ...