Web Tricks Archives - Page 5 of 27

25Oct

By phpInfoNo Comments

Web Tricks

6 Reasons to Love Smaller CMS

WordPress, Joomla, and Drupal; these are perhaps the three biggest names in the world of the consumer CMS. They are known, they are loved, they are behemoths for a good reason. There’s no escaping them. We are all WordPress, now. No, but seriously, there’s almost nothing they can’t do, with the judicious application of plugins, themes, and coding knowledge. Yeah, believe it or not, I’m not here to rag on them. Kudos to their developers. I’m just going to sit over here and show some love to the smaller CMS options for a bit. If I were given to fits of poetry, I might write a sonnet about them or something. Alas, Lord Byron I am not; I am not nearly so rich, I have no desire to invade Greece, I do not own a bear. Instead, you’ll be getting this article detailing some of t...

25Oct

By phpInfo2 Comments

Web Tricks

Deploying Your First Gatsby Site to Netlify

Recently, Netlify has become one of the hotter topics in Web Development. They are loved in the community and just received millions of dollars of funding to continue making their product better. If you aren't familiar, Netlify is a web host with particular support Static Sites (think Gatsby.js, Next.js, etc.) as well as other incredible features like serverless (lambda) functions, free https certs, and more! In this article, we are going to walk through the steps to deploy a Gatsby app to Netlify. TLDR Create a Github Repository Create Gatsby App with Gatsby CLI Push App to Github Create New Site in Netlify and Connect to Github Repository Create GitHub Repository To deploy to Netlify, the easiest way is to set up Continuous Deployment by connecting to an existing r...

24Oct

By phpInfoNo Comments

Web Tricks

Splicing HTML’s DNA With CSS Attribute Selectors

For most of my career, attribute selectors have been more magic than science. I’d stare, gobsmacked, at the CSS for outputting a link in a print style sheet, understanding nothing. I’d dutifully copy, and paste it into my print stylesheet then run off to put out whatever project was the largest burning trash heap. But you don’t have to stare slack-jawed at CSS attribute selectors anymore. By the end of this article, you’ll use them to run diagnostics on your site, fix otherwise unsolvable problems, and generate technologic experiences so advanced they feel like magic. You may think I’m promising too much and you’re right, but once you understand the power of attribute selectors, you might feel like exaggerating yourself. On the most basic level, you put an HTML attribute in square br...

24Oct

By phpInfoNo Comments

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 with the data we gathered from this API. This is the final result we expect in our MongoDB collection: { "_id": ObjectId("5bb27712dced5f37bebf388c"), "Title":"Guardians of the Galaxy", "Year":"2014", "Rated":"PG-13", "Released":"01 Aug 2014", ...

24Oct

By phpInfoNo Comments

Web Tricks

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 take care of a number of processes which can be triggered by a variety of events on the platform, be it pushing code, making a release or creating issues among others. What can you do with Github Actions? The possibilities are limitless, you could do anything from: handling continuous integration and deployment (building, testing and deployi...

20Oct

By phpInfoNo Comments

Web Tricks

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 useful. You don’t need to use something fancy for every effect. — Rachel Andrew Shortly after I heard this talk, I thought that you certainly could create more than just circles and started to dig deeper into what can be done using border-radius. Mastering Border-Radius Single Value Let’s start with the basics. Hopefully this will not bore ...

20Oct

By phpInfoNo Comments

Web Tricks

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 now. Requirements Registering a telegram bot using BotFather Yes! you guessed right. BotFather is also a bot. Before we go on to the nitty-gritty of coding our bot, we'll need to create and register the bot with BotFather in order to get an API key. We'll head over to BotFather...

17Oct

By phpInfo2 Comments

Web Tricks

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. They allow me to save time and to focus better on what I am doing: digital illustration. In this article, I am going to share the Photoshop shortcuts I use frequently — some of its features that help me be more productive, and a few key parts of my creative process.To profit the most from this tutorial, some familiarity with ...

16Oct

By phpInfoNo Comments

Web Tricks

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, but it’s now applying the same approach to new markets, where the competition is even thinner on the ground. Adobe XD Updates Since May, when we reported that Adobe XD is now free, interest in the platform has grown exponentially. Despite interesting additions to Lightroom ...

16Oct

By phpInfoNo Comments

Web Tricks

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 useful. The one time I did actually want to use my desk phone I couldn't figure out how to dial a number to the outside world and spent a frustrating half-hour accidentally calling other departments before I gave up and used my cell. Not too long after my Cisco experience I joined a smaller company. They didn't have desk ph...

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

16Oct

By phpInfoNo Comments

Web Tricks

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 than 75%. In spite of this, the norm is to prefix CSS, transpile all of our JavaScript to ES5, and include polyfills to support every user we care about. While this is understandable from a historical context — the web has always been about progressive enhancement — the question remains: Are we slowing down the web for th...

16Oct

By phpInfoNo Comments

Web Tricks

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 that test key factors like scalability, silhouette and balance. The visual tool shows where a logo succeeds and where it could use some improvement. This can be a great resource for individual testing or client presentations. It includes 10 tests (including a color blindness simulator and scalability test) and all you have to do to use it is upload a PNG...

Designing Experiences To Improve Mental Health

12Oct

By phpInfoNo Comments

Web Tricks

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 available, you might assume that there are already dozens of wonderful digital therapies available for people struggling with mental health disorders. But — according to initial studies by clinical psychologists — you would be wrong. Most apps are useless at best, and harmful at worst, due primarily to a disconnect b...

12Oct

By phpInfoNo Comments

Web Tricks

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 images all over the web, some fueled by user-generated content, is creating a problem for web designers who now must deliver rich experiences in the face of an ever-increasing number of images. In the following sections, we’ll discuss in detail five things to keep in mind when designing smart, imag...

Authenticate a Node ES6 API with JSON Web Tokens

12Oct

By phpInfoNo Comments

Web Tricks

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: Setting up our development environment and initializing our express server. Creating our first basic route and controller. Fleshing out our routes and controllers to add users and login users. Creating a route and controller that will handle getting all users. Finally, we'll Add middleware to protect our get users route by requiring a user to be an admin and to have a valid token. Validate that only an admin with a token can access the protected route. Sounds exciting? Let's get to it then. Setup Before we get started in earnest, we'll need to have a few things taken care of. Folder structure Here's what our folder...