Posts in Category: web tricks

Data Enrichment with MongoDB Stitch

Objectives

Here is what we are going to achieve in this tutorial:

  • Firstly, we are going to write a document to MongoDB using MongoDB Stitch.

The result in our MongoDB collection will look like this:

{
"_id": ObjectId("5bb27712dced5f37bebf388c"),
"Title":"Guardians of the Galaxy"
}
  • Secondly, a trigger will catch this new insertion and start a function.
  • Lastly, this function will call the OMDB external API with the given movie title, fetch data about that movie, and finally enrich our MongoDB document

    Read More


Introducing GitHub Actions Part-2

The software development process from conception of the idea to writing of code and finally deploying the finished product can be quite tedious at times. You need to handle a variety of things beyond just writing the code. But what if you could take some of this work off your shoulders? Well, this is where Github Actions come in.

A new feature recently introduced into Github, Github Actions allow you to automate your workflow by letting Github

Read More


CSS Border-Radius Can Do That?

TL/DR: When you use eight values specifying border-radius in CSS, you can create organic looking shapes.

During this year’s Frontend Conference Zurich Rachel Andrew talked about Unlocking the Power of CSS Grid Layout. At the end of her talk, she mentioned something about an old CSS property that got stuck in my head:

The Image is set round just by using the well-supported border-radius. Don’t forget that old CSS still exists and is

Read More


How to build a telegram bot using Node.js and Now

Introduction

Serverless deployment, the intriguing topic grabbing a lot of attention from rookies and veterans alike in the tech ecosystem is finally here. In this article we’ll be taking a practical approach to serverless deployment, also referred to as FaaS (Function as a Service). Serverless architecture, simply put is a way to build and run applications and services without managing server in infrastructure. Practical approach? We’ll be building a telegram weather bot using node.js, which will be hosted on Read More


Photoshop Workflows And Shortcuts For Digital Artists

Adobe Photoshop plays a role in almost every digital creator’s life. Photoshop is what many digital artists, photographers, graphic designers, and even some web developers have in common. The tool is so flexible that often you can achieve the same results in several different ways. What sets us all apart is our personal workflows and our preferences on how we use it to achieve the desired outcome.
I use Photoshop every day and shortcuts are a vital part of my workflow.

Read More


All the News From Adobe MAX

Adobe’s annual MAX conference is well underway in LA, and as usual there’s a big buzz around changes to the Creative Cloud suite.

Adobe’s product line often seems archaic—parts of Photoshop’s first codebase were originally painted onto the walls of caves by neanderthals—but this iterative approach also provides a solid platform to venture into new ground in ways that would bankrupt a startup.

Not only has Adobe pivoted into prototyping with XD, overtaking the existing market in a brief couple of years,

Read More


Build a Phone System for Your Company With Twilio, Okta, and JavaScript

If you’ve ever worked for a company with more than a few employees, you’ve probably seen some interesting phone systems.

When I used to work at Cisco, everyone was given a dedicated Cisco desk phone that hooked up to a server somewhere in the company and each employee was assigned a unique phone number and extension.

I never really liked that setup. It annoyed me that I had this big, clunky desk phone taking up space, collecting dust, and generally not being

Read More


Smart Bundling: How To Serve Legacy Code Only To Legacy Browsers

A website today receives a large chunk of its traffic from evergreen browsers — most of which have good support for ES6+, new JavaScript standards, new web platform APIs and CSS attributes. However, legacy browsers still need to be supported for the near future — their usage share is large enough not to be ignored, depending on your user base.

A quick look at caniuse.com’s usage table reveals that evergreen browsers occupy a lion’s share of the browser market — more

Read More


What’s New for Designers, October 2018

You might notice a theme this month in our collection of new tools for designers: color. There are lots of color resources sprinkled throughout this collection. But there are plenty of other goodies as well, including a beta tool from Google and some new ways to think about layouts.

 

Logo Lab

Logo Lab is a new tool that helps you figure out if a logo is sound. Simply upload a logo, and you’ll be presented with visual experiments

Read More


Designing Experiences To Improve Mental Health

Did you know that a simple search for “depression” on the iPhone App Store brings up 198 results? In the Android Play Store, it brings up 239. The categories range from “Medical” to “Health & Fitness” to “Lifestyle.” The apps themselves offer everything from “depressing wallpaper” to “mood tracker” to “life coach.” We are approaching a golden age of digital therapeutics and design for mental health — if we as UX practitioners do our jobs well.

Given the plethora of apps

Read More


5 Secrets of Image-Rich Websites

When was the last time you visited a website with no images?

As web designers, we love adding images to our designs because images are memorable and give us a direct channel of communication to the audience’s brain. Also, images are universal and processed by our brains faster than text. That’s partly why the “story” medium (short-form videos with effects and overlays) and emojis attract engagement.

But something else has also been happening since “web 2.0” came along. The high usage of

Read More


Authenticate a Node ES6 API with JSON Web Tokens

In this guide, we’ll be implementing token based authentication in our own node.js A.P.I. using JSON web tokens.

Plan of attack

We’ll begin by:

  1. Setting up our development environment and initializing our express server.
  2. Creating our first basic route and controller.
  3. Fleshing out our routes and controllers to add users and login users.
  4. Creating a route and controller that will handle getting all users.

Finally, we’ll

  1. Add middleware to protect our get users route by requiring a user to be an admin and to

    Read More


Saving Grandma’s Recipes With Xamarin.Forms

My grandma makes the best, most fluffiest, go weak-in-your-knees buns that anybody has ever tasted. The problem is, there’s a ton of secret ingredients (and I’m not just talking love) that go into those buns, and those ingredients and directions are all stored in my grandma’s head.We all have family recipes like that, and instead of possibly forgetting them, in this article we’re going to create a mobile app for iOS and Android using Xamarin.Forms that will save them for

Read More


Create Sites Easily with WP Page Builder

There’s little doubt that WordPress is one of the biggest web technologies in the world, powering around a third of the web, and growing all the time. Until recently WordPress was only for the initiated, those developers who’d spent years learning how to dig into the source code and tinker, without breaking their whole site.

In the last few years WordPress has been revolutionized by the introduction of page builders, applications that allow anyone—even someone with no design or coding knowledge—to

Read More



How to Create Magnetic Content

I know I know: Content is king! You’re already sick to the back-teeth of hearing it.
 You’ve made your content, you know your target audience—you just want to build some links and get some darn traffic to that content, am I right?

Not to rain on your parade, but what if your content really is trash?
 Will anyone actually link to it? If it is subpar, then probably not, and trying to build links to it will be a colossal waste

Read More


Form Design Patterns Book Excerpt: A Registration Form

Let’s start with a registration form. Most companies want long-term relationships with their users. To do that they need users to sign up. And to do that, they need to give users value in return. Nobody wants to sign up to your service — they just want to access whatever it is you offer, or the promise of a faster experience next time they visit.

Despite the registration form’s basic appearance, there are many things to consider: the primitive elements that

Read More


React Apps with the Google Maps API and google-maps-react

This tutorial aims at integrating the google maps API to your React components and enabling you to display maps on your website.

Introduction to Google Maps API.

At some point of our lives, we’ve all gotten a chance to use and interact with the google maps, either through finding directions, viewing our current location, ordering cabs or estimating distance and time from one point to another.

Including the Google maps API in a React App is actually far much easier than expected due

Read More


Creating Multistep Forms With React and Semantic UI

Forms are the standard method used to collect user inputs on web applications. However, sometimes we may be collecting large amounts that may result in a very large form with several fields. This can be a pain not just for the user but for the developer as well since they will have to fit these fields into the form in a way that still looks appealing to the user.

The solution? Break the form into several sections collecting a certain type

Read More


Build a Custom Toggle Switch with React

Building web applications usually involves making provisions for user interactions. One of the major ways of making provision for user interactions is through forms. Different form components exist for taking different kinds of input from the user. For example, a password component takes sensitive information from a user and masks the information so that it is not visible.

Most times, the information you need to get from a user is booleanlike – for example: yes or no, true or false, enable

Read More