Web Tools Weekly
What a Tool!

Issue #245  (DragDropr Review, Testing, Git/CLI, React)03/29/18

The following intro is a sponsored product review for DragDropr, a multi-featured universal website builder that can fit into any CMS.

As a developer, you might fall into one of two categories: An experienced coder who knows how to write HTML, CSS, JavaScript and maybe a back-end language. Or you might be a designer or less experienced coder who isn't that comfortable with hand coding. In either case, I think you'll love the product I'm reviewing this week. It's called DragDropr.

DragDropr is a page building app that doesn't require any coding knowledge. It's described as a WYSIWYRG ("What You See Is What You REALLY Get") app and it's universal; it can integrate into any Content Management System.

If you're a non-coder, then the advantage is obvious. But even if you know how to code, the app allows you to build attractive landing pages, marketing pages, and microsites quickly and easily using a super-fast and easy to use drag-and-drop UI.
DragDropr's UI is easy to use and fast

After testing the app myself, there are so many things I like about this tool. To name a few features:
  • Live responsive testing for different device sizes with just a few clicks.
  • Pre-built widgets (e.g. video, image, content slider) and content blocks (which are basically widget-combos of pre-built page structures).
  • Ability to add submittable HTML5 forms with any variation of form elements (radio buttons, select boxes, phone fields, etc.). All form submissions are stored as part of the tool's service.
Once you have blocks of content in place, it's trivial to edit each block. You can change backgrounds, borders, font size, line height, spacing – all with a few clicks and no code.
DragDropr allows you to change styles for any selected widget

One of my favourite features is the ability to show or hide elements for responsive layouts. For example, if you want to hide a large image component on smaller devices – no problem. Just select the device size, choose the "Responsive" option for the element you want to hide on that device, then choose "Hide widget on this device". When you subsequently preview the page on different screen sizes, the media queries will kick in as specified.
DragDropr's responsive features

DragDropr offers integration with Shopify, WordPress, Magento, and Lightspeed. There's also a Chrome extension available.

To sum up, I was really surprised at how nicely the UI works and how easy it was to figure out. DragDropr has just about everything you'll need in an online site builder and is a great option for developers looking to create tons of content quickly with no coding.

Try DragDropr today as part of a 14-day trial. Web Tools Weekly readers are able to get a lifetime 25% off discount by using the coupon code WTW2018 until April 15, 2018. And if you have any questions about any of the features, you'll get a prompt response from staff online or via email.

Now on to this week's tools!

Testing and Debugging Tools

Segment is the last integration you'll ever do. Simplify data collection with one API and integrate 200+ tools with the flip of a switch. 14-day free trial. No credit card required.   sponsored 

JavaScript Tracker
Chrome extension to track JavaScript that uses DOM or jQuery APIs to manipulate DOM elements (e.g., change style, attach event listener) on web page at runtime.

Headless Chrome Crawler
Distributed crawler powered by Headless Chrome. Provides simple APIs to crawl Angular, React, and Vue websites with numerous features.

A state-of-the-art network attack and monitoring framework.

Chrome extension. Crawls for broken links, duplicate titles, invalid HTML/CSS/JS, redirect chains and more. Follows 50+ SEO, speed, and security best practices.

Chrome extension (beta) that helps you experience websites and interfaces through the eyes of users with different abilities.

Test your JavaScript in 800+ browsers, powered by Sauce Labs. Fork of an older project called Zuul.

Lets you use Web Workers in Jest (the JavaScript testing tool). This is an experimental implementation of the Web Worker API for JSDOM.

Beautifully simple and reliable uptime monitoring. Receive alerts when your website is down through emails, Slack, or SMS.

Native zero config Windows or Mac app that provides a UI for running tests with Jest.

Inspect JavaScript object methods and properties in the console.

Git, GitHub, and Command Line Tools

GitHub Trending Repos
A way to subscribe on new GitHub trending repositories in your favorite programming language. Updates come as GitHub notifications once a day or week.

Sign in with GitHub and build a GitHub-based portfolio hosted at
whobuilt. me/@YourGitHubName.

An auto-refreshing web log of your recent GitHub commit activity.

Agile project management inside GitHub, without access to code.

Capture, organize and share application states using a git-like CLI.

A simple, powerful utility for making interactive command line interfaces.

Command-line JSON processing tool.

Automagically generates command-line interfaces for any module. Just require('magicli')(); and your module is ready to be executed via CLI.

Allows you to use GitHub anonymously so you can contribute to projects without your name being associated with them.

GitHub Profile Summary
Builds a visual dashboard of your GitHub profile and repository stats and info.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

React Tools

React Reveal
A high performance animation library for React, written in ES6, used to create reveal-on-scroll effects.

Material Dashboard React
React version of Material Dashboard. A free Material-UI Admin with a fresh, new design inspired by Google's Material Design.

Convert Markdown into React Components. Lets you import and use other components within your Markdown.

React ARIA
A set of utility components to help compose ARIA components in React.

A draggable, customizable, and accessible toggle-switch component for React.

Now at version 4+. A React-based library for creating sleek presentations.

React Headroom
A React Component to hide/show a website header on scroll.

One Loader
A webpack loader to enable single-file React components.

A Tweet for Thought

Only obsessive-compulsive HTML devs like us could come up with a Tweet like this.

Send Me Your Tools!

Made something? Send links via 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...

RemoteHacker.com lets you join a project or find a programmer, designer, marketer, or sales partner from anywhere in the world to join you.

Thanks to all for subscribing and reading!

Keep tooling,