PHPInfo

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

CSS Tricks

Using Feature Detection, Conditionals, and Groups with Selectors

CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer technology without causing any issues in older browsers. Consider the relatively new caret-color property (it changes the color of the cursor in inputs). Its support is still low but that does not mean that we should not use it today. .myInput { color: blue; caret-color: red; } Notice how we put it right next to color, a property with practically universal browser support; one that will be applied everywhere. In this case, we have not explicitly discriminated betwee...

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...

18Oct

By phpInfoNo Comments

CSS Tricks

Introducing GitHub Actions

It’s a common situation: you create a site and it’s ready to go. It’s all on GitHub. But you’re not really done. You need to set up deployment. You need to set up a process that runs your tests for you and you're not manually running commands all the time. Ideally, every time you push to master, everything runs for you: the tests, the deployment... all in one place. Previously, there were only few options here that could help with that. You could piece together other services, set them up, and integrate them with GitHub. You could also write post-commit hooks, which also help. But now, enter GitHub Actions. Actions are small bits of code that can be run off of various GitHub events, the the most common of which is pushing to master. But it's not necessarily limited to th...

18Oct

By phpInfoNo Comments

CSS Tricks

How to Import a Sass File into Every Vue Component in an App

If you're working on a large-scale Vue application, chances are at some point you're going to want to organize the structure of your application so that you have some globally defined variables for CSS that you can make use of in any part of your application. This can be accomplished by writing this piece of code into every component in your application: <style lang="scss"> @import "./styles/_variables.scss"; </style> But who has time for that?! We're programmers, let's do this programmatically. Why? You might be wondering why we would want to do something like this, especially if you're just starting out in web development. Globals are bad, right? Why would we need this? What even are Sass variables? If you already know all of this, then you can skip down ...

18Oct

By phpInfoNo Comments

CSS Tricks

Why Using reduce() to Sequentially Resolve Promises Works

Writing asynchronous JavaScript without using the Promise object is a lot like baking a cake with your eyes closed. It can be done, but it's gonna be messy and you'll probably end up burning yourself. I won't say it's necessary, but you get the idea. It's real nice. Sometimes, though, it needs a little help to solve some unique challenges, like when you're trying to sequentially resolve a bunch of promises in order, one after the other. A trick like this is handy, for example, when you're doing some sort of batch processing via AJAX. You want the server to process a bunch of things, but not all at once, so you space the processing out over time. Ruling out packages that help make this task easier (like Caolan McMahon's async library), the most commonly suggested solution fo...

17Oct

By phpInfoNo Comments

CSS Tricks

Getting Started with Vue Plugins

In the last months, I've learned a lot about Vue. From building SEO-friendly SPAs to crafting killer blogs or playing with transitions and animations, I've experimented with the framework thoroughly. But there's been a missing piece throughout my learning: plugins. Most folks working with Vue have either comes to rely on plugins as part of their workflow or will certainly cross paths with plugins somewhere down the road. Whatever the case, they’re a great way to leverage existing code without having to constantly write from scratch. Many of you have likely used jQuery and are accustomed to using (or making!) plugins to create anything from carousels and modals to responsive videos and type. We’re basically talking about the same thing here with Vue plugins. So, you want to make...

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

CSS Tricks

HTML for Zip Codes

It seems like zip codes are just numbers, right? So... <input id="zip" name="zip" type="number"> The advantage there being able to take advantage of free validation from the browser, and triggering a more helpful number-based keyboard on mobile devices. But Zach pointed out that type="number" is problematic for zip codes because zip codes can have leading zeros (e.g. a Boston zip code might be 02119). Filament group also has a little lib for fixing this. This is the perfect job for inputmode: <input id="zip" name="zip" type="text" inputmode="numeric" pattern="^(?(^00000(|-0000))|(d{5}(|-d{4})))$"> But the support is pretty bad at the time of this writing. A couple of people mentioned trying to hijack type="tel" for it, but that has its own downsides, like rejecting...

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...

16Oct

By phpInfoNo Comments

CSS Tricks

Lazy Loading Images with Vue.js Directives and Intersection Observer

When I think about web performance, the first thing that comes to my mind is how images are generally the last elements that appear on a page. Today, images can be a major issue when it comes to performance, which is unfortunate since the speed a website loads has a direct impact on users successfully doing what they came to the page to do (think conversation rates). In this article I’d like to cover the same topic using data attributes, Intersection Observer and custom directives in Vue.js. What this’ll basically do is allow us to solve two things: Store the src of the image we want to load without loading it in the first place. Detect when the image becomes visible to the user and trigger the request to load the image. Same basic lazy loading concept, but another way to ...

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...