Preview of the chameleonic effect
Strategy

Chameleonic Header in CSS and JavaScript


Dependencies

Tutorial

This effect uses the clip-path CSS property. The idea is to have a clone of the main header inside each <section> of the page. Each clone will inherit the style of the section it belongs to.

All cloned headers are placed at the top of the page (with a fixed position). The clip-path property can then be used to define, as clipping region for each header, the section element it belongs to. This way, each header is visible only when on top of its parent section.

This creates the clipping transition effect between headers with different color themes.

Preview of the chameleonic effect
Preview of the chameleonic effect

Let’s start cloning the header inside the different sections of the page.

<section class="position-relative">
  <div class="cha-header-clip">
    <header class="cha-header">
      <!-- header content -->
    </header>
  </div>

  <!-- section content here -->
</section>

<section class="position-relative" data-theme="dark">
  <div class="cha-header-clip" aria-hidden="true">
    <header class="cha-header">
      <!-- header content -->
    </header>
  </div>

  <!-- section content here -->
</section>

<!-- other sections here -->

Note that each cloned header has an aria-hidden attribute of true; this way, it is not announced to screen readers.

Additionally, a tab index of -1 should be added to each tabbable child to prevent keyboard users from navigating multiple times through the header items.

To change the style of each section and header element, we are using different data-theme values to the sections. The data-theme is then inherited by the header.

Each data-theme is used to override the CSS color variables used within the components. If you want to read more about using color themes in CodyFrame, head over to the colors page of our documentation. We’ve also published a blog article where we explain why we prefer CSS custom properties to SASS variables.

We can now place all cloned headers at the top of the page:

.cha-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

As the last step, we need each header to be visible only when it is inside its section parent element.

Unfortunately, the overflow property does not work on fixed positioned children. But we can achieve the same effect using the clip-path property.

First, let’s add a position absolute to the .cha-header-clip element and change its dimensions to make sure it covers the entire section element area:

.cha-header-clip { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

We can now use the clip-path property to set, as clipping area, the entire .cha-header-clip region:

.cha-header-clip { 
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

That’s it! Each cloned header will now be visible only when inside its section parent, and this creates the clipping effect on scroll.



Source link

Google API Console Credentials
Strategy

Login With Google Using ReactJS


Introduction

In this article, we will learn the step-by-step process of allowing users to log into an application with Gmail using ReactJS. Login with Gmail makes it safe and easy for users to use applications. When a user clicks on the “Login with Gmail” button, the user is navigated to Google to give the app permission. In response, the user receives a Token key and other personal details.

Prerequisites:

Topics Covered in This Article:

  • Create a ReactJS project
  • Install react-google-login  React plugin
  • Install Axios and Bootstrap
  • Add React Router
  • Install Bootstrap and React strap
  • Create a Google App and Get client Id
  • Create a database and table
  • Create a Web API Project

You may also like: Login With Facebook and Google Using Angular 8

Create ReactJS Project

Create a ReactJS  project by using the following command:

Open the newly-created project in Visual Studio Code and install Reactstrap and Bootstrap in this project by using the following commands respectively. Learn more about Reactstrap.

Now, open the index.js file and add import Bootstrap.

Now install the Axios library by using the following command. Learn more about Axios.

Now install the react-google-login React plugin using the following command:

Create a Google App and select “Get Client ID.” The first thing we need is to create a Google Project to get user credentials. Go to the Google API Console and click on Credentials. Click on Create Credentials and choose “OAuth client ID.”

Google API Console Credentials

Google API Console Credentials

Select web application, enter your project URL, and click on the Create button.

Creating OAuth client ID

Creating OAuth client ID

It will create a client ID and secret key.

OAuth Client

OAuth Client

Now, in Visual Studio Code, go to the src folder and create a new folder. Inside this folder add two new components: Logintbygoogle.js, and Dashboard.js.

Add Routing in ReactJS

Install react-router-dom package by using the following command:

Open app.js file and imports of Router and Route (react-router-dom) and two components:

Add the following code in app.js file:

Now, open the Logintbygoogle.js file and add the following code.

Now, open the Dashboard.js file and add the following code.

Create a Table in The Database 

Open SQL Server Management Studio, create a database named “Demotest,” and in this database, create a table. Give that table a name like “sociallogin.”

Create a Web API Project

Now open Visual Studio and create a new project.

Creating new VSC project

Creating new VSC project

Change the name to LoginApplication.

LoginApplication

LoginApplication

Choose the template as Web API.

Choosing the Web API

Choosing the Web API

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.

Add Data

Add Data

Click on the “ADO.NET Entity Data Model” option and click “Add.”

Entity Data Model

Entity Data Model

Select EF Designer from the database and click the “Next” button .

EF Designer

EF Designer

Add the connection properties and select database name on the next page and click OK.

Adding connection properties

Adding connection properties

Check the “Table” checkbox. The internal options will be selected by default. Now, click the “Finish” button. 

Table checkbox

Table checkbox

Now, our data model is successfully created. 

Now, right-click on the model folder and add two classes,  Userdetails and  Response. Now, paste the following code in these classes. 

Userdetails Class

Response Class

Right-click on the Controllers folder and add a new controller. Name it “Login controller” and add the following namespace.

Create a method in this controller to save data. Add the following code in this controller.

Now, let’s enable Cors. Go to Tools, open NuGet Package Manager, search for Cors and install the Microsoft.Asp.Net.WebApi.Cors package. Open Webapiconfig.cs, and add the following lines.

Now to go Visual Studio code and run the project.
Running the project

Running the project

Click on “Login with Google” button

Login with Google

Login with Google

Enter e-mail and password.  

Email and password

Email and password

Now if the login is successful, then it redirects to the dashboard page.

Dashboard page

Dashboard page

In this article, we discussed the process of logging in with Gmail using React and Web API.

Further Reading

Getting Started With Google Sign-In and Spring Boot.

How to Learn React.js, Part 1: The React Road Map for Modern Web Developer.



Source link

With the oversized-images policy in place, large images are still downloaded, but placeholders are shown instead, and an error is logged to the console.
Strategy

In-Browser Performance Linting With Feature Policies – Web P…


One of the absolute best things you can do to help keep performance in check is to provide a series of visible, well-placed checks and balances in your development workflow to always keep performance front-of-mind. One thing I’m very excited about in this context is feature policies.

Feature-Policy is a relatively new feature that lets you opt-in or out of certain browser features on your site.

For example, you could tell the browser not to allow the use of the Geolocation API by providing the following header:

Feature-Policy: geolocation 'none'

There are a lot of benefits from a security and performance standpoint to Feature-Policy, but what I’m excited about at the moment are the ways you can use Feature-Policy to help make easy-to-overlook performance issues more visible. It essentially provides in-browser performance linting.

Oversized-images

By default, if you provide the browser an image in a format it supports, it will display it. It even helpful scales those images so they look great, even if you’ve provided a massive file. Because of this, it’s not immediately obvious when you’ve provided an image that is larger than the site needs.

The oversized-images policy tells the browser not to allow any images that are more than some predefined factor of their container size. The recommended default threshold is 2x, but you are able to override that if you would like.

So, given the following header, the browser will not allow any origins (that’s the ‘none’ part) to display an image that is more than 2x its container size (either width or height).

Feature-Policy: oversized-images 'none';

If you wanted to be more lenient, you could tell the browser not to display any images more than 3x their container size:

Feature-Policy: oversized-images *(3) 'none';

In either case, if an image exceeds the threshold, a placeholder is displayed instead, and an error is logged to the console.

Unoptimized Images

Another common image related performance problem is unoptimized images. It’s all too common to find images that may be appropriately sized, but haven’t been adequately compressed. A lot of unnecessary metadata gets added to images when they’re taken and created, and that often gets passed along. One particularly annoying example are images that have thumbnails of themselves embedded in their metadata. I’ve seen plenty of instances where the embedded thumbnail (that the designers and developers didn’t even know was there) weighed more than the image itself!

On top of that, there’s also just general compression that many formats provide to get the ideal balance of quality and file size.

Using both the unoptimized-lossy-images and unoptimized-lossless-images policies, we can tell the browser to compare the file size to the dimensions of the image.

Feature-Policy: unoptimized-lossy-images 'none';
Feature-Policy: unoptimized-lossless-images
'none';

If the byte-per-pixel ratio is too high, the browser will display a placeholder image and log an error to the console.

The recommended byte-per-pixel ratio for lossy images is 0.5 and the recommended ratio for lossless images is 1. There’s a little wiggle room here. Right now, there’s an overhead allowance of 1kb for lossy images and 10kb for lossless images.

For example, let’s say we have a 200px by 200px JPEG. JPEG is a lossy format, so the recommended byte-per-pixel ratio is .5, and the overhead allowance is only 1kb. To figure out what image size would be acceptable, we would multiply the dimensions by the accepted ratio and then add in the overhead allowance.

(200 x 200 x .5) + 1024 = 21,024 bytes or 20.5kb

If the image were a lossy format, then our allowance would be 10kb, and the accepted byte-per-pixel ratio would be 1. Other than that, the calculation would look the same.

(200 x 200 x 1) + 10,240 = 50,240 bytes or 49.1kb

That allowance is likely to change in the future. In fact, while Blink defaults to a 10kb allowance for lossless images, they’re already experimenting with an unoptimized-lossless-images-strict policy that changes that allowance to only 1kb.

What’s old is new and all that.

For a long time, putting height and width attributes on your image was more or less a best practice. Without those in place, the browser has no idea how much space the image should take up until the image has actually been downloaded. This leads to layout shifting. The page will be displayed, and then the content will shift once the image has arrived, and the browser does another layout pass to make room for it.

When we started wanting images to scale fluidly with the help of CSS, we more or less recreated the issue regardless of if those attributes existed or not. As a result, a lot of folks stopped using them altogether.

But, thanks to recent work spearheaded by Jen Simmons, Firefox and Chrome can compute the aspect ratio of an image from its height and width attributes. When paired with any applied CSS, this means they can preserve space for those images during the initial layout phase.

The unsized-media policy tells the browser that all media elements should have size attributes, and if they don’t, the browser should choose a default. It’s a little more complicated than that, but the gist is that if you don’t have size attributes, the browser will use 300px by 150px.

Feature-Policy: unsized-media 'none';

With this policy in place, media will still be displayed, but if the size isn’t defined in the HTML, you’ll very quickly see as all the images will be sized at the default dimensions. And, as always, an error will be reported in the console.

It’s probably worth noting because it tripped me up at first, but if you’re using the unsized-media policy in conjunction with the oversized-images policy, don’t be surprised if you suddenly see a bunch more violations from oversized images. Because the unsized-media policy now changes your unsized images to 300px by 150px, the browser will use that size as its starting point when determining if an image is oversized.

Surfacing Less-Visible Policy Violations

What I love about the image related policies is that they take something that isn’t usually noticeable and makes it jump out at us as we’re building. We know if we’ve neglected to optimize an image or provide sizing attributes because the display of the page is impacted. In fact, reporting is their primary benefit. While unsized-media would potentially reduce layout shifting, the other policies still result in the images being downloaded, so the sole benefit is this increased visibility.

There are a few other potentially helpful policies from a performance linting perspective. Policies like sync-script (which blocks synchronous script execution), sync-xhr (which blocks synchronous AJAX requests) and document-write (which blocks any document.write calls) all come to mind.

These other policies great from a performance and control standpoint, but out of the box they’re a little less exciting from a linting perspective. Unless you have a synchronous script that is necessary for your page to display (which, ok, is not that hard to find) most of the visibility benefits these policies provide are in the form of console errors and, frankly, I suspect most developers don’t pay super close attention to those (though we all probably should).

That being said, we can make them more visible by using the ReportingObserver API to watch for violations and display them prominently on the page:

let reportingAlerts = document.createElement('ul');
  reportingAlerts.setAttribute('id','reportingAlerts');
  document.body.appendChild(reportingAlerts);

const alertBox = document.getElementById('reportingAlerts');

new ReportingObserver((reports, observer) => {
  let fragment = document.createDocumentFragment();
  
  Object.keys(reports).forEach(function(item) {
    let li = document.createElement('li');
    li.textContent = reports[item].body.message + ': ' + reports[item].body.featureId;
    fragment.appendChild(li);
  });
  
  alertBox.appendChild(fragment)
}, {types: ['feature-policy-violation'], buffered: true}).observe();

I setup a quick and dirty CodePen to show how it might look.

The Catch

The big catch: browser support. Only Blink-based browsers (Opera, Edge, Chrome, Samsung) seem to support the header right now. (Firefox and Safari support the allow attribute intended for iFrames.) Even there, you have to enable “Experimental Web Platform features” (found in about:flags) for many of these to work.

How I’m Using Them

That’s not a huge issue for me personally. Since I like to use these policies as in-browser linting, I don’t need to try to ship any of these headers to production or have them work for everyone—they need to be there for me and anyone actively building the site. I use Chrome as my primary development browser anyway, so it’s just a matter of turning the flag on once and forgetting about it.

The simplest way I’ve found for doing this is through the ModHeader extension. The extension lets you define custom headers to be passed along as you’re browsing the web.

I have three different Feature-Policy headers that I primarily toggle between:

  • oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
  • unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
  • script-sync 'none'; unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';

I keep the first one on a lot—it’s fascinating to browse the web with these policies applied. It’s scary how massive some images are. There’s a lot of room for improvement.

There is a LOT of unsized-media out there (I’m guilty too!) so that one gets annoying if it’s on for general browsing, which is why I have it in a separate policy I can toggle on. The same thing goes for sync-script—it breaks a lot of sites.

A few teams I’ve worked with have started using a similar flow to have those policies running so that when they’re working on the local development and staging environments, they can quickly see if something is amiss. Of course, in those situations, I recommend turning on any and all performance related policies so that they’re able to catch issues right away.

I’m hopeful that we’ll see a few other browsers add support eventually—while Chrome is my primary development browser, I do bounce between browsers, and it would be helpful for this to be available across them all. This is one of those rare times, however, where experimental support is enough to make a feature like this instantly useful.

A lot of performance issues stem from them simply not being very noticeable to those of us doing the building. Changing that wherever we can is one of the best ways to make sure that all that low-hanging fruit doesn’t go overlooked.



Source link

Weaving a Line Through Text in CSS
Strategy

Weaving a Line Through Text in CSS


Earlier this year, I came across this demo by Florin Pop, which makes a line go either over or under the letters of a single line heading. I thought this was a cool idea, but there were a few little things about the implementation I felt I could simplify and improve at the same time.

First off, the original demo duplicates the headline text, which I knew could be easily avoided. Then there’s the fact that the length of the line going through the text is a magic number, which is not a very flexible approach. And finally, can’t we get rid of the JavaScript?

So let’s take a look into where I ended up taking this.

HTML structure

Florin puts the text into a heading element and then duplicates this heading, using Splitting.js to replace the text content of the duplicated heading with spans, each containing one letter of the original text.

Already having decided to do this without text duplication, using a library to split the text into characters and then put each into a span feels a bit like overkill, so we’re doing it all with an HTML preprocessor.

- let text = 'We Love to Play';
- let arr = text.split('');

h1(role='image' aria-label=text)
  - arr.forEach(letter => {
    span.letter #{letter}
  - });

Since splitting text into multiple elements may not work nicely with screen readers, we’ve given the whole thing a role of image and an aria-label.

This generates the following HTML:

<h1 role="image" aria-label="We Love to Play">
  <span class="letter">W</span>
  <span class="letter">e</span>
  <span class="letter"> </span>
  <span class="letter">L</span>
  <span class="letter">o</span>
  <span class="letter">v</span>
  <span class="letter">e</span>
  <span class="letter"> </span>
  <span class="letter">t</span>
  <span class="letter">o</span>
  <span class="letter"> </span>
  <span class="letter">P</span>
  <span class="letter">l</span>
  <span class="letter">a</span>
  <span class="letter">y</span>
</h1>

Basic styles

We place the heading in the middle of its parent (the body in this case) by using a grid layout:

body {
  display: grid;
  place-content: center;
}
Screenshot of grid layout lines around the centrally placed heading when inspecting it with Firefox DevTools.
The heading doesn’t stretch across its parent to cover its entire width, but is instead placed in the middle.

We may also add some prettifying touches, like a nice font or a background on the container.

Next, we create the line with an absolutely positioned ::after pseudo-element of thickness (height) $h:

$h: .125em;
$r: .5*$h;

h1 {
  position: relative;
  
  &::after {
    position: absolute;
    top: calc(50% - #{$r}); right: 0;
    height: $h;
    border-radius: 0 $r $r 0;
    background: crimson;
  }
}

The above code takes care of the positioning and height of the pseudo-element, but what about the width? How do we make it stretch from the left edge of the viewport to the right edge of the heading text?

Line length

Well, since we have a grid layout where the heading is middle-aligned horizontally, this means that the vertical midline of the viewport coincides with that of the heading, splitting both into two equal-width halves:

SVG illustration. Shows how the vertical midline of the viewport coincides with that of the heading and splits both into equal width halves.
The middle-aligned heading.

Consequently, the distance between the left edge of the viewport and the right edge of the heading is half the viewport width (50vw) plus half the heading width, which can be expressed as a % value when used in the computation of its pseudo-element’s width.

So the width of our ::after pseudo-element is:

width: calc(50vw + 50%);

Making the line go over and under

So far, the result is just a crimson line crossing some black text:

What we want is for some of the letters to show up on top of the line. In order to get this effect, we give them (or we don’t give them) a class of .over at random. This means slightly altering the Pug code:

- let text = 'We Love to Play';
- let arr = text.split('');

h1(role='image' aria-label=text)
  - arr.forEach(letter => {
    span.letter(class=Math.random() > .5 ? 'over' : null) #{letter}
  - });

We then relatively position the letters with a class of .over and give them a positive z-index.

.over {
  position: relative;
  z-index: 1;
}

My initial idea involved using translatez(1px) instead of z-index: 1, but then it hit me that using z-index has both better browser support and involves less effort.

The line passes over some letters, but underneath others:

Animate it!

Now that we got over the tricky part, we can also add in an animation to make the line enter in. This means having the crimson line shift to the left (in the negative direction of the x-axis, so the sign will be minus) by its full width (100%) at the beginning, only to then allow it to go back to its normal position.

@keyframes slide { 0% { transform: translate(-100%); } }

I opted to have a bit of time to breathe before the start of the animation. This meant adding in the 1s delay which, in turn, meant adding the backwards keyword for the animation-fill-mode, so that the line would stay in the state specified by the 0% keyframe before the start of the animation:

animation: slide 2s ease-out 1s backwards;

A 3D touch

Doing this gave me another idea, which was to make the line go through every single letter, that is, start above the letter, go through it and finish underneath (or the other way around).

This requires real 3D and a few small tweaks.

First off, we set transform-style to preserve-3d on the heading since we want all its children (and pseudo-elements) to a be part of the same 3D assembly, which will make them be ordered and intersect according to how they’re positioned in 3D.

Next, we want to rotate each letter around its y-axis, with the direction of rotation depending on the presence of the randomly assigned class (whose name we change to .rev from “reverse” as “over” isn’t really suggestive of what we’re doing here anymore).

However, before we do this, we need to remember our span elements are still inline ones at this point and setting a transform on an inline element has absolutely no effect.

To get around this issue, we set display: flex on the heading. However, this creates a new issue and that’s the fact that span elements that contain only a space (" ") get squished to zero width.

Screenshot showing how the span containing only a space gets squished to zero width when setting `display: flex` on its parent.
Inspecting a space only <span> in Firefox DevTools.

A simple fix for this is to set white-space: pre on our .letter spans.

Once we’ve done this, we can rotate our spans by an angle $a… in one direction or the other!

$a: 2deg;

.letter {
  white-space: pre;
  transform: rotatey($a);
}

.rev { transform: rotatey(-$a); }

Since rotation around the y-axis squishes our letters horizontally, we can scale them along the x-axis by a factor ($f) that’s the inverse of the cosine of $a.

$a: 2deg;
$f: 1/cos($a)

.letter {
  white-space: pre;
  transform: rotatey($a) scalex($f)
}

.rev { transform: rotatey(-$a) scalex($f) }

If you wish to understand the why behind using this particular scaling factor, you can check out this older article where I explain it all in detail.

And that’s it! We now have the 3D result we’ve been after! Do note however that the font used here was chosen so that our result looks good and another font may not work as well.



Source link

Forget business cards, make sure your branding fits on a Billie Eilish nail ;)
Strategy

Forget business cards, make sure your branding fits on a Bil…


Forget business cards, make sure your branding fits on a Billie Eilish nail ;)

submitted by /u/sweetpatoot
[comments]



Source link

Strategy

Making RSS Feed look nicer : web_design


I am displaying a series of articles from a RSS Feed on my Vue.js application.

For non-vue.js users:

<template></template> = html

<style></style> = css

I am trying to put the following articles in a container s(imilar to the tweets on the left) with a heading called ‘Latest Articles’. When I inclue a <h3> tag in the template section, the title is for each article. How do I overcome this? Am I better off using bootstrap? Thanks

Post image

Code:

<template>

<div class="Articles">

  <p>
      {{feed.title}}

 </p>
</div>
</template>

<script>
   export default {
      props: ["feed"]
   }
</script>


<style>

</style>



Source link