JavaScript

Clipboard-cli: Access The System Clipboard (copy/paste)

Clipboard-cli

Access the system clipboard (copy/paste) - cross-platform

Supports: macOS, Windows, Linux, OpenBSD, FreeBSD, Android with Termux.

Install

npm install --global clipboard-cli

Usage

$ clipboard --help

  Example
    $ echo 🦄 | clipboard
    $ clipboard
    🦄

Tip

Run it with $ cb instead by adding alias cb=clipboard to your .zshrc/.bashrc.

Related

• clipboardy - API for this module

Download Details:

Author: Sindresorhus
Source Code: https://github.com/sindresorhus/clipboard-cli 
License: MIT license

#node #javascript #macos #windows #linux 

FLAT: FoLiA Linguistic Annotation Tool

FLAT - FoLiA Linguistic Annotation Tool

FLAT is a web-based linguistic annotation environment based around the FoLiA format (http://proycon.github.io/folia), a rich XML-based format for linguistic annotation. FLAT allows users to view annotated FoLiA documents and enrich these documents with new annotations, a wide variety of linguistic annotation types is supported through the FoLiA paradigm. It is a document-centric tool that fully preserves and visualises document structure.

FLAT is written in javascript with jquery on a backend of Python using the Django framework. The FoLiA Document Server (https://github.com/proycon/foliadocserve) , the back-end of the system, is written in Python with CherryPy and is used as a RESTful webservice.

FLAT is open source software developed at the Centre of Language and Speech Technology, Radboud University Nijmegen. It is licensed under the GNU Public License v3. The project is funded in the scope of the larger CLARIAH project.

Features

• Web-based, multi-user environment
• Server-side document storage, divided into 'namespaces', by default each user has his own namespace. Active documents are held in memory server-side. Read and write permissions to access namespaces are fully configurable.
• Concurrency (multiple users may edit the same document similtaneously)
• Full versioning control for documents (using git), allowing limitless undo operations. (in foliadocserve)
• Full provenance information, including annotator names and timestamps, is stored in the FoLiA XML and can be displayed by the interface. The git log also contains verbose information on annotations.
• Annotators can indicate their confidence for each annotation
• Highly configurable interface; interface options may be disabled on a per-configuration basis. Multiple configurations can be deployed on a single installation
• Displays and retains document structure (divisions, paragraphs, sentence, lists, etc)
• Support for corrections, of text or linguistic annotations, and alternative annotations. Corrections are never mere substitutes, originals are always preserved!
• Spelling corrections for runons, splits, insertions and deletions are supported.
• Supports FoLiA Set Definitions to display label sets. Sets are not predefined in FoLiA and anybody can create their own.
• Supports Token Annotation and Span Annotation
• Supports complex span annotations such as dependency relations, syntactic units (constituents), predicates and semantic roles, sentiments, stratements/attribution, observations
• Simple metadata editor for editing/adding arbitrary metadata to a document. Selected metadata fields can be shown in the document index as well.
• User permission model featuring groups, group namespaces, and assignable permissions
• File/document management functions (copying, moving, deleting)
• Allows converter extensions to convert from other formats to FoLiA on upload
• In-document search (CQL or FQL), advanced searches can be predefined by administrators
• Morphosyntactic tree visualisation (constituency parses and morphemes)
• Higher-order annotation: associate features, comments, descriptions with any linguistic annotation, also allow for arbritary relations between any type of annotation or structure

Architecture

The FLAT architecture consists of three layers:

• The FoLiA Document Server (https://github.com/proycon/foliadocserve)
• The FLAT server
• The user-interface

At the far back-end is the FoLiA Document Server, which loads the requested FoLiA documents, and passes these as JSON and HTML to the middle layer, the FLAT server, this layer in turn passes edits formulated in FoLiA Query Language (FQL) to the Document Server. The user-interface is a modern web-application interacting with the FLAT server and translates interface actions to FQL.

FLAT distinguishes several modes, between which the user can switch to get another take of a document with different editing abilities. There are currently three modes available, and a fourth one under construction:

• Viewer - Views a document and its annotations, no editing abilities
• Editor - Main editing environment for linguistic annotation
• Metadata editor - A simple editor for document-wide metadata
• Structure Editor - Editing environment for document structure (rudimentary version, not done)

In the viewer and editor mode, users may set an annotation focus, i.e. an annotation type that they want to visualise or edit. All instances of that annotation type will be coloured in the interface and offer a global overview. Moreover, the editor dialog will automatically present fields for editing that type whenever a structure element (usually a word/token) is clicked.

Whereas the annotation focus is primary, users may select what other annotation types they want to view locally, i.e. in the annotation viewer that pops up whenever the user hovers over a structural element. Similarly, users may select what annotation types they want to see in editor, allowing the editing of multiple annotation types at once rather than just the annotation focus.

FoLiA distinguishes itself from some other annotation formats by explicitly providing support for corrections (on any annotation type, including text) and alternative annotations. In FLAT these are categorized as edit forms, as they are different forms of editing; the user can select which form he wants to use when performing an annotation.

The site administrator can configure in great detail what options the user has available and what defaults are selected (for annotation focus for instance), as a full unconstrained environment (which is the default) may quickly be daunting and confusing to the end-user. Different tasks ask for different configurations, so multiple configurations per site are possible; the user chooses the desired configuration, often tied to a particular annotation project, upon login.

Documentation

FLAT Documentation can be found in the form of the following three guides:

• Installation Guide. - Explains how to install FLAT.
• Administration Guide. - Explains how to configure FLAT for your annotation task.
• User Guide. - Explains how to use FLAT.

Moreover, a screencast video has been created to show FLAT in action and offer an impression of its features:

• FLAT Demonstration Video.

Screenshots

For some impressions of FLAT, take a look at the following screenshots:

The login screen:

Document index, showing namespaces accessible to the user and the documents within.

Hovering over words reveals annotations:

A particular annotation focus can be set to highlight the most frequent classes in that set:

Editing a named entity in a set for which a set definition is available:

Correcting a word in a spelling-annotation project:

Proper right-to-left support for languages such as Arabic, Farsi and Hebrew.

Extensive history with limitless undo ability, git-based:

Advanced search queries in CQL (Corpus Query Language) or FQL (FoLiA Query Language):

Tree visualisation of syntax and morphology:

Download Details:

Author: proycon
Source Code: https://github.com/proycon/flat 
License: GPL-3.0 license

#machinelearning #python #javascript #nlp #webapplication 

Build a Javascript Google Map Directions API & Places API Project

Google Map Directions API & Places API Project Javascript is the latest and updated video in using google maps api. In this video we will work a little bit with the Direction API & Places API  by popular demand. We will implement a map with two inputs which will be the origin and destination after that we will also use font awesome icons for our button. We also add an output section below the map where we can displace the origin input , the destination input, the distance of the two places and also the duration it will take to get to these places by driving. We also used bootstrap to help us with the styling .  

GitHub: https://github.com/sammy007-debug 

boostrap.mini.css: https://drive.google.com/drive/folders/1mHx7UP6APiO95pUmYQ2HLIkNuHsBmhNC?usp=sharing 

Codepen For google script tag: https://codepen.io/sammy007-debug/pen/MWbMLXj 

Subscribe: https://www.youtube.com/@samcodes2912/featured 

#javascript 

Build a Chatbot with Flask , HTML , CSS & JavaScript

How to Build a Chatbot with Flask - Step-by-Step Tutorial with HTML, CSS, and JavaScript

In this Video, We will guide you through the process of building a chatbot that can carry out conversations with users using natural language processing.

To start, we will be using Microsoft DialoGPT, a pre-trained language model that can generate human-like responses to given prompts. We will be integrating DialoGPT with Flask, a popular Python web framework, to create a web application that can communicate with users via a chat interface.

For the frontend of our application, we will be using HTML, CSS, and JavaScript to create a visually appealing and interactive chat interface. Additionally, we will be using jQuery to handle the HTTP requests that are made to the backend server.

Throughout the tutorial, We will provide step-by-step instructions on how to set up your development environment, install the necessary dependencies, and create the required files and code for the application. I will also explain how to train and fine-tune the DialoGPT model to improve the accuracy of its responses.

By the end of this tutorial, you will have a fully functional chatbot that can engage in conversations with users, and you will have gained valuable experience in using Microsoft DialoGPT, Flask, and web development technologies such as HTML, CSS, and JavaScript.

ChatBot Starter Code:  https://github.com/binary-hood/ChatBot-Starter 

ChatBot Completed Code: https://github.com/binary-hood/ChatBot 

Subscribe: https://www.youtube.com/@binaryhood/featured 

#chatbot #flask #python #html #css #javascript 

Build a Responsive Admin Dashboard with HTML, CSS, and JavaScript

 Responsive Admin Dashboard using HTML CSS and JavaScript | Dashboard Design using HTML and CSS

In this practical HTML CSS and JavaScript project tutorial, I'm going to teach you, step-by-step, how to create a fully Responsive Admin Dashboard Panel from scratch, with a beautiful user interface.

❤️ Get template
https://www.buymeacoffee.com/crypticacoder/e/66693 

📂 Start project from scratch
https://drive.google.com/file/d/1Lr8BejsgYmwX0IeapvafuNjYrXIDqms7/view?usp=drivesdk 

🔔 Subscribe:  https://youtube.com/c/CrypticalCoder 

#html #css #javascript 

Build a Responsive Admin Dashboard with HTML & CSS

Create Responsive Admin Dashboard in HTML CSS | Admin Panel Template

Admin Dashboard is a header section of the website where the admin can see the overall performance of his/her website. Admin dashboard panel helps to make quick decisions for admin to make decisions of what should they improve in his website or business.

In this HTML and CSS project, We have created a Responsive Admin Dashboard using HTML CSS and a little touch of JavaScript. You can download all the source code files from the given link.

Timelapse:
00:00 Dashboard Template Design | Demo
02:07 Admin Dashboard Responsive | Demo
04:07 Sidebar Menu HTML code of Dashboard
04:18 Import Icon's CDN link for Dashboard
04:45 Importing Fonts Icon in HTML 
08:05 CSS Code of  Side menu bar of Dashboard Panel
13:07 Dashboard Navigation Bar HTML code
13:51 CSS code for Admin Dashboard Navbar
18:34 How to make a search bar 
24:07 How to create a JavaScript file 
24:15 Animated Sidebar Menu with javascript code
27:14 Overview boxes HTML Code for Dashboard
29:11 How to make Sticky Navigation menu bar
32:14 Designing overview boxes in CSS
39:32 How to make an admin dashboard responsive
43:14 Sales data HTML Code CSS code from here
53:35 Home to make Admin Dashboard fully responsive

Hire us on Fiverr
➤ https://www.fiverr.com/prakashahi 

📁 Download Source Code Form Here
➤  https://www.codingnepalweb.com/admin-dashboard-in-html-css/ 

Subscribe: https://www.youtube.com/@CodingLabYT/featured 

#html #css #javascript 

Build a React Ecommerce Website with Redux Toolkit | React Shopping Cart UI Design

React Ecommerce Website Design Tutorial With Redux Toolkit React Shopping Cart UI Design

In this tutorial video, you will learn how to design an ecommerce website using React and Redux Toolkit. You'll discover how to build a shopping cart and create a responsive and visually pleasing UI design. This tutorial delves into the benefits of using Redux for state management and offers clear demonstrations throughout the tutorial. Finally, you will know how to design and create a complete and exciting ecommerce website in React. Develop your web design skills and expand your knowledge of web development with this informative tutorial.

GitHub Code (feel free to give it a star ⭐): https://github.com/prabinmagar/shopping-hub-react-js-ecom-site-with-redux-toolkit 
Download Other Project Souces Code- https://github.com/sunil9813 
Download Fonts - https://fonts.google.com/   

Download  Icon  
Icon8 : https://icons8.com/ 
Font Awesome : https://fontawesome.com/ 

Download  Image  
Istock : https://www.istockphoto.com/ 
Freepik’s: https://www.freepik.com/ 
Pexels : https://www.pexels.com/search/photography/ 

Subscribe: https://www.youtube.com/@gorkcoder/featured 

#react #redux #javascript 

Build a Responsive Admin Dashboard with ReactJS

This tutorial video demonstrates how to create a responsive and user-friendly admin dashboard utilizing ReactJS. You will learn how to integrate and customize various components, while adhering to best practices for a smooth user interface. Follow along to take your ReactJS development skills to the next level and improve your ability to create stunning and practical web applications.

💙 Get full project
Link One: https://ko-fi.com/s/09ae7c1fb6 
Link Two: https://www.buymeacoffee.com/IsraTech/e/91646 

📂Assets 
Icons: https://react-icons.github.io/react-icons/ 
Fonts: https://fonts.google.com/ 
Videos: https://pixabay.com/videos/ 
Images: https://www.pexels.com/ 

🔔 Subscribe : https://www.youtube.com/c/IsraTech1 

#react #reactadmin #javascript 

is-online: Check If The internet Connection is Up

is-online

Check if the internet connection is up

Works in Node.js and the browser (with a bundler).

In the browser, there is already navigator.onLine, but it's useless as it only tells you if there's a local connection, and not whether the internet is accessible.

Install

npm install is-online

Usage

import isOnline from 'is-online';

console.log(await isOnline());
//=> true

API

isOnline(options?)

options

Type: object

timeout

Type: number
Default: 5000

Milliseconds to wait for a server to respond.

ipVersion

Type: number
Values: 4 | 6
Default: 4

The Internet Protocol version to use.

This is an advanced option that is usually not necessary to be set, but it can prove useful to specifically assert IPv6 connectivity.

How it works

The following checks are run in parallel:

• Retrieve icanhazip.com (or ipify.org as fallback) via HTTPS.
• Query myip.opendns.com and o-o.myaddr.l.google.com DNS entries. (Node.js only)
• Retrieve Apple's Captive Portal test page (this is what iOS does). (Node.js only)

When any check succeeds, the returned Promise is resolved to true.

Proxy support

To make it work through proxies, you need to set up global-agent.

Maintainers

• Sindre Sorhus
• silverwind

Related

• is-online-cli - CLI for this module
• is-reachable - Check if servers are reachable

Download Details:

Author: sindresorhus
Source Code: https://github.com/sindresorhus/is-online 
License: MIT license

#node #javascript #internet 

Build a Social Media App with MERN Stack for Beginners

MERN Stack Social Media App Tutorial | React Node.js full Course for Beginners

In this MERN Stack tutorial, we are going to build a Social Media Application  from scratch. You will learn how to make awesome React web design with CSS3 in this first part. This f l  app course will be totally beginners friendly. At the end of this course, you would have strong understanding of Node.js, MonogoDb, Express Server and React.

Time stamps:
00:00 Intro
01:40 Project overview
03:53 Project setup
09:06 App component
12:54 Home page
17:22 Search
23:15 Profile Card
40:29 Followers Card
52:24 Post Share
1:16:33 Posts
1:27:40 Nav Icons
1:31:32 Trend Card
1:38:14 Profile Page
1:54:37 Auth Pages
2:10:27 Making Modals
2:22:36 Outro

Source Code:
Starter: https://github.com/ZainRk/SocialMedia-Starter 
Complete code: https://github.com/ZainRk/SocialMedia-Frontend 

Subscribe: https://www.youtube.com/@ZAINKEEPSCODE/featured 

#mern #nodejs #react #javascript 

is-up: Check Whether A Website Is Up Or Down

is-up

Check whether a website is up or down using the isitup.org API

Install

npm install is-up

Usage

import isUp from 'is-up';

console.log(await isUp('https://sindresorhus.com'));
//=> true

Related

• is-up-cli - CLI for this module

Download Details:

Author: sindresorhus
Source Code: https://github.com/sindresorhus/is-up 
License: MIT license

#node #website #javascript 

Vtop: A Graphical Activity Monitor for The Command Line

vtop 

A graphical activity monitor for the command line.

How to install

If you haven't already got Node.js, then go get it.

npm install -g vtop

If you're on macOS, or get an error about file permissions, you may need to do sudo npm install -g vtop. Don't do this if you're using nvm.

Running

This is pretty simple too.

vtop

If you really like vtop, but your finger muscle memory means you keep typing 'top' then why not add an alias to ~/.bashrc.

alias top="vtop"
alias oldtop="/usr/bin/top"

Keyboard shortcuts

• Press 'u' to update to the latest version of vtop.
• Arrow up or k to move up the process list.
• Arrow down or j to move down.
• Arrow left or h to zoom the graphs in.
• Arrow right or l to zoom the graphs out.
• g to go to the top of the process list.
• G to move to the end of the list.
• dd to kill all the processes in that group

Mouse control

If your terminal supports mouse events (like iTerm) then you can click on the items in the process list. As well as use the scroll wheel. You can disable mouse control with the vtop --no-mouse option.

FAQs

How does it work?

It uses drawille to draw CPU and Memory charts with Unicode braille characters, helping you visualize spikes. We also group processes with the same name together.

I think the CPU % is coming out wrong.

We calculate the CPU percentage as a total of your overall system power. 100% is all cores and HyperThreads maxed out. This is different to how Apple Activity monitor works.

Can I change the color scheme?

Sure, just do:

vtop --theme wizard

This loads the theme file in themes/ with the same name. Make your own and send me a Pull Request :)

You could add this to your aliases if you'd like to use it always.

alias vtop="vtop --theme brew"

What about measuring server req/s, log entries, etc etc?

Yeah that's on the list :) Feel free to send a pull request though. Check out the sensors/ folder.

What license is this under?

MIT – do what you like with it :)

Contributing

Get stuck in – click the fork button, then clone to your local machine. Use the GitHub Desktop client if you don't know Git. Tinker with the code then run this from the command line:

./bin/vtop.js

When you push it'll run the Standard JS checker http://standardjs.com/. If you run 'npm test' in your own terminal too, this runs in Travis, your PR will fail the test if this command fails.

Download Details:

Author: MrRio
Source Code: https://github.com/MrRio/vtop 
License: MIT license

#node #commandline #javascript 

Fullstack React Ecommerce app that is fully responsive with Stripe Payment

React Responsive, Fullstack, Ecommerce App Tutorial from scratch. We will be using React, Material UI, Stripe, Formik, Yup, Strapi, and Redux Toolkit to build this entire application. This application will allow you to add products into a cart, have a form to fill out information and make payments through Stripe with a backend supported by Strapi.

Chapters:
0:00 Create a Complete React Ecommerce Website from Scratch
4:04 Strapi Installation and Setup for Backend
13:11 React Ecommerce Frontend Installation and Setup
17:24 Theming Setup
24:50 React Router Setup
27:28 React and Redux File and Folder Architecture
34:15 Navbar
44:44 Redux and Redux Toolkit Setup building CartMenu
1:23:55 Individual Item Component
1:39:19 Home Page
2:22:17 Footer
2:30:56 Item Details Page
2:54:24 Checkout Pages and Forms with Formik and Yup
3:45:27 Stripe Setup and Integration
4:10:03 Final Complete Ecommerce Demo and Summary
4:11:40 Complete Ecommerce Website Built Fully in React

Links:
create react app: https://create-react-app.dev/docs/getting-started
material ui: https://mui.com/material-ui/getting-started/installation/
formik: https://formik.org/docs/overview#installation
yup validation: https://github.com/jquense/yup
google fonts: https://fonts.google.com/
react responsive carousel: https://github.com/leandrowd/react-responsive-carousel
redux toolkit: https://redux-toolkit.js.org/tutorials/quick-start
strapi: https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html
stripe dashboard: https://dashboard.stripe.com/test/dashboard
stripe quickstart: https://stripe.com/docs/billing/quickstart
stripe code: https://stripe.com/docs/checkout/quickstart
stripe api ref: https://stripe.com/docs/api/checkout/sessions/create
stripe api keys: https://dashboard.stripe.com/test/apikeys

github completed app: https://github.com/ed-roh/react-ecommerce/tree/master
images: https://github.com/ed-roh/react-ecommerce/tree/master/client/src/assets
data for strapi items: https://github.com/ed-roh/react-ecommerce/blob/master/client/src/assets/strapi-mock-data/strapi-item-inputs.json

Subscribe to my channel: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1 
#react #javascript 

Rust-Based Build System for JavaScript and TypeScript Optimization

Turbo

Turbo is a next-generation toolchain for frontend development, written in Rust. It consists of 3 major parts:

• Turbopack: an incremental bundler (the successor to Webpack)
• Turborepo: an incremental build system
• The Turbo engine: a low-level incremental computation and memoization engine

Getting Started

Visit https://turbo.build to get started with Turbopack and Turborepo.

Contributing

See CONTRIBUTING.md for more information.

Community

The Turbo community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.

To chat with other community members, you can join the Turbo Discord.

Our Code of Conduct applies to all Turbo community channels.

Who is using Turbo?

Turbo is used by the world's leading companies. Check out the Turbo Showcase to learn more.

Updates

Follow @turborepo on Twitter and for project updates.

Authors

Turborepo

• Jared Palmer (@jaredpalmer)

Turbopack and the Turbo engine

• Tobias Koppers (@wSokra)
• Maia Teegarden (@padmaia)

Security

If you believe you have found a security vulnerability in Turbo, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@vercel.com to disclose any security vulnerabilities.

https://vercel.com/security

Download details:

Author: vercel
Source: https://github.com/vercel/turbo

License:  MPL-2.0 license

#rust #javascript #typescript 

Build a Complete React Admin Dashboard App | React Admin Dashboard Tutorial

Build a Complete React Admin Dashboard App | React, Material UI, Data Grid, Light & Dark Mode

React Admin Dashboard Tutorial from scratch. We will be using React, Material UI, Nivo Charts, Formik, Yup, FullCalendar, and Data Grid to build this entire application. This application consists of Light and Dark Mode, 4 different Charts, 3 different Data Table Pages, FAQ Page, Form Page, and Calendar Integration.

Chapters:
0:00 Demonstration of a Complete React Admin Dashboard
3:12 Why build this React Admin Dashboard?
3:47 Installation
7:28 Code Setup
12:31 File and Folder Architecture
17:41 Theme with Light and Dark Mode
36:47 Appbar aka Topbar
51:21 Router Setup
57:14 Navbar aka Sidebar with React Pro Sidebar
1:27:13 Tables with Mui Data Grid
1:58:35 Profile Form with Formik and Yup
2:21:55 Calendar using FullCalendar Package
2:42:35 FAQ Page with MUI Accordion
2:49:22 Bar, Line, Pie and Geography Charts with Nivo Charts 
3:23:20 Dashboard
4:03:05 Final Demo of Dashboard
4:03:25 Fully Built Complete React Admin Dashboard

create-react-app: https://create-react-app.dev/
material ui: https://mui.com/material-ui/getting-started/installation/
nivo charts: https://nivo.rocks/components
full calendar: https://fullcalendar.io/docs
formik: https://formik.org/docs/overview#installation
yup validation: https://github.com/jquense/yup
react pro sidebar: https://github.com/azouaoui-med/react-pro-sidebar
google fonts: https://fonts.google.com/

Code
link to mock data(copy and paste both files): https://github.com/ed-roh/react-admin-dashboard/tree/master/src/data 
completed code: https://github.com/ed-roh/react-admin-dashboard 

Subscribe: https://www.youtube.com/@EdRohDev/featured 

#react #javascript