QR Code
OWT Web Services       http://owtweb.com
[Skip to Content]

Industry News

07/26/2021
Book by this Saturday, July 31 to get your All Access pass for just $99!



Please visit Search Engine Land for the full article.


07/22/2021





















#​548 — July 23, 2021

Unsubscribe  |  Read on the Web



JavaScript Weekly








JetBrains' 2021 Developer Ecosystem Survey Results — Over 30,000 developers took the State of Developer Ecosystem 2021 survey, with 70% being JavaScript users. You can find the JavaScript-specific results here. Some interesting stats came of this:



  • React is regularly used by 49% of respondents, with Vue.js at 43%.

  • Go, TypeScript, and Python are the most common other languages JavaScript developers plan to learn soon.

  • 42% claim to not to write unit tests regularly.

  • Home working is, unsurprisingly, suddenly popular with 83% of developers WFH compared to 31% pre-pandemic.


JetBrains




💡 If you like this sort of thing, last year's State of JS results may also be of interest.





Easier Browser Debugging with Developer Tools Integration in VS Code — If you’re a VS Code user, you no longer have to use the Chrome Debugger or Edge Debugging extension as JavaScript debugging is now built in to the popular editor. Christian Heilmann has more on this here.


Microsoft Edge Blog






Locate and Resolve JavaScript Errors Instantly with Datadog — Troubleshoot user-facing incidents and resolve frontend JavaScript errors in context with the ability to correlate error logs with individual user sessions with one click. Try it yourself with a free Datadog trial.


Datadog sponsor






Plate 1.0: A Plugin Framework for Building Rich Text Editors with SlateSlate is a framework for building rich text editor controls, and Plate abstracts things one level higher offering a plugin system for adding your own functionality. Look at the big demo on the homepage to see the benefits. GitHub repo.


Taylor, Beyens and Murray






Node-RED 2.0 ReleasedNode-RED is a now very mature ‘low-code’ Node.js-based programming environment, particularly aimed at connecting together services or IoT devices. The 2.0 release focuses on upgrading dependencies, dropping old Node version support, and an (optional) improved text editor.


OpenJS Foundation





QUICK BITS:





RELEASES:


Hyper 3.1 – JS-powered terminal app.

RxDB 10.0 – Realtime database for JavaScript apps.

AdminJS 5.1 – Automatic admin interface for Node apps.

GoldenLayout 2.3 – Multi-screen layout manager for webapps.

flv.js 1.6 – HTML5 FLV Player.





💻 Jobs




Love Writing Code? Now Build Products as a Product Manager — We are hiring expert devs who want to become product managers. Help build products that are executed millions of times a day.

SignalWire





Senior Full-Stack Software Engineer (USA) — Ready to do your best work in a team that truly supports you? Join a culture that values autonomy, freedom, and collaboration.

REAKTOR





Find a Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired





📖 Articles, Opinions & Tutorials





Simple Monorepos via npm Workspaces and TypeScript Project References — How to set up a simple monorepo for two npm packages using just what comes with npm and TypeScript.


Dr. Axel Rauschmayer






▶  Code Zelda in JavaScript with Kaboom.js — Ania is back with another fun walkthrough. For your hour this time you get to build the bare bones of a NES-era Zelda game.


Ania Kubów






5 Reasons Not to Write Your JavaScript Data Grid from Scratch — Data grids are essential for every business app. Before you decide to roll your own, learn about these common pitfalls.


Progress Kendo UI for Angular sponsor






Trackball Rotation using Quaternions — How can you implement a 3D ‘trackball’ that you can control with a 2D interface like a typical trackpad? With Trackball.js is how.. but you can attempt to understand the math in this article if you wish.


Robert Eisele






then(f,f) vs then(f).catch(f) — A quick look at the difference between two approaches with promises.


Dmitri Pavlutin






Building a 'Typewriter Animation' That Handles Anything You Throw at It — A thorough dig into what’s involved in creating an interesting frontend effect with JavaScript. The end result looks neat.


Murtuzaali Surti






[Free Workshop] Building an IoT application with InfluxDB — Learn how to develop a JavaScript-enabled time-series-based application using Kafka queues, RabbitMQ and InfluxDB Cloud.


InfluxData sponsor





Creating a Typography Motion Trail Effect with Three.js

George Nikolov





Three Insights I Gained While Researching Vue.js Accessibility

Marcus Herrmann





Building a ‘Table Of Contents’ with Active Indicator using Intersection Observers

Ben Frain




🛠 Code & Tools









Dinero.js: A Library for Working with Monetary Values — Express monetary values and perform mutations, conversions, comparisons, handle formatting, and generally make money manipulation easier. GitHub repo.


Sarah Dayan






Abracadabra: JS and TS Refactoring Tool for VS Code — While VS Code supports some refactoring techniques out of the box, Abracadabra magics up many more including numerous conditional logic changes, inlining, and syntax conversions. It can also suggest ‘quick fixes’ - refactorings that make sense in the current context.


Visual Studio Marketplace






Color: A Color Conversion and Manipulation Library — Immutable color conversion and manipulation with support for CSS color strings.


Qix






Clubhouse.io - We Put the Agile in Agile and the 'Can' in Kanban


Clubhouse.io sponsor






Tangram: An Automated Machine Learning Framework — It’s not solely for Ruby – indeed, it’s written in Rust – but you can train a model from a CSV file and then make ‘predictions’ from JavaScript (or Ruby, or Python) code. GitHub repo.


Tangram






Bulletproof React: An Architecture for React Apps — Using a group chat app as the case study, the author touches on every significant aspect of building and deploying a React application which will make it “bulletproof” and therefore production ready. Note, however: "This is not supposed to be a template or a framework. It is an opinionated guide that shows how to do some things in a certain way."


Alan Alickovic










Color Thief: Grab Color Palettes from Images — Given an image, this uses canvas to return a list of the dominant colors.


Lokesh Dhakar






FZF for JavaScript: Fuzzy Finding for the Browserfzf is a tool written in Go for ‘fuzzy finding’ files but here the idea has been adapted to JavaScript and the Web so it can be used for similar fuzzy finding in webapps.


ajit





veux-persistedstate: Persist and Rehydrate Your Vuex State Between Page Reloads

Robin van der Vleuten










07/22/2021

Because forecasting SEO performance is still a thorny subject in the industry


The post How to show the business value of your SEO proposal appeared first on Search Engine Watch.


07/16/2021

The dark horse your business needs to outperform competition and win at search


The post The importance of accurate keyword difficulty scores appeared first on Search Engine Watch.


07/15/2021





















#​547 — July 16, 2021

Unsubscribe  |  Read on the Web



JavaScript Weekly








V8 v9.2 and the at Function — Every step forward the popular V8 JavaScript engine takes is news, but this is a relatively minor step with the biggest practical addition being the new 'at' method for Array, TypedArray and String. Oh, and Firefox 90 supports it too, plus a couple of other goodies.


Ingvar Stepanyan






The Road to Ember 4.0 — The Ember.js framework is ten years old this year and while it’s not often in the headlines, it’s one of the most solid, reliable and battle tested systems out there and a big update is on the way.


Matthew Beale






What If Your Project Management Tool Was Fast and Intuitive? — Imagine how much more you could get done if your project management tools didn't make you sigh. Clubhouse is the ideal solution for task management, bug tracking, iteration planning, and reporting. Delight the scrum gods and give us a try.


Clubhouse.io sponsor






HTM 3.1.0: A JSX Alternative using Standard Tagged Templates — This clever library has been around a few years but sees an update this week. Think JSX-style syntax but in plain JavaScript (using tagged templates) that requires no transpilation but still supports things like rest spread and referencing components.


Jason Miller






Deno 1.12 Released — The ‘server side JavaScript runtime that isn’t Node’ takes some more steps forward with TypeScript support in its REPL, improved Web Crypto support, and you can upgrade incoming HTTP requests on the (unstable) HTTP server to WebSocket connections.


Casonato and Iwańczuk





QUICK BITS:





RELEASES:


Node 16.5.0 – Now with experimental support for the Web Streams API.

Turf.js 6.5 – Geospatial analysis library.

node-mongodb-native 4.0 – Big release for the official MongoDB driver.

tXml 5.0 – Fast pure JavaScript XML parser.





💻 Jobs




Senior Frontend Engineer (Remote) — We're looking for a Senior Front-End Engineer to join the web team at Unsplash. Small team but big product. Strict TypeScript with plenty of functional programming.

Unsplash





Senior Back-End JavaScript Developer — We’re seeking a developer with experience in full functional programming (Lodash, Ramda & ElasticSearch) to help build the next generation of GovSpend, a civic startup disrupting government procurement. Remote, candidates must be eligible to work in the US.

Govspend





Find a Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired





📖 Articles, Opinions & Tutorials








Building a Dynamic Header with Intersection Observer — Ever needed to have a component respond to elements as they’re scrolled to a certain threshold within the viewport? Attaching an event listener to constantly fire on scroll can be performance intensive, but there's a better way..


Michelle Barker






How to Convert Arrays to Human-Readable Lists — A pretty quick tip here, leaning on Intl.ListFormat which deftly takes care of formatting a list in a locally appropriate way.


Amit Merchant






▶  Information Foraging: Tricks Great Developers Use to Find Solutions — Professor Austin Henley explains the tactics veteran developers use to quickly find the best solutions.


Stack Overflow Podcast sponsor






The Ultimate Guide to Browser-Side Storage — Does a pretty good job of covering all the options, right from variables through localStorage and on up to non-standard browser APIs you probably don’t want to be using.


Craig Buckler






How To Migrate from jQuery to Next.js — The title put a confused expression on my face when I first saw it, but it’s broadly about going from a jQuery-based approach to a React-based one for common frontend tasks.


Facundo Giuliani






A Checklist for Freelance React Developers — Robin covers a variety of things to think about if you’re an independent React developer who needs to seamlessly get involved with existing teams and projects.


Robin Wieruch






How Debugging is Changing: Cut Debugging Time with New Approaches to Tracking/Dealing with Errors


Rollbar sponsorebook





Running a Next.js Site on Cloudflare Pages

Patrick Heneise





Notion API: Getting Started with Notion's JavaScript SDK

Rui Sousa





Vue 3 Migration Build: Safely Upgrade Your App to Vue 3

Andy Li




🛠 Code & Tools









FracturedJson: A Browser-Based JSON Formatter — Produces “human-readable but fairly compact output.” I like this. It’s not your typical linter but turns big lumps of JSON into something that it’s pleasant to look through.


J Brooke






mem 9.0: Simple Memoization Library — Memoization is an optimization technique used to speed up consecutive function calls by caching the result of calls with identical arguments.


Sindre Sorhus






devcert: Development SSL/TLS Certificates Made Easy — Need a certificate for local development when using Node? This package takes an interesting approach of creating its own root authority and issuing certificates automatically against it. It’s so slick though, I was impressed by it in my tests.


Dave Wasmer






Monitor Lighthouse Scores and Core Web Vitals — DebugBear continuously monitors site speed and provides front-end developers with the data they need to improve it.


DebugBear sponsor






new-tailwind-app: A Node-based CLI to Generate Boilerplate Code for Different Tailwind Apps — Like create-react-app, but for Tailwind. Start a plain Tailwind project or generate one with based on Next.js, React, Gatsby, or Vue, with Prettier integration.


Saad Irfan






Filesize.js 7.0: A Library to Create Human Readable File Size Strings — For example: filesize(265318) returns 259.1 KB. GitHub repo.


Jason Mulligan






LiveKit: A Go-Powered Server for Real Time Audio and Video — An open source infrastructure project for building and scaling realtime WebRTC powered audio and video experiences in apps. It’s new but there are already SDKs for iOS, JavaScript in general, React, and Android.


LiveKit Team






React Virtual 2.8.0: Hooks for Virtualizing Scrollable Elements — With a single headless hook you can work with row, column and grid level virtualization, get imperative scrolling when needed, custom scrolling function support, and more. Lots of CodeSandbox demos here too.


Tanner Linsley










07/08/2021





















#​546 — July 9, 2021

Unsubscribe  |  Read on the Web



JavaScript Weekly








The State of Web Workers in 2021 — The web is typically single-threaded, but two years ago Surma told us why to always use Web Workers to bring multithreading to your solutions despite the difficulties. Almost every client supports them now, so Surma makes the case again and explains why Web Workers deserve a place in your projects.


Surma






How export default thing is Different to export { thing as default } — When someone like Jake ends up having to chat to the V8 team to figure something out and then learns something, it’s worth following along. Off down the export rabbit hole we go...


Jake Archibald






Uptime Monitoring Is Now Available in AppSignal — Uptime monitoring is the first line of defense against downtime. Ping your apps every minute from 4 locations around the world and receive alerts when something is down. Now you'll know about downtime before your users do.


AppSignal sponsor






npm audit: Broken by Design“The way npm audit works is broken. Its rollout as a default after every npm install was rushed, inconsiderate, and inadequate for the front-end tooling.” Dan adopts an untypically critical tone but does a good job of demonstrating how vulnerabilities are not all alike when it comes to whether they matter.


Dan Abramov






A Look at Building with AstroAstro, which we featured a month ago, is a new framework for building sites where you get to use JavaScript frameworks but sites are rendered in static form.


Chris Coyier






Elementary: React-Inspired Functional, Declarative Audio Applications — Can writing audio DSP software be “simple, fast and fun”? Not up until now, but Elementary intends to change all that, and thus lowering the barriers to entry for this burgeoning field.


Nick Thompson






Quick Bits




Releases



Highlight.js 11.1 — Web syntax highlighter library.

Gatsby 3.9 — React 'dynamic site generator.'

zx 2.0 — Better scripting with Node.js.

Snowpack 3.8 — Module driven frontend build tool.

ckeditor 29.0 — Rich text editor framework.

Rollup 2.53.0 — Next-generation ES module bundler.

TIFF 5.0 — TIFF image decoder written entirely in JS.






💻 Jobs




Now Hiring: Work with the Best, Building the Best — The sharpest developers, building the fastest websites. Looking for more, to build more. Join us.

Econify





Senior Backend Engineer (Berlin / Remote) — Honest, simple insurance. Modern TypeScript stack. Join our small team, take ownership and push your ideas.

Feather





Find a Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired





📖 Articles, Opinions & Tutorials





TypeScript and Native ESM on Node.js — This topic comes up time and time again, and for good reason - it’s the way things are headed. Dr. Axel covers the essentials you need to know in order to use and produce native ECMAScript/ES modules on Node when using TypeScript.


Dr. Axel Rauschmayer






How to Use Promise.all() — Handle multiple promises at once, in parallel, and then get the result in a single aggregate array.


Dmitri Pavlutin






Ultimate Guide to Building a UI Library: Building Robust Components — TJ VanToll shares what he’s learned from over a decade of writing and working with UI components. Go to the blog series.


Progress KendoReact sponsor






When a Click is Not Just a Click — There are nuances to consider when listening for a click event (such as a ‘click’ sent from a keyboard versus one from a mouse). This post dives into how you can distinguish different types, and what opportunities arise from identifying them.


Travis Almand






▶  Using Deno Deploy to Release Super Fast Cloud Functions — Jack promises a look into the “potential JavaScript future” by building a chat app using Deno (a Node-a-like built by Node’s original author, no less) and deploying it on the Deno Deploy platform. This is easy to understand and follow along with, and the approach taken feels so natural.


Jack Herrington






Breaking Down Bulky Builds with Netlify and Next.js — Using Next.js’ Incremental Static Regeneration (ISR) coupled with on-demand builders and Netlify’s Next on Netlify build plugins to create a site that builds certain routes only when needed, cutting the build time down dramatically.


Átila Fassina






The Ultimate Guide to Cardinality for Observability


Lightstep sponsor





How to Structure a Large Scale Vue.js App

Daniel Kelly





What Is WebAssembly — and Why Are You Hearing So Much About It?

Mary Branscombe






🛠 Code & Tools














html2canvas 1.0: A JavaScript HTML Renderer — Take screenshots of pages or elements of pages and render them to canvas. There’s a live demo to the bottom right of the homepage. GitHub repo.


Niklas von Hertzen






pdfmake: Client/Server Side PDF Generation in Pure JavaScript — There’s a live playground of it in action, plus lots of code examples of how to use it to various ends. Built on top of pdfkit.


Bartek Pampuch






Fuzzball: Fuzzy String Matching Library — To tackle those cases where what’s typed isn’t quite what’s indexed. There’s a neat tree-themed Web-based demo. GPL licensed.


Nolan






Understanding and Preventing Common Security Vulnerabilities — Join Buildkite on a tour of some of the most common security problems companies face, and how you can prevent them.


Buildkite sponsor






Mantine 2.0: Full Featured React Component Library — An MIT licensed, TypeScript-based collection of over 100 components and hooks with native dark theme support and a focus on usability and accessibility. Plenty of documentation and examples.


Mantine Team






imask.js: A Vanilla JavaScript Input Mask — Rather than validate the syntax of input fields, how about preventing users from even entering invalid values?


imaskjs






TypeBox: JSON Schema Type Builder with Static Type Resolution for TypeScript — A type builder library that creates in-memory JSON Schema objects that can be statically resolved to TypeScript types.


Haydn Paterson





fzstd: High Performance Zstandard Decompression in a Pure JS Package

Arjun Barrett





Johnny Five 2.1: A JavaScript Robotics and IoT Programming Framework

Rick Waldron





Vue 3 Starter: An Opinionated Starter Template for Vue.js Projects

Gentrit Abazi










07/01/2021





















#​545 — July 2, 2021

Unsubscribe  |  Read on the Web



JavaScript Weekly








Temporal: Getting Started with JavaScript’s New Date and Time API — JavaScript’s Date object and API is hard work at the best of times, but a lot of work has been done on Temporal, an all new approach currently at stage 3. Dr. Axel gives us a through, practical tour. Fantastic.


Dr. Axel Rauschmayer






Solid 1.0: A Declarative JavaScript UI Library Worth Investigating — JavaScript isn’t short of good reactive frameworks (React, Svelte, Vue..) but Solid’s creator is determined and adamant to demonstrate how Solid addresses React’s shortcomings while offering Svelte-like simplicity. He makes a good case, so try and give him at least a few minutes of your time.


Ryan Carniato






Download FusionAuth Today and Get a Free T-Shirt — FusionAuth is a modern CIAM that's fully customizable for your team. Implement complex standards like OAuth, SAML, and OpenID Connect. Build out additional features like SSO, MFA, and branded login pages. Plus, it's always free for unlimited users.


FusionAuth sponsor






🎲  The 'JS is Weird' Quiz — How well do you think you know the trickiest corners of JavaScript syntax and dynamic typing? Put yourself to the test with these 25 questions. I’m not even going to share my pathetic score.. 😂


Jacob Bergdahl






Quick Bits




Releases



TypeScript 4.4 beta 1 — The JavaScript superset.

p5.js 1.4.0 — Processing-inspired creative coding library.

Stepzilla 7.0 — Form/wizard helper for React components.

web3.js 1.4 — Ethereum JS API.

Plotly.js 2.2 — Charting library.

Espree 8.0 — Esprima-compatible pure JS JavaScript parser.






💻 Jobs




Lead Full-Stack Software Engineer (USA) — Join a team of engineers and designers crafting digital products for companies such as HBO, adidas, Supercell, and Nokia.

Reaktor





Now Hiring: Work with the Best, Building the Best — The sharpest developers, building the fastest websites. Looking for more, to build more. Join us.

Econify





Find a Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired





📖 Articles, Opinions & Tutorials





Encoding Data for POST Requests Properly — While we’re talking Copilot, Jake noticed that an example it threw up isn’t all that great security wise, and spun it into a good lesson about creating HTTP data bodies properly, while covering things like URLSearchParams and FormData along the way.


Jake Archibald






How to Structure and Organize a React App — We've featured a variety of "how to structure React apps" pieces in the past, but it remains a perennially interesting topic as there really is no one way. Tania is always fantastic at explaining things though, so we really like this one.


Tania Rascia






Continuously Improve Your Code with Rollbar — Deploy with confidence at every development stage & set up AI-assisted workflows for fast resolution. Spend more time building. Less time fixing. Try it for free.


Rollbar sponsor






Sorting Colors in JavaScript — Sounds easy but.. there’s some nuance to doing this. An interesting exploration.


Tomek Nieżurawski






Lessons From Building a Static Site Generator — The backstory behind Elder.js and the thinking behind the biggest design decisions involved.


Nick Reese





Image To Text Conversion With React and Tesseract.js

Ayobami Ogundiran






🛠 Code & Tools














Milkdown: A Plugin-Driven WYSIWYG Markdown Editor — Built on top of CodeMirror, the plugin system lets you easily enable or disable features like tables, LaTex support, and slash commands. Try it out here.


Saul Mirone






A Code Generator for Making HTTP Requests — A simple but sweet tool for defining what HTTP request you want to make (including headers, request body, and certain types of auth) and you can then copy/paste code for Node (Axios is used here), curl, fetch in the browser, or Google Apps Script (it’s JavaScript but very specific to Google’s environment).


Amit Agarwal






Instant GraphQL Backend for Your Apps | Get Started for Free in 30 Seconds — Point Hasura at your data & instantly get realtime GraphQL APIs without the need to build & operate a GraphQL Server.


Hasura sponsor






Slowfil.es: Deliberately Slow HTTP Resources for Testing — We’re all told to make our sites as fast as possible and there are numerous ways to improve the experience when page elements like images or fonts are slow to load, but if you want to test what happens for real.. this service could help introduce some true sluggishness into your system.


Harry Roberts and Ryan Townsend






Google's New Tool for Understanding Package Dependenciesdeps.dev is an experimental project by Google that scans places like GitHub and the npm registry for package info, determines full dependency graphs, and then lets you navigate this data.


Google






Million: A Less-than-1KB Virtual DOM Implementation — Aims to fix many of the problems in other abandoned and overcomplicated solutions with a library-agnostic virtual DOM alternative. GitHub repo.


Million






Gute: A Simple JS Library for Building Web Games — Currently provides game loop, input, sounds, music, and tilesets for building simple web-based games. See an example here.


Coke And Code






Build In-App Chat Like iMessage, Telegram or Slack with Stream's React Native SDK


Stream sponsor






wait-on 6.0: A CLI and Node Library to Wait for Ports, Files, Sockets, etc. — For when you need to wait until files, ports, sockets, and similar resources become available (or the opposite).


Jeff Barczewski






XO: An Opinionated but Configurable ESLint Wrapper


XO



👾 And one for fun..









A Fortnite-Inspired VS Code Theme — No, me neither, but I’ve gotta admit I really like this color scheme. Vibrant!


Sarah Drasner










07/01/2021

Multilingual voice search is the future - here's how you can encompass a great SEO strategy that targets your audience both locally as well as internationally


The post Multilingual SEO for voice searches: Comprehensive guide appeared first on Search Engine Watch.