Well, of course, I shouldn
Strategy

Well, of course, I shouldn’t be surprised to see a link to a…


Well, of course, I shouldn't be surprised to see a link to a careers page for devs here

I was on Nextdoor and having trouble uploading pics for something I'm selling so I popped open the console to see what was up and saw this. Gave me a chuckle. It makes perfect sense to put that there.

https://preview.redd.it/eycafucje9e51.png?width=638&format=png&auto=webp&s=77eef228d0b319882396cc0398c83300e207148c

submitted by /u/carlitoa
[comments]



Source link

Strategy

Tutorial: Build a Serverless API Back-end for Slack


Webhook backends are a popular use case for Serverless functions. FaaS (Functions-as-a-service) offerings make it relatively easy to provide an HTTP endpoint which hosts the Webhook logic which can be as simple as sending an email to something as entertaining as responding with funny GIFs!

In this tutorial, we will explore funcy — a Serverless webhook backend which is a trimmed down version of the awesome Giphy for Slack. The (original) Giphy Slack app returns a bunch of GIFs for a search term, and the user can pick one of them. Funcy tweaks it a bit by simply returning a (single) random image for a search keyword using the Giphy Random API.

This blog post provides a step-by-step guide to getting the application deployed to Azure Functions and hooking it up with your Slack workspace. The code is available on GitHub for you to grok.

Overview

funcy is built as a Slash Command within Slack. As a user, you can invoke it from your Slack workspace using /funcy <your search term>. This, in turn, invokes our Webhook deployed to Azure Functions — which is nothing but a bunch of Java code. It calls the Giphy Random API and returns the result back to the user.

For example, invoking it from your Slack workspace using /funcy serverless will return a random GIF.

The upcoming sections will guide you through the following:

  • Pre-requisites
  • Slack setup and configuration
  • Deploying to Azure Functions

Prerequisites

Before you proceed, ensure that you have the following ready – it shouldn’t take too long

Please note down your GIPHY API key as you will be using it later

Configure Slack

Please note that the instructions in this section have been adapted from the Slack documentation.

Create a Slack App

Sign into your Slack Workspace. Start by creating a new Slack App.

Create a Slash Command

Once you’re done creating the app, head to your app’s settings page, and then click the Slash Commands feature in the navigation menu.

You’ll be presented with a button marked Create New Command, and when you click on it, you’ll see a screen where you’ll be asked to define your new Slash Command with the required information.

Enter the required information. Please note that the Request URL field is the one where you will enter the HTTP endpoint of function which will be available after you deploy it. You can use a dummy URL as a placeholder just for the time being e.g. https://temporary.com:4242

Once you’re done, hit Save to finish.

Install the App to Your Workspace

Once you’re done creating the Slash Command, head to your app’s settings page, click the Basic Information feature in the navigation menu, choose Install your app to your workspace and click Install App to Workspace. This will install the app to your Slack workspace to test your app and generate the tokens you need to interact with the Slack API.

As soon as you finish installing the app, the App Credentials will show up on the same page. You need to grab your Slack Signing Secret from there

Make a note of your app Signing Secret as you’ll be using it later

Deploy to Azure

Start by cloning the GitHub repository and change into the application directory

The pom.xml file contains the following attributes used by the Azure Functions Maven plugin – application name (functionAppName), region (functionAppRegion) and resource group (functionResourceGroup). It has default values for the above parameters, so you can choose to continue using them if you like.

  • functionAppName – funcyapp
  • functionAppRegion – westus
  • functionResourceGroup – java-functions-group

Please note that the app name must be unique across Azure.

If you wish to wish to change the values, please take a look at this snippet from pom.xml which highlights the <properties> which need to be updated

The name of the function is not the same as application name (configured via pom.xml) and is specified using the @FunctionName annotation in the Java code for the function – in this case, the name is funcy.

You can now build the function and deploy it to Azure

The results from a successful deployment will look something like this

Use the Azure CLI to list your Functions App

You should see a JSON output

You should be able to see the function (under Function App menu) in Azure Portal

Once the deployment is successful, the function should be ready to serve requests and can be accessed over HTTP(s) at the following endpoint – https://<APP_NAME>.azurewebsites.net/api/<FUNCTION_NAME>

For an application named funcyapp with a function called funcy, the endpoint would be

You’re almost there!

Update your Azure Functions app

Now that the Azure Functions app is up and running, you need to update it to seed the Giphy API Key and Slack Signing Secret as environment variables.

e.g.

Please refer to the documentation on How to manage a function app in the Azure portal for details.

Update the Slack app

Head to your app’s settings page, and then click the Slash Commands feature in the navigation menu. Edit the command and replace the value for the Request URL field with your function HTTP(s) endpoint

funcy Time!

From your workspace, invoke the command

/funcy <search term>

Since you can’t go wrong with cats, try

/funcy cat

Don’t worry if you see a Timeout error from Slack after the first invocation. This is due to the ‘cold start’ problem where the function takes a few seconds to bootstrap but Slack expects a response in 3 seconds. Just retry (a couple of times), and things should be fine.

Resources

The below mentioned resources were leveraged specifically for developing the demo app presented in this blog post, so you’re likely to find them useful as well!

I really hope you enjoyed and learned something from this article!



Source link

Screenshot of DevTools open on a CSS-Tricks page. The Lighthouse panel is open showing a best practices score of 100 out of 100.
Strategy

A Look at What’s New in Chrome DevTools in 2020


I’m excited to share some of the newer features in Chrome DevTools with you. There’s a brief introduction below, and then we’ll cover many of the new DevTools features. We’ll also look at what’s happening in some other browsers. I keep up with this stuff, as I create Dev Tips, the largest collection of DevTools tips you’ll find online! 

It’s a good idea to find out what’s changed in DevTools because it’s constantly evolving and new features are specifically designed to help and improve our development and debugging experience.

Let’s jump into the latest and greatest. While the public stable version of Chrome does have most of these features, I’m using Chrome Canary as I like to stay on the bleeding edge.

Lighthouse

Lighthouse is an open source tool for auditing web pages, typically around performance, SEO, accessibility and such. For a while now, Lighthouse has been bundled as part of DevTools meaning you can find it in a panel named… Lighthouse!

Screenshot of DevTools open on a CSS-Tricks page. The Lighthouse panel is open showing a best practices score of 100 out of 100.
Well done, Mr. Coyier. 🏆

I really like Lighthouse because it’s one of easiest parts of DevTools to use. Click “Generate report” and you immediately get human-readable notes for your webpage, such as:

Document uses legible font sizes 100% legible text

Or:

Avoid an excessive DOM size (1,189 elements)

Almost every single audit links to developer documentation that explains how the audit may fail, and what you can do to improve it.

The best way to get started with Lighthouse is to run audits on your own websites:

  1. Open up DevTools and navigate to the Lighthouse panel when you are on one of your sites
  2. Select the items you want to audit (Best practices is a good starting point)
  3. Click Generate report
  4. Click on any passed/failed audits to investigate the findings

Even though Lighthouse has been part of DevTools for a while now (since 2017!), it still deserves a significant mention because of the user-facing features it continues to ship, such as:

  • An audit that checks that anchor elements resolve to their URLs (Fun fact: I worked on this!)
  • An audit that checks whether the Largest Contentful Paint metic is fast enough
  • An audit to warn you of unused JavaScript

A better “Inspect Element”

This is a subtle and, in some ways, very small feature, but it can have profound effects on how we treat web accessibility.

Here’s how it works. When you use Inspect Element — what is arguably the most common use of DevTools — you now get a tooltip with additional information on accessibility.

Screenshot showing DevTools open on a CSS-Tricks page. An element is highlighted on the page and a tooltip with a white background is above it providing information on the element's color, font, contrast, name, role, and whether it is keyboard-focusable.
Accessibility is baked right in!

The reason I say this can have a profound impact is because DevTools has had accessibility features for quite some time now, but how many of us actually use them? Including this information on a commonly used feature like Inspect Element will gives it a lot more visibility and makes it a lot more accessible.

The tooltip includes:

  • the contrast ratio of the text (how well, or how poorly, does the foreground text contrast with the background color)
  • the text representation
  • the ARIA role
  • whether or not the inspected element is keyboard-focusable

To try this out, right-click (or Cmd + Shift + C) on an element and select Inspect to view it in DevTools.

I made a 14-minute video on Accessibility debugging with Chrome DevTools which covers some of this in more detail.

Emulate vision deficiencies

Exactly as it says on the tin, you can use Chrome DevTools to emulate vision impairments. For example, we can view a site through the lens of blurred vision.

Screenshot of DevTools open on a CSS-Tricks page. The Rendering panel is open and the blurred vision option is selected. The CSS-Tricks page is blurry and difficult to read.
That’s a challenge to read!

How can you do this in DevTools? Like this:

  1. Open DevTools (right click and “Inspect” or Cmd + Shift + C).
  2. Open the DevTools Command menu (Cmd + Shift + P on Mac, Ctrl + Shift + P on Windows).
  3. Select Show Rendering in the Command menu.
  4. Select a deficiency in the Rendering pane.

We used blurred vision as an example, but DevTools has other options, including: protanopia, deuteranopia, tritanopia, and achromatopsia.

Like with any tool of this nature, it’s designed to be a complement to our (hopefully) existing accessibility skills. In other words, it’s not instructional, but rather, influential on the designs and user experiences we create.

Here are a couple of extra resources on low vision accessibility and emulation:

Get timing on performance

The Performance Panel in DevTools can sometimes look like a confusing mish-mash of shapes and colors.

This update to it is great because it does a better job surfacing meaningful performance metrics.

Screenshot of DevTools with the Performance panel open. A chart showing the timeline of page rendering is above a row of Timings, including DCL, FP, FCP, L, and LCP. Below that is a summary that provides a time range for the selected timing.

What we want to look at are those extra timing rectangles shown in the “Timings” in the Performance Panel recording. This highlights:

  • DOMContentLoaded: The event which triggers when the initial HTML loads
  • First Paint: When the browser first paints pixels to the screen
  • First Contentful Paint: The point at which the browser draws content from the DOM which indicates to the user that content is loading
  • Onload: When the page and all of its resources have finished loading
  • Largest Contentful Paint: The largest image or text element, which is rendered in the viewport

As a bonus, if you find the Largest Contentful Paint event in a Performance Panel recording, you can click on it to get additional information.

Nice work, CSS-Tricks! The Largest Contentful Paint happens early on in the page load.

While there is a lot of golden information here, the “Related Node” is potentially the most useful item because it specifies exactly which element contributed to the LCP event.

To try this feature out:

  1. Open up DevTools and navigate to the Performance panel
  2. Click “Start profiling and reload page”
  3. Observe the timing metrics in the Timings section of a recording
  4. Click the individual metrics to see what additional information you get

Monitor performance

If you want to quickly get started using DevTools to analyze performance and you’ve already tried Lighthouse, then I recommend the Performance Monitor feature. This is sort of like having WebPageTest.org right at your fingertips with things like CPU usage.

Screenshot of DevTools with the Performance Monitor pane open. Four timeline charts are stacked vertically, starting with CPU Usage,followed by JavaScript Heap Size, DOM Nodes, and JavaScript Event Listeners.

Here’s how to access it:

  1. Open DevTools
  2. Open up the Command menu (Cmd + Shift + P on Mac, Ctrl + Shift + P on Windows)
  3. Select “Show performance monitor” from the Command menu
  4. Interact and navigate around the website
  5. Observe the results

The Performance Monitor can give you interesting metrics, however, unlike Lighthouse, it’s for you to figure out how to interpret them and take action. No suggestions are provided. It’s up to you to study that CPU usage chart and ask whether something like 90% is an acceptable level for your site (it probably isn’t).

The Performance Monitor has an interactive legend, where you can toggle metrics on and off, such as:

  • CPU usage
  • JS heap size
  • DOM Nodes
  • JS event listeners
  • Documents
  • Document Frames
  • Layouts / sec
  • Style recalcs / sec 

CSS overview and local overrides

CSS-Tricks has already covered these features, so go and check them out!

  • CSS Overview: A handy DevTools panel that gives a bunch of interesting stats on the CSS your page is using
  • Local Overrides:  A powerful feature that lets you override production websites with your local resources, so you can easily preview changes 

So, what about DevTool in other browsers?

I’m sure you noticed that I’ve been using Chrome throughout this article. It’s the browser I use personally. That said, it’s worth considering that:

  • Firefox DevTools is looking pretty great right now
  • With Microsoft Edge extending from Chromium, it too will benefit from these DevTools features
  • As evident on the Safari Technology Preview Release Notes (search for Web Inspector on that page), Safari DevTools has come a long way 

In other words, keep an eye out because this is a quickly evolving space!

Conclusion

We covered a lot in a short amount of space!

  • Lighthouse: A panel that provides  tips and suggestions for performance, accessibility, SEO and best practices.
  • Inspect Element: An enhancement to the Inspect Element feature that provides accessibility information to the Inspect Element tooltip
  • Emulate vision deficiencies: A feature in the Rendering Pane to view a page through the lens of low vision.
  • Performance Panel Timings: Additional metrics in the Performance panel recording, showing user-orientated stats, like Largest Contentful Paint
  • Performance Monitor – A real-time visualization of performance metrics for the current website, such as CPU usage and DOM size

Please check out my mailing list, Dev Tips, if you want to stay keep up with the latest updates and get over 200 web development tips! I also have a premium video course over at ModernDevTools.com. And, I tend to post loads of bonus web development resources on Twitter.





Source link

r/graphic_design - Improving logo awareness / simplicity
Strategy

Improving logo awareness / simplicity : graphic_design


Hi all,

So I wanted to get some inputs from others on how I can make my logo more “modern” and “simplistic”.

I had this logo created by someone and I’m not much of a graphic designer so I won’t know what mood, colors, etc.. go with what, so I just wanted to get an input from someone that might know how to change the logo so it “pops” more, and is just minimalistic.

This is the current logo theme/colors that I have on Instagram, which I feel like the background takes up too much colors and it just looks very clunky.

r/graphic_design - Improving logo awareness / simplicity

Current Instagram Logo



Source link

Why am I all of a sudden seeing these logs in FireFox (developer edition)
Strategy

Why am I all of a sudden seeing these logs in FireFox (devel…


Why am I all of a sudden seeing these logs in FireFox (developer edition)

I can't remember if Firefox updated recently, but I only noticed this yesterday while debugging some code.

Only thing I can assume is that one of my installed extensions is creating these logs. Is there an option to mute these?

https://preview.redd.it/l8grzbmep6e51.png?width=760&format=png&auto=webp&s=7b79ea3de8ab87a8458593443a24a1b34049fc1f

submitted by /u/sweetsal99
[comments]



Source link

Photo of three iPhone 3 models next to one another. The first shows the home screen, the other two show the back, one in black and one in white. All three phones sport a reflection beneath them.
Strategy

Spotting a Trend | CSS-Tricks


There are tons of smokin’ hot websites out there, with an equal or greater number of talented designers and developers who make them. The web is awesome like that and encourages that sort of creativity.

Even so, it amazes me that certain traits find their way into things. I mean, it makes sense. Many of us use the same UI frameworks and take cues from sites we admire. But every once in a while, my eye starts catching wind of the zeitgeist and commonalities that come with it.

The latest one? Blobby shapes. It’s a fun flourish that adds a little panache, especially for flat designs that need a splash of color or an interesting focal point that leads the eye from one place to anther. I’m sure you’ve seen it. I spent one week collecting screenshots of websites I came across that use it. I certainly wan’t looking for examples; they just sort of popped up in my normal browsing.

I’m sorry if it seems like I’m calling out people because that’s my intention. I actually love the concept — so much, in fact, that I’m considering it on a project! Some of the examples in that gallery are flat-out gorgeous.

After spotting these blobby shapes a number of times, I’ve started to notice some considerations to take into account when use them. Things like:

  • Watch for contrast when text sits on top of a blob. There are plenty of cases where the document background is white and the blob is dark. If text runs through them, it’s going to be tough to find a font color that satisfies WCAG’s 2.1 AA standard for legibility.
  • Tread lightly when mixing and matching colors. One hot pink blob behind a card component ain’t a big deal, but throw in yellow, orange, and other bright colors that sit alongside it… the design starts to distract from the content. Plus, a vibrant rainbow of blobby shapes can raise accessibility concerns. A flourish is just that: a nice touch that’s subtle but impactful.
  • Blobs are good for more than color. Some of the most interesting instances I’ve seen cut images into interesting shapes. It’s cool that we can embed an image directly in SVG and then mask it with a path.
  • Blobs are also good for more than backgrounds. Did you catch that screenshot from Topcoder’s site? They’re using it for tabs which is super funky and cool.

All of this has me thinking about how the websites of today will be looked at by the developers of tomorrow. Remember way back, like 15 years ago, when many sites adopted Apple’s use of reflective imagery? I probably still have some Photoshop muscle memory from replicating that effect so many times.

Photo of three iPhone 3 models next to one another. The first shows the home screen, the other two show the back, one in black and one in white. All three phones sport a reflection beneath them.
Notice the skeuomorphic icons — that was popular too!

Skeuomorphism, bevels, animated GIF backgrounds, long shadows, heroes, gradients, bokeh backgrounds… all of these and many other visual treatments have had their day in the sun. Perhaps blobs will join that club at some point. Perhaps they’ll come back in style after that. Who knows! I just find it interesting to reflect on the things that have inspired us over the last three decades and imagine how the things we do today will be seen through the long lens of time.

It’d be awesome to see other instances of blobby shapes — share ’em if you’ve got ’em!



Source link

r/webdev - The science of User Experience. How to use cognitive biases in the development of modern software products
Strategy

The science of User Experience. How to use cognitive biases …


r/webdev - The science of User Experience. How to use cognitive biases in the development of modern software products

https://keepsimple.io/en/uxcore.html

Good day to all of you,

Recently I published a tool and the article which took me for about 2,5 years of research on cognitive science and behavioral economics. A tool called “UX CORE” consists of 105 hands-on examples of cognitive biases use in modern software development.

Tool link: https://keepsimple.io/en/uxcore.html

Also, I wrote an article that mainly focuses on how understanding brain errors and human behavior patterns can help to provide high-quality user experience (UX) in software production both for mobile and desktop.

Medium article link: https://medium.com/@alexanyanwolf/the-science-of-user-experience-b4ae1314712c

My idea was to lower the threshold for understanding cognitive biases, thereby allowing even non-specialists to know not only the fact of the error but also how this knowledge can be used.

At the moment, information on this topic is very much scattered across Wikipedia and various entertainment portals in the style of “5 brain mistakes that will make you wonder”, however, I decided to move away from the idea of ​​entertainment content, and focus my efforts on showing the topic from a different angle.

I am deeply convinced that in our time, when at every step people talk about “a thousand amazing possibilities”, humanity greatly underestimates the importance of understanding our own mistakes in processing information, which are inherent and will be characteristic of all of us throughout our life.

Share this information with those who you think would find the topic interesting. Help me expand the discussion. Many thanks.



Source link

Screenshot of standard text saying I
Strategy

SVG Title vs. HTML Title Attribute


You know the title attribute? I can do this:

<div title="The Title">
  I'm a div with a `title`
</div>

And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…

Screenshot of standard text saying I'm a div with a title. A light gray tooltip is floating above the text next to the cursor that says The Title.

Which, uh, I guess is something. I sometimes use it for things like putting an expanded date or time on an element that uses shorthand for it. It’s a tiny bit of UX helpfulness reserved exclusively for sighted mouse users.

But it’s not particularly useful, as I understand it. Ire Aderinokun dug into how it’s used for the <abbr> element (a commonly cited example) and found that it’s not-so-great alone. She suggests a JavaScript-enhanced pattern. She also mentions that JAWS has a setting for announcing titles in there, so that’s interesting (although it sounds like it’s off by default).

I honestly just don’t know how useful title is for screen readers, but it’s certainly going to be nuanced.

I did just learn something about titles though… this doesn’t work:

<!-- Incorrect usage -->
<svg title="Checkout">
</svg>

If you hover over that element, you won’t get a title display. You have to do it like this:

<!-- Correct usage -->
<svg>
  <title>Checkout</title>
  
  <!-- More detail -->
  <desc>A shopping cart icon with baguettes and broccoli in the cart.</desc>
</svg>

Which, interestingly, Firefox 79 just started supporting.

When you use title like that, the hoverable area to reveal the title popup is the entire rectangle of the <svg>.

I was looking at all this because I got an interesting email from someone who was in a situation where the title popup only seemed to come up when hovering over the “filled in” pixels of an SVG, and not where transparent pixels were. Weird, I thought. I couldn’t replicate in my testing either.

Turns out there is a situation like this. You can apply a <title> within a <use> element, then the title only applies to those pixels that come in via the <use>.

If you remove the “white part” title, you’ll see the “black part” only comes up over the black pixels. Seems to be consistent across browsers. Just something to watch out for if that’s how you apply titles.



Source link

cowboy using computer on barrel
Strategy

Getting Started With MongoDB Using Go


As a Go enthusiast, it’s great to see first class support for MongoDB in the form of an official MongoDB Go driver. We will learn how to use it by building a simple REST API for a good old CRUD-style app!

In this blog, will cover the following topics:

  • Walkthrough the application: CRUD operations.
  • Setup Azure Cosmos DB for MongoDB API.
  • Setup Azure App service and deploy the application to the cloud.
  • Take the REST API for a spin.

To follow along, you’re free to use a MongoDB cluster of your choice (Docker is probably the fastest/easiest option). I will be using Azure Cosmos DB, which is Microsoft’s globally distributed, multi-model database service that supports document, key-value, graph, and columnar data models. It implements the wire protocol for MongoDB making if possible for any MongoDB client driver (including the Go driver) that understands this protocol version to natively connect to Cosmos DB.

The application (API) will be deployed to Azure App Service. It enables you to build and host web apps, mobile back ends, and RESTful APIs in the programming language of your choice without managing infrastructure. You can use it on Linux to host web apps natively on Linux for supported application stacks with support for built-in Docker images for multiple languages such as Node.js, Java, Python etc.

Although we have a Go app in this example, we can still host it on App Service since it supports custom Docker images as well!

Overview

The application is a simple one that exposes a REST API to create, read, update and delete developer profiles with a GitHub ID, blog and skills.

As usual, the code is available on GitHub, but let’s walk through it real quick!

cowboy using computer on barrel

Here is the code layout:

The main CRUD operations are in the crud.go file within the api package. It contains implementation for create, read, update and delete operations.

The Create function gets a handle to the MongoDB collection and marshals the request body (JSON payload) into a struct (model.Developer). The struct is then inserted using the InsertOne function, the error is handled (not shown above) and an HTTP 201 is sent back in case of success.

Here is how the read operation works:

The FindOne function is used with a filter criteria of github_id, which is the partition key for the collection bson.M{githubIDAttribute: githubID}. If found, the result is converted to the struct and returned to the caller.

Fetching all developer profiles is similar

Find uses an empty bson document as a filter in order to list all the documents in the collection and the result is sent back to the caller in the form of a JSON array

FindOneAndReplace is used to update the a specific record. github_id is used as the filter criteria and the passed in JSON payload is the updated record.

Delete is accomplished using FindOneAndDelete which accepts the github_id as the filter criteria for the record to be deleted

Everything is tied together in main.go. It associates the CRUD operation handlers to HTTP routes, starts the server and also sets a graceful exit mechanism

Alright, with that aside, it’s time to provision the required services and deploy the application. Before that, let’s go over some of the pre-requisites

Prerequisites

Setup Azure Cosmos DB

You need to create an Azure Cosmos DB account with the MongoDB API support enabled along with a Database and Collection. You can use the Azure Portal or the Azure CLI.

Use the Azure Portal

Follow these steps:

Use Azure CLI

(The same commands can be used for Azure CLI or Azure Cloud Shell.)

Export the following environment variables:

Start by creating a new resource group under which you can place all your resources. Once you’re done, you can delete the resource group which in turn will delete all the services

Create an account (notice --kind MongoDB)

Create the database

Finally, create a collection within the database

Get the connection string and save it. You will be using it later.


Deploy to Azure App Service

Build a Docker Image for the App

This step is optional. You can use the pre-built image abhirockzz/mongodb-go-app, which I have made available on DockerHub

You can use the Dockerfile to build your own image and push it to a Docker registry (public/private) of your choice

Here is a tutorial which provides an example of how to use Azure Container Registry with Azure Web App Service


Setup Azure App Service

It’s time to deploy our app to the cloud. Let’s quickly do that using Azure App service. Start by creating an App Service Plan which defines a set of compute resources for our web app to run.

Refer to the documentation for details on App Service plans

The plan is associated with an SKU – just like Cognitive Services, you need to choose an SKU (pricing tier) for App Service as well. We will use a small tier (B1) for this example.

Accepted values are B1, B2, B3, D1, F1, FREE, P1V2, P2V2, P3V2, PC2, PC3, PC4, S1, S2, S3,
SHARED

documentation for az appservice plan create

Setup environment variables

please ensure that you use double-quotes ("") around the connection string value

Deploy the application

Add the environment variables as configuration settings required by the application

The API should be deployed in some time. When its complete, go ahead and give it a try!

Test the API

I have used curl for demonstration, but you can use any other tool of your choice

Get the endpoint/host name for the deployed app

Create a few developer profiles

Find a single developer profile using GitHub ID

If you search for a profile which does not exist

Fetch all dev profiles

Delete a developer profile

Confirm again

Once you’re done, you can delete the resource group to delete all the services

That’s all for this blog. I would love to have your feedback and suggestions!



Source link

Getting the Most Out of Variable Fonts on Google Fonts
Strategy

Getting the Most Out of Variable Fonts on Google Fonts


I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just launched officially on Google Fonts!

Wanna try it out super fast? Here’s the embed code to use the full Recursive variable font family from Google Fonts (but you will get a lot more flexibility & performance if you read further!)

<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">

Recursive is made for code, websites, apps, and more.
Recursive Mono has both Linear and Casual styles for different “voices” in code, along with cursive italics if you want them — plus a wider weight range for monospaced display typography.
Recursive Sans is proportional, but unlike most proportional fonts, letters maintain the same width across styles for more flexibility in UI interactions and layout.

I started Recursive as a thesis project for a type design masters program at KABK TypeMedia, and when I launched my type foundry, Arrow Type, I was subsequently commissioned by Google Fonts to finish and release Recursive as an open-source, OFL font.

You can see Recursive and learn more about it what it can do at recursive.design

Recursive is made to be a flexible type family for both websites and code, where its main purpose is to give developers and designers some fun & useful type to play with, combining fresh aesthetics with the latest in font tech.

First, a necessary definition: variable fonts are font files that fit a range of styles inside one file, usually in a way that allows the font user to select a style from a fluid range of styles. These stylistic ranges are called variable axes, and can be parameters, like font weight, font width, optical size, font slant, or more creative things. In the case of Recursive, you can control the “Monospacedness” (from Mono to Sans) and “Casualness” (between a normal, linear style and a brushy, casual style). Each type family may have one or more of its own axes and, like many features of type, variable axes are another design consideration for font designers.

You may have seen that Google Fonts has started adding variable fonts to its vast collection. You may have read about some of the awesome things variable fonts can do. But, you may not realize that many of the variable fonts coming to Google Fonts (including Recursive) have a lot more stylistic range than you can get from the default Google Fonts front end.

Because Google Fonts has a huge range of users — many of them new to web development — it is understandable that they’re keeping things simple by only showing the “weight” axis for variable fonts. But, for fonts like Recursive, this simplification actually leaves out a bunch of options. On the Recursive page, Google Fonts shows visitors eight styles, plus one axis. However, Recursive actually has 64 preset styles (also called named instances), and a total of five variable axes you can adjust (which account for a slew of more potential custom styles).

Recursive can be divided into what I think of as one of four “subfamilies.” The part shown by Google Fonts is the simplest, proportional (sans-serif) version. The four Recursive subfamilies each have a range of weights, plus Italics, and can be categorized as:

  • Sans Linear: A proportional, “normal”-looking sans-serif font. This is what gets shown on the Google Fonts website.
  • Sans Casual: A proportional “brush casual” font
  • Mono Linear: A monospace “normal” font
  • Mono Casual: A monospace “brush casual” font

This is probably better to visualize than to describe in words. Here are two tables (one for Sans, the other for Mono) showing the 64 named instances:

But again, the main Google Fonts interface only provides access to eight of those styles, plus the Weight axis:

Recursive has 64 preset styles — and many more using when using custom axis settings — but Google Fonts only shows eight of the preset styles, and just the Weight axis of the five available variable axes.

Not many variable fonts today have more than a Weight axis, so this is an understandable UX choice in some sense. Still, I hope they add a little more flexibility in the future. As a font designer & type fan, seeing the current weight-only approach feels more like an artificial flattening than true simplification — sort of like if Google Maps were to “simplify” maps by excluding every road that wasn’t a highway.

Luckily, you can still access the full potential of variable fonts hosted by Google Fonts: meet the Google Fonts CSS API, version 2. Let’s take a look at how you can use this to get more out of Recursive.

But first, it is helpful to know a few things about how variable fonts work.

How variable fonts work, and why it matters

If you’ve ever worked with photos on the web then you know that you should never serve a 9,000-pixel JPEG file when a smaller version will do. Usually, you can shrink a photo down using compression to save bandwidth when users download it.

There are similar considerations for font files. You can often reduce the size of a font dramatically by subsetting the characters included in it (a bit like cropping pixels to just leave the area you need). You can further compress the file by converting it into a WOFF2 file (which is a bit like running a raster image file though an optimizer tool like imageOptim). Vendors that host fonts, like Google Fonts, will often do these things for you automatically.

Now, think of a video file. If you only need to show the first 10 seconds of a 60-second video, you could trim the last 50 seconds to have a much small video file. 

Variable fonts are a bit like video files: they have one or more ranges of information (variable axes), and those can often either be trimmed down or “pinned” to a certain location, which helps to reduce file size. 

Of course, variable fonts are nothing like video files. Fonts record each letter shape in vectors, (similar to SVGs store shape information). Variable fonts have multiple “source locations” which are like keyframes in an animation. To go between styles, the control points that make up letters are mathematically interpolated between their different source locations (also called deltas). A font may have many sets of deltas (at least one per variable axis, but sometimes more). To trim a variable font, then, you must trim out unneeded deltas.

As a specific example, the Casual axis in Recursive takes letterforms from “Linear” to “Casual” by interpolating vector control points between two extremes: basically, a normal drawing and a brushy drawing. The ampersand glyph animation below shows the mechanics in action: control points draw rounded corners at one extreme and shift to squared corners on the other end.

Generally, each added axis doubles the number of drawings that must exist to make a variable font work. Sometimes the number is more or less – Recursive’s Weight axis requires 3 locations (tripling the number of drawings), while its Cursive axis doesn’t require extra locations at all, but actually just activates different alternate glyphs that already exist at each location. But, the general math is: if you only use opt into fewer axes of a variable font, you will usually get a smaller file.

When using the Google Fonts API, you are actually opting into each axis. This way, instead of starting with a big file and whittling it down, you get to pick and choose the parts you want.

Variable axis tags

If you’re going to use the Google Fonts API, you first need to know about font axes abbreviations so you can use them yourself.

Variable font axes have abbreviations in the form of four-letter “tags.” These are lowercase for industry-standard axes and uppercase for axes invented by individual type designers (also called “custom” or “private” axes). 

There are currently five standard axes a font can include: 

  • wght – Weight, to control lightness and boldness
  • wdth – Width, to control overall letter width
  • opsz – Optical Size, to control adjustments to design for better readability at various sizes
  • ital – Italic, generally to switch between separate upright/italic designs
  • slnt – Slant, generally to control upright-to-slanted designs with intermediate values available

Custom axes can be almost anything. Recursive includes three of them — Monospace (MONO), Casual (CASL), and Cursive (CRSV)  — plus two standard axes, wght and slnt.

Google Fonts API basics

When you configure a font embed from the Google Fonts interface, it gives you a bit of HTML or CSS which includes a URL, and this ultimately calls in a CSS document that includes one or more @font-face rules. This includes things like font names as well as links to font files on Google servers.

This URL is actually a way of calling the Google Fonts API, and has a lot more power than you might realize. It has a few basic parts: 

  1. The main URL, specifying the API (https://fonts.googleapis.com/css2)
  2. Details about the fonts you are requesting in one or more family parameters
  3. A font-display property setting in a display parameter

As an example, let’s say we want the regular weight of Recursive (in the Sans Linear subfamily). Here’s the URL we would use with our CSS @import:

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

Or we can link it up in the <head> of our HTML:

<link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">

Once that’s in place, we can start applying the font in CSS:

body {
  font-family: 'Recursive', sans-serif;
}

There is a default value for each axis:

  • MONO 0 (Sans/proportional)
  • CASL 0 (Linear/normal)
  • wght 400 (Regular)
  • slnt 0 (upright)
  • CRSV 0 (Roman/non-cursive lowercase)

Choose your adventure: styles or axes

The Google Fonts API gives you two ways to request portions of variable fonts:

  1. Listing axes and the specific non-default values you want from them
  2. listing axes and the ranges you want from them

Getting specific font styles

Font styles are requested by adding parameters to the Google Fonts URL. To keep the defaults on all axes but use get a Casual style, you could make the query Recursive:[email protected] (this will serve Recursive Sans Casual Regular). To make that Recursive Mono Casual Regular, specify two axes before the @ and then their respective values (but remember, custom axes have uppercase tags):

https://fonts.googleapis.com/css2?family=Recursive:CASL,[email protected],1&display=swap

To request both Regular and Bold, you would simply update the family call to Recursive:[email protected];700, adding the wght axis and specific values on it:

https://fonts.googleapis.com/css2?family=Recursive:[email protected];700&display=swap

A very helpful thing about Google Fonts is that you can request a bunch of individual styles from the API, and wherever possible, it will actually serve variable fonts that cover all of those requested styles, rather than separate font files for each style. This is true even when you are requesting specific locations, rather than variable axis ranges — if they can serve a smaller font file for your API request, they probably will.

As variable fonts can be trimmed more flexibility and efficiently in the future, the files served for given API requests will likely get smarter over time. So, for production sites, it may be best to request exactly the styles you need.

Where it gets interesting, however, is that you can also request variable axes. That allows you to retain a lot of design flexibility without changing your font requests every time you want to use a new style.

Getting a full variable font with the Google Fonts API

The Google Fonts API seeks to make fonts smaller by having users opt into only the styles and axes they want. But, to get the full benefits of variable fonts (more design flexibility in fewer files), you should use one or more axes. So, instead of requesting single styles with Recursive:[email protected];700, you can instead request that full range with Recursive:[email protected] (changing from the ; to .. to indicate a range), or even extending to the full Recursive weight range with Recursive:[email protected] (which adds very little file size, but a whole lot of extra design oomph).

You can add additional axes by listing them alphabetically (with lowercase standard axes first, then uppercase custom axes) before the @, then specifying their values or ranges after that in the same order. For instance, to add the MONO axis and the wght axis, you could use Recursive:wght,[email protected],0..1 as the font query.

Or, to get the full variable font, you could use the following URL:

https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap

Of course, you still need to put that into an HTML link, like this:

<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">

Customizing it further to balance flexibility and filesize 

While it can be tempting to use every single axis of a variable font, it’s worth remembering that each additional axis adds to the overall files ize. So, if you really don’t expect to use an axis, it makes sense to leave it off. You can always add it later.

Let’s say you want Recursive’s Mono Casual styles in a range of weights,. You could use Recursive:wght,CASL,[email protected],1,1 like this:

<link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,[email protected],1,300..1000&display=swap" rel="stylesheet">

You can, of course, add multiple font families to an API call with additional family parameters. Just be sure that the fonts are alphabetized by family name.

<link href="https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900?family=Recursive:CASL,MONO,[email protected],1,300..1000&display=swap" rel="stylesheet">

Using variable fonts

The standard axes can all be controlled with existing CSS properties. For instance, if you have a variable font with a weight range, you can specify a specific weight with font-weight: 425;. A specific Slant can be requested with font-style: oblique 9deg;. All axes can be controlled with font-variation-settings. So, if you want a Mono Casual very-heavy style of Recursive (assuming you have called the full family as shown above), you could use the following CSS:

body {
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Something good to know: font-variation-settings is much nicer to use along with CSS custom properties

Another useful thing to know is that, while you should be able to activate slant with font-style: italic; or font-style: oblique Xdeg;, browser support for this is inconsistent (at least at the time of this writing), so it is useful to utilize font-variation-settings for the Slant axis, as well.

You can read more specifics about designing with variable fonts at VariableFonts.io and in the excellent collection of CSS-Tricks articles on variable fonts.

Nerdy notes on the performance of variable fonts

If you were to using all 64 preset styles of Recursive as separate WOFF2 files (with their full, non-subset character set), it would be total of about 6.4 MB. By contrast, you could have that much stylistic range (and everything in between) at just 537 KB. Of course, that is a slightly absurd comparison — you would almost never actually use 64 styles on a single web page, especially not with their full character sets (and if you do, you should use subsets and unicode-range).

A better comparison is Recursive with one axis range versus styles within that axis range. In my testing, a Recursive WOFF2 file that’s subset to the “Google Fonts Latin Basic” character set (including only characters to cover English and western European languages), including the full 300–1000 Weight range (and all other axes “pinned” to their default values) is 60 KB. Meanwhile, a single style with the same subset is 25 KB. So, if you use just three weights of Recursive, you can save about 15 KB by using the variable font instead of individual files.

The full variable font as a subset WOFF2 clocks in at 281 KB which is kind of a lot for a font, but not so much if you compare it to the weight of a big JPEG image. So, if you assume that individual styles are about 25 KB, if you plan to use more than 11 styles, you would be better off using the variable font.

This kind of math is mostly an academic exercise for two big reasons:

  1. Variable fonts aren’t just about file size.The much bigger advantage is that they allow you to just design, picking the exact font weights (or other styles) that you want. Is a font looking a little too light? Bump up the font-weight a bit, say from 400 to 425!
  2. More importantly (as explained earlier), if you request variable font styles or axes from Google Fonts, they take care of the heavy lifting for you, sending whatever fonts they deem the most performant and useful based on your API request and the browsers visitors access your site from.

So, you don’t really need to go downloading fonts that the Google Fonts API returns to compare their file sizes. Still, it’s worth understanding the general tradeoffs so you can best decide when to opt into the variable axes and when to limit yourself to a couple of styles.

What’s next?

Fire up CodePen and give the API a try! For CodePen, you will probably want to use the CSS @import syntax, like this in the CSS panel:

@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,slnt,[email protected],0..1,0..1,-15..0,300..1000&display=swap');

It is apparently better to use the HTML link syntax to avoid blocking parallel downloads of other resources. In CodePen, you’d crack open the Pen settings, select HTML, then drop the <link> in the HTML head settings.

Or, hey, you can just fork my CodePen and experiment there:

Take an API configuration shortcut

If you are want to skip the complexity of figuring out exact API calls and looking to opt into variable axes of Recursive and make semi-advanced API calls, I have put together a simple configuration tool on the Recursive minisite (click the “Get Recursive” button). This allows you to quickly select pinned styles or variable ranges that you want to use, and even gives estimates for the resulting file size. But, this only exposes some of the API’s functionality, and you can get more specific if you want. It’s my attempt to get people using the most stylistic range in the smallest files, taking into account the current limitations of variable font instancing.

Use Recursive for code

Also, Recursive is actually designed first as a font to use for code. You can use it on CodePen via your account settings. Better yet, you can download and use the latest Recursive release from GitHub and set it up in any code editor.

Explore more fonts!

The Google Fonts API doc helpfully includes a (partial) list of variable fonts along with details on their available axis ranges. Some of my favorites with axes beyond just Weight are Crimson Pro (ital, wght), Work Sans (ital, wght), Encode Sans (wdth, wght), and Inter (slnt, wght). You can also filter Google Fonts to show only variable fonts, though most of these results have only a Weight axis (still cool and useful, but don’t need custom URL configuration).

Some more amazing variable fonts are coming to Google Fonts. Some that I am especially looking forward to are:

  • Fraunces: “A display, “Old Style” soft-serif typeface inspired by the mannerisms of early 20th century typefaces such as Windsor, Souvenir, and the Cooper Series”
  • Roboto Flex: Like Roboto, but withan extensive ranges of Weight, Width, and Optical Size
  • Crispy: A creative, angular, super-flexible variable display font
  • Science Gothic: A squarish sans “based closely on Bank Gothic, a typeface from the early 1930s—but a lowercase, design axes, and language coverage have been added”

And yes, you can absolutely download and self-host these fonts if you want to use them on projects today. But stay tuned to Google Fonts for more awesomely-flexible typefaces to come!

Of course, the world of type is much bigger than open-source fonts. There are a bunch of incredible type foundries working on exciting, boundary-pushing fonts, and many of them are also exploring new & exciting territory in variable fonts. Many tend to take other approaches to licensing, but for the right project, a good typeface can be an extremely good value (I’m obviously biased, but for a simple argument, just look at how much typography strengthens brands like Apple, Stripe, Google, IBM, Figma, Slack, and so many more). If you want to feast your eyes on more possibilities and you don’t already know these names, definitely check out DJR, OHno, Grilli, XYZ, Dinamo, Typotheque, Underware, Bold Monday, and the many very-fun WIP projects on Future Fonts. (I’ve left out a bunch of other amazing foundries, but each of these has done stuff I particularly love, and this isn’t a directory of type foundries.)

Finally, some shameless plugs for myself: if you’d like to support me and my work beyond Recursive, please consider checking out my WIP versatile sans-serif Name Sans, signing up for my (very) infrequent newsletter, and giving me a follow on Instagram.





Source link