Open Source & Free Tools for Web Workers

Initab is a New Tab Extension for developers designed to replace the browser's new tab page with a dashboard of useful tools. It offers a solution to the common problem of having too many tabs open.

Features:

Activity and History Tracking

• GitHub Issue/PR Activity Initab pulls your GitHub Issue or Pull Request activity directly from your history, making the item visible when you open a new tab.

• GitLab Support The tool allows users to quickly toggle between GitHub and GitLab as their preferred tracker for Issues and Pull/Merge Requests.

• Stack Overflow History A panel can be toggled to show all of your recent Stack Overflow (S.O.) history.

• Relevant History Users can add a keyword in the SETTINGS panel to view browser history related to specific technologies, such as visited articles or blog posts.

• Reddit Feed Users can add their preferred SubReddit in the SETTINGS panel to keep track of current activity in Reddit.

Developer Tools and Utilities

• Gists By entering a GitHub username, Initab fetches all public Gists related to that account, providing quick access to commonly used code snippets.

• Trending Repos This feature helps developers stay up to date by fetching the most starred GitHub repositories that were created in the last month.

• Scratchpad A simple note-taking feature that persists in Local Storage, which is also useful for keeping track of "ToDo's".

Customization and Management

• SETTINGS panel Users can open this panel to configure their preferences.

• CUSTOM LINKS (Optional) Users can add valid URLs to this section, which then replaces the DATE & TIME section with those custom links.

• TAB LIMITING (Optional) This feature automatically limits browser tabs to a user-chosen number by closing older tabs.

• Themes Initab offers two beautiful themes inspired by common development environments and IDEs:

  • Dracula An absolutely beautiful dark theme.

  • Base16 PaperColor Light A lovely light-colored theme.

PureScript, a programming language.

Core Characteristics and Language Features

PureScript is characterized as a strongly-typed functional programming language. A primary functionality is that it compiles to JavaScript, which is readable, and allows users to reuse existing JavaScript code easily.

The language supports the construction of real-world applications using advanced functional techniques and expressive types, such as:

• Algebraic data types and pattern matching.

• Row polymorphism and extensible records.

• Higher kinded types.

• Type classes with functional dependencies.

• Higher-rank polymorphism.

Tooling, Ecosystem, and Functionalities

PureScript is designed to facilitate development of web applications, web servers, apps, and more.

Development and Build Tools:

• It offers excellent tooling and editor support, including features like instant rebuilds.

• The recommended build tool for PureScript is Spago, which can be installed using NPM.

• NPM (Node Package Manager) is recommended for managing JavaScript dependencies within a project.

Installation:

• PureScript can be installed via precompiled binaries available for OSX, Linux, and Windows.

• It can also be installed using npm (npm install -g purescript), although this method requires Node version 8 or later.

Resources and Community:

• The platform provides an extensive collection of libraries. Searchable documentation for these packages is hosted on the Pursuit package database.

• Learning resources include the free book PureScript By Example (which contains practical projects for beginners), and a dedicated documentation repository on GitHub.

• The language benefits from an active community, with places for discussion including the PureScript Discourse instance and the PureScript Discord server.

piecesjs, is a lightweight JavaScript framework designed for the versatile and native management of web components in the front-end. It is specifically built upon native web components.

Features:

Core Architecture and Performance

• Lightweight Framework: piecesjs is a small framework, noted as being [1.8kb], that avoids the overhead of unnecessary code or restrictive architectures common in larger frameworks.

• Modular "Pieces": At its core, a "Piece" is a modular component that functions independently, featuring its own encapsulated styles and interactions.

• Dynamic JS & CSS Import: It automatically imports only the necessary JavaScript and CSS required for the specific page, which optimizes performance.

• Designed for Interactivity: It is tailored for creative websites that rely heavily on JavaScript logic—specifically sites managing multiple steps, states, and events—offering a streamlined and scalable approach for highly interactive experiences.

Component Interaction and Communication

• Seamless Communication: Components are designed to communicate effortlessly with each other.

• this.call(): This method allows developers to call a function of any component (Piece) from any other component. If a specific pieceId (set using the cid attribute) is not provided, the function will be called on all occurrences of that component type.

• this.emit() and Custom Events: Developers can emit custom events (by default on the document), which other Pieces can listen to using this.on().

Event and DOM Management

• Scoped Event Management: Events can be easily managed within a component's scope using the methods this.on() (for registering event listeners) and this.off() (for removing them, often placed in the unmount() lifecycle method).

• HTML Event System: piecesjs provides a declarative way to handle events directly within your HTML using data-events-* attributes (e.g., data-events-click). This system automatically scans for these attributes during mount, binds listeners, and cleans them up on unmount.

• Convenient Access to Scoped HTMLElements (Queries): Developers can quickly access elements within the component scope using this.$() or this.domAttr('slug'). this.domAttr queries elements based on a data-dom slug attribute. The framework also offers methods like this.$All(), this.domAll(), and this.domAttrAll() if a NodeList is preferred, even for single elements.

Utilities and Lifecycle

• PiecesManager: This manager provides centralized access to all active pieces currently visible on the page, simplifying component management. It can be accessed globally or via this.piecesManager inside a Piece.

• Lifecycle Methods: The framework includes specific lifecycle functions for components: premount(), render(), mount(), update(), and unmount(). The update() method is automatically called if an attribute is changed, triggering unmount(), premount(), and mount() in sequence.

• Efficient Global CSS Management: Provides streamlined handling for organizing global CSS imports.