This is how I digest it. When you write a line of code like:

import React from "react";

That's actually invalid JavaScript. It looks like a native import, but it isn't. (It would start with … Read article

The post Snowpack appeared first on CSS-Tricks.

That demo is here:

See the Pen Selfie Crawl by Chris Coyier (@chriscoyier) on CodePen.

@keyframers covered it much nicer than I did and made this video. (Seriously, it's so clear and concise — it's a great … Read article

The post Animate Text on Scroll appeared first on CSS-Tricks.

It's a Sherlock Holmes story, but designed to be more interesting and immersive (even audio!) than just words-on-a-screen.

Direct Link to Article — Permalink… Read article

The post A Scandal in Bohemia appeared first on CSS-Tricks.

(They don’t pay me or anything, I just really enjoy using them.)

Why do I prefer Greensock to other methods? Technically speaking, it's often the best tool for the job. It's usage is extremely straightforward, even for complex … Read article

The post How to Animate on the Web With Greensock appeared first on CSS-Tricks.

(They don’t pay me or anything, I just really enjoy using them.)

Why do I prefer Greensock to other methods? Technically speaking, it's often the best tool for the job. It's usage is extremely straightforward, even for complex … Read article

The post How to Animate on the Web With Greensock appeared first on CSS-Tricks.

"I know," I said, "But there are different programming languages for different sorts of tasks."

"That's stupid" she said

I can empathize with the little girl in Terence Eden's story. In high school, I got super into Turbo Pascal. I felt like I could do a lot of stuff in it. Then I went to college. The first course I took was Java and the second … Read article

The post Why do we have different programming languages? appeared first on CSS-Tricks.

What's interesting to me is how many cool design effects require multiple copies of an element to do something cool. To get the extra copy, at least with text, we can sometimes use a pseudo-element. For more elaborate content, there is an element() function in CSS, but it's limited to a prefixed property … Read article

The post Re-creating the ‘His Dark Materials’ Logo in CSS appeared first on CSS-Tricks.

What's interesting to me is how many cool design effects require multiple copies of an element to do something cool. To get the extra copy, at least with text, we can sometimes use a pseudo-element. For more elaborate content, there is an element() function in CSS, but it's limited to a prefixed property … Read article

The post Re-creating the ‘His Dark Materials’ Logo in CSS appeared first on CSS-Tricks.

It's just a little bit of CSS you apply to class-free semantic HTML to give it nice basic responsive styles — the perfect kind of thing for a Pen when you are just tossing some markup together and want it to look nice.

Direct Link to Article — Permalink… Read article

The post Water.css appeared first on CSS-Tricks.

It's just a little bit of CSS you apply to class-free semantic HTML to give it nice basic responsive styles — the perfect kind of thing for a Pen when you are just tossing some markup together and want it to look nice.

Direct Link to Article — Permalink… Read article

The post Water.css appeared first on CSS-Tricks.

See … Read article

The post CSS-Only Carousel appeared first on CSS-Tricks.

See … Read article

The post CSS-Only Carousel appeared first on CSS-Tricks.

I tend to remove stuff like that because it usually doesn't serve the article well, even though I understand the sentiment.

Just look at Luigi De Rosa's list here. I'd bet a lot of you didn't know the … Read article

The post Things you can do with a browser in 2020 appeared first on CSS-Tricks.

I tend to remove stuff like that because it usually doesn't serve the article well, even though I understand the sentiment.

Just look at Luigi De Rosa's list here. I'd bet a lot of you didn't know the … Read article

The post Things you can do with a browser in 2020 appeared first on CSS-Tricks.

But browser zoom is the default method for making everything bigger (including text) these days and it works great even if you use px.

But... Kathleen McMahon really digs into this and finds that it's still worth setting all your type (both font-size and line-height) in relative units because:

… Read article

The post Is it better to use ems/rems than px for font-size? appeared first on CSS-Tricks.

Last fall, I had an idea for a productivity app that I wished to bring to life. I had worked out the details of what the app should feature, how the back-end should be designed and played around with mock-ups.

It struck me that there could be no better platform to demonstrate this idea than the Imagine Cup by Microsoft which was just around the corner (You should go check it out). Although the process appeared smooth in the beginning, I soon realized that the Firebase solution I had in mind would not work for Imagine Cup, which requires Azure to be used in any project built.

I required authentication and a database to hold user profiles and information such as appointments tied to the users. I’ll cover the authentication part in this article and the data part in a future article(my approach involves building custom plugins).

I remember being very confused about what any of these terms meant. Having only used Firebase before, all of the documentation on Azure Active Directory seemed very alien to me. For a long time, I wasn’t clear on what solution would work for my case; implementing one even further down the road.

From the docs, “Azure Active Directory B2C provides business-to-customer identity as a service. Your customers use their preferred social, enterprise, or local account identities to get single sign-on access to your applications and APIs”. I personally found this video really intuitive and it helped me understand what AD B2C actually does for the user to make authentication easier.

Before proceeding, you should know what a tenant is and how to create one in your Azure portal. You should also be familiar with User flows(policies) and should set up a basic sign-in/sign-up policy.

The Microsoft identity platform uses open standards such as OAuth2.0 and OpenID Connect **. These standards allow you to leverage any library you wish to integrate with Azure Active Directory B2C (here we’ll use App Auth)

AppAuth is a client SDK for native apps to authenticate and authorize end-users using OAuth 2.0 and OpenID Connect. It doesn’t have an SDK for Flutter, however. As such, we’ll use a wrapper built by Michael Bui here.

** If you’re not familiar with these protocols, I suggest you first read about them so that you know what a discovery URL is and how and why the exchange of tokens takes place. However, if you just need to get the job done, you can go ahead with the instructions and still have a working model.

As you can see, to authorize and exchange tokens with your tenant, you need to provide a client id, a redirect URL, a discovery URL and the scopes you wish to include.

The client id helps Azure know that the application requesting authentication is indeed yours. To allow that, you have to first register your app in the tenant. This link has the steps required for the same. You’ll notice that a “redirect URL” is required to complete the registration. This URL specifies the address to which the tokens and related information should be sent back from the authentication window.

Since we’re building a native application, we will want the user redirected to the app after authentication. For this we can register a custom URL scheme that’ll launch our app. This is done in build.gradle(app) under the Android folder.

defaultConfig {                                  		                                                     manifestPlaceholders = [                                                'appAuthRedirectScheme': 'com.imaginecup.prodplatform'                                        ]                                }

Then, the redirect URL becomes com.imaginecup.prodplatform://oauthredirect where “oauthredirect” is the callback required by app auth.

Once an application is registered, the “Overview” page will give you the client id.

For the discovery URL, you need to go your policy’s page and click on “Run user flow”. This will reveal an endpoint which serves as the discovery URL.It’ll be of the form :

"https://<Tenant_name>.b2clogin.com/<Tenant_ID>/v2.0/.well-known/openid-configuration?p=<Policy_Name>"

Once the call to authorizeAndExchangeToken is made, a browser window pops up and the authorization is performed. You can then use the token to call various services and APIs on behalf of the user.

The above method works well but if you’re looking for a deeper approach that allows you to clearly see the OAuth authorization code workflow in action, you can choose to make the network calls yourself.

This is accomplished by first making a GET request to the /authorize endpoint with the following specification

GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize? client_id=90c0fe63-bcf...……….. &response_type=code &redirect_uri=………………&scope=offline_access%20openid 

The code for the same, in Dart, would be :

You can learn more about the parameters here.

Once you have the authorization code, you can send a POST request with the following specification, to obtain the access token in the response.

POST {tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/token HTTP/1.1Host: {tenant}.b2clogin.comContent-Type: application/x-www-form-urlencoded

grant_type=authorization_code&client_id=90c0fe63-b...………..&scope=offline_access&code=AwABAAAAvPM1KaPlrEqdFSBzjqfTGBCmLdgfSTLEMPGYuNHSUYBrq...&redirect_uri=urn:ietf:wg:oauth:2.0:oob

Once the access token is obtained, you can use it to make calls to Microsoft Graph to retrieve user information and with the right permissions, you can modify user fields and other attributes(you can define these attributes yourselves too, in the user policy you’ve created).

A sample request to retrieve information about the currently logged in user could look like this:

Building this project from the start to its current form drove me to dig deeper into authentication and the protocols that govern it. I got to explore Azure AD B2C and various other Azure features. There were multiple roadblocks that I ran into and the immense amount of documentation seemed overwhelming at first and even now, I sometimes get puzzled when searching for the things I need.

I feel I’ve done my best to list out all the resources that helped through the development of this app in the form of links and also, all the mistakes that I made. I will be looking forward to writing the next part of this series that deals with database management through custom Flutter plugins ✌️

Thank you for reading! Please feel free to comment if there are any doubts ❤️

Flutter Community

Flutter + Azure : Authentication with AD B2C was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

The post Fantastic Flight API with aviationstack (Sponsored) appeared first on David Walsh Blog.

Async/Await is a way to handle this type of time-based sequencing. It’s especially great for when you need to make some sort of network request and then work with the resulting data. Let's dig in!

Promise? Promise.

Async/Await is a type of Promise. Promises in … Read article

The post Understanding Async Await appeared first on CSS-Tricks.

What is up for debate is the general coding style of when you should pick one or the other. There are situations where you have … Read article

The post let vs. const appeared first on CSS-Tricks.

These are tongue-in-cheek, but there is a point to be made here. It's one challenge to understand a technology, and another challenge to understand how technologies fit together.

While some … Read article

The post Stream-Crossing Confusion appeared first on CSS-Tricks.

… Read article

The post Highlights of the HTTP Archive Web Almanac appeared first on CSS-Tricks.

HTML

HTML5 was the only big HTML change in the last decade, and it wasn't particularly dramatic. It's cool it's the looser variant (instead of getting XHTML3 or something). More compatible this way. Maybe I'll close my <br /> and maybe I <br> won't. … Read article

The post Is Web Design Easier or Harder Than it was 10 Years Ago? appeared first on CSS-Tricks.