DEV Community: Edori Atiri

Getting Started with Glasp on Chrome - A Comprehensive Guide

Edori Atiri — Tue, 02 May 2023 12:52:22 +0000

Introduction to Glasp

When visiting websites, how often do you feel the need to take note of information that strikes a chord for future reference? Taking note of such content would usually see you use a different application or service like Evernote, Google Keep, Notion, Obsidian, or something similar. While organizing your points and thoughts this way works, it can be a rather tedious and unintuitive procedure. What if you could highlight quotes, leave notes, and save specific points on a website directly on the site without leaving your browser or visiting a different website?

Enter Glasp, a social highlighter extension available on Chrome and MacOS. With Glasp, you no longer have to switch to a different app to highlight and save a quote or take note of something you saw on a site. Even more, Glasp wants to remedy "knowledge isolation" and allows you to share your findings, highlights, and quotes through Glasp's social feature. This guide intends to walk you through how to install and set up Glasp and how you can take advantage of its features. The rest of the article is structured thus:

Getting Started with Glasp on Chrome - A Comprehensive Guide
- Introduction to Glasp
- How To Setup Glasp on Chrome
- Sign Up and Install Glasp
- How to Pin Glasp to Your Extension Toolbar
- How To Use Glasp
- Your Glasp Profile Page
- Save Text or Quote to Glasp
- Add A Note to Highlighted Text
- Create An Image of The Highlighted Text
- Share Highlights Directly on Twitter
- Delete Highlight from The Webpage
- Take Note, Delete Highlight, Quoteshot, Share to Twitter, Copy Link to Highlight, Copy Highlight Embed Code from The Glasp Extension
- Tag Highlights
- Sort Through Your Highlights with Tags
- Summarize Text
- Summarize YouTube Video
- Copy All Highlights from A Website
- Adjust Settings
- Glasp's Shortcomings
- Conclusion

How To Setup Glasp on Chrome

This section will show you how to sign up and install Glasp's web browser extension and how to pin the extension to your browser's extension toolbar for easy access. You will need a Google account to sign up for Glasps service. Also, to use Glasp, you must install it as an extension or add-on to your browser. Currently, Glasp is compatible with desktop versions of Safari, Google Chrome, brave browser, or Microsoft Edge. Glasp should work on other Chrome-based browsers like Opera and Vivaldi. Note that this guide focuses on using Glasp on Chromium-based browsers and may not be as effective for Safari.

Sign Up and Install Glasp

To install Glasp, you must create a user account with Glasp and install the Glasp extension from the Chrome Web Store. Below are the steps to do both.

Visit Glasp's website on your browser.
Click "Sign up (beta)" at the top right-hand corner of your screen. This action will redirect you to the signup page.

Sign Up on Glasp's Home Page

Click "Continue with Google" on the right side of the signup page to sign up. Doing this will trigger a Google authentication sign-in page.
Continue with Google
Select the Google account you want to sign in to Glasp with, or "Choose another account." Signing in will redirect you to the Glasp extension page on the Chrome Web Store.

Select a Google account to sign up for Glasp
Visit Glasp's Chrome extension page if you were not redirected.
Click "Add to Chrome" on Glasp's Chrome extension page. It is in the top right-hand corner.

Add the Glasp extension to Chrome
Select "Add extension" in the alert on your browser. Doing this will install Glasp on your browser.

Click "Add Extension" in the Alert

How to Pin Glasp to Your Extension Toolbar

Pinning the Glasp extension to the browser will enable easy access to the Glasp Sidebar and all of Glasp's features. To pin Glasp to the extension toolbar:

Click the Chrome extension icon in the browser's toolbar. This will open a dropdown list of all extensions

Select the Chrome extension icon
Look for Glasp in the dropdown list

Identify Glasp from the dropdown list

Toggle the pin icon on. Now the Glasp extension should show up on the toolbar

Pin Glasp to the toolbar by clicking the pin icon

Click on Glasp's extension icon to start it. The extension referred to as the "Glasp Sidebar" should take up a small portion of the right side of your browser window. You should be signed in. If you are not signed in, click Log in / Sign up to proceed and follow steps 3 and 4 in Sign Up and Install Glasp. Glasp Sidebar signed in

Not signed in? Click "Log in / Sign up" to proceed

How To Use Glasp

Glasp's purpose is to give you an intuitive way of saving quotes and taking note of information you find interesting. Making use of the web extension is easy. Below are Glasp's major features and how to use them.

Your Glasp Profile Page

The Profile Page is where you can find all your highlights in one place. The "Home" feed on your profile page allows you to see highlighted texts from people you follow and those subscribed to the same topics as yourself. Your Glasp profile page also has a "My Highlights" feed that shows you your highlighted texts and an "Explore" feed that displays highlights from the Glasp community. To set up your profile page:

Go to your Glasp profile page by opening up the Glasp extension and clicking your avatar at the top-right side of the extension.

Go to your Glasp profile page
Choose your favorite topics and click "save" to personalize your feed. You can choose up to 10 topics. After saving, you will see your profile page.

Select your favorite topics
Customize the feed by selecting a particular topic from the left-hand side of the home page.

Customize your home feed with a topic
Find all your highlights in "My Highlights."

Save Text or Quote to Glasp

The most crucial feature of the Glasp extension is highlighting and saving quotes or text you find interesting on a website. Also, saving text or quotes on Glasp allows you to perform other actions on your saved quotes. To save a quote

Highlight text on a website as you usually would

Highlight a text
Select the color of choice from the menu that pops up. Doing this will save the text to your Glasp profile

Save the highlight with a color
Click the Glasp icon in the extension toolbar to view your saved highlights

Open Glasp Sidebar or extension to see your highlights

Add A Note to Highlighted Text

You can add notes to text or quotes you have highlighted. To Add a note:

Highlight the text you want or click on the text you have previously highlighted
Select the note-writing icon "✍️" from the menu, as seen in the image below.

Select the note-writing icon
Add a comment in the text box underneath the highlight in the Glasp extension. Glasp automatically saves the text

Input a comment in the text box
Use Shift and enter on your keyboard to start a new line of text
Clear notes by undoing or deleting the text

Create An Image of The Highlighted Text

A remarkable feature that Glasp has is "Create a Quoteshot." A Quoteshot allows you to generate an image from the text you highlighted. To create a Quoteshot:

Click an already highlighted text to display the menu
Tap the quote icon from the menu to create a Quoteshot. A card with the image will pop up

Select the quote icon from the menu
Customize the image color and orientation in the card that pops up
Download or share the image on Twitter or Facebook with the buttons at the bottom right side of the card
Exit the Quoteshot with the close button marked "X" at the top right-hand corner of the card

Change orientation or color and download or share a Quoteshot

Share Highlights Directly on Twitter

Suppose you want to share a highlighted text on Twitter. You do not have to copy the text or quote and paste it. Instead, you can directly share the quote to Twitter using Glasp's "Share on Twitter" feature. You must be logged in to your Twitter account on your browser for this feature to work. To share to Twitter:

Click a highlighted text
Click the Twitter icon from the highlight popup. Doing this will open up a new window on Twitter with the quote and the website you got it from

Click the Twitter icon from the Highlight Popup
Click "Tweet" to post to your Twitter profile.

Hit tweet to share to Twitter

Delete Highlight from The Webpage

Click on the text you highlighted
Select the color you used in highlighting the text to delete it. The color will have an X sign on top of it Delete a highlight by clicking the color marked with "X"

Take Note, Delete Highlight, Quoteshot, Share to Twitter, Copy Link to Highlight, Copy Highlight Embed Code from The Glasp Extension

Once you have created a highlight, you can access or perform most of the features we previously discussed from the Glasp extension. This way, you can be off the website where the quote is from and still perform any of these operations. To do this:

Click on the Glasp icon in the extension toolbar to open the extension
Place your cursor over the highlight you want to add a note, delete, or share on Twitter
Click the three-dotted menu in the top right corner of the highlights card

Select the three dotted menu icon
Choose the feature you want to use from the menu that comes up

Select a feature to use from the menu
Select copy link to highlight to copy to your clipboard a link to the highlight
Select copy highlight embed code to copy to your clipboard HTML code that you can integrate into your code, blog or newsletter

<iframe width="100%" height="315" src="https://glasp.co/highlight-embed?u=AiuA10kbaXQ6trgzPut0tnVwSif1&d=6fLhaHg0ftR1Fi8QVbd6&h=fyrb6j8o7527x3ed&m=h" title="Glasp Highlight Embed" frameborder="0"></iframe>

Example of a copied highlight embed code

Tag Highlights

Glasp allows you to label highlights with tags for easy categorization. To tag a highlight:

Click the highlighted text to see the highlight popup
Select the tag icon

Click the tag icon
Enter your preferred tag name in the textbox on the top of the Glasp extension

Enter a tag name

Saved tag name

Sort Through Your Highlights with Tags

Glasp's tag feature is handy when you want to sift through a large amount of content you have highlighted and tagged. You can filter out your highlights from your highlights page with a tag. To do this:

Open up the Glasp extension
Click the Settings and Help button on the right-hand corner of the Glasp extension

Click settings and help icon
Select "See My Highlights." This will open your highlights page in a new tab

Pick See My Highlights
Filter your highlights with a tag by selecting it from the tag section of the highlights page

Click a tag to filter your highlights

Summarize Text

Glasp has a neat feature that allows you to summarize the highlighted text. It is named "View Ai Summary." It leverages artificial intelligence (AI) to give you a summary of the text you highlighted. To use it:

Highlight the text
Open the Glasp extension
Click View AI Summary in the Glasp extension

View AI Summary button
Wait 5 – 10 seconds for Glasp to produce the summary

Summarized text output
Click the copy or Twitter icon to copy the summary or share it on Twitter, respectively.

Summarize YouTube Video

In addition to summarizing text on a website, Glasp has a tool for summarizing YouTube videos. If you do not have the time or patience to watch a video, you can still get the crux of the information you need with Glasp. To use it:

Go to YouTube and play a video of your choice
Click "Transcript and Summary." It is to the top-right side of the video you are playing. Click "Transcript and Summary"

Summarized YouTube transcript

View the AI summary of the video in a new tab, jump to the video's current time, or copy the summary to a clipboard using the options at the top of the "Transcript and Summary" pane. Open summary in new tab, jump to current time or copy to clipboard

Copy All Highlights from A Website

You can copy all the highlights you have saved from a website on Glasp. Glasp's "Copy All" feature saves to your device's clipboard text in Markdown format, the page title, an image, the page's metadata, and all your highlights in a list format. To use this feature:

Open the Glasp extension
Select "Copy All" to copy all of your highlights to the clipboard

Select Copy All
Paste it where you need it.

Copied highlights example

Adjust Settings

Open Glasp settings by right-clicking the Glasp icon in your browser's extensions toolbar and selecting options.

Right-click the Glasp extension icon and select options

Alternatively, open the Glasp extension by clicking the settings icon at the bottom right side and selecting "User Settings." You can adjust the extension's theme, copy format, language, and more from the settings.

Alternate way of opening glasp settings: Click settings icon

Alternate way of opening glasp settings: Click User Setting from menu

Glasp's user settings page

Glasp's Shortcomings

Despite all of its great features, at the time of publishing this guide, Glasp has some limitations you should be aware of. They include:

Inability to share highlights directly to other social media platforms besides Twitter from the Glasp sidebar or popup menu.
Glasp will not work on specific domains, including domains from major platforms like Google, Instagram, your Glasp profile page, other note-taking apps, and more. In addition, Glasp will not work with your local PDF documents.
There is no tight integration with other note-taking, research, and referencing applications. Although there are tutorials on Glasp's website for sharing highlights to Notion, Roam Research, and Obsidian, they only teach you how to copy and paste from their platform to the other. There is tighter integration with Readwise.
Glasp's extension does not work offline. You will need an internet connection to utilize Glasp.
Glasp is not available on Mozilla Firefox. The developers mention that they will work on an add-on for Mozilla Firefox.
You can only sign up for Glasp with a Google account.

Conclusion

Glasp is a clever web browser extension that allows you to highlight, save and add notes to quotes and texts directly on a website. With Glasp, you can eliminate the need to switch between applications or websites to keep track of relevant information. Glasp’s social features promote knowledge sharing and collaboration, making it an excellent tool for students, researchers, and professionals. Its features are impressive even if you are a casual user.

The guide provides steps to set up and use Glasp. In addition, this guide presents the major features of the Glasp extension. These features include setting up your home feed, saving text or quotes to Glasp, adding notes to highlighted texts, and creating images from those highlights. Despite some shortcomings, Glasp makes it easy to stay organized, collaborate with others, and gain and share insights.

Using tailwind 3.0 with Angular 13

Edori Atiri — Tue, 04 Jan 2022 07:35:43 +0000

Integrating tailwind into Angular was a somewhat cumbersome process before version 11.2, Angular 11.2 came with native support for TailwindCSS and eased the process of installing and making use of tailwind on the platform.

With the latest version of TailwindCSS (v3) Integrating tailwind with angular has become even easier. This version of tailwind (v3) brings a raft of improvements including JIT all the time, an extended colour palette, and arbitrary properties amongst many other upgrades.

There is no longer a need to configure tailwind to purge unused CSS classes as the new engine processes only the classes used in real-time which leads to a smaller file size and faster development. There is no need to use a tailwind watch, angular will handle that.

As easy as it now is to integrate tailwind into your new or existing angular application, I will still work through the process in this guide. At the time of publishing, I’m making use of Angular 13.

Create New Angular Project with the Angular CLI

Use ng new <project_name> to create a new angular project

cd into the project folder with cd c <project-name>

Install Tailwindcss

Enter this command into your CLI to install the latest version of tailwind as a dependency in your project:
npm install -D tailwindcss postcss autoprefixer

Initialize tailwind with:
npx tailwindcss init

This will generate a tailwind.config.js file in the root of your angular project

Configure Tailwind

Specify paths to all your template files in your tailwind config file, input your templates paths into the contents array like this:

content: [“./src/**/*.{html,ts}”]

There is no need to purge or configure Just in time mode in tailwind 3

Add the tailwind directives to your CSS

Open your styles.css file

src/styles.css

and add the @tailwind directives

@tailwind base; @tailwind components; @tailwind utilities;

Serve your application

Use ng serve and try out tailwind in your application. That’s it.

If you want, you can extend tailwind functionality in the tailwind config file and angular will apply them on save, without any extra effort on your part.

Additional Information

Sometimes after serving your application, tailwind jit might compile only the first time you start your application and might not do so again after saving changes, this might be because angular has a hidden .angular file that caches data. see the issue here:
What's the best way to install Tailwind into Angular project? #6390

To remedy this, delete the .angular folder and edit your angular.json file to include:

"cli": {
"cache": {
"enabled": false
}
},

You can add it below the second line, this:

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,

To Know if Tailwind JIT is working look at your cli and check for this:

Generating browser application bundles (phase: building)...
info - Tailwind CSS is watching for changes...
info - https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds
⠴ Generating browser application bundles (phase: building)...
info - Tailwind CSS is watching for changes...
info - https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds
✔ Browser application bundle generation complete.

If you see this then tailwind JIT mode is working, otherwise it might be loading from the angular cache.

Resources:
Tailwind Docs
Using TailwindCSS In Angular Is Easy From V11.2
Tailwind CSS with Angular V12- What You Need to Know
What's the best way to install Tailwind into Angular project? #6390