Code View – Google Web Designer


NIVESH: Hi, my name is
Nivesh, and I’m a developer on Google Web Designer. In this video, I’m going
to give an overview of Code view including keyboard
shortcuts and code hinting. When you initially open a
file in Google Web Designer, you are presented
with the Design view. The Design view includes tools,
panels, timeline, and a stage. What you may not
have realized is that there’s also a Code view. You can switch to Code view
by clicking on the Code view button on the top
right of the workspace. Google Web Designer
uses CodeMirror as the underlying tool for a
Code view and code editing. CodeMirror is a
very powerful tool, and it supports many different
languages, including HTML, CSS, and JavaScript. CodeMirror offers some great
code editing functionality. For example, as I
click on various lines, you see a highlight
appear on that line. Also, any word that the
cursor is over, matching words will also be underlined. Let me zoom in, so
it’s easier to see. The code editing
supports Zoom, which can also be accessed in the
View menu from 100% to 200%. The View menu also includes
a Line wrap option. CodeMirror automatically does
matching brackets as well as matching tags. And it also does autocomplete
of brackets and tags. For example, if I
type in style here and I add the closing
bracket, it actually adds the closing tag for me. Similarly, if I add
an open bracket, adds the closing bracket for me. And as you may have
noticed, while I was typing, it automatically indented. CodeMirror also supports
code hinting for HTML, CSS, and JavaScript context. It’s smart enough to know that
I’m editing CSS right now. So when I type in
background or back with a G, and I press Control-spacebar,
or Command-spacebar on Mac, I’ll get a list of matching
words to complete with. I’m going to select
background color. And again, if I type
in ye and I, again, bring up the code
hinting menu, I’m going to get the set
of matching words. I’m going to select
yellow there. Some of these options
can be turned on or off in the Preferences menu. From Edit, Preferences,
Code view section. Here are the options
we were talking about. You can also change
the key mapping to match some popular editor
such as Emacs, Sublime, and Vim. At the top here, you can
change the color theme. For example, if I use Blackboard, you get a darker color. And if I use Neo,
there’s a lighter color. And once you’re happy
with your setting, you can save your options. And the effect is
immediately reflected in your main document. Some of the common workflows,
such as undo, redo, cut, copy, paste, find, and replace are
available in the Edit menu. And their corresponding
keyboard shortcuts appear to the right
of the menu item. And let me go ahead
and show some examples. I’m going to select the
style element that I added. I’m going to Edit, Cut. And I’m going to move
it to the top here. And I’m going to use
keyboard shortcut, Control-V, or Command-V to paste. It’s that easy. And I’m going to go ahead
and now delete it again. Now I’m going back
to Design view. In Design view, if I
select this div element, and switch to code
view, you will notice that the cursor has
moved to line number 82. This is the location where
that selected div is declared. I’m going to change that div’s
background color to red now, and switch back to Design view. The change is immediately
reflected in Design view here. Thank you for watching.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *