Learning

Voice-Controlled Web Visualizations with Vue.js and Machine Learning

In this tutorial, we’ll pair Vue.js, three.js and LUIS (Cognitive Services) to create a voice-controlled web visualization. But first, a little context Why would we need to use voice recognition? What problem might something like this solve? A while ago I was getting on a bus in Chicago. The bus driver didn’t see me and closed the door on my wrist. As he started to go, I heard a popping sound in my wrist and he did eventually stop as…

0
Read More

25 Free Adobe XD Tutorials For Learning UI/UX Designers

Adobe’s newest design software is a popular choice for mobile & web projects. While it hasn’t taken out Sketch App for Mac users, Adobe XD has been around long enough to gather interest from the design community. If you search you’ll find tons of handy resources and design freebies for XD users. But there are also tons of free tutorials out there for anyone who wants to master the software. I’ve scoured YouTube looking for 25 of the absolute best…

0
Read More

Learning Gutenberg: Building Our Custom Card Block

We’ve got some base knowledge, we’ve played with some React and now we’ve got our project tools set up. Let’s dive into building our custom block. What we’re building We’re going to build a custom card block that features an image, a title and a summary. It’s a really common design pattern in the web and it also let’s us look at some core Gutenberg components, along with core WordPress elements, such as the Media Library. We’ll also play with…

0
Read More

Learning Gutenberg: Setting up a Custom webpack Config

Gutenberg introduces the modern JavaScript stack into the WordPress ecosystem, which means some new tooling should be learned. Although tools like create-guten-block are incredibly useful, it’s also handy to know what’s going on under the hood. The files we will be configuring here should be familiar from what we covered in the Part 2 Primer with create-guten-block. If you’re like me (before reading Andy’s tutorial, that is!) and would rather not dive into the configuration part just yet, the scaffold…

0
Read More

Learning Gutenberg: React 101 | CSS-Tricks

Although Gutenberg is put together with React, the code we’re writing to make custom blocks isn’t. It certainly resembles a React component though, so I think it’s useful to have a little play to get familiar with this sort of approach. There’s been a lot of reading in this series so far, so let’s roll-up our sleeves and make something cool. Article Series: Series Introduction What is Gutenberg, Anyway? A Primer with create-guten-block Modern JavaScript Syntax React 101 (This Post)…

0
Read More

Learning Gutenberg: Modern JavaScript Syntax

One of the key changes that Gutenberg brings to the WordPress ecosystem is a heavy reliance on JavaScript. Helpfully, the WordPress team have really pushed their JavaScript framework into the present and future by leveraging the modern JavaScript stack, which is commonly referred to as ES6 in the community. It’s how we’ll refer to it as in this series too, to avoid confusion. Let’s dig into this ES6 world a bit, as it’s ultimately going to help us understand how…

0
Read More

Learning Gutenberg: Series Introduction | CSS-Tricks

Hey CSS-Tricksters! 👋 We have a special long-form series we’re kicking off here totally dedicated to Gutenberg, a major change to the WordPress editor. I’ve invited a dynamic duo of authors to bring you this series, which will bring you up to speed on what Gutenberg is, what it can do for your site, and how you can actually develop for it. Who this is for This series is more for developers who are curious about this new world and…

0
Read More

Learning Gutenberg: What is Gutenberg, Anyway?

Gutenberg is the new React-driven SPA editing experience in WordPress. Oh wait, a string of buzzwords doesn’t count for a viable explanation of software? We’re going to unpack that string of buzzwords as we explain what Gutenberg is. Article Series: Series Introduction What is Gutenberg, Anyway? (This Post) A Primer with create-guten-block (Coming Soon!) Modern JavaScript Syntax (Coming Soon!) React 101 (Coming Soon!) Setting up a Custom webpack (Coming Soon!) A Custom “Card” Block (Coming Soon!) First, a before-and-after screenshot…

0
Read More

The JavaScript Learning Landscape in 2018

Raise your hand if this sounds like you: You’ve been in the tech industry for a number of years, you know HTML and CSS inside-and-out, and you make a good living. But, you have a little voice in the back of your head that keeps whispering, “It’s time for something new, for the next step in your career. You need to learn programming.” Yep, same here. I’ve served in a variety of roles in the tech industry for close to…

0
Read More

Making E Learning Course Design Work

Effective, successful e learning is the aim of every course designer. Yet ask most learners and these two words are not the ones that will immediately come into their minds when describing their experience of taking an e learning course. While not all e learning is dreadful, too many examples are; and, as most learners will tell you, these bad examples are boring. Usually deathly boring. So what can we do with our e-learning course design to make sure it…

0
Read More