Tag: Studio

Ship a Full-Stack App in Days with AWS Amplify Studio

(This is a sponsored post.)

Amazon has a vision with AWS Amplify. First, a premise:

As browsers have become faster and more powerful over the last decade, front-end developers are building web apps that are more feature-rich and performant for both desktop and mobile devices. To implement these features, front-end developers are increasingly becoming full-stack developers who have to think about not just the UI but the cloud services they are adopting to get to market faster. 

That premise comes from conversations I’ve had with Amazon about what they are doing with AWS Amplify, which is informed by their own research.

Sound familiar? I’ve been saying for years that us front-end developers have been morphing into full-stack developers. And for the most part that’s great. It’s empowering to see our base skillset become fully capable of building and hosting entire websites, even full-blown web apps with authentication, data models, media handling, and more — thanks to tooling that that has made these things much more accessible.

The AWS Amplify vision keeps this going. Full-stack apps should be easier and faster to build. More, it can help teams work together better, specifically designer/developer collaboration. And finally, you shouldn’t have to give up any power, control, or opinions.

AWS Amplify is delivering on all that. You get the power of everything AWS offers and can build products that would have taken months in days.

AWS Amplify has always been a useful tool, then last year took a big leap up with the launch of the Admin UI. It’s an amazing part of Amplify, bringing a self-hosted dashboard to your projects that gives you a visual way to model data, orchestrate your auth, and deal with other aspects of your app in a way that, frankly, is awfully friendly to front-end developers like me.

Now they are taking another big leap forward with…

AWS Amplify Studio

This is a brand new release. AWS Amplify Studio is an evolutionary leap of the Admin UI. It’s a renaming — Amplify Studio is the new name for all of this, including all the new features. So you’re still doing things like building your data model, but you’re taking that even further by building and customizing components (!!) and wiring up those components to real data (!!!). Oh and one more thing: those components are quite literally mapped to Figma, so designers can iterate on the components in Figma and sync them back to Studio as real React components (!!!!).

The one-minute video is worth a watch here:

Building an app from scratch is extremely quick as AWS Amplify Studio helps you scaffold out the app.

AWS Amplify Studio is accessible outside of the AWS Management console, so you and your team can log in and quickly get started.

Modeling data is a visual experience, making this kind of work much more accessible.

Connecting data to components is equally easy data mapping.

You can also connect mobile and web apps to app backends created in AWS Amplify Studio using Amplify Libraries for iOS, Android, Flutter, React Native, and web (JavaScript).

You’re not on your own to create those components, AWS Amplify Studio now ships with a bunch of pre-built components you can use right away.

There are dozens of these from smaller atomic elements like buttons, to larger UI elements like cards and forms, to large page sections like headers and news feeds.

Notably, you’ll need to deploy to AWS to get the UI library experience. But you’ll likely be doing that anyway as the point of Amplify is leveraging the full AWS integrated experience.

The components are also provided as a Figma template which you can (and this is very impressive new tech here) literally keep in sync between Figma and AWS Amplify. Meaning you tweak designs in Figma and pull the updated components right into the app.

Manage and ship your app

Once you’re ready to ship your app, you can deploy and host with AWS Amplify Hosting, which lets you deploy and host any React, Vue, or Next.js web app with built-in continuous integration and continuous deployment (CI/CD) workflows, testing, pull request previews, and custom domains. You can let your team members manage users and groups, application content, and files in AWS Amplify Studio, since it’s accessible outside the AWS Management Console. 

You can easily add AWS services not available within AWS Amplify Studio using the AWS Cloud Development Kit (CDK). For example, if your app backend needs an SQS queue to process order fulfillment events, you can run the amplify add custom command to add any resource from more than 175 AWS services to their Amplify app using AWS CDK. 


Stayed tuned for an upcoming blog post getting into more detail on the Figma integration and designer/developer collaboration.

And, hot of the presses:

Here’s Amplify’s Developer Advocate lead Ali Spittel introducing Amplify Studio


, , , ,

What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?

It’s not uncommon for my front-end workflow to go something like this:

  1. Work on thing.
  2. See that thing in an automatically refreshed browser.
  3. See something wrong with that thing.
  4. Inspect and correct the thing in DevTools.
  5. Apply the correct code in my code editor.
  6. See that correct code automatically refreshed in the browser.

I know, it’s not always great. But I’d bet the lint in my pocket you do something similar, at least every now and then.

That’s why I was drawn to the title of Chris Hellman’s post: “What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?”

The idea is that VS Code can be used as the editor for DevTools and we can do it today by enabling it as an experimental feature, alongside Microsoft Edge. So, no, this is not like a prime-time ready universal thing, but watch Chris as he activates the feature, connects VS Code to DevTools, gives DevTools access to write files, then inspects the page of a local URL.

Now, those changes I make in DevTools can be synced back to VS Code, and I have direct access to open and view specific files from DevTools to see my code in context. Any changes I make in DevTools get reflected back in the VS Code files, and any changes I make in VS Code are updated live in the browser. Brilliant.

I’m not sure if this will become a thing beyond Edge but that sort of cross-over work between platforms is something that really excites me.

Direct Link to ArticlePermalink

The post What if… you could use Visual Studio Code as the editor of in-browser Developer Tools? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.


, , , , , , , ,

My Visual Studio Code Setup: Extensions and Themes

Matthias Ott’s posted his VS Code setup. I find lists like this (I rounded up some recent updates of my own) irresistible, probably because, like y’all, I spend an awful lot of time in VS Code and wanna make sure I’m getting the most out of it.

Things from the list that stood out to me:

  • I didn’t realize Bracket Pair Colorizer had gone v2 and it’s a separate install.
  • I din’t realize you needed an extension to honor .editorconfig files.
  • I wasn’t using anything for PHP, but Matthias listed PHP Intelephense and I’m giving it a whirl. It has fewer users than the non-weirdly named one though? And when I installed that, I saw Format HTML in PHP which I’m also trying because, yes, please! (Even Prettier’s PHP add-on can’t do that.)

Messing with extensions is also a good opportunity to clear out old crap.

Also super interesting…

The main point of that series is cleaning up the interface of VS Code in extreme ways. All the way down to:

Direct Link to ArticlePermalink

The post My Visual Studio Code Setup: Extensions and Themes appeared first on CSS-Tricks.


, , , , ,

Cloudinary Studio

I knew that Cloudinary worked with video as well as images but, the other day, I was curious if Cloudinary offered a video player embed just like other video hosts do (e.g. YouTube, Vimeo, etc). Like an <iframe> that comes with a special player.

I was curious because, as much as I appreciate the simplicity of just tossing a <video> on a page, there is one little hurdle that I always forget: you have to use a poster attribute if you want anything but a blank white rectangle on mobile browsers. Having to cut a special poster for every video I use is a step I’m frankly just too lazy to do most of the time.

Turns out Cloudinary does a have a player, and it allows for a bunch of nice customization, including handling the poster for you: Video Player Studio.

If I use this player instead, not only do I get a free configurable poster, but other advantages you’d expect from Cloudinary, like serving the video in the best possible format and optimizing the size.

But there is another thing that is a kind of big deal here, particularly for long videos: “adaptive bitrate streaming.” Behind the scenes, some library probably needs to be downloaded, but the bandwidth savings likely pay for that almost instantly. I’m not an expert on any of this by any means, but I’m referring to HLS and MPEG-DASH, which seem to be the big players, and this Cloudinary player offers both.

For the record, this post is not sponsored by Cloudinary. I was just thinking about all this the other day because we frequently embed video here on CSS-Tricks and I already use Cloudinary for all sorts of stuff.

Here’s an example:

In running this past the Cloudinary team, they said two things:

  1. The player is built on top of VideoJS. Credit where credit is due.
  2. They’ve got a blog post that goes far deeper into customizing the player than I talk about here.

The post Cloudinary Studio appeared first on CSS-Tricks.