Tag: Chrome Developer Summit 19

Today, I’m going to talk about web development on Chromebooks. Here is a quote from you. A skilled web developer. Chromebooks are awesome and, if you don’t remember saying this recently, I hope that after reading this article, it will become a daily thing. Chromebooks are known for being lightweight fast, secure web browsing machines.

They are so much more. The device portfolio has grown to include tablets, detachable z’, all-in-one, mini desktops and, of course, laptops and convertibles. Many of these are capable development devices. So what can you run on them? Well, ideas like visual studio code, Atom, webstorm tools like node, react, docker and get, and you can test your web apps with multiple browsers, including real mobile browsers as well.

You can check how your mobile app interacts with your web server all right on the same device. Okay, let’s get started and get your Chrome OS device ready for development. We are going to set up a Linux environment and then install the tools you need to start open, Chrome settings and search or scroll down to Linux. Click turn on this will download and setup a Linux environment when it’s complete, you’ll see a terminal prompt pro tip.

If you will be doing a lot of development, pin the terminal by right-clicking and choosing pin now we have a Linux environment. Let’s install some tools head over to the visual studio code website and download the Linux dot de Bie package, double click and choose install once it’s installed. You can find vs code in your app launcher. If you’re going to be using this IDE a lot, you can pin it like, we did with the terminal.

Any application with a dot de Bie package can be installed in a similar way. Let’s install atom, the process is exactly the same: download install and launch not every app has a dot de Bie package, but you can install any of your favorite tools that support Debian Linux, for example, to install sublime text, follow the Linux instructions on the website to Setup, the apt, repo and install the editor using the command-line when we install node in a few seconds, we’ll take a closer look at command-line installation and the same thing goes for apps like webstorm.

Just go to the website, follow the Linux download and install instructions. I won’t do a web storm right now. Let’s get right on to the server side of things, oh and by the way, at the end of this article, I will direct you to a page by the Chrome, OS Deverell team, with installation instructions for all the apps and more discussed in this article. Now, beyond what I mentioned today in this article, if your favorite tool is supported in Linux, it should run on Chromebooks.

For example, I, like G edit for text, editing FileZilla as an FTP, client and Inkscape for vector, graphics, editing. Today, web development usually takes more than a text editor an IDE or an FTP client. Let’s get to some other tools, so we can make some really nice web apps nodejs requires GnuPG to open up your terminal and install it with apt that command is sudo apt, install GnuPG 2. If you’re new to apt, you can probably guess that by replacing GnuPG 2 with whatever package name you want, it will install that package now.

Finding the right package name can sometimes be the tricky part note, as we continue with this article and other terminal commands. I won’t read every line out loud, but, as mentioned, I will provide a link at the end that has them all now that the dependency is installed. Let’s get nodejs run this curl command, followed by another apt, install command for node. That’s it. No js’ is ready to go, don’t believe me! Well, let’s try it out with procs use git to clone the procs repo an NPM to install, build and serve the proxy web app navigate to localhost 8080 in your web browser and check it out pretty cool.

So much minesweeping to be done. Let’s try react using NPM, you can install, create react. App, then use create react app to create a skeleton project. Here I call it hello. World react navigate into the directory where it was created and call NPM start now, navigate to localhost 3000 in your browser and check it out. If you prefer angular install that too, the steps are almost the same again. We use NPM to install at angular slash CLI, create an angular app using ng new.

My angular project change directories into the project folder using CD for change directory. My angular project now ng serve browse to localhost 4200 and check it out here. You’ll notice that I have procs a react, app and an angular app all running on different ports, all on the same Chromebook. I think this is pretty handy. What’s more, this is all local. So as long as your tools are already installed, you could do all of your development offline say like on a plane.

What about docker, no problem again we’re going to follow the normal Linux installation steps. First, we double check that all the dependencies are installed. We add the docker repository to apt and then we update the apt package list. Since we just added a new repository. We use sudo apt update to do this, then install docker test it out by running hello world. This is done with sudo docker run hello world.

You should get a nice mess showing that everything is working. Let’s do something a little bit more advanced by running an Ubuntu Linux container and docker sudo docker run it Ubuntu bash and there you go. Your output is going to look something like this in the Ubuntu container. I’ve taken a look at the OS version with cat, slash et Cie / OS version, and you can see it’s really Ubuntu now, once an app is ready to deploy, it should be tested because Chromebooks have web Android and Linux.

You can test across multiple browsers on multiple platforms: alright, on the same device, let’s install a whole pile of browsers to prove this point using the terminal in apt. You install Firefox for Linux note in debian the package name is Firefox ESR. Then, let’s also install the chromium browser for Linux feeling brave. Let’s install the brave browser for Linux. I won’t walk through all of these lines right now, but again they are just the standard installation instructions for Debian Linux.

We install the GPG key. We install the repo and finally brave now if for browsers, aren’t enough, let’s add a few more head over to the Google Play, Store and install some Android browsers. Let’s go with Firefox for Android opera for Android and Chrome Beta for Android. We now have seven browsers installed, which can give us a reasonable first attempt at test coverage. We have the Chrome, OS Chrome browser three Android browsers, that is Firefox Chrome, Beta and opera, three Linux browsers Firefox for Linux, brave and chromium, and here you can see that our procs web app is running on all seven one.

Last thing to mention in case you have a mobile app that interacts with your web service. You can do Android, TBWA and flutter development on Chrome OS devices, which means you can build and package your mobile app on your Chromebook test it right on the device. You were coding on, like any other Android app build your web component, start your web server and then test everything on multiple browsers and see how it interacts right on the device.

Android studio is as easy to install as visual studio code or atom head over to the Android studio site and download the dot de Bie file. Then you can code. Your app like you’d expect an Android studio with one cool difference: you’ll notice that you can push directly to the Chromebook you’re working on pretty cool full instructions on how to set this up can be found on the link. At the end of this article on the android page, so with your chromebook, you can build web apps with the tools you are used to develop and test right on device with tools like nodejs docker and angular tests across multiple browsers, including mobile, browsers and even test Mobile app and web interaction right on device, and all of this could even happen offline like on a long flight.

So now, don’t you agree. Chromebooks are awesome, as promised. Here is a link to a guide to get your Linux environment customized. Just the way you like. It’s cross dot, page dot, link slash web dev. Thank you can’t wait to see what you build.

---

 

The first update is the material theme builder tool on glitch. The tool itself is a self-contained application that showcases each of the material components with prompts to update the base theme shown. It helps teams to leverage the three subsystems of theming within material typography shape and color.

The tool uses SAS variables to show users how to adjust an interface style and make their own brands shine by changing just a few lines of code within a theme file. For example, color can be adjusted via a series of variables, such as primary secondary background and surface colors. These compared with on colors, which represent the text color on top of a variable background, shape, customization, can be made for three component size classes, small, medium and large components.

Small components include buttons and input, medium components include modal’s and dialogs, and large components include menus and drawers, there’s a great shape tool on material diode to help you visualize. These changes on our components before applying them to your codebase and finally, we can adjust typography through the generalized MVC typography variable or through SAS maps that allow you to customize individual typographic levels, such as having a separate, wait and fought family for primary headlines, rather than The body copy in the end, your theme could look something like this.

This is just one example that comes from Google developer days in China. We’ve made thousands of themes around the world so far so head over ticklish. To add your own, we’re also working on a set of guidelines for adapting dark themes, using material components, for example, and a dark theme. Google materials, color palette reduces intensity to mitigate visual vibration or strong color contrast against a darker background.

Instead of solely adding drop shadows to illustrate elevation and depth and a dark theme, a lighter overlay is applied check out the material Daioh guidelines for more design guidance on how to transition your designs to a dark theme, considering contrast, depth, desaturation and limiting colors for accessibility To help with this transition, MDC web has released a set of typography theme variables that respond to background shades for text styles.

You can now also use the theme variables in three different ways. The most supported and robust technique is, with our SAS styling API, using variables and mix-ins to override styles. You can also create CSS classes, with the variable names to style them by and finally, for modern, browsers, CSS custom properties can be used for the theme styling. We’re still working on full support for custom properties.

At this time we provide so many options, because theming should not be limiting. You can extend the theme builder to make your own theme as unique as your product leverage our code and build on top of our material components to quickly and easily get started building product on the web. The next new feature and material is data tables. You asked we listened our designers consider these three principles when it comes to data tables.

The first is that data must be organized in a meaningful way. Data tables should also be allowed for user interaction, and, finally, those interactions should be as logical as a structure of the data table itself. Data tables come with some basic default functionality such as row selection, but you can also hook them up to other components such as these filter chips, check out the links provided below for a deep dive into how you can actually implement data tables in your web projects And combine material components for orchestrated actions.

We also have a new density subsystem option in material material design, uses low-density space by defaults with large tap targets and margins, but offers high density space when it improves the user experience. We brought density into our system for the following reasons: the first is for scan ability, scan ability is improved for data heavy applications with a higher density interface. The second is that dense UIs may actually help users focus by reducing space between Asians and, finally, more content is available to the user on a single screen in more high-density applications, whether or not to increase your us density can be determined by how users interact with A component components with high density, enable users to process and take action against large amounts of information in a more manageable way.

Lists tables and long forms are components that benefit from increased density, but density shouldn’t be used for every component. For example, don’t apply, density to components that involve focused tasks or alert. The user of changes such as snack bars or dialogues, applying high density to alerts reduces their ability to command attention. A series of new styling classes on the web allows for us to access density in three ways: the default component size a comfortable size which provides a higher density display, while respecting minimum touch, target size and compact, which may be used for pages.

With a lot of information but may be inappropriate for user actions, materials at i/o got an update as well. We now provide a cross-platform view of all of our component offerings on a dedicated components page. This page allows for quick access to components and an overview of cross platform. Availability should make it easier to navigate our product and implement it, for your needs, check out material, do slash components to browse them all yourself and finally, we’re kicking off a new initiative.

This year to focus on supporting material across web frameworks, why we know that most of you are developing web apps using a framework and the open source community has stepped up immensely, both in components for some of the most adopted web frameworks out there. We want to celebrate this work and help bring the material design vision to life along with our open source community. So many of you have already built your own wrapper libraries using MVC, webs components, foundations and adapters and we’re working more closely with the rest of the open source community as well.

We’ve updated material to i/o to link to three of the most popular open source component. Libraries they’ve already uncovered bugs in the material design guidelines and asked great questions, helping us to make material even better and we’re helping them to follow the spec and the material guidelines more closely as well. We look forward to continuing the conversation and working to bring the material design vision to every platform and framework, making it easier for everyone to use material design on the web.

There’s so much to explore and play with from theming to density, to data tables to new website features and our open source community. It’s an exciting time to be building of material, so check out material, dot, IO and the links below where you can find all the resources that I mentioned today can’t wait to see what you build material I’ll, see you on the web. You

---