|
Issue #550 • February 1, 2024
Low-Code for Enterprise Application Development
Are your development projects hitting roadblocks due to complexity or cost? Consider professional low-code!
Build custom applications and solve your most pressing business problems efficiently. Join LANSA’s upcoming webinars to learn how.
We will also dive into Mobile and API development, with Q&A following each presentation.
Grab this chance to receive expert advice on building integrated, cross-platform applications faster and without compromises – learn from veterans who have helped brands like Kawasaki, Bank of America, and HUPAC.
Register Now →
|
The Fullscreen API has excellent browser support pretty much across the board in modern browsers thus has been safe to use for a few years now. The API itself isn't too complex and has only a small number of methods and properties.
The Fullscreen API technically allows you to programmatically make just about any element on the page move into fullscreen mode.
A simple function that toggles fullscreen mode might look something like this:
|
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
|
Then you would need some kind of trigger for the toggle. This CodePen demo uses a button that the user can click to toggle it.
Fullscreen mode is toggled on using the requestFullscreen() method. This method is applied to whatever element you want to go fullscreen (e.g. a video or the whole document, as in the above example).
The function also uses the fullscreenElement property of the current document to check if any element is currently in fullscreen mode. This property returns the current fullscreen element. So you can use something like tagName or nodeName to find out which element it is. In the demo I'm logging the tag name of the fullscreen element.
The function also uses the exitFullscreen() method, which is applied directly to the document object, rather than the element that's in fullscreen.
Some other notes about the Fullscreen API:
- The document.fullscreenEnabled property can be used to check if the current page or device has fullscreen capabilities.
- There is a fullscreenchange event that you can use to detect whenever an element has transitioned to or from fullscreen mode.
- Users are not forced to stay in fullscreen mode by this API; they can use ESC or F11 to exit fullscreen mode.
- The request and exit methods both return a Promise after their respective transitions to or from fullscreen mode.
That's more or less the Fullscreen API in a nutshell. In might come in handy in specific circumstances where fullscreen capability isn't obvious. For example a video already has fullscreen option but you can also do this with some kind of embedded game or animation that you want the user to be able to view in fullscreen mode for a distraction-free experience.
Now on to this week's tools!
|
JavaScript Libraries & Frameworks
Simple Statistics — A JavaScript implementation of descriptive, regression, and inference statistics, implemented with no dependencies and designed to work in all modern browsers and Node.js.
Shadeup — A language crafted to make shaders a breeze, powered by WebGPU, extended from TypeScript, and designed to minimize boilerplate.
Moddio — A multiplayer-first game engine with built-in server-authoritative netcode, including snapshot interpolation and client-side reconciliation, with support for 50+ concurrent players or 300+ moving entities.
Low-Code for Enterprise Application Development — BitDegree's Bridge the gap between speed and quality. Overcome technical barriers and budget constraints by leveraging a professional low-code solution designed to simplify enterprise application development. SPONSORED
H3 — A minimal http framework built for high performance and portability and includes a set of composable utilities but can be extended and super-fast route matching.
Cami — A simple and powerful UI framework for interactive islands in web applications with no build step required. Includes reactive web components, async state management, streams, and cross-component state management.
Electron Prokit — A desktop app framework based on Electron, to develop native desktop applications with JavaScript. Includes support for Vite, fully-typed APIs, and more.
QX82 — A tiny JavaScript engine that lets you create games and experiences inspired by the look and feel of a retro 1980s computer.
 |
ReqEase — A versatile front-end library designed to streamline web development tasks by simplifying things like HTTP requests with validation, loading indicators, and response handling.
Ree.js — A framework for building web applications at scale, using a build tool powered by Sucrase (the Babel alternative), direct URL imports, support for most runtimes, among other features.
Mosaic — A framework for linking data visualizations, tables, input widgets, and other data-driven components so you can interactively visualize and explore millions and even billions of data points.
|
| |
ChatGPT and AI Tools
Casibase — An open-source domain knowledge database, instant messaging, and forum software, powered by ChatGPT.
llamafile — A project that allows you to distribute and run LLMs with a single file, to make open source large language models more accessible to both developers and end users.
Promptr — A CLI tool that lets you use plain English to instruct OpenAI LLM models to make changes to your codebase.
yaml-runner — A command-line tool that automates the execution of tasks based on instructions defined in YAML files, to execute instructions from GPT-4, or other LLMs.
Get Smarter About AI and Tech in 5 min — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more. SPONSORED
WeatherGPT — A ChatGPT plugin starter template built with Next.js 13 App Router, Edge Functions, and Vercel, to get the weather of any given location.
Fastpedia — A large directory of AI tools, searchable by keyword or one of the dozens of tags/categories (voice, image editing, low-code, marketing, etc).
 |
GPT Assistant — An experimental tool, built with Qwik and Puppeteer, to give an autonomous GPT agent access to a browser and have it accomplish tasks.
AI Legion — An LLM-powered autonomous agent platform to allow autonomous agents to work together to accomplish tasks.
node-openai — An elegant Node.js library written in TypeScript for the OpenAI API, with no dependencies and works in Node.js and the browser.
BingGPT — A desktop application for Bing's new AI-powered chat, allowing you to chat with Bing without installing Microsoft Edge or any browser extension.
|
The #1 All-In-One Platform Your Team Needs
Picture a world where workflows are finely tuned, automated to perfection, and seamlessly integrated with your favorite apps. It's not just a platform; it's a revelation—a space where managers gain unparalleled visibility into team processes, ensuring each project is a resounding success.
Step into the future of work management with monday.com, where efficiency isn't a goal; it's a given.
From startups to industry giants, monday.com has transformed how teams work. Why not let your team be the next success story?
Start Your Free Trial Today →
|
React Tools
react-quiz-component — A React component that allows you to create an interactive quiz for users, with lots of features to customize the types of questions, included data, real-time feedback, and lots more.
Beak.js — Everything you need to create custom AI-powered assistants for your React app, with an easy-to-customize built-in UI.
next-safe-action — A library that takes full advantage of the latest and greatest Next.js, React and TypeScript features, using validation libraries of your choice, to let you define type-safe Server Actions and execute them inside Client Components.
Next Fetch — An intuitive way to dynamically fetch data from API endpoints in Next.js, using your favorite libraries.
Get Smarter About AI and Tech in 5 min — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more. SPONSORED
Graphic Walker — An open-source alternative to Tableau that allows data scientists to analyze data and visualize patterns with simple drag-and-drop and natural language query operations, easy to embed in a React app.
React Curved Text — A React component for creating circular or curved text. The home page has an interactive example showing how you can customize the different settings.
 |
Reacton — A pure Python port of React for ipywidgets (which is a set of interactive widgets for Jupyter Notebooks).
Superglue — If Python isn't your thing, this project (still in early development) lets you use classic Rails to build rich React Redux applications with no APIs and no client-side routing.
re-frame — We covered Python and Rails, how about a ClojureScript framework for building user interfaces, leveraging React.
react-three-gpu-pathtracer — A React abstraction for the popular three-gpu-pathtracer project.
|
|
Commercial Apps and Classifieds
Cult – A SaaS toolkit with components built with Radix UI and Tailwind CSS.
|
|
Bytes – A JavaScript newsletter that's informative & entertaining, for all levels of JS devs. AD
|
Rely.io – A developer portal with an AI assistant you can speak with, to simplify complex DevOps questions.
|
|
ShipFast – A Next.js boilerplate with all you need to build your SaaS, AI tool, or any other web app.
|
Passionate Income – Gain financial literacy in a bite-sized 3-minute read that has actionable advice. AD
|
|
Vondy – An all-in-one platform to generate anything you can imagine using cutting-edge AI.
|
BuyMyGPT – A service to allow you to put your GPT files and actions behind a paywall in a few steps.
|
|
|
An X Post for Thought
Chris Bakke demonstrates how to buy a brand new vehicle for $1.00 USD in the age of AI. The best part is the use of the phrase "no takesies backsies". 🤣
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
This is pretty cool and I can totally see people using this: Sit in Shade. It's an online tool to help you find the best bus seat (i.e. on the left side of the bus or right side) in order to minimize sun exposure. Just enter starting point, destination, and time of day and it will show you the data and "side of bus" recommendation.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly
|
|
