frame

Australian Government response to the Senate Education and Employment References Committee report : they never came home - the framework surrounding the prevention, investigation and prosecution of industrial deaths in Australia / Australian Government




frame

Fault, responsibility, and administrative law in late Babylonian legal texts / F. Rachel Magdalene, Cornelia Wunsch, and Bruce Wells ; with contributions from E. Frahm, G. Frame, K. Kleber, and C. Waerzeggers

Magdalene, F. Rachel, author




frame

The corporate energy strategist's handbook: frameworks to achieve environmental sustainability and competitive advantage / Jimmy Y. Jia

Online Resource




frame

Muzaffarnagar riots: Charges framed against 6 accused in murder case



  • DO NOT USE Uttar Pradesh
  • India

frame

Critical role of water stability in metal–organic frameworks and advanced modification strategies for the extension of their applicability

Environ. Sci.: Nano, 2020, Advance Article
DOI: 10.1039/C9EN01321K, Critical Review
Botao Liu, Kumar Vikrant, Ki-Hyun Kim, Vanish Kumar, Suresh Kumar Kailasa
Metal–organic frameworks (MOFs) are well known for their versatile applications in diverse fields (e.g., gas adsorption, water purification, sensing, drug delivery, and catalysis).
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Retraction: Plasma-grafted amidoxime/metal–organic framework composites for the selective sequestration of U(VI)

Environ. Sci.: Nano, 2020, Advance Article
DOI: 10.1039/D0EN90017F, Retraction
Open Access
  This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.
Fengbo Li, Xiaoyu Li, Pu Cui, Yubing Sun
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Static disorder in a perovskite mixed-valence metal–organic framework

CrystEngComm, 2020, 22,2859-2865
DOI: 10.1039/D0CE00119H, Paper
Ines E. Collings, Paul J. Saines, Mirko Mikolasek, Tiziana Boffa Ballaran, Michael Hanfland
Effects of A-site and M-site substitutions on the structural properties of perovskite dimethylammonium iron formate.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

A water-stable terbium metal-organic framework with functionalized ligands for the detection of Fe3+, Cr2O72- ions in water and picric acid in seawater

CrystEngComm, 2020, Accepted Manuscript
DOI: 10.1039/D0CE00430H, Paper
Hai-Huan Yu, Jia-Qi Chi, Zhong-Min Su, Xiao Li, Jing Sun, Chen Zhou, Xiao-Li Hu, Qun Liu
The existence of Cr2O72- anions, excessive Fe3+ cations in water and picric acid in seawater have irreversible harm to human health and aquatic organism. Herein, a water-stable terbium metal-organic framework...
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Highly porous aluminophosphates with unique three dimensional open framework structures from mild hydrothermal syntheses

CrystEngComm, 2020, 22,3070-3078
DOI: 10.1039/D0CE00075B, Paper
Yucheng Hao, Yang Pan, Yuan Lin, Linbo He, Guangjie Ge, Yu Ruan, Haida Zhou, Yang Xue, Kisan Koirala
Three novel highly porous aluminophosphates were synthesized through mild hydrothermal methods. Interestingly, among them, α-NaAlPO4(OH) is polar and exhibits moderate nonlinear optical properties with a short cutoff edge.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Intrinsically porous molecular building blocks for metal organic frameworks tailored by the bridging effect of counter cations

CrystEngComm, 2020, 22,2889-2894
DOI: 10.1039/D0CE00397B, Communication
Open Access
Peng Yang, Buthainah Alshankiti, Niveen M. Khashab
Intrinsically porous molecular building blocks are used for the rational design and construction of molecular-level controlled porous materials.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Ligand modulated the variable binuclear Cd2-SBU and structures of four layered coordination frameworks

CrystEngComm, 2020, Accepted Manuscript
DOI: 10.1039/D0CE00513D, Paper
Mengdie Wang, Jian Zhang, Yun-Kai Sun, Jing Wei, Chunhong Tan, Xiao-Feng Wang
Four layered coordination polymers, namely, [Cd2(fuma)2(phen)2] (1), [Cd2(BDC)2(phen)2]·2DMF (2), [Cd2(NDC)2(phen)2]·0.5H2O (3), [Cd2(NDC)2(bipy)2]·2DMF (4) have been synthesized under solvo-thermal conditions (fuma = fumaric acid, H2BDC = 1,4-benzenedicarboxylic acid, H2NDC =1,4-naphthalenedicarboxylic acid,...
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Open metal site (OMS) and Lewis basic site (LBS)-functionalized copper–organic framework with high CO2 uptake performance and highly selective CO2/N2 and CO2/CH4 separation

CrystEngComm, 2020, Advance Article
DOI: 10.1039/C9CE02005E, Paper
Cheng He, Chao Hou, Yu Min Wang, Xue Yong Gong, Hong Li Jiang, Yong Bin Sun, Kun Liu, Xiao Qun Cao
A robust porous metal–organic framework with dual functionalities of open metal sites (OMSs) and O-rich Lewis basic sites (LBSs) has been designed and synthesized, and shows high CO2 uptake and excellent selectivity for CO2 over N2 and CH4.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Halogen bonded metal bis(dithiolene) 2D frameworks

CrystEngComm, 2020, Accepted Manuscript
DOI: 10.1039/D0CE00512F, Paper
Hadi Hachem, olivier Jeannin, Marc Fourmigue, Frederic Barriere, Dominique Lorcy
Halogenated metal dithiolene complexes have been designed together with halogen bond acceptor sites in order to favor halogen bonding interactions between these electroactive architectures. For the synthesis, we explored the...
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Investigating the Melting Behaviour of Polymorphic Zeolitic Imidazolate Frameworks

CrystEngComm, 2020, Accepted Manuscript
DOI: 10.1039/D0CE00408A, Paper
Open Access
Alice M Bumstead, María Laura Ríos Gómez, Michael Francis Thorne, Adam F. Sapnik, Louis Longley, Joshua Mark Tuffnell, Dean S Keeble, David A. Keen, Thomas Douglas Bennett
Recently, there has been growing interest in the amorphous states of metal–organic frameworks (MOFs). Particular focus has been given to melt-quenched MOF glasses. In this work, to improve our understanding...
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Dynamic Characterization of Crystalline Fluorophores with Conformationally Flexible Tetrahydrocarbazole Frameworks

CrystEngComm, 2020, Accepted Manuscript
DOI: 10.1039/D0CE00423E, Paper
Abraham Colin-Molina, Diego Velazquez-Chavez, Marcus Jellen, Lizbeth A. Rodríguez-Cortés, Miguel Eduardo Cifuentes Quintal, Gabriel Merino, Braulio Rodríguez-Molina
Two new compounds 2 and 3 and their deuterated analogues 2-d4 and 3-d4 have been prepared from Ullmann-type coupling reactions. Both showed good emissive properties in solution ΦF = 0.13...
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Constructing a new framework for rural development [electronic resource] / edited by Pierluigi Milone, DICA, Perugia University, Perugia, Italy, Flaminia Ventura, DICA, Perugia University, Perugia, Italy, Jingzhong Ye, COHD, China Agricultural University,




frame

Evaluating communication for development [electronic resource] : a framework for social change / June Lennie and Jo Tacchi

Lennie, June




frame

Understanding dark networks : a strategic framework for the use of social network analysis / Daniel Cunningham, Sean Everton, and Philip Murphy

Cunningham, Daniel, author




frame

A scalable framework for integrated social data mining / James Meneghello

Meneghello, James, author




frame

'Police trying to frame KLO''

The Kamtapur Liberation Organization (KLO) Friday denied any involvement in Thursday night''s cycle bomb explosion at Jalpaiguri and blamed the police for creating a "misunderstanding".




frame

Gold(III)-catalyzed azide-yne cyclization/O–H insertion cascade reaction for the expeditious construction of 3-alkoxy-4-quinolinone frameworks

Org. Biomol. Chem., 2020, Advance Article
DOI: 10.1039/D0OB00745E, Paper
Jingjing Huang, Han Su, Ming Bao, Lihua Qiu, Yuanqing Zhang, Xinfang Xu
A gold-catalyzed cascade reaction has been developed, and it provides an expeditious access to 3-alkoxy-4-quinolines and applications in alkaloid synthesis.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Birth to three matters [electronic resource] : supporting the framework of effective practice / [edited by] Lesley Abbott and Ann Langston

Maidenhead ; New York : Open University Press, 2005




frame

Fractal worlds : grown, built, and imagined / Michael Frame and Amelia Urry ; foreword by Steven Strogatz.

New Haven : Yale University Press, [2016]




frame

Battle Damage - Valentine's Day Destroyed at 1000 Frames Per Second

Love is in the air—literally, 15 feet in the air. Erik and Justin get in the Valentine's Day spirit by doing what they do best—smashing stuff, in this case a box of chocolates, a vase of roses, and a bottle of wine.




frame

Skateboarder and Photographer Tests Out The New Bose Frames | WIRED Brand Lab

BRANDED CONTENT | Produced by WIRED Brand Lab for Bose | Watch skateboarder and photographer Sierra Prescott as she tests out the new Bose Frames for a day




frame

IT Specialist Tries The New Bose Frames For A Day | WIRED Brand Lab

BRANDED CONTENT | Produced by WIRED Brand Lab for Bose | Follow Silicon Valley renaissance man, Jay Hammonds, as he tries out the new audio wearable from Bose - The Bose Frames




frame

A human resources framework for the public sector [electronic resource] / Dixon Southworth

Southworth, Dixon




frame

People CMM [electronic resource] : a framework for human capital management / Bill Curtis, William E. Hefley, Sally A. Miller

Curtis, Bill, Dr




frame

Frameworks for learning & development / Karen Kearns

Kearns, Karen, 1955- author




frame

Reason & rigor : how conceptual frameworks guide research / Sharon M. Ravitch, Matthew Riggan

Ravitch, Sharon M., author




frame

Effectiveness of the Aged Care Quality Assessment and accreditation framework for protecting residents from abuse and poor practices, and ensuring proper clinical and medical care standards are maintained and practised : final report / Community Affairs R

Australia. Parliament. Senate. Community Affairs References Committee, author, issuing body




frame

Breaking barriers : a national adoption framework for Australian children : inquiry into local adoption / House of Representatives Standing Committee on Social Policy and Legal Affairs

Australia. Parliament. House of Representatives. Standing Committee on Social Policy and Legal Affairs, author, issuing body




frame

Sweden: lithotectonic framework, tectonic evolution and mineral resources / edited by M.B. Stephens and J. Bergman Weihed

Online Resource




frame

Ultrafast assembly of swordlike Cu3(1,3,5-benzenetricarboxylate)n metal–organic framework crystals with exposed active metal sites

Nanoscale Horiz., 2020, Advance Article
DOI: 10.1039/D0NH00171F, Communication
Heba Ahmed, Xinci Yang, Yemima Ehrnst, Ninweh N. Jeorje, Susan Marqus, Peter C. Sherrell, Ahmed El Ghazaly, Johanna Rosen, Amgad R. Rezk, Leslie Y. Yeo
A new acoustomicrofluidic method for synthesizing copper-based metal–organic frameworks is shown to yield novel large aspect ratio elongated crystal morphologies with high active metal site density on their surfaces, leading to enhanced conductivity.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Highly-selective synthesis of trimetallic PtRuCu nanoframes as robust catalysts for the methanol oxidation reaction

Mater. Chem. Front., 2020, Advance Article
DOI: 10.1039/D0QM00033G, Research Article
Hai-Jing Yin, Zhi-Ping Zhang, Yu Guo, Kun Yuan, Ya-Wen Zhang
PtRuCu NFs/C exhibited much higher mass activity and specific activity than commercial Pt/C and PtRuCu NPs/C towards the MOR due to the frame nanostructures and the synergistic effect of the trimetallics.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Optical nonlinearity of Zeolitic Imidazolate Framework-67 in the near-infrared region

Mater. Chem. Front., 2020, Accepted Manuscript
DOI: 10.1039/D0QM00226G, Research Article
Han Pan, Hongwei Chu, Xiao Wang, Ying Li, Shengzhi Zhao, Guiqiu Li, Dechun Li
In this paper, we report the large optical nonlinearities of Zeolitic Imidazolate Framework-67 (ZIF-67) in the near-infrared (NIR) region. Typical Z-scan techniques were carried out to determine the nonlinear optical...
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Opportunities and critical factors of porous metal-organic frameworks for the industrial separation of light olefins

Mater. Chem. Front., 2020, Accepted Manuscript
DOI: 10.1039/D0QM00186D, Review Article
Tianhao Lan, Libo Li, Yang Chen, Xiaoqing Wang, Jiangfeng Yang, Jinping Li
Light olefins (ethylene, propylene, and 1,3-butadiene) are widely used as building blocks in the petrochemical industry and for the fabrication of everyday products. Developing energy cost-efficient porous materials for the...
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Interactive stories and video game art: a storytelling framework for game design / Chris Solarski

Hayden Library - GV1469.34.A97 S65 2017




frame

[ASAP] OPUS-Fold: An Open-Source Protein Folding Framework Based on Torsion-Angle Sampling

Journal of Chemical Theory and Computation
DOI: 10.1021/acs.jctc.0c00186




frame

Screening metal-free photocatalysts from isomorphic covalent organic frameworks for the C-3 functionalization of indoles

J. Mater. Chem. A, 2020, 8,8706-8715
DOI: 10.1039/D0TA02164D, Paper
Ziping Li, Songjie Han, Chunzhi Li, Pengpeng Shao, Hong Xia, He Li, Xiong Chen, Xiao Feng, Xiaoming Liu
An excellent framework photocatalyst was screened from a series of isomorphic COFs. The photocatalytic properties of C-3 functionalization of indoles by COF-based photocatalysts were first reported.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Anderson polyoxometalate built-in covalent organic frameworks for enhancing catalytic performances

J. Mater. Chem. A, 2020, 8,8548-8553
DOI: 10.1039/D0TA02443K, Paper
Rui Ma, Naifang Liu, Ting-Ting Lin, Tianbo Zhao, Sheng-Li Huang, Guo-Yu Yang
Anderson polyoxometalate-based covalent organic frameworks exhibited the highest catalytic activity in the photodegradation of RhB and MB, as well as 100% selective oxidation of sulfides to sulfoxides.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

A series of highly stable porphyrinic metal–organic frameworks based on iron–oxo chain clusters: design, synthesis and biomimetic catalysis

J. Mater. Chem. A, 2020, 8,8376-8382
DOI: 10.1039/D0TA02033H, Paper
Gang Liu, Hao Cui, Sujuan Wang, Li Zhang, Cheng-Yong Su
A facile synthesis of a series of Fe–oxo chain-based porphyrinic MOFs (namely M-PMOF-3(Fe), M = Fe, Co, Ni, Cu) has been reported.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Two-dimensional covalent–organic frameworks for ultrahigh iodine capture

J. Mater. Chem. A, 2020, Advance Article
DOI: 10.1039/C9TA13980J, Communication
Jinheng Li, Huixin Zhang, Lingyan Zhang, Ke Wang, Zhengkang Wang, Guiyan Liu, Yanli Zhao, Yongfei Zeng
Two new two-dimensional covalent–organic frameworks are synthesized using a three-connected building block, showing ultrahigh iodine capture capacities of 5.625 g g−1 and 4.820 g g−1 on account of physical–chemical adsorption.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Hollow PtCu Nanoparticles Encapsulated into Carbon Shell via Mild Annealing of Metal-Organic Frameworks

J. Mater. Chem. A, 2020, Accepted Manuscript
DOI: 10.1039/D0TA01549K, Paper
Guanjun Chen, Huaqiang Shan, Yan Li, Hongwei Bao, Tingwei Hu, Long Zhang, Shuai Liu, Fei Ma
Alloying Pt with less expensive 3d transition metal to form bimetallic nanoparticles (NPs) has been proven to be an ideal strategy for synthesis of catalysts, especially in the field of...
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Graphene oxide laminates intercalated with 2D covalent-organic frameworks as a robust nanofiltration membrane

J. Mater. Chem. A, 2020, Advance Article
DOI: 10.1039/D0TA01727B, Paper
Xiao Sui, Ziwen Yuan, Chang Liu, Li Wei, Meiying Xu, Fei Liu, Alejandro Montoya, Kunli Goh, Yuan Chen
Porous yet rigid 2D covalent–organic framework nanosheets can not only increase the interlayer spacing between graphene oxide nanosheets and provide direct transfer channels but also enhance the self-supporting capacity of graphene oxide laminates.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




frame

Best CSS Frameworks for Building Better Websites

When building a website, using a CSS framework is a real time saver as it provides you with tools every web designer and front-end developer needs when crafting a site (other than good web hosting). A CSS framework is a software framework created to allow for easier, more standards-compliant web design using HTML/CSS. Many popular …

Best CSS Frameworks for Building Better Websites Read More »




frame

Web Tools #349 - DOM Snippets, Front-end Frameworks, Media, Uncats

Web Tools Weekly

Issue #349 • March 26, 2020

Advertisement via Syndicate
Have Happier, More Productive Video Meetings
Team.video makes it easier and faster for remote teams to work together by offering user friendly video meetings with agendas, collaborative notes, and emoji responses. No download required and it’s free to use.
Try Team.video for FREE!

Although I often include quick DOM scripting tips in the intro of this newsletter, for this week, I'm just going to point you to a great little resource that was sent to me by reader Phuoc Nguyen:

It's more or less a repository of basic, intermediate, and advanced native DOM scripting snippets.
 
HTML DOM: A resource of native DOM snippets

Here are some of the advanced and intermediate examples:
  • Make a draggable element
  • Resize columns of a table
  • Sort a table by clicking its headers
  • Calculate the size of the scrollbar
  • Communicate between an iframe and parent window
There are more than 80 tips currently listed and I'm sure he'll add more later. Even if you don't necessarily use any of the snippets in a real project right away, there are plenty of little coding tidbits you can glean form the example code, which is all just vanilla JavaScript with no library or framework involved.

So check out HTML DOM, I'm sure you'll have lots to investigate!
 

Now on to this week's tools!
 

Front-end Frameworks

Have Happier, More Productive Video Meetings
Team.video makes it easier and faster for remote teams to work together by offering user friendly video meetings with agendas, collaborative notes, and emoji responses. No download required and it’s free to use.   via Syndicate

chakra-ui-vue
A set of accessible and composable Vue components that you can use to build your favourite applications and sites.

Pixel Lite
A beautifully crafted, responsive UI kit based on Bootstrap 4 that includes 100 components, 3 plugins, and 3 example pages.

next-typescript-materialui-jest-starter
Very opinionated starter boilerplate for projects based on Next.js, setup with Typescript, Material-UI, and Jest.

React SaaS Template
Template for building a SaaS app or admin website using React + Material-UI.

web3-react
A simple, extensible, dependency-minimized framework for building modern Ethereum decentralized apps.

Tailwind UI
A UI components library, crafted by the creators of Tailwind CSS.

neo.mjs
A Web Workers-driven UI framework.

LitElement
A simple base class for creating fast, lightweight web components. Makes it easy to define web components – ideal for building a UI design system.

Ionic React
React version of Ionic Framework. 100+ mobile optimized React UI components. Standard React tooling with react-dom.

Accessible Components
Scott O'Hara's repo that lists all the accessible widgets and components he's built.

StarAdmin
A free responsive admin template built with Bootstrap 4.

Media Tools

Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive.   promoted 

Croppola
Upload a photo and this tool will use AI to crop the photo for you automatically, or you can crop it manually and download the result.

Image to Colors
Online tool that extracts colors from any photo on upload.

Nuxt Optimized Images
Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).

Twilio Video React App
Demonstrates a multi-party video application built with twilio-video.js and Create React App.

react-particle-image
React component to render images as interactive particles. There's an interactive demo using the React logo that's pretty cool.

CoreUI Icons
Premium designed free icon for web and mobile, available in SVG, webfont, and raster formats.

DotMatrix.js
A small, performant class-based, dot matrix library with animated movements that respond to mouse/touch events.

react-calendar-heatmap
A calendar heatmap component built on SVG, inspired by GitHub’s commit calendar graph.

Chessboard Image
Modify chess pieces on a virtual chess board, to create chess positions, then download the image for use wherever you want. Might be cool for a chess tutorial website or blog.

Video Language
A language for making movies. Combines the power of a traditional video editor with the capabilities of a full programming language.

The Uncategorizables

Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive.   promoted 

Mailcoach
A self-hosted email list manager. It integrates with services like Amazon SES, Mailgun, Postmark, or Sendgrid to send out mailings affordably.

Backstage
Open-source developer portal that puts the developer experience first by means of a a unified front end for all your infrastructure tooling.

dstack.ai
Collaborative data exploration. Enables individual data scientists and their teams to publish, share, and track data visualizations.

TAGX
Allows you to create video highlights and annotate the interesting parts of a video. Enter a YouTube, Vimeo, or direct video link to start annotating.

cs.opensource.google
A search engine to search Google's open source projects (Angular, Dart, Flutter, Go, etc).

Cotter
One-click secure phone number login for your apps.

Phrase
Automate localization processes. Edit language files online with your team of translators or order translations into more than 60 languages.

It's a Live
Lets you mimic a live coding presentation by prerecording the presentation, which gets triggered by random keystrokes as if you were really coding.

EasyCSV
Import spreadsheets into your App, Zapier, Google Sheets, Salesforce, or any public API in minutes.

Pico
Platform to create paywalled content, subscriptions, newsletters, etc.

A Tweet for Thought

This underappreciated Tweet by Adam Greenough should be the dev-related Tweet of the year.
 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (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...

If you've got a lot of extra time at home (and you should!) you might like Codepip. There you'll find a number of different interactive online games that teach you various aspects of front-end development.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly




frame

Web Tools #355 - Frameworks, Testing Tools, JS Utilities

Web Tools Weekly

Issue #355 • May 7, 2020

Promotion
123FormBuilder Gold Plan: Lifetime Subscription
For a one-time fee of $39.99 (usually $299.88/year) ‬you get a lifetime subscription to the gold plan (20 forms/month, 5000 submissions/month). A web-based form and survey builder with a no-code drag-and-drop editor, 1000+ form templates, integration with Google Sheets, MailChimp, Dropbox, and more.
Check it Out Here

When creating interfaces using HTML's Drag and Drop API (various aspects of which I've covered in recent issues), it's important to note that some elements on a web page are already 'draggable' by default. And you've no doubt noticed this. The spec explains that the following elements are draggable by default:

  • A text selection
  • An image
  • An `a` element with an `href` attribute
Every element on the page that doesn't explicitly have the draggable attribute set has a draggable value of "auto". But that doesn't mean you can check for a value of "auto". As the spec says, if an element's draggable attribute is not set to either true or false:

"...the element's draggable content attribute has the state auto. If the element is an img element, an object element that represents an image, or an a element with an href content attribute, the draggable IDL attribute must return true; otherwise, the draggable IDL attribute must return false."

In other words, the browser will automatically set the draggable value to true or false based on what kind of element it is. Try this CodePen demo to see the effect in action. Notice a few things in the demo:

  • No draggable attributes on the three elements
  • I'm using the Window.getSelection() method to get the selected text after the drag operation begins
  • I'm using preventDefault() when the drop is made to ensure the browser doesn't think something suspicious is happening. If I didn't include this, you'd see a warning before the browser tries to navigate to whatever you drag.
Try selecting any one of the three colors in full, or even a portion of the text in those colors to find another valid color value (e.g. "Pink" inside the color "HotPink"). Notice the background of the dropzone will change accordingly.
As a side point, you can select any random piece of text on that page and you'll see the browser try to figure out what to do with the text if you drop it onto the dropzone. This is similar to dragging an image (which is naturally draggable) into a new page and then the browser visits the URL of that image.

BTW - if you like these kinds of JavaScript tips, you'll love my e-books bundle.
 

Now on to this week's tools!
 

Front-end Frameworks

A No-Code Drag and Drop Form Builder
Get a lifetime membership to 123FormBuilder's Gold plan for a one-time fee of $39.99 (usually $299.88/year). 20 forms/month, 5000 submissions/month, 1000+ form templates, integration with Google Sheets, MailChimp, Dropbox, and more.  promoted 

HTML / Sass Jumpstart
Minimal, themeable, and scalable Sass/HTML template site. Powered by node-sass and includes stylelint, Prettier, and Autoprefixer, hot-reload via Browsersync.

H3
A microframework to build client-side single-page applications (SPAs) in modern JavaScript.

Fast Cart
A Woocommerce PWA platform for building fast loading, mobile-friendly e-commerce websites.

98.css
A CSS library for building retro interfaces that look like Windows 98.

Shorthand
A utility-based CSS framework that allows you to make unique and modern designs without writing any CSS.

Reactron
A tiny Electron project configured to work with React as the front end. The project has the minimum code necessary to start a new app.

Orbit
An open source design system that includes a whole slew of components and utilities for use in your next travel-based app or website.

vue-composable
General purpose Vue Composition API composable and reactive components written in TypeScript.

Hook
A dark HTML landing page template built with the aforementioned Shorthand CSS framework.

LitElement Starter Template
A minimal starter template for a web components app built with LitElement, TypeScript, and Parcel for bundling.

Reach UI
A set of React components to build accessible React-based design systems.

Testing and Debugging Tools

ES6 for Everyone by Wes Bos is 50% Off!
The master package includes 77 HD videos, part of 21 modules – and course updates are free forever.   promoted 

Eruda
Now at version 2+. A console for testing and debugging on mobile browsers.

CursedChrome
This can be used for malicious purposes, so be wary. A Chrome-extension implant that turns victim Chrome browsers into fully-functional HTTP proxies, allowing you to browse sites as your victims.

postMessage-tracker
A Chrome extension to track postMessage usage (URL, domain, and stack) both by logging using CORS and also visually as an extension icon.

Tempomat
Native macOS app for monitoring continuous integration systems.

Will it CORS?
Test if a URL is CORS friendly (i.e. it's safe to send and the response can be read).

Pointer Latency
Tests the delay of pointermove events in the current web browser and demonstrates the usefulness/uselessness of pointer prediction.

axios
A well-known tool but I've never included it here. A Promise-based HTTP client for the browser and Node.

FinDOM-XSS
A fast and simple DOM based XSS vulnerability scanner via a Shell script.

EventReduce Browser Demo
A browser demo where the EventReduce algorithm is used in different browser databases so you can test out the performance gains of different queries.

Insomnia
Now at version 7+. API design platform plus REST and GraphQL client.

JavaScript Utilities

Advanced React & GraphQL by Wes Bos is 50% Off!
The master package includes 68 HD videos, part of 10 modules – and course updates are free forever.   promoted 

emoji-regex
A regular expression to match all Emoji-only symbols as per the Unicode Standard.

Hegel
An advanced static type checker for JavaScript with optional type annotations and is able to prevent runtime type errors.

Rosetta
A general purpose internationalization library in 292 bytes.

SAMD
A tiny, static AMD API implementation that allows including AMD modules in regular script tags.

Flipswitch.js
Pure ES6 library for clipping fixed positioned elements on scroll.

useMemoValue()
Reuse the previous version of a value unless it has changed.

Notyf
A small (~3KB) JavaScript library for toast notifications. Responsive, accessible, dependency-free, and easy to integrate with React, Angular and Vue.

gen-esm-wrapper
CLI tool that makes it easier for module authors to support both ES modules and CommonJS modules for Node.js.

prray
'Promisified' Array, compatible with normal arrays, but comes with support for async methods (e.g. mapAsync).

qrcode-generator
QR code generator implementation in JavaScript, Java, and more.

A Tweet for Thought

In case you wanted to know how long it takes to load your Twitter timeline over a real 56k connection.
 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (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...

Miss the office? Say no more.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly




frame

[ASAP] Synthesis of Aspidodispermine via Pericyclic Framework Reconstruction

Organic Letters
DOI: 10.1021/acs.orglett.0c01242




frame

Best of BS Opinion: Monetary policy framework, Covid-19 outbreak, and more

Here's a selection of Business Standard opinion pieces of the day