Podcasts about css3

style sheet language

  • 103PODCASTS
  • 193EPISODES
  • 39mAVG DURATION
  • 1MONTHLY NEW EPISODE
  • Feb 10, 2025LATEST
css3

POPULARITY

20172018201920202021202220232024


Best podcasts about css3

Latest podcast episodes about css3

How About Tomorrow?
DOGE, o3-mini vs Google Flash, Why Sports, and Why Horowitz > Andreessen

How About Tomorrow?

Play Episode Listen Later Feb 10, 2025 62:32


What is happening with Musk and DOGE and government, who does the USA owe money to, o3-mini vs Google Flash vs avante thoughts, what does Dax watch instead of sports, Adam makes a case for why sports matter, and should Adam trust Marc Andreessen or Ben Horowitz?Links:OpenAI o3-mini | OpenAIClaudeGemini Flash - Google DeepMindGitHub - yetone/avante.nvim: Use your Neovim like using Cursor AI IDE!Can I use... Support tables for HTML5, CSS3, etcWes Bos on X: "this website is nuts! I downloaded the entire codebase and was surprised to find out it's built with web components, Vanilla.js, Shopify and Tailwind! Full vid diving into the stack up nowThe Last DanceBelow Deck - WikipediaMarc Andreessen - WikipediaBen Horowitz - WikipediaAndreessen Horowitz | Software Is Eating the WorldThe Hard Thing About Hard Things | Andreessen HorowitzSponsor: Terminal now offers a monthly box called Cron.Want to carry on the conversation? Join us in Discord. Or send us an email at sliceoffalittlepieceofbacon@tomorrow.fm.Topics:(00:00) - We're so prepared (00:35) - Will the real time zone please stand up? (02:09) - DOGE, debt, and democracy (16:11) - o3-mini, Google Flash 2, avante thoughts (27:38) - Manic and bipolar (29:58) - Superbowl, NBA, and watching sports (37:55) - Reality tv and real life (45:52) - Sponsor: Terminal.shop (46:26) - Should Adam trust Marc Andreessen or Ben Horowtiz? ★ Support this podcast ★

Oracle University Podcast
Best of 2024: Developing Redwood Applications

Oracle University Podcast

Play Episode Listen Later Dec 10, 2024 21:26


Redwood is a state-of-the-art graphical interface that defines the look and feel of the new Oracle Cloud Redwood Applications.   In this episode, hosts Lois Houston and Nikita Abraham, along with Senior Principal OCI Instructor Joe Greenwald, take a closer look at the intent behind the design and development aspects of the new Redwood experience. They also explore Redwood page templates and components.   Survey: https://customersurveys.oracle.com/ords/surveys/t/oracle-university-gtm/survey?k=focus-group-2-link-share-5   Developing Redwood Applications with Visual Builder: https://mylearn.oracle.com/ou/learning-path/developing-redwood-applications-with-visual-builder/112791   Oracle University Learning Community: https://education.oracle.com/ou-community   LinkedIn: https://www.linkedin.com/showcase/oracle-university/   X (formerly Twitter): https://twitter.com/Oracle_Edu   Special thanks to Arijit Ghosh, David Wright, and the OU Studio Team for helping us create this episode.   ---------------------------------------------------------   Episode Transcript:   00:00 Welcome to the Oracle University Podcast, the first stop on your cloud journey. During this series of informative podcasts, we'll bring you foundational training on the most popular Oracle technologies. Let's get started. 00:26 Nikita: Hello and welcome to the Oracle University Podcast! I'm Nikita Abraham, Team Lead: Editorial Services with Oracle University, and with me is Lois Houston, Director of Innovation Programs. Lois: Hi everyone! Thanks for joining us for this Best of 2024 series, where we're playing for you our four most popular episodes of the year.    Nikita: Today's episode is #3 of 4 and is a throwback to another conversation with Joe Greenwald, our Senior Principal OCI Instructor. We asked Joe about Oracle's Redwood design system and how it helps us create stunning, world-class enterprise applications and user experiences.  01:04 Lois: Yeah, Redwood is the basis for all the new Oracle Cloud Applications being re-designed, developed, and delivered. Joe is the best person to ask about all of this because he's been working with our Oracle software development tools since the early 90s and is responsible for OU's Visual Builder Studio and Redwood course content. So, let's dive right in! Joe: Hi Lois. Hi Niki. I am excited to join you on this episode because with the release of 24A Fusion applications, we are encouraging all our customers to adopt the new Redwood design system and components, and take advantage of the world-class look and feel of the new Redwood user experience. Redwood represents a new approach and direction for us at Oracle, and we're excited to have our customers benefit from it. 01:49 Nikita: Joe, you've been working with Oracle user interface development tools and frameworks for a long time. How and why is Redwood different? Joe: I joined Oracle in 1992, and the first Oracle user interface I experienced was Oracle Forms. And that was the character mode. I came from a background of Smalltalk and its amazing, pioneering graphical user interface (GUI) design capabilities. I worked at Apple and I developed my own GUIs for a few years on PCs and Macs. So, Character Mode Forms, what we used to call DMV (Department of Motor Vehicles) screens, was a shock, to say the least. Since then, I've worked with almost every user interface and development platform Oracle has created: Character Mode Forms, GUI Forms, Power Objects, HyperCard on the Macintosh, that was pre-OS X by the way, Sedona, written in native C++ and ActiveX and OLE, which didn't make it to a product but appeared in other things later, ADF Faces, which uses Java to generate HTML pages, and APEX, which uses PL/SQL to generate HTML pages. And I've worked with and wrote training classes for Java Swing, an excellent GUI framework for event-driven desktop and enterprise applications, but it wasn't designed for the web. So, it's with pleasure that I introduce you to the Redwood design system, easily the best effort I've ever seen, from the look and feel of holistic user-goal-centered design philosophy and approach to the cutting-edge WYSIWYG design tools.  03:16 Lois: Joe, is Redwood just another set of styles, colors, and fonts, albeit very nice-looking ones? Joe: The Redwood platform is new for Oracle, and it represents a significant change, not just in the look and feel, colors, fonts, and styles, I mean that too, but it's also a fundamental change in how Oracle is creating, designing, and imagining user interfaces. As you may be aware, all Oracle Cloud Applications are being re-designed, re-engineered, and re-rebuilt from the ground up, with significant changes to both back-end and front-end architectures. The front end is being redesigned, re-developed, and re-created in pure HTML5, CSS3, and JavaScript using Visual Builder Studio and its design-time browser-based Integrated Development Environment. The back end is being re-architected, re-designed, and implemented in a modern microservice architecture for Oracle Cloud using Kubernetes and other modern technologies that improve performance and work better in the cloud than our current legacy architecture. The new Oracle Cloud Applications platform uses Redwood for its design system—its tools, its patterns, its components, and page templates. Redwood is a richer and more productive platform to create solutions while still being cost-effective for Oracle. It encourages a transformation of the fundamental user experience, emphasizing identifying, meeting, and understanding end users' goals and how the applications are used.  04:39 Nikita: Joe, do you think Oracle's user interface has been improved with Redwood? In what ways has the UI changed? Joe: Yes, absolutely. Redwood has changed a lot of things. When I joined Oracle back in the '90s, there was effectively no user interface division or UI team. Everybody just did their own thing. There was no user interface lab—and that was started in the mid-‘90s—and I was asked to give product usability feedback and participate in UI tests and experiments in those labs. I also helped test the products I was teaching at the time. I actually distinctly remember having to take a week to train users on Oracle's Designer CASE tool product just to prep the participants enough to perform usability testing. I can still hear the UI lab manager shaking her head and saying any product that requires a week of training to do usability testing has usability issues! And if you're like me and you've been around Oracle long enough, you know that Oracle's not always been known for its user interfaces and been known to release products that look like they were designed by two or more different companies. All that has changed with Redwood. With Redwood, there's a new internal design group that oversees the design choices of all development teams that develop products. This includes a design system review and an ongoing audit process to ensure that all the products being released, whether Fusion apps or something else, all look and feel similar so it looks like it's designed by a single company with a single thought in mind. Which it is. There's a deeper, consistent commitment in identifying user needs, understanding how the applications are being used, and how they meet those user needs through things like telemetry: gathering metrics from the actual components and the Redwood system itself to see how the applications are being used, what's working well, and what isn't.  This telemetry is available to us here at Oracle, and we use it to fine tune the applications' usability and purpose.  06:29 Lois: That's really interesting, Joe. So, it's a fundamental change in the way we're doing things. What about the GUI components themselves? Are these more sophisticated than simple GUI components like buttons and text fields? Joe: The graphical components themselves are at a much higher level, more comprehensive, and work better together. And in Redwood, everything is a component. And I'm not just talking about things like input text fields and buttons, though it applies to these more fine-grained components as well. Leveraging Oracle's deep experience in building enterprise applications, we've incorporated that knowledge into creating page templates so that the structure and look and feel of the page is fixed based on our internal design standards. The developer has control over certain portions of it, but the overall look and feel of the page is controlled by Oracle. So there is consistency of look and feel within and across applications. These page templates come with predefined functionalities: headers, titles, properties, and variables to manipulate content and settings, slots for other components to hold like search fields, collections, contextual information, badges, and images, as well as primary and secondary actions, and variables for events and event handling through Visual Builder action chains, which handle the various actions and processing of the request on the page. And all these page templates and components are responsive, meaning they respond to the change in the size of the page and the orientation. So, when you move from a desktop to a handheld mobile device or a tablet, they respond appropriately and consistently to deliver a clean, easy-to-use interface and experience. 08:03 Nikita: You mentioned WYSIWYG design tools and their integration with Visual Builder Studio's integrated development environment. How does Redwood work with Visual Builder Studio? Joe: This is easily one of my most favorite aspects about Redwood and the integration with Visual Builder Studio Designer. The components and page templates are responsive at runtime as well as responsive at design time! In over 30 years of working with Oracle software development products, this is the first development system and integrated development environment I've seen Oracle produce where what you see is what you get at design time. Now, with products such as Designer and JDeveloper ADF Faces and even APEX—all those page-generation types of products—you have to generate the page, deploy it, and only then can you view the final page to see whether it meets the needs of your user interface. For example, with Designer, there were literally hundreds of configuration parameters that you could set to control how forms and reports looked when they were generated —down to how many buttons on a row or how many rows to a page, that sort of thing, all done in text mode. Then you'd generate and run the page to see what the result was and then go back and modify things until you got what you wanted. I remember hearing the product managers for Oracle ADF Faces being asked…well, a customer asked, “What happens if I put this component here and this component here? What will the page look like?” and they'd say, “I don't know. Render the page and let's see.” That's just crazy talk. With Redwood and its integration with Visual Builder Studio Designer, what you see on the page at design time is literally what you get. And if I make the page narrower or I even convert it to a mobile display while in the Designer itself, I immediately see what the page looks like in that new mode. Everything just moves accordingly, at design time. For example, when changing to a mobile UI, everything stacks up nicely; the components adjust to the page size and change right there in the design environment. Again, I can't emphasize enough the simple luxury of being able to see exactly what the user is going to see on my page and having the ability to change the resolution, orientation, and screen size, and it changes right there immediately in my design environment. 10:06 Lois: I'm intrigued by the idea of page templates that are managed by Oracle but still leave room for the developer to customize aspects of the look and feel and functionality. How does that work? Joe: Well, the page templates themselves represent the typical pages you would most likely use in an enterprise application. Things like a welcome page, a search page, and edit and create pages, and a couple of different ways to display summary information, including foldout pages, though this is not an exhaustive list of course. Not only do they provide a logical and complete starting point for the layout of the page itself, but they also include built-in functionality. These templates include functionality for buttons, primary and secondary actions, and areas for holding contextual information, badges, avatars, and images. And this is all built right into the page, and all of them use variables to describe the contents for the various parts, so the contents can change programmatically as the variables' contents change, if necessary. 11:04 Do you have an idea for a new course or learning opportunity? We'd love to hear it! Visit the Oracle University Learning Community and share your thoughts with us on the Idea Incubator. Your suggestion could find a place in future development projects. Visit mylearn.oracle.com to get started.  11:24 Nikita: Welcome back! So, Joe, let's say I'm a developer. How do I get started working with Redwood? Joe: One of the easiest ways to do it is to use Visual Builder Studio Designer and create a new visual application. If you're creating a standalone, bespoke custom application, you can choose a Redwood starter template, which will include all the Redwood components and page templates automatically. Or, if you're extending and customizing an Oracle Fusion application, Redwood is already included.  Either way, when you create a new page, you have a choice of different page templates—welcome page templates, edit pages, search pages, etc. —and all you have to do is choose a page that you want and begin configuring it. And actually if you make a mistake, it's easy to switch page templates. All the components, page templates, and so on have documentation right there inside Visual Builder Studio Designer, and we do recommend that you read through the documentation first to get an understanding of what the use case for that template is and how to use it. And some components are more granular, like a collection container which holds a collection of rows of a list or a table and provides capabilities like toolbars and other actions that are already built and defined. You decide what actions you want and then use predefined event listeners that are triggered when an event occurs in the application—like a button being clicked or a row being selected—which kicks off a series of actions to be performed. 12:42 Lois: That sounds easy enough if you know what you're doing. Joe, what are some of the more common pages and what are they used for?  Joe: Redwood page templates can be broken down into categories. There are overview templates like the welcome page template, which has a nice banner, colors, and illustrations that can be used for a welcoming page—like for entering a new application or a new logical section of the application. The dashboard landing page template displays key information values and their charts and graphs, which can come from Oracle Analytics, and automatically switches the display depending on which set of data is selected.  The detail templates include a general overview, which presents read-only information related to a single record or resource. The item overview gives you a small panel to view summary information (for example, information on a customer) and in the main section, you can view details like all the orders for that customer. And you can even navigate through a set of customers, clicking arrows for next-previous navigation. And that's all built in. There's no programming required. The fold-out page template folds out horizontally to show you individual panels with more detail that can be displayed about the subject being retrieved as well as overflow and drill-down areas. And there's a collection detail template that will display a list with additional details about the selected item (for example, an order and its order line items). The smart search page does exactly what it says. It has a search component that you use to filter or search the data coming back from the REST data sources and then display the results in a list or a table. You define the filter yourself and apply it using different kinds of comparators, so you can look for strings that start with certain values or contain values, or numerical values that are equal to or less than, depending on what you're filtering for. And then there are the transactional templates, which are meant to make changes. This includes both the simple create and edit and advanced create and edit templates.  The simple create and edit page template edits a single record or creates a single record. And the advanced page template works well if you're working with master-detail, parent-child type relationships. Let's say you want to view the parent and create children for it or even create a parent and the children at the same time. And there's a Gantt chart page for project management–type tracking and a guided process page for multiple-step processes and there's a data management page template specifically for viewing and editing data collections like Excel spreadsheets. 14:55 Nikita: You mentioned that there's a design system behind all this. How is this used, and how does the customer benefit from it? Joe: Redwood comprises both a design system and a development system. The design system has a series of steps that we follow here at Oracle and can suggest that you, our customers and partners, can follow as well. This includes understanding the problem, articulating the vision for the page and the application (what it should do), identifying the proper Redwood page templates to use, adding detail and refining the design and then using a number of different mechanisms, including PowerPoint or Figma design tools to specify the design for development, and then monitor engagement in the real world. These are the steps that we follow here at Oracle. The Redwood development process starts with learning how to use Redwood components and templates using the documentation and other content from redwood.oracle.com and Visual Builder Studio. Then it's about understanding the design created by the design team, learning more about components and templates for your application, specifically the ones you're going to use, how they work, and how they work together. Then developing your application using Visual Builder Studio Designer, and finally improving and refining your application. Now, right now, as I mentioned, telemetry is available to us here at Oracle so we can get a sense of the feedback on the pages of how components are being used and where time is being spent, and we use that to tune the designs and components being used. That telemetry data may be available to customers in the future. Now, when you go to redwood.oracle.com, you can access the Redwood pattern book that shows you in detail all the different page templates that are available: smart search page, data grid, welcome page, dashboard landing page, and so on, and you can select these and read more about them as well as the actual design specifications that were used to build the pages—defining what they do and what they respond to. They provide a lot of detailed information about the templates and components, how they work and how they're intended to be used. 16:50 Lois: That's a lot of great resources available. But what if I don't have access to Visual Builder Studio Designer? Can I still see how Redwood looks and behaves? Joe: Well, if you go to redwood.oracle.com, you can log in and work with the Redwood reference application, which is a live application working with live data. It was created to show off the various page templates and components, their look and feel and functionality from the Redwood design and development systems. This is an order management application, so you can do things like view filtered pending orders, create new orders, manage orders, and view information about customers and inventory. It uses the different page templates to show you how the application can perform. 17:29 Nikita: I assume there are common aspects to how these page templates are designed, built, and intended to be used. Is that a good way to begin understanding how to work with them? Becoming familiar with their common properties and functionality? Joe: Absolutely! Good point! All pages have titles, and most have primary and secondary actions that can be triggered through a variety of GUI events, like clicking a button or a link or selecting something in a list or a table. The transactional page templates include validation groups that validate whether the data is correct before it is submitted, as well as a message dialog that can pop up if there are unsaved changes and someone tries to leave the page. All the pages can use variables to display information or set properties and can easily display specific contextual information about records that have been retrieved, like adding the Order Number or Customer Name and Number to the page title or section headers. 18:18 Lois: If I were a developer, I'd be really excited to get started! So, let's say I'm a developer. What's the best way to begin learning about Redwood, Joe? Joe: A great place to start learning about the Redwood design and development system is at the redwood.oracle.com page I mentioned. We have many different pages that describe the philosophy and fundamental basis for Redwood, the ideas and intent behind it, and how we're using it here at Oracle. It also has a list of all the different page templates and components you can use and a link to the Redwood reference application where you can sign in and try it yourself. In addition, we at Oracle University offer a course called Design and Develop Redwood Applications, and in there, we have both lecture content as well as hands-on practices where you build a lightweight version of the Redwood reference application using data from the Fusion apps application, as well as the pages that I talked about: the welcome page, detail pages, transactional pages, and the dashboard landing page.  And you'll see how those pages are designed and constructed while building them yourself.  It's very important though to take one of the free Visual Builder Developer courses first: either Build Visual Applications Using Visual Builder Studio and/or Develop Fusion Applications Using Visual Builder Studio before you try to work through the practices in the Redwood course because it uses a lot of Visual Builder Designer technology.  You'll get a lot more out of the Redwood practices if you understand the basics of Visual Builder Studio first. The Build Visual Applications Using Visual Builder Studio course is probably a better place to start unless you know for a fact you will be focusing on extending Oracle Fusion Applications using Visual Builder Studio. Now, a lot of the content is the same between the two courses as they share much of the same technology and architectures. 19:58 Lois: Ok, so Build Visual Applications Using Visual Builder Studio and Develop Fusion Applications Using Visual Builder Studio…all on mylearn.oracle.com and all free for anyone who wants to take them, right? Joe: Yes, exactly. And the free Redwood learning path leads to an Associate certification. While our courses are a great place to start in preparing for your certification exam, they are not, of course, by themselves sufficient to pass and you will want to study and be familiar with the redwood.oracle.com content as well. The learning path is free, but you do have to pay for the certification exam. Nikita: We hope you enjoyed that conversation. A quick reminder about the short survey we've created to gather your insights and suggestions for the podcast. It's really quick. Just click the link in the show notes to complete the survey. Thank you so much for helping us make the show better. Join us next week for another throwback episode. Until then, this is Nikita Abraham... Lois: And Lois Houston, signing off! 20:58 That's all for this episode of the Oracle University Podcast. If you enjoyed listening, please click Subscribe to get all the latest episodes. We'd also love it if you would take a moment to rate and review us on your podcast app. See you again on the next episode of the Oracle University Podcast.

Oracle University Podcast
Best of 2024: Introduction to Visual Builder Studio, Visual Builder Cloud Service, Stand-Alone, and JET

Oracle University Podcast

Play Episode Listen Later Nov 26, 2024 24:58


The next generation of front-end user interfaces for Oracle Fusion Applications is being built using Visual Builder Studio and Oracle JavaScript Extension Toolkit. However, many of the terms associated with these tools can be confusing.   In this episode, Lois Houston and Nikita Abraham are joined by Senior Principal OCI Instructor Joe Greenwald. Together, they take you through the different terminologies, how they relate to each other, and how they can be used to deliver the new Oracle Fusion Applications as well as stand-alone, bespoke visual web applications.   Survey: https://customersurveys.oracle.com/ords/surveys/t/oracle-university-gtm/survey?k=focus-group-2-link-share-5   Develop Fusion Applications Using Visual Builder Studio: https://mylearn.oracle.com/ou/course/develop-fusion-applications-using-visual-builder-studio/138392/   Build Visual Applications Using Oracle Visual Builder Studio: https://mylearn.oracle.com/ou/course/build-visual-applications-using-oracle-visual-builder-studio/137749/   Oracle University Learning Community: https://education.oracle.com/ou-community   LinkedIn: https://www.linkedin.com/showcase/oracle-university/   X (formerly Twitter): https://twitter.com/Oracle_Edu   Special thanks to Arijit Ghosh, David Wright, and the OU Studio Team for helping us create this episode.   --------------------------------------------------------   Episode Transcript:   00:00 Welcome to the Oracle University Podcast, the first stop on your cloud journey. During this series of informative podcasts, we'll bring you foundational training on the most popular Oracle technologies. Let's get started. 00:26 Nikita: Hello and welcome to the Oracle University Podcast! I'm Nikita Abraham, Team Lead of Editorial Services with Oracle University, and with me is Lois Houston, Director of Innovation Programs. Lois: Hi there! If you've been following along with us, you'll know that we've had some really interesting seasons this year. We covered Autonomous Database, Artificial Intelligence, Visual Builder Studio and Redwood, OCI Container Engine for Kubernetes, and Oracle Database 23ai New Features. Nikita: And we've had some pretty awesome special guests. Do go back and check out those episodes if any of those topics interest you. 01:04 Lois: As we close out the year, we thought this would be a good time to revisit some of our best episodes. Over the next few weeks, you'll be able to listen to four of our most popular episodes of the year.  Nikita: Right, this is the best of the best–according to you–our listeners.   Lois: Today's episode is #1 of 4 and is a throwback to a discussion with Senior Principal OCI Instructor Joe Greenwald on Visual Builder Studio. Nikita: We asked Joe about Visual Builder Studio and Oracle JavaScript Extension Toolkit, also known as JET. Together, they form the basis of the technology for the next generation of front-end user interfaces for Oracle Fusion Applications, as well as many other Oracle applications, including most Oracle Cloud Infrastructure (OCI) interfaces. 01:48 Lois: We looked at the different terminologies and technologies, how they relate to each other, and how they deliver the new Oracle Fusion Applications and stand-alone, bespoke visual web applications.  So, let's dive right in. Nikita: Joe, I'm somewhat thrown by the terminology around Visual Builder, Visual Studio, and JET. Can you help streamline that for us? Lois: Yeah, things that are named the same sometimes refer to different things, and sometimes things with a different name refer to the same thing. 02:18 Joe: Yeah, I know where you're coming from. So, let's start with Visual Builder Studio. It's abbreviated as VBS and can go by a number of different names. Some of the most well-known ones are Visual Builder Studio, VBS, Visual Builder, Visual Builder Stand-Alone, and Visual Builder Cloud Service. Clearly, this can be very confusing. For the purposes of these episodes as well as the training courses I create, I use certain definitions.  02:42 Lois: Can you take us through those? Joe: Absolutely, Lois. Visual Builder Studio refers to a product that comes free with an OCI account and allows you to manage your project-related assets. This includes the project itself, which is a container for all of its assets. You can assign teams to your projects, as well as secure the project and declare roles for the different team members. You manage GIT repositories with full graphical and command-line GIT support, define package, build, and deploy jobs, and create and run continuous integration/continuous deployment graphical and code-managed pipelines for your applications. These can be visual applications, created using the Visual Builder Integrated Development Environment, the IDE, or non-visual apps, such as Java microservices, docker builds, NPM apps, and things like that. And you can define environments, which determine where your build jobs can be deployed. You can also define issues, which allow you to identify, track, and manage things like bugs, defects, and enhancements. And these can be tracked in code review merge requests and build jobs, and be mapped to agile sprints and scrum boards. There's also support for wikis for team collaboration, code snippets, and the management of the repository and the project itself. So, VBS supports code reviews before code is merged into GIT branches for package, build, and deploy jobs using merge requests. 04:00 Nikita: OK, what exactly do you mean by that? Joe: Great. So, for example, you could have developers working in one GIT branch and when they're done, they would push their private code changes into that remote branch. Then, they'd submit a merge request and their changes would be reviewed. Once the changes are approved, their code branch is merged into the main branch and then automatically runs a CI/CD package (continuous integration/continuous deployment) package, build, and deploy job on the code. Also, the CI/CD package, build, and deploy jobs can run against any branches, not just the main branch. So Visual Builder Studio is intended for managing the project and all of its assets. 04:37 Lois: So Joe, what are the different tools used in developing web applications? Joe: Well, Visual Builder, Visual Builder Studio Designer, Visual Builder Designer, Visual Builder Design-Time, Visual Builder Cloud Service, Visual Builder Stand-Alone all kind of get lumped together. You can kinda see why. What I'm referring to here are the tools that we use to build a visual web application composed of HTML5, CSS3, JavaScript, and JSON (JavaScript Object Notation) for metadata. I call this Visual Builder Designer. This is an Integrated Development Environment, it's the “IDE” which runs in your browser. You use a combination of drag and drop, setting properties, and writing and modifying custom and generated code to develop your web applications. You work within a workspace, which is your own private copy of a remote Git branch. When you're ready to start development work, you open an existing workspace or create a new one based on a clone of the remote branch you want to work on. Typically, a new branch would be created for the development work or you would join an existing branch. 05:38 Nikita: What's a workspace, Joe? Is it like my personal laptop and drive? Joe: A workspace is your own private code area that stores any changes you make on the Oracle servers, so your code changes are never lost—even when working in a browser-based, network-based tool. A good analogy is, say I was working at home on my own machine. And I would make a copy of a remote GIT branch and then copy that code down to my local machine, make my code changes, do my testing, etc. and then commit my work—create a logical save point periodically—and then when I'm ready, I'd push that code up into the remote branch so it can be reviewed and merged with the main branch. My local machine is my workspace. However, since this code is hosted up by Oracle on our servers, and the code and the IDE are all running in your browser, the workspace is a simulation of a local work area on your own computer. So, the workspace is a hosted allocation of resources for you that's private. Other people can't see what's going on in your workspace. Your workspace has a clone of the remote branch that you're working with and the changes you make are isolated to your cloned code in your workspace. 06:41 Lois: Ok… the code is actually hosted on the server, so each time you make a change in the browser, the change is written back to the server? Is it possible that you might lose your edits if there's a networking interruption? Joe: I want to emphasize that while I started out not personally being a fan of web-based integrated development environments, I have been using these tools for over three years and in all that time, while I have lost a connection at times—networks are still subject to interruptions—I've never lost any changes that I've made. Ever. 07:11 Nikita: Is there a way to save where you are in your work so that you could go back to it later if you need to? Joe: Yes, Niki, you're asking about commits and savepoints, like in a Git repository or a Git branch. When you reach a logical stopping or development point in your work, you would create a commit or a savepoint. And when you're ready, you would push that committed code in your workspace up to the remote branch where it can be reviewed and then eventually merged, usually with the main Git branch, and then continuous integration/continuous package and deployment build jobs are run. Now, I'm only giving you a high-level overview, but we cover all this and much more in detail with hands-on practices in our Visual Builder developer courses. Right now, I'm just trying to give you a sense of how these different tools are used. 07:52 Lois: Yeah, that makes sense, Joe. It's a lot to cover in a short amount of time. Now, we've discussed the Visual Builder Designer IDE and workspace. But can you tell us more about Visual Builder Cloud Service and stand-alone environments? What are they used for? What features do they provide? Are they the same or different things? Joe: Visual Builder Cloud Service or Visual Builder Stand-Alone, as it's sometimes called, is a service that Oracle hosts on its servers. It provides hosting for the deployed web application source code as well as database tables for business objects that we build and maintain to store your customer data. This data can come from XLS or CSV files, or even your own Oracle database customer table data. A custom REST proxy makes calls to external third-party REST services on your behalf and supports several popular authentication mechanisms. There is also integration with the Identity Cloud Service (IDCS) to manage users and their access to your web apps. Visual Builder Cloud Service is a for-fee product. You pay licensing fees for how much you use because it's a hosted service. Visual Builder Studio, the project asset management aspect I discussed earlier, is free with a standard OCI license. Now, keep in mind these are separate from something like Visual Builder Design Time and the service that's running in Fusion application environments. What I'm talking about now is creating stand-alone, bespoke, custom visual applications. These are applications that are built using industry-standard HTML5, CSS3, JavaScript, and JSON for metadata and are hosted on the Oracle servers.  09:30 Are you looking for practical use cases to help you plan and apply configurations that solve real-world challenges?  With the new Applied Learning courses for Cloud Applications, you'll be able to practically apply the concepts learned in our implementation courses and work through case studies featuring key decisions and configurations encountered during a typical Oracle Cloud Applications implementation. Applied learning scenarios are currently available for General Ledger, Payables, Receivables, Accounting Hub, Global Human Resources, Talent Management, Inventory, and Procurement, with many more to come!  Visit mylearn.oracle.com to get started. 10:12 Nikita: Welcome back! Joe, you said Visual Builder Cloud Service or Stand-Alone is a for-fee service. Is there a way I can learn about using Visual Builder Designer to build bespoke visual applications without a fee? Joe: Yes. Actually, we've added an option where you can run the Visual Builder Designer and learn how to create web apps without using the app hosting or the business object database that stores your customer data or the REST proxy for authentication or the Identity Cloud Service. So you don't get those features, but you can still learn the fundamentals of developing with Visual Builder Designer. You can call third-party APIs, you can download the source, and run it locally, for example, in a Tomcat server. This is a great and free way to learn how to develop with the Visual Builder Designer. 10:55 Lois: Joe, I want to know more about the kinds of apps you can build in VB Designer and the capabilities that VB Cloud Service provides. Joe: Visual Builder Designer allows you to build custom, bespoke web applications made of interactive webpages; flows of pages for navigation; events that respond when things happen in the app, for example, GUI events like a button is clicked or values are entered into a text field; variables to store the state of the application and the ability to make REST calls, all from your browser. These applications have full access to the Oracle Fusion Applications APIs, given that you have the right security permissions and credentials of course. They can access your customer business data as business objects in our internally hosted database tables or your own customer database tables. They can access third-party APIs, and all these different data sources can appear in the same visual application, on the same page, at the same time. They use the Identity Cloud Service to identify which users can log in and authenticate against the application. And they all use the new Redwood graphical user interface components and page templates, so they have the same look and feel of all Oracle applications. 12:02 Nikita: But what if you're building or extending Oracle Fusion Applications? Don't things change a little bit? Joe: Good point, Niki. Yes. While you still work within Visual Builder Studio, that doesn't change, VBS maintains your project and all your project-related assets, that is still the same. However, in this case, there is no separate hosted Visual Builder Cloud Service or Stand-Alone instance. In this case, Visual Builder is hosted inside of Fusion apps itself as part of the installation. I won't go into the details of how the architecture works, but the Visual Builder instance that you're running your code against is part of Fusion applications and is included in the architecture as well as the billing. All your code changes are maintained and stored within a single container called an extension. And this extension is a Git repository that is created for you, or you can create it yourself, depending on how you choose to work within Visual Builder Studio. You create an extension to hold the source code changes that provide a customization or configuration. This means making a change to an existing page or a set of pages or even adding new pages and flows to your Oracle Fusion Applications. You use Visual Builder Studio and Visual Builder Designer in a similar way as to how you would use them for bespoke stand-alone visual applications. 13:12 Lois: I'm trying to envision how this workflow is used. How is it different from bespoke VB app development? Or is it different at all? Joe: So, recall that the Visual Builder Designer is effectively the Integrated Development Environment, the IDE, where you make your code changes by working with both the raw HTML5, CSS3, and JavaScript code, if need be, or the Page Designer for drag and drop, and setting properties and then Live mode to test your work. You use a version of VB Designer to view and modify your customizations, and the code is stored in a Git repository called an extension. So, in that sense, the work of developing pages and flows and such is the same. You still start by creating or, more typically, joining a project and then either create a new extension from scratch or base it on an existing application, or go directly to the page that you want to edit and, on that page, select from your profile menu to edit in Visual Builder Studio. Now, this is a different lifecycle path from bespoke visual applications. With them, you're not extending an app or modifying individual pages in the same way. You get a choice of which project you want to add your extension to when you're working with Fusion apps and potentially which repository to store your customizations, unless one already exists and then it's assigned automatically to hold your code changes. So you make your changes and edits to the portions of the application that have been opened for extensibility by the development team. This is another difference. Once you make your code changes, the workflow is pretty much the same as for a bespoke visual application: do your development work, commit your changes, push your changes to the remote branch. And then typically, your code is reviewed and if the code passes and is approved, it's merged with the main branch. Then, the package and deploy jobs run to deploy the main code to the production environment or whatever environment you're targeting. And once the package and deploy jobs complete, the code base is updated and users who log in see the changes that you've made. 15:03 Nikita: You mentioned creating apps that combine data from Fusion cloud, applications, customer data, and third-party APIs into one page. Why is it necessary? Why can't you just do all that in one Fusion Applications extension? Joe: When you create extensions, you are working within the Oracle Fusion Applications ecosystem, that's what they actually call it, which includes a defined a set of users who have been predefined and are, therefore, known to Fusion Applications. So, if you're a user and you're not part of that Fusion Apps ecosystem, you can't access the pages. Period. That's how Fusion Apps works to maintain its security and integrity. Secondly, you're working pretty much solely with the Fusion Applications APIs data sources coming directly from Fusion Applications, which are also available to you when you're creating bespoke visual apps. When you're working with Fusion Applications in Visual Builder, you don't have access to these business objects that give you access to your own customer database data through Visual Builder-generated REST APIs. Business objects are available only to bespoke visual applications in the hosted VB Cloud Service instance. So, your data sources are restricted to the Oracle Fusion Applications APIs and some third-party APIs that work within a narrow set of authentication mechanisms currently, although there are plans to expand this in the future. A mashup app that allows you now to access all these data sources while creating apps that leverage the Redwood Component System, so they look and work like Fusion Apps. They're a highly popular option for our partners and customers. 16:28 Lois: So, to review, we have two different approaches. You can create a visual application using the for-fee, hosted Visual Builder Cloud Service/Stand-Alone or the one that comes with Oracle Integration Cloud, or you can use the extension architecture for Fusion applications, where you use the designer and create your extensions, and the code is delivered and deployed to Fusion applications code. You haven't talked about JET yet though, Joe. What is that? Joe: So, JET is an abbreviation. It stands for Oracle JavaScript Extension Toolkit and JET is the underlying technology that makes Visual Builder, visual applications, and Visual Builder Extensions for Fusion Applications possible. Oracle JavaScript Extension Toolkit provides a module-based, open-source toolkit that leverages modern JavaScript, TypeScript, CSS3, and HTML5 to deliver web applications. It's targeted at JavaScript developers working on client-side applications. It is not for backend development.  It's a collection of popular, powerful JavaScript libraries and a set of Oracle-contributed JavaScript libraries that make it very simple, easy, and efficient to build front-end applications that can consume and interact with Oracle products and services, especially Oracle Cloud services, but of course it can work with any type of third-party API. 17:44 Nikita: How are JET applications architected, Joe, and how does that relate to Visual Builder pages and flows? Joe: The architecture of JET applications is what's called a single page architecture. We've all seen these. These are where you have a single webpage—think of your index page that provides the header and footer for your webpage—and then the middle portion or the middle content of the page, represented by modules, allow you to navigate from one page or module to another. It also provides the data mapping so that the data elements in the variables and the state of the application, as well as the graphical user interface elements that provide the fields and functionality for the interface for the application, these are all maintained on the client side. If you're working in pure JET, then you work with these modules at the raw JavaScript code level. And there are a lot of JavaScript developers who want to work like this and create their custom applications from the code up, so to speak. However, it also provides the basis for Visual Builder visual applications and Fusion Apps visual extensions in Visual Builder. 18:41 Lois: How does JET support VB Apps? You didn't talk much about having to write a bunch of JavaScript and HTML5, so I got the impression that this is all done for you by VB Designer? Joe: Visual Builder applications are composed of HTML5, CSS3, and JavaScript code that is usually generated by the developer when she drags and drops components on to the page designer canvas or sets properties or creates action chains to respond to events. But there's also a lot of JavaScript object notation (JSON) metadata created at the time that describes the pages, the flows, the navigation, the REST services, the variables, their data types, and other assets needed for the app to function. This JSON metadata is translated at runtime using a large JavaScript extension toolkit library called the Visual Builder Runtime that runs in the browser and real time translates the metadata and other assets in the Visual Builder source code into JET code and assets, which are actually executed at runtime. And it's very quick, very fast, very efficient, and provides a layer of abstraction between the raw JET code and the Visual Builder architecture of pages, flows, action chains for executing code and events to handle things that occur in the user interface, including saving the state in variables that are mapped to GUI components. For example, if you have an Input text component, you need to have a variable to store the value that was entered into that Input text component between page refreshes. The data can move from the Input text component to the variable, and from the variable to that Input text component if it's changed programmatically, for example. So, JET manages binding these data values to variables and the UI components on the page. So, a change to a variable value or a change to the contents of the component causes the others to change automatically. Now, this is only a small part of what JET and the frameworks and libraries it uses do for the applications. JET also provides more complex GUI components like lists and tables, and selection lists, and check boxes, and all the sorts of things you would expect in a modern GUI application. 20:37 Nikita: You mentioned a layer of abstraction between Visual Builder Studio Designer and JET. What's the benefit of working in Visual Builder Designer versus JET itself? Joe: The benefit of Visual Builder is that you work at a higher level of abstraction than having to get down into the more detailed levels of deep JavaScript code, working with modules, data mappings, HTML code, single page architecture navigation, and the related functionalities. You can work at a higher level, a graphical level, where you can drag and drop things onto a design canvas and set properties. The VB architecture insulates you from the more technical bits of JET. Now, this frees the developer to concentrate more on application and page design, implementing logic and business rules, and creating a pleasing workflow and look and feel for the user. This keeps them from having to get caught up in the details of getting this working at the code level. Now if needed, you can write custom JavaScript, HTML5, and CSS3 code, though much less than in a JET app, and all that is part of the VB application source, which becomes part of the code used by JET to execute the application itself. And yet it all works seamlessly together. 21:38 Lois: Joe, I know we have courses in JavaScript, HTML, and CSS. But does a developer getting ready to work in Visual Builder Designer have to go take those courses first or can they start working in VB Designer right away? Joe: Yeah, that question does often comes up: Do I need to learn JET to work with Visual Builder? No, you don't. That's all taken care for you in the products themselves. I don't really think it helps that much to learn JET if you are going to be a VB developer. In some ways, it could even be a bit distracting since some of things you learn to do in JET, you would have to unlearn or not do so much because of what VB does it for you. The things you would have to do manually in code in JET are done for you. This is why we call VB a low code development tool. I mean, you certainly can if you want to, but I would spend more time learning about the different GUI components, page templates, the Visual Builder architecture — events, action chains, and the data provider variables and types. Now, I know JET myself. I started with that before learning Visual Builder, but I use very little of my JET knowledge as a VB developer. Visual Builder Designer provides a nice, abstracted, clean layer of modern visual development on top of JET, while leveraging the power and flexibility of JET and keeping the lower-level details out of my way. 22:49 Nikita: Joe, where can I go to get started with Visual Builder? Joe: Well, for more information, I recommend you take a look at our Develop Fusion Applications course if you're working with Fusion Applications and Visual Builder Studio. The other course is Develop Visual Applications with Visual Builder Studio and that's if you're creating stand-alone bespoke applications. Both these courses are free. We also have a comprehensive course that covers JavaScript, HTML5, and CSS3, and while it's not required that you take that to be successful, it can be helpful down the road. I would also say that some basic knowledge of HTML5, CSS3, and JavaScript will certainly support you and serve you well when working with Visual Builder. You learn more as you go along and you find that you need to create more sophisticated applications. I would also mention that a lot of the look and feel of the applications in Visual Builder visual applications and Fusion apps extensions and customizations come through JET components, JET styles, and JET variables, and CSS variables, so that's something that you would want to pursue at some point. There's a JET cookbook out there. You can search for Oracle JET and look for the JET cookbook and that's a good introduction to all of that. 23:50 Nikita: We hope you enjoyed that conversation. To learn about some of the courses Joe mentioned, visit mylearn.oracle.com to get started. Lois: Before we wrap up, we've got a favor to ask. We've created a short survey to capture your thoughts on the podcast. It'll only take a few minutes of your time. Just click the link in the show notes and share your feedback. We want to make sure we're delivering the best experience possible so don't hesitate to let us know what's on your mind! Thanks for your support. Join us next week for another throwback episode. Until then, this is Lois Houston… Nikita: And Nikita Abraham, signing off! 24:30 That's all for this episode of the Oracle University Podcast. If you enjoyed listening, please click Subscribe to get all the latest episodes. We'd also love it if you would take a moment to rate and review us on your podcast app. See you again on the next episode of the Oracle University Podcast.

Modern Web
Modern Web Podcast S12E28- The Evolution of CSS: From Early Days to Flexbox & Grid with Kevin Powell

Modern Web

Play Episode Listen Later Sep 24, 2024 29:27


In this episode of the Modern Web Podcast, CSS expert Kevin Powell discusses the evolution of CSS, from the early days of CSS3 to the rapid advancements with Flexbox, Grid, and the latest innovations. Kevin explains how CSS is making strides to integrate features that previously required JavaScript, like scroll-driven animations and popovers, simplifying development and improving performance. He also touches on the importance of understanding the fundamentals of CSS, debugging techniques, and the future of tools like Tailwind and Sass.  Chapters 0:00 - Introduction and Technical Setup Issues 01:05 - Guest Introduction: Kevin Powell 02:00 - Kevin's Journey into CSS and Content Creation 03:21 - Evolution of CSS: From CSS3 to Modern Features 05:46 - The Role of JavaScript in CSS and New Features 08:08 - Popovers, Anchor Positioning, and Progressive Enhancement in CSS 10:26 - Discussion on SAS, Tailwind, and CSS Tools 12:35 - Challenges with Tailwind and Over-Componentization 14:57 - The Importance of Learning Core CSS Principles 16:56 - The "CSS is Hard" Memes and Overcoming CSS Frustration 19:12 - Formatting Contexts and Advanced CSS Concepts 21:31 - Opportunities for Junior Developers to Master CSS 23:54 - Browser Discrepancies and the Future of Web Standards 26:14 - Refactoring CSS for Performance and Best Practices 27:50 - Favorite CSS Resources and Conferences 28:26 - Imposter Syndrome and Kevin's Speaking Journey 29:55 - Closing Remarks and Where to Find Kevin Powell Online Follow  Kevin Powell on Social Media Twitter: https://x.com/KevinJPowell Github: https://github.com/kevin-powell YouTube: https://www.youtube.com/kevinpowell

SEOPRESSO PODCAST
SEO Audits mit René Dhemant Ep. 162

SEOPRESSO PODCAST

Play Episode Listen Later Jul 17, 2024 50:29


Zusammenfassung In dieser Episode des SEOPRESSO Podcast interviewt Björn Darko, René Dhemant über SEO-Audits. Sie diskutieren häufige Missverständnisse über SEO-Audits und die Bedeutung, sich auf spezifische Probleme zu konzentrieren, anstatt lange Audit-Berichte zu erstellen. Sie beleuchten auch die Rolle interner Links bei SEO-Audits und die Vorteile der Verwendung von CSS3 gegenüber JavaScript. Zusätzlich gehen sie auf die Konsolidierung von Inhalten und den möglichen Einfluss von KI-Übersichten auf SEO-Strategien ein. Erkenntnisse SEO-Audits sollten sich auf spezifische Probleme konzentrieren, anstatt lange Berichte zu erstellen. Interne Links spielen eine entscheidende Rolle bei SEO-Audits und sollten mit relevantem und emotional ansprechendem Text verankert werden. CSS3 bietet Vorteile gegenüber JavaScript in Bezug auf Zugänglichkeit und Leistung. Die Konsolidierung von Inhalten ist wichtig, um Relevanz sicherzustellen und Content-Überladung zu vermeiden. Der mögliche Einfluss von KI-Übersichten auf SEO-Strategien ist ungewiss, aber eine gut durchgeführte SEO-Strategie kann sich an neue Entwicklungen anpassen. Kapitel 00:00 Einführung in SEO-Audits 16:39 Die Kraft interner Links 27:20 CSS3 vs JavaScript 38:48 Konsolidierung von Inhalten 43:00 Umgang mit KI-Übersichten

Webflail
Ep 95 | 3 takeaways from a complex migration nightmare | with Julieta Rubio

Webflail

Play Episode Listen Later Jun 25, 2024 49:36


Today, my guest is Julieta Rubio. She's a frontend developer based in Argentina, and combines her love for technology with her passion for art and design.She's got an interesting background - she was a tour guide for a wine company in mendoza before retraining as a Growth Engineer for Embeddables building websites and embeddable tools using Webflow, Javascript, HTML5 and CSS3.While she was working at Embeddables, she was learning, growing and developing and starting to get some freelance work.Now get this, after 4 years at Embeddables, she's just quit to strike out on her own as a freelancer.She recently obtained her Webflow's Partnership certification and now she's ready to rumble

Smart Software with SmartLogic
"Printing is Ugly" with Joel Meador and Charles Suggs

Smart Software with SmartLogic

Play Episode Listen Later May 2, 2024 47:03


In Episode 7 of Elixir Wizards Office Hours, SmartLogic Engineers Joel Meador and Charles Suggs join host Owen Bickford to tackle the often tricky task of adding print functionality to web applications. They discuss their recent experiences with browser-based printing and the hurdles of cross-browser compatibility, consistent styling, and dynamic content generation, such as headers and footers. The trio delves into the limitations of current printing capabilities in browsers, the potential of server-side PDF generation, and the necessity of juggling separate templates for web and print. They also consider accessibility for printed content and the demands of delivering high-fidelity, pixel-perfect prints. Throughout the episode, Joel, Charles, and Owen offer up practical advice for developers grappling with similar issues, emphasizing the need for thorough research, proactive problem-solving, and the exploration of both in-browser and external PDF generation solutions. Key topics discussed in this episode: Real-world experiences with software project printing Navigating the limitations of browser-based printing Ensuring cross-browser compatibility and consistent layout Generating dynamic content for print versions Exploring server-side PDF generation and its advantages Balancing design consistency across web and print formats Addressing accessibility in printed outputs Overcoming the unique challenges of high-accuracy printing requirements Practical tips for researching and implementing printing solutions Handling complex data presentations like tables in print Evaluating the pros and cons of different printing APIs Understanding the distinction between web viewing and printing needs Innovating with mixed content in PDF generation Learning from past printing challenges and planning for future improvements Links mentioned: CSS3 https://css3.com/ WeasyPrint https://github.com/Kozea/WeasyPrint WebKit https://webkit.org/ Pdf.js https://github.com/mozilla/pdf.js YesLogic Prince 15 https://www.princexml.com/ PrintXML https://gist.github.com/craiga/2934093 PDF/A https://en.wikipedia.org/wiki/PDF/A The PDF/A Family of Archiving Standards https://www.pdflib.com/pdf-knowledge-base/pdfa/the-pdfa-standards/ PDF/X https://en.wikipedia.org/wiki/PDF/X Microsoft Encarta https://en.wikipedia.org/wiki/Encarta Special Guests: Charles Suggs and Joel Meador.

Oracle University Podcast
Using ORDS to Make Your ADB Data Available in VBS

Oracle University Podcast

Play Episode Listen Later Apr 16, 2024 20:59


Visual Builder Studio requires its data sources to connect to the webpage it produces using REST calls. Therefore, the data source has to provide a REST interface. A simple, easy, secure, and free way to do that is with Oracle REST Data Services (ORDS).   In this episode, hosts Lois Houston and Nikita Abraham chat with Senior Principal OCI Instructor Joe Greenwald about what ORDS can do, how to easily set it up, how to work with it, and how to use it within Visual Builder Studio.   Develop Fusion Applications Using Visual Builder Studio: https://mylearn.oracle.com/ou/course/develop-fusion-applications-using-visual-builder-studio/122614/   Build Visual Applications Using Visual Builder Studio: https://mylearn.oracle.com/ou/course/build-visual-applications-using-oracle-visual-builder-studio/110035/   Oracle University Learning Community: https://education.oracle.com/ou-community   LinkedIn: https://www.linkedin.com/showcase/oracle-university/   X (formerly Twitter): https://twitter.com/Oracle_Edu   Special thanks to Arijit Ghosh, David Wright, and the OU Studio Team for helping us create this episode.   --------------------------------------------------------   Episode Transcript:   00:00 Welcome to the Oracle University Podcast, the first stop on your cloud journey. During this series of informative podcasts, we'll bring you foundational training on the most popular Oracle technologies. Let's get started. 00:26   Nikita: Hello and welcome to the Oracle University Podcast! I'm Nikita Abraham, Principal Technical Editor with Oracle University, and with me is Lois Houston, Director of Innovation Programs.   Lois: Hi there! In our last episode, we took a look at model-based development tools, their start as CASE tools, what they morphed into, and how they're currently used in Oracle software development. We're wrapping up the season with this episode today, which will be about how to access Oracle database data through a REST interface created and managed by Oracle REST Data Services, or ORDS, and how to access this data in Visual Builder Studio.   01:03 Nikita: Being able to access Oracle database data through a REST interface over the web is highly useful, but sometimes it can be complicated to create that interface in a programming language. Joe Greenwald, our Senior OCI Learning Solutions Architect and Principal Instructor is back with us one last time this season to tell us more about ORDS, and how it makes it much simpler and easier for us to REST-enable our database for use in tools like Visual Builder Studio. Hi Joe! Tell us a little about what Visual Builder Studio is and why we must REST-enable our data for VBS to be able to use it.   01:40 Joe: Hi Niki, hi Lois! Ok, so, Visual Builder Studio is Oracle's low-code software development and project asset management product for creating graphical webpage front-ends for web applications. It's the tool of choice for designing, building, and implementing all of Oracle Fusion Cloud Applications and is being used by literally tens of thousands of engineers at Oracle now to bring the next generation of Fusion Applications to our customers and the market. It's based on standards like HTML5, CSS3, and JavaScript. It's highly performant and combined with the Redwood graphical design system and components that we talked about previously, delivers a world-class experience for users. One thing about Visual Builder Studio though: it only works with data sources that have a REST interface. This is unusual. I like to think I've worked with every software development tool that Oracle's created since I joined Oracle in 1992, including some unreleased ones, and all of them allowed you to talk to the database directly. This is the first time that we've released a tool that I know of where we don't do that. Now at first, I was a little put off and wondered how's it going to do this and how much work I would have to do to create a REST interface for some simple tables in the Oracle database. Like, here's one more thing I must do just to create a page that displays data from the database. As it turns out, it's a wise design decision on the part of the designers. It simplifies the data access parts of Visual Builder Studio and makes the data access model common across the different data sources. And, thanks to ORDS, REST-enabling data in Oracle database couldn't be easier! 03:13 Lois: That's cool. We don't want to focus too much on Visual Builder Studio today. We have free courses that teach you how to create service connections to REST services to access the data and all of that. What we actually want to talk with you about is working with Oracle REST Data Service. How easy is it to work with Oracle REST Data Service to add REST support, what we call REST-enable your Oracle Database, and why it is important?  Nikita: Yeah, I could use a bit of a refresher on REST myself. Could you describe what REST is, how it works for both the client and server, and what ORDS is doing for us? 03:50 Joe: Sure. So, REST is a way to make a request to a server for a resource using the HTTP web protocol from a client, like your browser, to a web server, which hands off the request to code that handles the request and sends the response back to your client/browser, which then uses it, displays or whatever. So, you can see we have two parts. We have the client, which makes the request, and the server, which handles the request and figures out what the response should be (static, dynamic, or a combination of both) and sends that back to the client. For example, a visual application built with Visual Builder Studio acts as a client making the request, just as your browser makes a request. It's really just a web app built with HTML5, CSS3, and JavaScript, and the JavaScript makes a request to the server on your behalf. Let's say you wish to access your student record within Oracle University. And now, this is a contrived example and it won't actually work, but it's good for illustrative purposes.  Oracle University, let's say, publishes the URL for your student data as something like https://oracle.com/oracleuniversity/student/{studentnumber} you put in some kind of number, like the number 23, and if you enter that into your browser address bar and press Enter, then your browser, on your behalf, sends a GET request—what we call an HTTP GET operation—to the web server. When the web server receives the request, it will somehow read the record for student 23, format a response, and send the response back to the client. 05:16 Joe: That's a GET or a READ request. Now, what if you are creating a new student? Well, you fill out a form on the webpage and you click the Submit button. And it sends a POST request, which tells the server to create a new record in its storage mechanism, most likely a database of some form. If you do an update, you change certain fields on the webpage and click the Submit button and this time, an update request is made. If you wanted to delete the record, you'd find the record you want to delete and press the Submit button, and this time a delete request is made. This is the general idea, though there are different ways to do creates and updates that are really irrelevant here. Those requests to the server I mentioned are called HTTP operations and there are several of them. But the four most popular are GET to retrieve data, POST to create a new record on the server, PUT to update a record, and DELETE to remove a record.  On the client side, we just need to specify where the record is that we want to retrieve—that's the oracle.com/oracleuniversity/student part of the URL and an identifying value, which makes it unique. So, when I do a GET request on customer or student 23, I'm going to get back a representation of the student data that exists in the student database for a student with ID 23. There should not be more than one of these or that would indicate an error. The response typically comes back in a format of a key:value pair called JavaScript Object Notation (JSON), but it could also be in a Text format, HTML, Excel, PDF, or whatever the server implements and is requested.  06:42 Nikita: OK great! That's on the client side making the request. But what's happening on the server side? Do I need to worry about that if I'm the client? Joe: No, that's the great part. As a client, I don't know, and frankly I'd rather not know what the server's doing or how it does it. I don't want to be dependent on the server implementation at all. I simply want to make a request and the server handles the request and sends a response. Now, just a word about what's on the server. Some data on the server is static like a PDF file or an image or an audio file, for example, and sometimes you'll see that in the URL the file type as an extension, like .pdf, and you get back a PDF file that your browser displays or that you can download to your machine. But with dynamic data, like student data coming out of a database based on the student number, a query is made against a database. The database responds with the data, and that's formatted into some type of data format—typically JSON—and sent back to the client, which then does something with it, like displaying it on a webpage. So, as we can see, the client is fairly simple in the sense that it makes a request, receives the data response, and displays it or does something with it. And that's one of the reasons why the choice to use REST and only REST in Visual Builder Studio is such a wise one. 07:54 Joe: Regardless of the different data sources or the different server implementations or how the data is stored on the server, or any of that, Visual Builder Studio doesn't know and doesn't care. What it sees is the REST request it sends and the response it gets back and then it deals with the response data regardless of how it's implemented on the server. I mentioned the server sends back a representation of the resource, in this case, for example, the student record. That's really where the abbreviation REST comes from: REpresentational State Transformation, which is a long way of saying, bring me back a representation of the resource—the thing—that I'm requesting. Now, of course, the server is a little more complex. On the server side, we would need software that is going to take the request from the web server using some programming language like Java, C#, C++, Python, or maybe even JavaScript in a Node.js application. You have a program that receives a request from the web server, executes the request (typically by connecting to the database if it's a database call), makes the request, receives a data response from the database, formats that into some form, and passes it back to the web server, which then sends it back to the client that requested it. 09:01 Lois: Ok… I think I see. I'm guessing that ORDS gets involved somehow between the client and the server. Joe: Yes, exactly. We can see that the implementation on the server side is where the complexity is. For example, if I implement a student management service in Java, I have to write a bunch of Java code, a lot of which is boilerplate, housekeeping, boring code. For simple database access, it's tedious to have to do this over and over, and if the database changes, it can be even more tedious to maintain that code to handle simple to moderately complex requests. Writing and maintaining software code to just read and write data from the database to pass to a client for a web request is cool the very first time you do it and then gets boring very quickly and it's prone to errors because it's so manual. So, it would be nice if we had a piece of software that could handle the tedious, boring, manual bits of this service. It would receive the request that our client, the browser or Visual Builder Studio for example, is sending, take that request, execute the request against the database for us, receive the response from the database, and then format it for us and send it back to us, without a developer having to write custom code on the server side. And that is what Oracle REST Data Services (ORDS) does. 10:13 Joe: ORDS contains a lightweight web server based on the Jetty web server that receives the request from the client, like a browser or Visual Builder Studio or whatever, in the form of a URL, parses the request, generates a query or an update, or an insert or delete, depending on the nature of the HTTP operation sent or requested, and sends it to the database on our behalf. The database executes the request from ORDS, sends back a response to ORDS, and ORDS formats the response for us in the JSON and sends it back to our client. In nutshell, that's it. 10:45 Lois: So ORDS does all that? And it's free? How does it work? Uhm, remember I'm not as technical as you are. Joe: Of course. ORDS is free. It's a lightweight, highly performant Java app that can run in many different modes, from stand-alone on a server to embedded in an application server like WebLogic, to running in the Oracle Cloud with the Oracle Autonomous Database (ADB). When you REST-enable your tables, your web requests are intercepted by ORDS running in ADB. It's optimized for the purpose of handling web requests, connecting to the Oracle database, and sending back formatted responses as JSON. It can also handle more complex requests as well in the form of queries with special parameters.  So, you can see what ORDS does for us. It handles the request coming from the client, which could be a browser or Visual Builder Studio or APEX or whatever client—pretty much any client today can make an HTTP call—it handles the call, parses the request, makes the request to the server on our behalf, and of course security is built-in and all of that, and so we don't get to data we're not supposed to see. It receives a response from the database, formats it into the JSON key:value pair format, and sends it back to our client. 12:00 Are you planning to become an Oracle Certified Professional this year? Whether you're a seasoned IT pro or just starting your career, getting certified can give you a significant boost. And don't worry, we've got your back. Join us at one of our cert prep live events in the Oracle University Learning Community. You'll get insider tips from seasoned experts and learn from other professionals' experiences. Plus, once you've earned your certification, you'll become part of our exclusive forum for Oracle-certified users. So, what are you waiting for? Head over to mylearn.oracle.com and create an account to jump-start your journey towards certification today! 12:43 Nikita: Welcome back. So, Joe, then the next question is, what do we do to REST-enable our database? Does that only work for ADB? Joe: This can be done in a couple of different ways. It can be done implicitly, called AutoREST, or explicitly. AutoREST is very convenient. In the case of an ADB database, you log in as the user who owns the structures, select your tables, views, packages, procedures, or functions that you want to REST-enable. Choose REST and then Enable from the menu for the table, view, stored package, procedure, or function and a URL is generated using your POST, GET, PUT, and DELETE for the standard database create, retrieve, update, delete operations. And it's not just for ADB. You can do this in SQL Developer Desktop as well. Then, when you invoke the URL for the service, if you include just the name of the resource, like students, you get the entire collection back. If you add an ID at the end of the URL, like student/23, you get back the data for that specific student back, or whatever the structure is. You can add more complex filter parameters as well. And that's it! Very easy. And, of course, you can apply appropriate security and ORDS enforces it.  But you also can create custom code to handle more complex requests.  13:53 Lois: Joe, what if there's custom logic or processing that you want to do when the REST call comes in and you need to write custom code to handle it? Joe: Remember, I said on the server side, we use custom code to retrieve data as well as apply business rules, validations, edits, whatever needs to be done to appropriately handle the REST call. So it's a great question, Lois. When using ORDS, you can write a REST service handler in PL/SQL and SQL, just like if you were writing a stored procedure or a function or a package in the database, which is exactly what you're doing. ORDS exposes your PL/SQL code wrapped in a REST interface with, of course, the necessary security. And since it's PL/SQL, it runs in the database, so it's highly performant, fast, and uses code you're likely already familiar with or maybe already have. Your REST service handler can call existing PL/SQL packages, procedures, and functions. For example, if you created packages with stored procedures and functions that wrap access to your database tables and views, you can REST-enable those stored procedures, functions, and packages, and call them over the web. And maintain the package access you already created. I do want to point out that the recommended way to access your tables and views is through packages, stored procedures, and functions. While you can expose your tables and views directly to REST, should you really do that? In practice, it's generally not a recommended way to do it. Do you want to expose your data in tables and views directly through a REST interface? Ideally, no, access should be through a PL/SQL wrapper, same as it's—hopefully—done today for your client-server applications. 15:26 Nikita: I understand it's easy to generate a simple REST interface for tables and so on to do basic create, retrieve, update, and delete operations. But what's required to create custom code to handle more complex business operations?  Joe: The process to create your own custom handlers is a little bit more involved as you would expect. It uses your skills as a PL/SQL programmer, while hiding the details of the REST implementation to let you focus on the logic and processing. Mechanically, you'd begin by creating a module that has a URL associated with it. So, for example, you would create a URL like https://oracle.com/oracleuniversity/studentregistry. Then, within that module, you create a template that names the specific resource—or thing—that you want to work with. For example, student, or course, or registration. 16:15 Joe: Then you create the handler for it. You have a handler to do the read, another handler for the insert, another handler for an update, another handler for a delete, and even possibly multiple handlers for more complex APIs based on your needs and the parameters being passed in.  You can create complex URLs with multiple parameters for passing needed information into the PL/SQL procedure, which is going to do the actual programming work for you. There are predefined implicit variables about the message itself that you can use, as well as all the parameters from the URL itself. Now, this is all done in a nice developer interface on the web if you're using SQL Developer Web with ADB or in SQL Developer for the desktop. Either one can do this because under the covers, ORDS is generating and executing the PL/SQL calls necessary to create and expose your web services. It's very easy to work with and test immediately. 17:06 Lois: Joe, how much REST knowledge do I need to use ORDS properly to create REST services? Joe: Well, you should have some basic knowledge of REST, HTTP operations, request and response messages, and JSON, since this is the data format ORDS produces. The developer interface is really not designed for somebody who knows nothing about REST at all; it's not designed to take them step-by-step through everything that needs to be done. It's not wizard-based. Rather, it's an efficient, minimal interface that can be used quickly and easily by someone who has at least some experience building REST services. But, if you have a little knowledge and you understand how REST works and how a REST interface is used and you understand PL/SQL and SQL, you could do quite a lot with only minimal knowledge. It's easy to get started and it's fun to see your data start appearing in webpages formatted for you, with very little or even no code at all as in the case of AutoREST enabling. And ORDS is free and comes as part of the database in ADB as SQL Developer Web and SQL Developer Desktop, both of which are free as well. And SQL Developer Web and SQL Developer Desktop both have a data modeler built into them so you can model your database tables, columns, and keys, and generate and execute the code necessary to create the structures immediately, and they can create graphical models of your database to aid in understanding and communication. Now, while this is not required, modeling your database structures before you build them is most definitely a best practice. 18:29 Nikita: Ok, so now that I have my REST-enabled database tables and all, how do I use them in VBS Designer? Joe: In Visual Builder Studio Designer, you define a service connection by its endpoint and paste the URL for the REST-enabled resource into the wizard, and it generates everything for you by introspecting the REST service. You can test it, see the data shape of the response, and see data returned. You access your REST-enabled data from your database from Visual Builder Studio Designer and use it to populate lists, tables, and forms using the quick start wizards built in. I'll also mention that ORDS provides other capabilities in addition to handling REST calls for the database tables and views. It also exposes over 500 different endpoints for managing your Oracle Database, things like Pluggable Database Management (PDBs), Data Pump, Data Dictionary, Performance, and Monitoring. It's very easy to use and get started with. A great place to start is to create a free, autonomous database in Oracle Cloud, start it up, and then access the database actions. You can start creating tables, columns, and keys, and loading data, or you can load your own scripts, if you've got them, to produce the tables and columns and load them. You can upload the script and run it and it will create your tables and other needed structures. You can then REST-enable them by selecting simple menu options. It's a lot of fun and easy to get started with. 19:47 Lois: So much good stuff today. Thank you, Joe, for being with us today and in the past few weeks and sharing your knowledge with us. Nikita: Yeah, it's been so nice to have you around. Joe: Thank you both! It's been great being here with you. 19:59 Lois: And remember, our Visual Builder courses, Develop Visual Applications with VBS and Develop Fusion Apps with VBS, both show you how to work with a third-party REST service. And our data modeling and design course teaches the fundamentals of data modeling. You can access all these of courses, for free, on mylearn.oracle.com. Join us next week for another episode of the Oracle University Podcast. Until then, I'm Lois Houston… Nikita: And Nikita Abraham signing off! 20:30 That's all for this episode of the Oracle University Podcast. If you enjoyed listening, please click Subscribe to get all the latest episodes. We'd also love it if you would take a moment to rate and review us on your podcast app. See you again on the next episode of the Oracle University Podcast.

Oracle University Podcast
Developing Redwood Applications

Oracle University Podcast

Play Episode Listen Later Apr 2, 2024 21:13


Redwood is a state-of-the-art graphical interface that defines the look and feel of the new Oracle Cloud Redwood Applications.  In this episode, hosts Lois Houston and Nikita Abraham, along with Senior Principal OCI Instructor Joe Greenwald, take a closer look at the intent behind the design and development aspects of the new Redwood experience. They also explore Redwood page templates and components.  Developing Redwood Applications with Visual Builder: https://mylearn.oracle.com/ou/learning-path/developing-redwood-applications-with-visual-builder/112791 Oracle University Learning Community: https://education.oracle.com/ou-community LinkedIn: https://www.linkedin.com/showcase/oracle-university/ X (formerly Twitter): https://twitter.com/Oracle_Edu Special thanks to Arijit Ghosh, David Wright, and the OU Studio Team for helping us create this episode. -------------------------------------------------------- Episode Transcript: 00:00 Welcome to the Oracle University Podcast, the first stop on your cloud journey. During this series of informative podcasts, we'll bring you foundational training on the most popular Oracle technologies. Let's get started. 00:26 Lois: Hello and welcome to the Oracle University Podcast! I'm Lois Houston, Director of Innovation Programs with Oracle University, and with me is Nikita Abraham, Principal Technical Editor. Nikita: Hi everyone! Last week, we discussed how Visual Builder Studio can be used to extend Oracle Fusion Apps.  Lois: That's right, Niki. In today's episode, we will focus on Oracle's Redwood design system and how it helps us create stunning, world-class enterprise applications and user experiences.  00:56 Nikita: Yeah, Redwood is the basis for all the new Oracle Cloud Applications being re-designed, developed, and delivered. To tell us more, we have Senior OCI Learning Solutions Architect and Principal Instructor Joe Greenwald, who's been working with Oracle software development tools since the early 90s and is responsible for OU's Visual Builder Studio and Redwood course content. Lois: Hi Joe! Thanks for being with us today. 01:21 Joe: Hi Lois. Hi Niki. I am excited to join you on this episode because with the release of 24A Fusion applications, we are encouraging all our customers to adopt the new Redwood design system and components, and take advantage of the world-class look and feel of the new Redwood user experience. Redwood represents a new approach and direction for us at Oracle, and we're excited to have our customers benefit from it. 01:44 Nikita: Joe, you've been working with Oracle user interface development tools and frameworks for a long time. How and why is Redwood different? Joe: I joined Oracle in 1992, and the first Oracle user interface I experienced was Oracle Forms. And that was the character mode. I came from a background of Smalltalk and its amazing, pioneering graphical user interface (GUI) design capabilities. I worked at Apple and I developed my own GUIs for a few years on PCs and Macs. So, Character Mode Forms, what we used to call DMV (Department of Motor Vehicles) screens, was a shock, to say the least. Since then, I've worked with almost every user interface and development platform Oracle has created: Character Mode Forms, GUI Forms, Power Objects, HyperCard on the Macintosh, that was pre-OS X by the way, Sedona, written in native C++ and ActiveX and OLE, which didn't make it to a product but appeared in other things later, ADF Faces, which uses Java to generate HTML pages, and APEX, which uses PL/SQL to generate HTML pages. And I've worked with and wrote training classes for Java Swing, an excellent GUI framework for event-driven desktop and enterprise applications, but it wasn't designed for the web. So, it's with pleasure that I introduce you to the Redwood design system, easily the best effort I've ever seen, from the look and feel of holistic user-goal-centered design philosophy and approach to the cutting-edge WYSIWYG design tools.  03:11 Lois: Joe, is Redwood just another set of styles, colors, and fonts, albeit very nice-looking ones? Joe: The Redwood platform is new for Oracle, and it represents a significant change, not just in the look and feel, colors, fonts, and styles, I mean that too, but it's also a fundamental change in how Oracle is creating, designing, and imagining user interfaces. As you may be aware, all Oracle Cloud Applications are being re-designed, re-engineered, and re-rebuilt from the ground up, with significant changes to both back-end and front-end architectures. The front end is being redesigned, re-developed, and re-created in pure HTML5, CSS3, and JavaScript using Visual Builder Studio and its design-time browser-based Integrated Development Environment. The back end is being re-architected, re-designed, and implemented in a modern microservice architecture for Oracle Cloud using Kubernetes and other modern technologies that improve performance and work better in the cloud than our current legacy architecture. The new Oracle Cloud Applications platform uses Redwood for its design system—its tools, its patterns, its components, and page templates. Redwood is a richer and more productive platform to create solutions while still being cost-effective for Oracle. It encourages a transformation of the fundamental user experience, emphasizing identifying, meeting, and understanding end users' goals and how the applications are used.  04:34 Nikita: Joe, do you think Oracle's user interface has been improved with Redwood? In what ways has the UI changed? Joe: Yes, absolutely. Redwood has changed a lot of things. When I joined Oracle back in the '90s, there was effectively no user interface division or UI team. There was no user interface lab—and that was started in the mid-‘90s—and I was asked to give product usability feedback and participate in UI tests and experiments in those labs. I also helped test the products I was teaching at the time. I actually distinctly remember having to take a week to train users on Oracle's Designer CASE tool product just to prep the participants enough to perform usability testing. I can still hear the UI lab manager shaking her head and saying any product that requires a week of training to do usability testing has usability issues! And if you're like me and you've been around Oracle long enough, you know that Oracle's not always been known for its user interfaces and been known to release products that look like they were designed by two or more different companies. All that has changed with Redwood. With Redwood, there's a new internal design group that oversees the design choices of all development teams that develop products. This includes a design system review and an ongoing audit process to ensure that all the products being released, whether Fusion apps or something else, all look and feel similar so it looks like it's designed by a single company with a single thought in mind. Which it is. 06:00 Joe: There's a deeper, consistent commitment in identifying user needs, understanding how the applications are being used, and how they meet those user needs through things like telemetry: gathering metrics from the actual components and the Redwood system itself to see how the applications are being used, what's working well, and what isn't.  This telemetry is available to us here at Oracle, and we use it to fine tune the applications' usability and purpose.  06:25 Lois: That's really interesting, Joe. So, it's a fundamental change in the way we're doing things. What about the GUI components themselves? Are these more sophisticated than simple GUI components like buttons and text fields? Joe: The graphical components themselves are at a much higher level, more comprehensive, and work better together. And in Redwood, everything is a component. And I'm not just talking about things like input text fields and buttons, though it applies to these more fine-grained components as well. Leveraging Oracle's deep experience in building enterprise applications, we've incorporated that knowledge into creating page templates so that the structure and look and feel of the page is fixed based on our internal design standards. The developer has control over certain portions of it, but the overall look and feel of the page is controlled by Oracle. So there is consistency of look and feel within and across applications. These page templates come with predefined functionalities: headers, titles, properties, and variables to manipulate content and settings, slots for other components to hold like search fields, collections, contextual information, badges, and images, as well as primary and secondary actions, and variables for events and event handling through Visual Builder action chains, which handle the various actions and processing of the request on the page. And all these page templates and components are responsive, meaning they respond to the change in the size of the page and the orientation. So, when you move from a desktop to a handheld mobile device or a tablet, they respond appropriately and consistently to deliver a clean, easy-to-use interface and experience. 07:58 Nikita: You mentioned WYSIWYG design tools and their integration with Visual Builder Studio's integrated development environment. How does Redwood work with Visual Builder Studio? Joe: This is easily one of my most favorite aspects about Redwood and the integration with Visual Builder Studio Designer. The components and page templates are responsive at runtime as well as responsive at design time! In over 30 years of working with Oracle software development products, this is the first development system and integrated development environment I've seen Oracle produce where what you see is what you get at design time. Now, with products such as Designer and JDeveloper ADF Faces and even APEX—all those page-generation types of products—you have to generate the page, deploy it, and only then can you view the final page to see whether it meets the needs of your user interface. For example, with Designer, there were literally hundreds of configuration parameters that you could set to control how forms and reports looked when they were generated —down to how many buttons on a row or how many rows to a page, that sort of thing, all done in text mode. Then you'd generate and run the page to see what the result was and then go back and modify things until you got what you wanted. 09:05 Joe: I remember hearing the product managers for Oracle ADF Faces being asked…well, a customer asked, “What happens if I put this component here and this component here? What will the page look like?” and they'd say, “I don't know. Render the page and let's see.” That's just crazy talk. With Redwood and its integration with Visual Builder Studio Designer, what you see on the page at design time is literally what you get. And if I make the page narrower or I even convert it to a mobile display while in the Designer itself, I immediately see what the page looks like in that new mode. Everything just moves accordingly, at design time. For example, when changing to a mobile UI, everything stacks up nicely; the components adjust to the page size and change right there in the design environment. Again, I can't emphasize enough the simple luxury of being able to see exactly what the user is going to see on my page and having the ability to change the resolution, orientation, and screen size, and it changes right there immediately in my design environment. 10:01 Lois: I'm intrigued by the idea of page templates that are managed by Oracle but still leave room for the developer to customize aspects of the look and feel and functionality. How does that work? Joe: Well, the page templates themselves represent the typical pages you would most likely use in an enterprise application. Things like a welcome page, a search page, and edit and create pages, and a couple of different ways to display summary information, including foldout pages, though this is not an exhaustive list of course. Not only do they provide a logical and complete starting point for the layout of the page itself, but they also include built-in functionality. These templates include functionality for buttons, primary and secondary actions, and areas for holding contextual information, badges, avatars, and images. And this is all built right into the page, and all of them use variables to describe the contents for the various parts, so the contents can change programmatically as the variables' contents change, if necessary. 10:59 Do you have an idea for a new course or learning opportunity? We'd love to hear it! Visit the Oracle University Learning Community and share your thoughts with us on the Idea Incubator. Your suggestion could find a place in future development projects. Visit mylearn.oracle.com to get started.  11:19 Nikita: Welcome back! So, Joe, let's say I'm a developer. How do I get started working with Redwood? Joe: One of the easiest ways to do it is to use Visual Builder Studio Designer and create a new visual application. If you're creating a standalone, bespoke custom application, you can choose a Redwood starter template, which will include all the Redwood components and page templates automatically. Or, if you're extending and customizing an Oracle Fusion application, Redwood is already included.  Either way, when you create a new page, you have a choice of different page templates—welcome page templates, edit pages, search pages, etc. —and all you have to do is choose a page that you want and begin configuring it. And actually if you make a mistake, it's easy to switch page templates. All the components, page templates, and so on have documentation right there inside Visual Builder Studio Designer, and we do recommend that you read through the documentation first to get an understanding of what the use case for that template is and how to use it. And some components are more granular, like a collection container which holds a collection of rows of a list or a table and provides capabilities like toolbars and other actions that are already built and defined. You decide what actions you want and then use predefined event listeners that are triggered when an event occurs in the application—like a button being clicked or a row being selected—which kicks off a series of actions to be performed. 12:38 Lois: That sounds easy enough if you know what you're doing. Joe, what are some of the more common pages and what are they used for?  Joe: Redwood page templates can be broken down into categories. There are overview templates like the welcome page template, which has a nice banner, colors, and illustrations that can be used for a welcoming page—like for entering a new application or a new logical section of the application. The dashboard landing page template displays key information values and their charts and graphs, which can come from Oracle Analytics, and automatically switches the display depending on which set of data is selected.  The detail templates include a general overview, which presents read-only information related to a single record or resource. The item overview gives you a small panel to view summary information (for example, information on a customer) and in the main section, you can view details like all the orders for that customer. And you can even navigate through a set of customers, clicking arrows for next-previous navigation. And that's all built in. There's no programming required. The fold-out page template folds out horizontally to show you individual panels with more detail that can be displayed about the subject being retrieved as well as overflow and drill-down areas. And there's a collection detail template that will display a list with additional details about the selected item (for example, an order and its order line items). 13:52 Joe: The smart search page does exactly what it says. It has a search component that you use to filter or search the data coming back from the REST data sources and then display the results in a list or a table. You define the filter yourself and apply it using different kinds of comparators, so you can look for strings that start with certain values or contain values, or numerical values that are equal to or less than, depending on what you're filtering for. And then there are the transactional templates, which are meant to make changes. This includes both the simple create and edit and advanced create and edit templates.  The simple create and edit page template edits a single record or creates a single record. And the advanced page template works well if you're working with master-detail, parent-child type relationships. Let's say you want to view the parent and create children for it or even create a parent and the children at the same time. And there's a Gantt chart page for project management–type tracking and a guided process page for multiple-step processes and there's a data management page template specifically for viewing and editing data collections like Excel spreadsheets. 14:50 Nikita: You mentioned that there's a design system behind all this. How is this used, and how does the customer benefit from it? Joe: Redwood comprises both a design system and a development system. The design system has a series of steps that we follow here at Oracle and can suggest that you, our customers and partners, can follow as well. This includes understanding the problem, articulating the vision for the page and the application (what it should do), identifying the proper Redwood page templates to use, adding detail and refining the design and then using a number of different mechanisms, including PowerPoint or Figma design tools to specify the design for development, and then monitor engagement in the real world. These are the steps that we follow here at Oracle. The Redwood development process starts with learning how to use Redwood components and templates using the documentation and other content from redwood.oracle.com and Visual Builder Studio. Then it's about understanding the design created by the design team, learning more about components and templates for your application, specifically the ones you're going to use, how they work, and how they work together. Then developing your application using Visual Builder Studio Designer, and finally improving and refining your application. Now, right now, as I mentioned, telemetry is available to us here at Oracle so we can get a sense of the feedback on the pages of how components are being used and where time is being spent, and we use that to tune the designs and components being used. That telemetry data may be available to customers in the future. Now, when you go to redwood.oracle.com, you can access the Redwood pattern book that shows you in detail all the different page templates that are available: smart search page, data grid, welcome page, dashboard landing page, and so on, and you can select these and read more about them as well as the actual design specifications that were used to build the pages—defining what they do and what they respond to. They provide a lot of detailed information about the templates and components, how they work and how they're intended to be used. 16:45 Lois: That's a lot of great resources available. But what if I don't have access to Visual Builder Studio Designer? Can I still see how Redwood looks and behaves? Joe: Well, if you go to redwood.oracle.com, you can log in and work with the Redwood reference application, which is a live application working with live data. It was created to show off the various page templates and components, their look and feel and functionality from the Redwood design and development systems. This is an order management application, so you can do things like view filtered pending orders, create new orders, manage orders, and view information about customers and inventory. It uses the different page templates to show you how the application can perform. 17:23 Nikita: I assume there are common aspects to how these page templates are designed, built, and intended to be used. Is that a good way to begin understanding how to work with them? Becoming familiar with their common properties and functionality? Joe: Absolutely! Good point! All pages have titles, and most have primary and secondary actions that can be triggered through a variety of GUI events, like clicking a button or a link or selecting something in a list or a table. The transactional page templates include validation groups that validate whether the data is correct before it is submitted, as well as a message dialog that can pop up if there are unsaved changes and someone tries to leave the page. All the pages can use variables to display information or set properties and can easily display specific contextual information about records that have been retrieved, like adding the Order Number or Customer Name and Number to the page title or section headers. 18:13 Lois: If I were a developer, I'd be really excited to get started! So, let's say I'm a developer. What's the best way to begin learning about Redwood, Joe? Joe: A great place to start learning about the Redwood design and development system is at the redwood.oracle.com page I mentioned. We have many different pages that describe the philosophy and fundamental basis for Redwood, the ideas and intent behind it, and how we're using it here at Oracle. It also has a list of all the different page templates and components you can use and a link to the Redwood reference application where you can sign in and try it yourself. In addition, we at Oracle University offer a course called Design and Develop Redwood Applications, and in there, we have both lecture content as well as hands-on practices where you build a lightweight version of the Redwood reference application using data from the Fusion apps application, as well as the pages that I talked about: the welcome page, detail pages, transactional pages, and the dashboard landing page.  And you'll see how those pages are designed and constructed while building them yourself.  It's very important though to take one of the free Visual Builder Developer courses first: either Build Visual Applications Using Visual Builder Studio and/or Develop Fusion Applications Using Visual Builder Studio before you try to work through the practices in the Redwood course because it uses a lot of Visual Builder Designer technology.  You'll get a lot more out of the Redwood practices if you understand the basics of Visual Builder Studio first. The Build Visual Applications Using Visual Builder Studio course is probably a better place to start unless you know for a fact you will be focusing on extending Oracle Fusion Applications using Visual Builder Studio. Now, a lot of the content is the same between the two courses as they share much of the same technology and architectures. 19:53 Lois: Ok, so Build Visual Applications Using Visual Builder Studio and Develop Fusion Applications Using Visual Builder Studio…all on mylearn.oracle.com and all free for anyone who wants to take them, right? Joe: Yes, exactly. And the free Redwood learning path leads to an Associate certification. While our courses are a great place to start in preparing for your certification exam, they are not, of course, by themselves sufficient to pass and you will want to study and be familiar with the redwood.oracle.com content as well. The learning path is free, but you do have to pay for the certification exam. 20:29 Nikita: Thanks for those tips, Joe, and we appreciate you joining us today. Joe: Thanks for having me! Lois: Join us next week when we'll discuss how model-based development is still alive and well today. Until next time, this is Lois Houston… Nikita: And Nikita Abraham, signing off! 20:45 That's all for this episode of the Oracle University Podcast. If you enjoyed listening, please click Subscribe to get all the latest episodes. We'd also love it if you would take a moment to rate and review us on your podcast app. See you again on the next episode of the Oracle University Podcast.

Oracle University Podcast
Introduction to Visual Builder Studio, Visual Builder Cloud Service, Stand-Alone, and JET

Oracle University Podcast

Play Episode Listen Later Mar 19, 2024 24:38


The next generation of front-end user interfaces for Oracle Fusion Applications is being built using Visual Builder Studio and Oracle JavaScript Extension Toolkit. However, many of the terms associated with these tools can be confusing. In this episode, Lois Houston and Nikita Abraham are joined by Senior Principal OCI Instructor Joe Greenwald. Together, they take you through the different terminologies, how they relate to each other, and how they can be used to deliver the new Oracle Fusion Applications as well as stand-alone, bespoke visual web applications. Develop Fusion Applications Using Visual Builder Studio: https://mylearn.oracle.com/ou/course/develop-fusion-applications-using-visual-builder-studio/122614/ Build Visual Applications Using Visual Builder Studio: https://mylearn.oracle.com/ou/course/build-visual-applications-using-oracle-visual-builder-studio/110035/ Oracle University Learning Community: https://education.oracle.com/ou-community LinkedIn: https://www.linkedin.com/showcase/oracle-university/ X (formerly Twitter): https://twitter.com/Oracle_Edu Special thanks to Arijit Ghosh, David Wright, and the OU Studio Team for helping us create this episode. --------------------------------------------------------- Episode Transcript: 00:00 Welcome to the Oracle University Podcast, the first stop on your cloud journey. During this  series of informative podcasts, we'll bring you foundational training on the most popular  Oracle technologies. Let's get started. 00:26 Lois: Hello and welcome to the Oracle University Podcast. I'm Lois Houston, Director of Innovation Programs with Oracle University, and with me is Nikita Abraham, Principal Technical Editor. Nikita: Hi everyone! Today, we're starting a new season on building the next generation of Oracle Cloud Apps with Visual Builder Studio. 00:45 Lois: And I'm so excited that we have someone really special to take us through the next few episodes. Joe Greenwald is joining us. Joe is a Senior Principal OCI Instructor with Oracle University. He joined Oracle in 1992 with an extensive background in CASE tools. Since then, he has used and taught all of Oracle's software development tools, including Oracle Forms, APEX, JDeveloper ADF, as well as all the Fusion Middleware courses. Currently, Joe is responsible for the Visual Builder Studio and Redwood development courses, including extending Fusion Applications with Visual Builder. 01:22 Nikita: In today's episode, we're going to ask Joe about Visual Builder Studio and Oracle JavaScript Extension Toolkit, also known as JET. Together, they form the basis of the technology for the next generation of front-end user interfaces for Oracle Fusion Applications, as well as many other Oracle applications, including most Oracle Cloud Infrastructure (OCI) interfaces.  Lois: We'll look at the different terminologies and technologies, how they relate to each other, and how they deliver the new Oracle Fusion applications and stand-alone, bespoke visual web applications. Hi Joe! Thanks for being with us today. 01:57 Joe: Hi Lois! Hi Niki! I'm glad to be here. Nikita: Joe, I'm somewhat thrown by the terminology around Visual Builder, Visual Studio, and JET. Can you help streamline that for us?  Lois: Yeah, things that are named the same sometimes refer to different things, and sometimes things with a different name refer to the same thing.  02:15 Joe: Yeah, I know where you're coming from. So, let's start with Visual Builder Studio. It's abbreviated as VBS and can go by a number of different names. Some of the most well-known ones are Visual Builder Studio, VBS, Visual Builder, Visual Builder Stand-Alone, and Visual Builder Cloud Service. Clearly, this can be very confusing. For the purposes of these episodes as well as the training courses I create, I use certain definitions.  02:39 Lois: Can you take us through those? Joe: Absolutely, Lois. Visual Builder Studio refers to a product that comes free with an OCI account and allows you to manage your project-related assets. This includes the project itself, which is a container for all of its assets. You can assign teams to your projects, as well as secure the project and declare roles for the different team members. You manage GIT repositories with full graphical and command-line GIT support, define package, build, and deploy jobs, and create and run continuous integration/continuous deployment graphical and code-managed pipelines for your applications. These can be visual applications, created using the Visual Builder Integrated Development Environment, the IDE, or non-visual apps, such as Java microservices, docker builds, NPM apps, and things like that. And you can define environments, which determine where your build jobs can be deployed. You can also define issues, which allow you to identify, track, and manage things like bugs, defects, and enhancements. And these can be tracked in code review merge requests and build jobs, and be mapped to agile sprints and scrum boards. There's also support for wikis for team collaboration, code snippets, and the management of the repository and the project itself. So, VBS supports code reviews before code is merged into GIT branches for package, build, and deploy jobs using merge requests.  03:57 Nikita: OK, what exactly do you mean by that? Joe: Great. So, for example, you could have developers working in one GIT branch and when they're done, they would push their private code changes into that remote branch. Then, they'd submit a merge request and their changes would be reviewed.  Once the changes are approved, their code branch is merged into the main branch and then automatically runs a CI/CD package (continuous integration/continuous deployment) package, build, and deploy job on the code. Also, the CI/CD package, build, and deploy jobs can run against any branches, not just the main branch. So Visual Builder Studio is intended for managing the project and all of its assets. 04:37 Lois: So Joe, what are the different tools used in developing web applications? Joe: Well, Visual Builder, Visual Builder Studio Designer, Visual Builder Designer, Visual Builder Design-Time, Visual Builder Cloud Service, Visual Builder Stand-Alone all kind of get lumped together. You can kinda see why. What I'm referring to here are the tools that we use to build a visual web application composed of HTML5, CSS3, JavaScript, and JSON (JavaScript Object Notation) for metadata. I call this Visual Builder Designer. This is an Integrated Development Environment, it's the “IDE” which runs in your browser. You use a combination of drag and drop, setting properties, and writing and modifying custom and generated code to develop your web applications. You work within a workspace, which is your own private copy of a remote Git branch. When you're ready to start development work, you open an existing workspace or create a new one based on a clone of the remote branch you want to work on. Typically, a new branch would be created for the development work or you would join an existing branch. 05:35 Nikita: What's a workspace, Joe? Is it like my personal laptop and drive?  Joe: A workspace is your own private code area that stores any changes you make on the Oracle servers, so your code changes are never lost—even when working in a browser-based, network-based tool. A good analogy is, say I was working at home on my own machine. And I would make a copy of a remote GIT branch and then copy that code down to my local machine, make my code changes, do my testing, etc. and then commit my work—create a logical save point periodically—and then when I'm ready, I'd push that code up into the remote branch so it can be reviewed and merged with the main branch. My local machine is my workspace. However, since this code is hosted up by Oracle on our servers, and the code and the IDE are all running in your browser, the workspace is a simulation of a local work area on your own computer. So, the workspace is a hosted allocation of resources for you that's private. Other people can't see what's going on in your workspace. Your workspace has a clone of the remote branch that you're working with and the changes you make are isolated to your cloned code in your workspace. 06:38 Lois: Ok… the code is actually hosted on the server, so each time you make a change in the browser, the change is written back to the server? Is it possible that you might lose your edits if there's a networking interruption? Joe: I want to emphasize that while I started out not personally being a fan of web-based integrated development environments, I have been using these tools for over three years and in all that time, while I have lost a connection at times—networks are still subject to interruptions—I've never lost any changes that I've made. Ever. 07:08 Nikita: Is there a way to save where you are in your work so that you could go back to it later if you need to? Joe: Yes, Niki, you're asking about commits and savepoints, like in a Git repository or a Git branch. When you reach a logical stopping or development point in your work, you would create a commit or a savepoint. And when you're ready, you would push that committed code in your workspace up to the remote branch where it can be reviewed and then eventually merged, usually with the main Git branch, and then continuous integration/continuous package and deployment build jobs are run. Now, I'm only giving you a high-level overview, but we cover all this and much more in detail with hands-on practices in our Visual Builder developer courses. Right now, I'm just trying to give you a sense of how these different tools are used. 07:49 Lois: Yes, that makes sense, Joe. It's a lot to cover in a short amount of time. Now, we've discussed the Visual Builder Designer IDE and workspace. But can you tell us more about Visual Builder Cloud Service and stand-alone environments? What are they used for? What features do they provide? Are they the same or different things? Joe: Visual Builder Cloud Service or Visual Builder Stand-Alone, as it's sometimes called, is a service that Oracle hosts on its servers. It provides hosting for the deployed web application source code as well as database tables for business objects that we build and maintain to store your customer data. This data can come from XLS or CSV files, or even your own Oracle database customer table data.  A custom REST proxy makes calls to external third-party REST services on your behalf and supports several popular authentication mechanisms. There is also integration with the Identity Cloud Service (IDCS) to manage users and their access to your web apps. 08:47 Joe: Visual Builder Cloud Service is a for-fee product. You pay licensing fees for how much you use because it's a hosted service. Visual Builder Studio, the project asset management aspect I discussed earlier, is free with a standard OCI license. Now, keep in mind these are separate from something like Visual Builder Design Time and the service that's running in Fusion application environments. What I'm talking about now is creating standalone, bespoke, custom visual applications. These are applications that are built using industry-standard HTML5, CSS3, JavaScript, and JSON for metadata and are hosted on the Oracle servers. 09:27 Are you looking for practical use cases to help you plan and apply configurations that solve real-world challenges?  With the new Applied Learning courses for Cloud Applications, you'll be able to practically apply the concepts learned in our implementation courses and work through case studies featuring key decisions and configurations encountered during a typical Oracle Cloud Applications implementation. Applied learning scenarios are currently available for General Ledger, Payables, Receivables, Accounting Hub, Global Human Resources, Talent Management, Inventory, and Procurement, with many more to come!  Visit mylearn.oracle.com to get started. 10:09 Nikita: Welcome back! Joe, you said Visual Builder Cloud Service or Stand-Alone is a for-fee service. Is there a way I can learn about using Visual Builder Designer to build bespoke visual applications without a fee? Joe: Yes. Actually, we've added an option where you can run the Visual Builder Designer and learn how to create web apps without using the app hosting or the business object database that stores your customer data or the REST proxy for authentication or the Identity Cloud Service. So you don't get those features, but you can still learn the fundamentals of developing with Visual Builder Designer. You can call third-party APIs, you can download the source, and run it locally, for example, in a Tomcat server. This is a great and free way to learn how to develop with the Visual Builder Designer. 10:52 Lois: Joe, I want to know more about the kinds of apps you can build in VB Designer and the capabilities that VB Cloud Service provides. Joe: Visual Builder Designer allows you to build custom, bespoke web applications made of interactive webpages; flows of pages for navigation; events that respond when things happen in the app, for example, GUI events like a button is clicked or values are entered into a text field; variables to store state and the ability to make REST calls, all from your browser. These applications have full access to the Oracle Fusion Applications APIs, given that you have the right security permissions and credentials of course. They can access your customer business data as business objects in our internally hosted database tables or your own customer database tables. They can access third-party APIs, and all these different data sources can appear in the same visual application, on the same page, at the same time. They use the identity cloud service to identify which users can log in and authenticate against the application. And they all use the new Redwood graphical user interface components and page templates, so they have the same look and feel of all Oracle applications. 11:59 Nikita: But what if you're building or extending Oracle Fusion Applications? Don't things change a little bit? Joe: Good point, Niki. Yes. While you still work within Visual Builder Studio, that doesn't change, VBS maintains your project and all your project-related assets, that is still the same. However, in this case, there is no separate hosted Visual Builder Cloud Service or Stand-Alone instance. In this case, Visual Builder is hosted inside of Fusion apps itself as part of the installation. I won't go into the details of how the architecture works, but the Visual Builder instance that you're running your code against is part of Fusion applications and is included in the architecture as well as the billing. All your code changes are maintained and stored within a single container called an extension. And this extension is a Git repository that is created for you, or you can create it yourself, depending on how you choose to work within Visual Builder Studio. You create an extension to hold the source code changes that provide a customization or configuration. This means making a change to an existing page or a set of pages or even adding new pages and flows to your Oracle Fusion Applications. You use Visual Builder Studio and Visual Builder Designer in a similar way as to how you would use them for bespoke stand-alone visual applications.  13:10 Lois: I'm trying to envision how this workflow is used. How is it different from bespoke VB app development? Or is it different at all? Joe: So, recall that the Visual Builder Designer is effectively the Integrated Development Environment, the IDE, where you make your code changes by working with both the raw HTML5, CSS3, and JavaScript code, if need be, or the Page Designer for drag and drop, and setting properties and then Live mode to test your work. You use a version of VB Designer to view and modify your customizations, and the code is stored in a Git repository called an extension. So, in that sense, the work of developing pages and flows and such is the same.  You still start by creating or, more typically, joining a project and then either create a new extension from scratch or base it on an existing application, or go directly to the page that you want to edit and, on that page, select from your profile menu to edit in Visual Builder Studio. Now, this is a different lifecycle path from bespoke visual applications. With them, you're not extending an app or modifying individual pages in the same way. 14:11 Joe: You get a choice of which project you want to add your extension to when you're working with Fusion apps and potentially which repository to store your customizations, unless one already exists and then it's assigned automatically to hold your code changes. So you make your changes and edits to the portions of the application that have been opened for extensibility by the development team. This is another difference. Once you make your code changes, the workflow is pretty much the same as for a bespoke visual application: do your development work, commit your changes, push your changes to the remote branch. And then typically, your code is reviewed and if the code passes and is approved, it's merged with the main branch. Then, the package and deploy jobs run to deploy the main code to the production environment or whatever environment you're targeting. And once the package and deploy jobs complete, the code base is updated and users who log in see the changes that you've made. 15:00 Nikita: You mentioned creating apps that combine data from Fusion cloud, applications, customer data, and third-party APIs into one page. Why is it necessary? Why can't you just do all that in one Fusion Applications extension? Joe: When you create extensions, you are working within the Oracle Fusion Applications ecosystem, that's what they actually call it, which includes a defined a set of users who have been predefined and are, therefore, known to Fusion Applications. So, if you're a user and you're not part of that Fusion Apps ecosystem, you can't access the pages. Period. That's how Fusion Apps works to maintain its security and integrity. Secondly, you're working pretty much solely with the Fusion Applications APIs data sources coming directly from Fusion Applications, which are also available to you when you're creating bespoke visual apps. When you're working with Fusion Applications in Visual Builder, you don't have access to these business objects that give you access to your own customer database data through Visual Builder-generated REST APIs. Business objects are available only to bespoke visual applications in the hosted VB Cloud Service instance.  So, your data sources are restricted to the Oracle Fusion Applications APIs and some third-party APIs that work within a narrow set of authentication mechanisms currently, although there are plans to expand this in the future. A mashup app that allows you now to access all these data sources while creating apps that leverage the Redwood Component System, so they look and work like Fusion Apps. They're a highly popular option for our partners and customers. 16:25 Lois: So, to review, we have two different approaches. You can create a visual application using the for-fee, hosted Visual Builder Cloud Service/Stand-Alone or the one that comes with Oracle Integration Cloud, or you can use the extension architecture for Fusion applications, where you use the designer and create your extensions, and the code is delivered and deployed to Fusion applications code.  You haven't talked about JET yet though, Joe. What is that? Joe: So, JET is an abbreviation. It stands for Oracle JavaScript Extension Toolkit and JET is the underlying technology that makes Visual Builder, visual applications, and Visual Builder Extensions for Fusion Applications possible. Oracle JavaScript Extension Toolkit provides a module-based, open-source toolkit that leverages modern JavaScript, TypeScript, CSS3, and HTML5 to deliver web applications. It's targeted at JavaScript developers working on client-side applications. It is not for backend development.  It's a collection of popular, powerful JavaScript libraries and a set of Oracle-contributed JavaScript libraries that make it very simple, easy, and efficient to build front-end applications that can consume and interact with Oracle products and services, especially Oracle Cloud services, but of course it can work with any type of third-party API. 17:42 Nikita: How are JET applications architected, Joe, and how does that relate to Visual Builder pages and flows? Joe: The architecture of JET applications is what's called a single page architecture. We've all seen these. These are where you have a single web page—think of your index page that provides the header and footer for your web page—and then the middle portion or the middle content of the page, represented by modules, allow you to navigate from one page or module to another. It also provides the data mapping so that the data elements in the variables and the state of the application, as well as the graphical user interface elements that provide the fields and functionality for the interface for the application, these are all maintained on the client side. If you're working in pure JET, then you work with these modules at the raw JavaScript code level. And there are a lot of JavaScript developers who want to work like this and create their custom applications from the code up, so to speak. However, it also provides the basis for Visual Builder visual applications and Fusion Apps visual extensions in Visual Builder. 18:38 Lois: How does JET support VB Apps? You didn't talk much about having to write a bunch of JavaScript and HTML5 so I got the impression that this is all done for you by VB Designer? Joe: Visual Builder applications are composed of HTML5, CSS3, and JavaScript code that is usually generated by the developer when she drags and drops components on to the page designer canvas or sets properties or creates action chains to respond to events. But there's also a lot of JavaScript object notation (JSON) metadata created at the time that describes the pages, the flows, the navigation, the REST services, the variables, their data types, and other assets needed for the app to function. This JSON metadata is translated at runtime using a large JavaScript extension toolkit library called the Visual Builder Runtime that runs in the browser and real time translates the metadata and other assets in the Visual Builder source code into JET code and assets, which are actually executed at runtime. And it's very quick, very fast, very efficient, and provides a layer of abstraction between the raw JET code and the Visual Builder architecture of pages, flows, action chains for executing code and events to handle things that occur in the user interface, including saving the state in variables that are mapped to GUI components. For example, if you have an Input text component, you need to have a variable to store the value that was entered into that Input text component between page refreshes. The data can move from the Input text component to the variable, and from the variable to that Input text component if it's changed programmatically, for example. So, JET manages binding these data values to variables and the UI components on the page. So, a change to a variable value or a change to the contents of the component causes the others to change automatically. Now, this is only a small part of what JET and the frameworks and libraries it uses do for the applications.  JET also provides more complex GUI components like lists and tables, and selection lists, and check boxes, and all the sorts of things you would expect in a modern GUI application. 20:34 Nikita: You mentioned a layer of abstraction between Visual Builder Studio Designer and JET. What's the benefit of working in Visual Builder Designer versus JET itself? Joe: The benefit of Visual Builder is that you work at a higher level of abstraction than having to get down into the more detailed levels of deep JavaScript code, working with modules, data mappings, HTML code, single page architecture navigation, and the related functionalities. You can work at a higher level, a graphical level, where you can drag and drop things onto a design canvas and set properties. The VB architecture insulates you from the more technical bits of JET. Now, this frees the developer to concentrate more on application and page design, implementing logic and business rules, and creating a pleasing workflow and look and feel for the user. This keeps them from having to get caught up in the details of getting this working at the code level.  Now if needed, you can write custom JavaScript, HTML5, and CSS3 code, though much less than in a JET app, and all that is part of the VB application source, which becomes part of the code used by JET to execute the application itself. And yet it all works seamlessly together. 21:35 Lois: Joe, I know we have courses in JavaScript, HTML, and CSS. But does a developer getting ready to work in Visual Builder Designer have to go take those courses first or can they start working in VB Designer right away? Joe: Yeah, that question does often comes up: Do I need to learn JET to work with Visual Builder? No, you don't. That's all taken care for you in the products themselves. I don't really think it helps that much to learn JET if you are going to be a VB developer. In some ways, it could even be a bit distracting since some of things you learn to do in JET, you would have to unlearn or not do so much because of what VB does it for you. The things you would have to do manually in code in JET are done for you. This is why we call VB a low code development tool.  I mean, you certainly can if you want to, but I would spend more time learning about the different GUI components, page templates, the Visual Builder architecture — events, action chains, and the data provider variables and types. Now, I know JET myself. I started with that before learning Visual Builder, but I use very little of my JET knowledge as a VB developer. Visual Builder Designer provides a nice, abstracted, clean layer of modern visual development on top of JET, while leveraging the power and flexibility of JET and keeping the lower-level details out of my way. 22:46 Nikita: Joe, where can I go to get started with Visual Builder? Joe: Well, for more information, I recommend you take a look at our Develop Fusion Applications course if you're working with Fusion Applications and Visual Builder Studio. The other course is Develop Visual Applications with Visual Builder Studio and that's if you're creating stand-alone bespoke applications. Both these courses are free. We also have a comprehensive course that covers JavaScript, HTML5, and CSS3, and while it's not required that you take that to be successful, it can be helpful down the road. I would say that some basic knowledge of HTML5, CSS3, and JavaScript will certainly support you and serve you well when working with Visual Builder. You learn more as you go along and you find that you need to create more sophisticated applications. I would also mention that a lot of the look and feel of the applications in Visual Builder visual applications and Fusion apps extensions and customizations come through JET components, JET styles, and JET variables, and CSS variables, so that's something that you would want to pursue at some point. There's a JET cookbook out there. You can search for Oracle JET and look for the JET cookbook and that's a good introduction to all of that. 23:47 Lois: Joe, thank you so much for joining us today. We're really looking forward to having you back next week to discuss extending Oracle Fusion Applications with Visual Builder Studio. Joe: Thanks for having me. Nikita: And if you want to learn about some of the courses Joe mentioned, visit mylearn.oracle.com to get started. Until next time, this is Nikita Abraham… Lois: And Lois Houston signing off! 24:09 That's all for this episode of the Oracle University Podcast. If you enjoyed listening, please click Subscribe to get all the latest episodes. We'd also love it if you would take a moment to rate and review us on your podcast app. See you again on the next episode of the Oracle University Podcast.

Cupertino
Todo el mundo con Vision Pro

Cupertino

Play Episode Listen Later Feb 26, 2024 62:00 Transcription Available


Con Matías desaparecido en aguas caribeñas, me acompaña José Sáez-Merino para que nos sumerjamos de nuevo en las Vision Pro. Ya casi ha pasado un mes de uso, y las experiencias buenas y malas van quedando más claras. Hablamos de las polémicas declaraciones de Mark Zuckerberg al respecto, de las nuevas apps que están saliendo, de VisionOS 1.1 y sus cambios, y del análisis de iFixit y las fascinantes mediciones técnicas de los visores de estos cascos. - Por qué Tim Cook se lo juega todo al Apple Vision Pro | Vanity Fair - Zuckerberg y las Vision Pro - Entrevista a Eddy Cue en español - Apple Vision Pro: Returning $3,500 Device Over Comfort, Lack of Apps and Price - Bloomberg - Apple Vision Pro return rate appears low - Apple fans are starting to return their Vision Pros - The Verge - Apple announces more than 600 new apps built for Apple Vision Pro - Apple - Apple Vision Pro Persona Update (1.0 vs 1.1) - YouTube - visionOS 1.1 Beta 1 is Out! - What's New? - YouTube - Meet Safari for spatial computing - WWDC23 - Videos - Apple Developer - "WebXR" | Can I use... Support tables for HTML5, CSS3, etc - TikTok's native app arrives for the Vision Pro - The Verge - YouTube says a Vision Pro app is ‘on the roadmap' - The Verge - Vision Pro Parte 2: ¿Cuál es la resolución de la pantalla? | Noticias iFixit - Apple Vision Pro (Part 5B) – More on Monitor Replacement is Ridiculous. – KGOnTech - Puedes ponerte en contacto con nosotros por correo en: alex@barredo.es - Suscríbete al boletín de información diario en https://newsletter.mixx.io - Escucha el podcast diario de información tecnológica en https://podcast.mixx.io - Nuestro grupo de Telegram: https://t.me/mixxiocomunidad

ShopTalk » Podcast Feed
598: Jen Simmons on Interop, WebKit Releases, and New CSS Features in Safari

ShopTalk » Podcast Feed

Play Episode Listen Later Jan 15, 2024 70:36


Show DescriptionJen Simmons, Apple Evangelist on the Web Developer Experience team for Safari & WebKit, stops by to talk about what Interop is, and a look ahead at new CSS features in Webkit and Safari such as JPEG XL, masks, a round function, JavaScript improvements, styling form controls, content unblocks, masonry, and more! Listen on Website →GuestsJen SimmonsGuest's Main URL • Guest's Twitter Apple Evangelist on the Web Developer Experience team for Safari & @webkit. Member of CSS Working Group. Links Can I use... Support tables for HTML5, CSS3, etc Apple Developer JPEG - JPEG XL WebKit Bugzilla Main Page SponsorsJam.devYou've probably heard of Jam.dev, it's used by more than 60,000 people. It's a free tool that saves developers a ton of frustration. It forces your teammates to make the perfect bug report. They can't do it wrong because it automatically includes a video of the bug, console logs, network requests, everything you need to debug. It automatically lists out the steps to reproduce. It's so easy to get your teammates to use. It's just a Chrome extension. When they see a bug, they click a button and right away it creates a ticket. So it saves time for them.

Syntax - Tasty Web Development Treats
690: How To Dark Mode and Beyond

Syntax - Tasty Web Development Treats

Play Episode Listen Later Nov 8, 2023 64:55


In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content. Show Notes 00:00 Syntax + Sentry Announcement! 01:35 Welcome 02:23 Syntax Brought to you by Sentry 03:16 How to implement a theme 10:27 Writing the CSS 11:38 Glasses wearers protip 13:02 Class on the body and server side rendering issue 14:02 CSS Variables 15:05 Color variables in CSS 21:07 Working in half pixel sizes 22:40 Variable usage 25:23 Naming variables after what they style 30:42 Component level variables 33:27 Using zones 38:41 Themes should be defined as light or dark 39:20 Issues: Moving from light to dark 42:29 Issues: Drop shadow in dark mode 44:00 Issues: Flash of unthemed content 44:40 Issues: Opacity values 49:45 Issues: SVG need change color 55:56 Help is on the way! 59:57 SIIIIICK ××× PIIIICKS ××× website/src/styles/themes/level-up.css at v2 The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage “color-contrast” | Can I use… Support tables for HTML5, CSS3, etc The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() – Bram.us ××× SIIIIICK ××× PIIIICKS ××× Scott: Kala (@engineer.everything) Shameless Plugs Scott: Sentry Wes: Wes Bos Tutorials Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

Syntax - Tasty Web Development Treats
Reacting to State of CSS Survey

Syntax - Tasty Web Development Treats

Play Episode Listen Later Sep 27, 2023 60:39


In this episode of Syntax, Wes and Scott go over some of the results the State of CSS survey for 2023, including drop-shadow, subgrid, logical properties, media range, and more! Show Notes 00:25:21 Welcome 01:31:22 Soccer update 03:52:05 Syntax Brought to you by Sentry 04:03:18 StateOfCSS.com State of CSS 2023 04:21:11 Top 5 Most Used Features 09:13:09 Drop-shadow 13:00:11 Subgrid 18:31:21 Logical properties 20:11:20 Media range 20:52:11 Object view box 23:10:14 Anchor positioning 28:21:09 Intrinsic sizing keywords 29:32:00 View Transitions API Can I use… Support tables for HTML5, CSS3, etc Astro Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580 31:43:18 Updates to colors in CSS 35:07:05 Accent color, current color 36:36:11 Scroll snap and overscroll behaviour 39:04:22 Touch action 40:16:01 Line clamp or variable font Variable Fonts 45:28:11 Accessibility features 48:33:12 :Has has jumped 49:32:11 @Property 53:52:13 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Kodiak Cakes Strawberries & Cream Oatmeal Packets (Pack of 6) Wes: Food Storage Containers, Baby Food Storage Containers with Lid, Baby Food and Toddler Snack Containers Shameless Plugs Scott: Syntax Podcast (@syntaxfm) | TikTok Wes: Web Unleashed 2023 - FITC Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

Syntax - Tasty Web Development Treats
Supper Club × Adam Argyle on What's New in CSS

Syntax - Tasty Web Development Treats

Play Episode Listen Later May 19, 2023 55:47


In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style. Show Notes 00:34 Welcome 01:05 Guest introduction Adam on Bluesky Adam on Twitter 01:48 CSS buckets New CSS Relative Units · January 6, 2023 03:16 rex rch ric rlh 08:06 Gradient.style CSS HD Gradients Open Props: sub-atomic styles 13:49 What are style queries vs container queries vs state queries? una.im | Style Queries Getting Started with Style Queries - Chrome Developers CSS Container Style Queries | Can I use… Support tables for HTML5, CSS3, etc 18:09 Trig functions Trigonometric functions in CSS CSS Trigonometric Functions: cos() and sin(): dots on a circle 19:57 Live transitions Understand Disney's 12 principles of animation | Creative Bloq 25:08 View transitions View Transitions Demo View Transitions API - Web APIs | MDN 26:01 Text-wrap balance CSS text-wrap: balance - Chrome Developers 26:45 Text-wrap pretty 27:44 What's the future of the browser landscape? 31:44 nth-child(An+B [of S]) 33:06 Cascade layers 34:40 CSS Nesting 38:03 Animate discrete properties 39:42 Linear function Linear easing generator 41:33 Media query range syntax 42:04 Subgrid everywhere 44:41 Media query range and variables? UI Elements - Basics, Best Practice, and Built Ins — Syntax Podcast 612 45:32 env variables Hasty Treat - CSS Nesting 1 — Syntax Podcast 343 46:59 Animation composition 49:50 Select menu HTML element 52:16 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Onewheel // Future Motion Adam Argyle Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

SEO Podcast | SEO.co Search Engine Optimization Podcast
#841: Albuquerque Software Development Services

SEO Podcast | SEO.co Search Engine Optimization Podcast

Play Episode Listen Later Nov 1, 2022 4:42


As a software development company, we understand the importance of delivering high-quality products and services. We have been in this business for years, and our team consists of talented and experienced professionals who are experts at their work.  Our dedicated team will work with you to create a custom solution that fits your needs, budget, and schedule. We offer a wide range of services, including web design and development, custom software development, mobile app development and more. Our Albuquerque web design company is also known for providing responsive website design services. If you're looking for an affordable solution that works across all devices, then we are the right choice for you. We develop websites with clean layouts that are easy to navigate and feature unique designs that give your site its own personality. Our designers use cutting-edge technologies like HTML5, CSS3 or JavaScript libraries like jQuery to create innovative frontend solutions that perform well on all modern browsers without compromising on user experience. We can help you develop an e-commerce website that allows your business to sell products online without any difficulty. With us as your partner for web design services in Albuquerque, New Mexico, you don't need to worry about anything else but running your business successfully!   More info about website development for eCommerce:   https://dev.co/albuquerque/   Connect with us:  SEO // PPC // DEV // WEBSITE DESIGN // RECRUITERS  

Untold Stories
Why Yield is Crypto's Killer App with Derek Barrera

Untold Stories

Play Episode Listen Later Oct 11, 2022 39:24


Today's guest is Derek Barrera, Founder and CEO of Steer Protocol. Steer Protocol is a platform for cross-chain automated strategies with secure on-chain executions with minimal fees to users, providing maximal yield on earned fees for participating in the protocol. Steer enables users to create/use/upload yield-generating models called Strategies from complex algorithms to recurring tasks with zero computation cost and on any blockchain. Steer infrastructure offers endless possibilities like Automated Liquidity Management, Loan Payments, Asset Management, Data Availability Marketplace, Automated Governance, Oracles, etc. Users can write in any programming language and execute on any chain. Steer currently supports Ethereum, Bitcoin, Optimism, Polygon (Matic), and BSC. Derek has 14 years of software experience. He is a highly-skilled, energetic professional with a strong software engineering and developer operations background and extensive hands-on experience with many programming disciplines, including MEAN and LAMP stacks, HTML5, CSS3, Javascript, Java EE, C++, and Search Engine Optimization (SEO). Derek has worked in the Blockchain industry since 2016, leading various projects to a combined valuation of over $3.6 Billion. He has built cryptographic cross-chain libraries and enterprise custody solutions for exchanges/brokers. He has worked with over eight different chains and over 500 supported assets. His experience also includes spearheading the creation of an L2 EVM and deploying various cross-chain DeFi protocols. We discuss various topics, including the Steer Protocol, yield generation, the macroeconomic landscape, advice for aspiring founders, and much more. We began our conversation by discussing the benefits of the bear market. Derek explains how founders can take advantage of the bear market. Our next conversation topic centered around Steer Protocol and how it works. Derek describes how Steer's is optimizing yield strategy and execution. Derek shares how Steer helps users optimize yield strategies on Uniswap V3. We discuss in depth how yield works in crypto. We discuss the state of the macroeconomic outlook and how people are beginning to understand the value proposition of an asset like Bitcoin. We discuss the current Credit Suisse situation and the possible contagion fallout if they default. We discuss why insurance and yield could be the killer apps for crypto and potential avenues for the next growth phase of crypto. Our next topic centered around cross-chain and the possibility of a multi-chain world. Derek explains the problems that cross-chain yield products are facing. But Derek stresses that a multi-chain world is inevitable. We discuss how chains will probably proliferate around use cases and focus on solving specific market needs. Our final discussion centered around regulation. Derek explains why sensible regulation is needed. Please enjoy my conversation with Derek Barrera. -- BingX is a crypto social trading exchange with over 3M users. BingX offers CFDs, futures, spot, derivatives, and copy trading services to more than 100 countries worldwide and connects users with expert traders on the platform in a safe, simple, and transparent way through social trading networks. For Charlie's listeners only, register using this link for a 155 USDT Welcome Gift: https://untoldstories.link/bingx -- This podcast is powered by Blockworks. For exclusive content and events that provide insights into the crypto and blockchain space, visit them at https://blockworks.co

All JavaScript Podcasts by Devchat.tv
Splatty-doo and Other JavaScript Features You Should Avoid - JSJ 543

All JavaScript Podcasts by Devchat.tv

Play Episode Listen Later Aug 2, 2022 76:41


Today in this all panelist episode, we talk about JS features you should avoid using.  However opinions don't always align, and some come with much debate!  Although we couldn't cover them all, today we discuss: eval  with arguments do while  for I ++ continue  classes prototypes this var with let delete Sponsors Top End Devs Raygun | Click here to get started on your free 14-day trial Coaching | Top End Devs Links JavaScript Remote Conference 2022 Twitter: ‎@cmaxw Picks AJ- Virginia Ctenucha Ctenucha virginica (Esper, 1794) | Butterflies and Moths of North America AJ- The Mistborn Trilogy by Brandon Sanderson AJ- Thread pitch gauge at Lowes.com: Search Results Charles- Antidote Charles- Conferences | Top End Devs Charles- 1883 - Yellowstone Prequel (Official Site) Watch on Paramount+ Dan- Can I use... Support tables for HTML5, CSS3, etc Dan - War in Ukraine Dan- Webb Space Telescope GSFC/NASA Steve- Coworker Standing At Desk Obviously Just Hasn't Learned About Chairs Yet Steve - Dad Jokes Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacy

JavaScript Jabber
Splatty-doo and Other JavaScript Features You Should Avoid - JSJ 543

JavaScript Jabber

Play Episode Listen Later Aug 2, 2022 76:11


Today in this all panelist episode, we talk about JS features you should avoid using.  However opinions don't always align, and some come with much debate!  Although we couldn't cover them all, today we discuss: eval  with arguments do while  for I ++ continue  classes prototypes this var with let delete Sponsors Top End Devs Raygun | Click here to get started on your free 14-day trial Coaching | Top End Devs Links JavaScript Remote Conference 2022 Twitter: ‎@cmaxw Picks AJ- Virginia Ctenucha Ctenucha virginica (Esper, 1794) | Butterflies and Moths of North America AJ- The Mistborn Trilogy by Brandon Sanderson AJ- Thread pitch gauge at Lowes.com: Search Results Charles- Antidote Charles- Conferences | Top End Devs Charles- 1883 - Yellowstone Prequel (Official Site) Watch on Paramount+ Dan- Can I use... Support tables for HTML5, CSS3, etc Dan - War in Ukraine Dan- Webb Space Telescope GSFC/NASA Steve- Coworker Standing At Desk Obviously Just Hasn't Learned About Chairs Yet Steve - Dad Jokes

SEO Podcast | SEO.co Search Engine Optimization Podcast
#675: Building a Progressive Web App Episode 2

SEO Podcast | SEO.co Search Engine Optimization Podcast

Play Episode Listen Later Mar 14, 2022 6:49


In this course, you will learn exactly how to build your very own Progressive Web App that works across all modern browsers. You will learn about technologies like HTML5, CSS3, and JavaScript as well as Service Workers and more. In this course, we also cover the advantages of a PWA over native applications and some other cool stuff you can do with PWAs such as add push notifications. With the emergence of modern browsers, there has been a rise in single-page applications that respond to user actions and allow for truly native-like experiences. However, these apps never quite matched the performance of their native counterparts. PWAs combine the best of both approaches, offering a compelling way to deliver web content to your users. As a developer, you have the choice of using a web browser to build an app that is responsive and can be used on all kinds of devices, like mobile phones and tablets. Progressive Web Apps are user-friendly, work with your existing backend, and also feature an App Shell which makes them appear like a native app.    More info about building a progressive web app:  https://dev.co/progressive-web-app/ Connect with us:  SEO // PPC // DEV // WEBSITE DESIGN 

Deeper Than Tech
Do you need more then HTML and CSS to get a developer job? freelance opportunities

Deeper Than Tech

Play Episode Listen Later Sep 28, 2021 3:22


If you are looking for a developer job, you might be wondering what skills are good to have. Is JavaScript the only language you need to know? What about front-end technologies like HTML5 or CSS3? In this episode we are going to be answering the question of if you need more then HTML and CSS… Continue reading Do you need more then HTML and CSS to get a developer job? freelance opportunities

Radio EME
#ViralEME - Ciclo de entrevistas a docentes de Elearning Total (UTN) - Curso online de Diseño Web Responsive – HTML5 y CSS3s

Radio EME

Play Episode Listen Later Aug 25, 2021 8:47


Con el curso online Diseño Web Responsive – HTML5 y CSS3 de la Universidad Tecnológica Nacional (UTN) aprenderás a crear sitios en Internet.

Radio EME
#ViralEME - Ciclo de entrevistas a docentes de Elearning Total (UTN) - Curso online Diseño Web Responsive – HTML5 y CSS3

Radio EME

Play Episode Listen Later Jul 24, 2021 8:11


El curso online Diseño Web Responsive – HTML5 y CSS3 de la Universidad Tecnológica Nacional (UTN) te enseñará a elaborar sitios de Internet adaptables a computadoras de escritorio como a todo tamaño de tablet y teléfono celular.

OHRBEIT
IT'ler sitzen spaßbefreit im Keller und starren auf Bildschirme?

OHRBEIT

Play Episode Listen Later Jun 24, 2021 7:37


Überzeuge dich vom Gegenteil und hör dir an, wie bunt und fröhlich es zugehen kann, wenn Empathie, Toleranz und Leichtigkeit zur Firmenkultur gehören! HTML5, CSS3, JavaScript, SPA am Start? Schraube kreativ und ungezwungen am Code. Bei der diva-e wird dafür gesorgt, dass du nicht nur entwickelst, sondern dich auch selbst entwickelst! ✅ Freunde ins Büro mitbringen… ✅ Projekte mit dem ruhmreichen FCB… ✅ Die Zukunft der Frontend-Entwicklung… ✅ Einfach mal machen! Diese Themen beplaudern Tra und Jannik aus dem Nähkästchen und machen sich in unserem Jobcast hörbar locker. Also liebe Codista und lieber Coderich, jetzt bist du am Zug! Der Link zum Jobcast® auf OHRBEIT:

SEO Podcast | SEO.co Search Engine Optimization Podcast
#427: Mobile SEO Guide for Beginners, Episode 8

SEO Podcast | SEO.co Search Engine Optimization Podcast

Play Episode Listen Later Apr 23, 2021 7:28


SEO for mobile devices is a new type of SEO. It is related to the fact that the number of mobile internet users in 2016 will have exceeded desktop internet users. Still, most websites are still ranked without taking into account the mobile user experience (UX). This will help you to understand the basics of mobile SEO by exploring different themes, from structures to user interactions, which are important for optimizing your site. Search engine optimization for mobile devices is one of the hottest topics on the internet today. This book is written to give you the most up-to-date information and tips on how to get more traffic from your cell phone. SEO on a mobile phone is as important as it is for a PC. This course covers most of the relevant aspects of SEO that you can use to optimize your mobile website. SEO for mobile devices teaches you how to optimize your site by targeting the most popular sites used on mobile devices and using what you already know about SEO. We will walk you through how to use HTML5, CSS3, and WordPress along with some plugins to create lean, clean, search friendly mobile versions of your website. In today's mobile world, it is advantageous for businesses to have a mobile friendly website. A business that has optimized their website for mobile devices will greatly enhance their search engine rankings with the help of SEO for Mobile Search. This course provides strategies for optimizing web pages for mobile devices, including tablets and smart phones. Students will learn about the many types of mobile devices used to access the internet today, as well as strategies for conducting SEO on mobile devices. Ever thought about how people search for your business online? Mobile search on smartphones and tablets is increasing at a faster rate than even desktop searches. Whether you have a mobile-friendly site or not can mean the difference between converting those visits into new customers or driving them directly to your competitor. Especially in competitive markets, every little edge, one way or another, counts. There is no better solution to help ensure that your organization gets found on mobile devices than SEO for mobile. Create SEO content that is mobile friendly and able to rank in Google for mobile devices using the latest SEO techniques. Find out how to rank for local search queries, including geo-targeted queries such as business name, address, etc. Ever thought about how people search for your business online? Mobile search on smartphones and tablets is increasing at a faster rate than even desktop searches. Whether you have a mobile-friendly site or not can mean the difference between converting those visits into new customers or driving them directly to your competitor. Especially in competitive markets, every little edge, one way or another, counts. There is no better solution to help ensure that your organization gets found on mobile devices than SEO for mobile. Also mentioned in this episode:  https://seo.co/mobile-seo-audit/ https://dev.co/mobile/  Connect with us:  SEO.co // DEV.co // PPC.co // Link.Build

CodigoTecno
#69 - ¿Aún conviene programar con PHP ? - CodigoTecno

CodigoTecno

Play Episode Listen Later Mar 12, 2021 25:00


Ya sea estes empezando a programar o seas un experto en otros lenguajes, PHP te da todas las posibilidades de crecer profesionalmente. Te cuento todos los detalles para iniciar tu carrera de programador o bien volverte un experto desarrollando para web. Descubramos porqué PHP está mas fuerte que nunca con la llegada de PHP 8 y cómo la comunidad sigue creciendo día a día con llegada de Laravel y otros frameworks que potencian su utilidad. Despues de HTML5 y CSS3, tenemos a #PHP que da la 'magia' para poder interactuar con bases de datos del lado del servidor, obviamente tenemos a Javascript para el lado del cliente. Si te gustó este episodio, te animo a ayudarnos compartiendo el enlace con algún amigo, con alguien que sepas pueda servirle este episodio. ¡ Gracias campeón ! Encontrá más contenido en nuestras redes: - https://www.facebook.com/codigotecno/ - https://www.instagram.com/codigotecno O envíame un email en: codigotecno (arroba) hotmail.com o en Telegram @soleralejandro Si te inspiró deja tu comentario, like o sugerencia en las redes de podcast mas populares: * En Ivoox : https://bit.ly/2JoLotl * En Spotify : https://spoti.fi/31Dp4Sq * En Itunes: https://apple.co/2WNKWHV * En Youtube: https://bit.ly/2JLaKRj * A través de Player.fm: https://player.fm/series/codigotecno * Y en Google Podcast : https://www.shorturl.at/FKP17 https://www.alejandrosoler.com.ar

Start Over Coder
055: CSS Grid Is Awesome!!!

Start Over Coder

Play Episode Listen Later Dec 30, 2020 14:58


Verdict on CSS Grid…it is awesome! This episode is about what I learned after digging in to the syntax and how you can learn it as well. CSS Grid is a new display method that is part of the native CSS3 syntax, and is supported in the majority of modern web browsers. The primary advantage of using grid is that you can create a web page layout by placing your content anywhere you like on a grid that you define yourself. No more floats, clears, or adapting to someone else's grid system—just build what you need and it works. Using CSS grid also make is incredibly simple to make layouts responsive with not very much code at all. Below is a list of the CSS Grid resources I've found to be the most helpful as I learned. Top Recommendations: Start Here! CSS Grid Changes Everything - YouTube video Learn Here! Wes Bos' CSS Grid Video Course - highly recommended! Talks & Demos (video content) Start Using CSS Grid Layouts Today (conference talk) Build a Mosaic Portfolio Layout with CSS Grid Creating a nice layout CSS Grid layout using grid template areas How to Create Website Layouts Using CSS Grid CSS Grid Layout Crash Course Flexibility & The Fold – new possibilities with CSS Grid Web Demos & Documentation CSS Tricks Complete Guide to Grid Grid By Example - Rachel Andrew demos Jen Simmons Labs Learn CSS Grid MDN Documentation This episode was originally published 2 February, 2018.

Programador X
Aprende CSS en 10 minutos

Programador X

Play Episode Listen Later Oct 30, 2020 14:22


Te explico claramente qué es CSS y como funciona. CSS (Cascading StyleSheets o Hojas de Estilo en Cascada) se utiliza para dar estilos a HTML o XML (XHTML o SVG).

Disfruta Programando
Desarrollo de aplicaciones desde el navegador y WebAssembly

Disfruta Programando

Play Episode Listen Later Oct 25, 2020 35:48


Disfruta programando. Episodio 89. La mejora de la Web abarca una enorme disposición de reglas y procedimientos en los que cada ingeniero debería pensar. En algún momento del pasado, HTML5, CSS3, JavaScript, PHP y MySQL se utilizaron como avances fundamentales de mejora web para construir un sitio o una aplicación web. En cualquier caso, con el surgimiento de algunos nuevos avances, instrumentos, estructuras y dialectos de mejora web en los últimos años, ahora se ha vuelto muy difícil elegir en qué enfocarse (y qué omitir). WebAssembly es otro gran logro en el mundo de la mejora web. WebAssembly puede ayudar a los diseñadores a crear aplicaciones web rápidas que se requieren especialmente en juegos, música, aplicaciones CAD, alteración de video y transferencia. Toda la información de este episodio en el artículo del blog https://desarrollo-de-aplicaciones-desde-el-navegador-y-webassembly

Schrödinger Hat
Bootstrap 5 - La rivoluzione del framework più popolare della community

Schrödinger Hat

Play Episode Listen Later Aug 30, 2020 21:24


In questo episodio approfondiremo i cambiamenti avvenuti nella version 5 (alpha) del framework boostrap. Tanti cambiamenti tra cui: la rimozione di jQuery e il supporto a Internet Explorer, l'aggiunta delle custom properties di CSS3 e molto altro. Seguiteci su: linkedln: https://www.linkedin.com/company/schrodinger-hat Facebook: https://www.facebook.com/schrodingerhat Instagram: https://www.instagram.com/schrodinger_hat/ Twitter: https://twitter.com/schrodinger_hat Live ogni venerdì su: twitch: https://www.twitch.tv/schrodinger_hat Youtube: https://www.youtube.com/channel/UC1QLLgrGrPmlaFhS0orykCA

Pipoca Ágil
#47 Agile - Um mundo a ser descoberto - Por Eduardo Capella - CEO da Capellaweb

Pipoca Ágil

Play Episode Listen Later Feb 17, 2020 12:28


A Capellaweb é uma empresa de Design especializada em Branding, Websites e Cursos Online. Foi fundada em 2009 por Eduardo Capella, designer formado pela PUC-RJ e proprietário da Haut. Mas o que a Capellaweb faz, exatamente? Branding Criamos um conceito de marca e representamos visualmente em diversas mídias e objetos suas ideias e valores. Criamos logos, cartões-de-visita, assinaturas de email, papéis timbrados, flyers, folders, pastas, camisetas, cartões postais, imagens para Redes Sociais, cartazes e diversos outros produtos, impressos ou digitais, solicitados pelo cliente. Sites Desenvolvemos sites, basicamente em WordPress, com HTML5 semântico, CSS3, PHP e jQuery. A usabilidade e UX são tratadas com carinho pela nossa equipe e todos os códigos são validados. Todos são responsivos, isto é, o layout se adequa à resolução do dispositivo em que é exibido, otimizando a experiência do usuário ao acessar o site em tablets e smartphones. Além disso fazemos a configuração inicial de SEO (Search Engine Optimization). Cursos Online Criamos todo o design de telas e interfaces para cursos online, além de atividades interativas de aprendizado. Nosso principal cliente neste setor é a FGV, líder em cursos online no Brasil. www.capellaweb.com.br --- Send in a voice message: https://anchor.fm/pipocaagil/message

Learn With Us
Author of Svelte and Sapper in Action - Mark Volkmann

Learn With Us

Play Episode Listen Later Feb 10, 2020 71:05


Mark Volkmann is a partner at Object Computing, Inc. (OCI) in St. Louis where he has provided software consulting and training since 1996. As a consultant, Mark has assisted many companies with JavaScript, Node.js, Svelte, React, Vue, Angular, and more. Mark has created and taught many courses on topics including React, Vue, AngularJS, Node.js, jQuery, JavaScript, HTML5, CSS3, Ruby, Java, and XML. Mark is the author of the Manning book "Svelte and Sapper in Action". He is a frequent presenter at St. Louis area user groups. He has presented at the Nordic.js, Jfokus, NDC Oslo, Strange Loop, MidwestJS, No Fluff Just Stuff, and XML DevCon. Mark frequently writes articles on various software development topics. These can be found at https://objectcomputing.com/resources/publications/mark-volkmann.Mark’s book Svelte and Sapper in Action is published by Manning, an independent publisher of top quality books and videos for software developers. Manning’s books are written by experts like community leaders, distinguished academics, and technology creators, so when you’re learning from a Manning product you know you’re learning from the very best.If you’re listening to this podcast, we’re sure you’ll be interested in Mark’s book, Svelte and Sapper in Action. Books you might also want to pick up include bestsellers like Deep Learning with JavaScript, and Secrets of the JavaScript Ninja. Reviewers have called Secrets of the JavaScript Ninja “Essential reading”, and “Excellent and comprehensive insight into the magic JavaScript.”If you use the code podlearn20 at checkout, you can get 40% off your first Manning order, including print books, eBooks, and videos. That’s podlearn20, no spaces, all lowercase. Just go to manning.com to buy. Also here areAnd Finally,

«Суровый веб» — тот самый подкаст от uWebDesign
[#217] Apple убивает веб-технологии

«Суровый веб» — тот самый подкаст от uWebDesign

Play Episode Listen Later Dec 20, 2019 178:12


iFixit разобрали MacBook Pro 16, Москва закупила Nvidia Tesla T4 для системы распознавания лиц, Госдума утвердила обязательную предустановки российского ПО, Apple убивает веб-технологии, а также CSS3 свойства, которые должен знать каждый. ПАГНААААЛЕЕ!!!11 Поддержите наш проект на Patreon: uWebDesign на Patreon. Спасибо всем за поддержку! Тему к следующему выпуску предлагайте здесь: reddit.com/r/uwebdesign. Пробуйте супер хостинг SmartApe. Теперь и с NVMe SSD!↓ Темы подкаста iFixit разобрали MacBook Pro 16. Москва закупила первую партию графических ускорителей Nvidia Tesla T4 для городской системы распознавания лиц. Госдума утвердила обязательную предустановку российского ПО на смартфоны. Как Apple убивает веб технологии. Мысли о разработке сайтов в 2019 году. Как собеседоваться и просить денег на новой работе. 10 скрытых CSS3 свойств, которые должен знать каждый. Пример персонализации пользовательского опыта в Airbnb. Спасибо всем за внимание, дай вам Бог на эти коротенькие семь дней!

Podcast Diseño
Anti-inspiración

Podcast Diseño

Play Episode Listen Later Oct 27, 2019 21:16


Siempre buscamos inspiración en todos lados, hasta en lo más simple y cotidiano, pero ¿qué sucede cuando algo resulta ser todo lo contrario? Como #HerramientaDeLaSemana te hablaré sobre Animista, un directorio de animaciones CSS3 genial y muy fácil de utilizar para todos aquellos web designers y front-end developers.Como agradecimiento por acompañarme hasta la temporada 3 del podcast tengo para ustedes::::::::::: GIVEAWAY::::::::::::::::Un eBook totalmente gratuito por parte de Podcast Diseño donde te comparto un par de tips y anécdotas para aprender a persuadir a los clientes, convencerlos de que una solución integral es mucho más valiosa que cumplir un capricho.eBook: Entre el Cliente y la Razón. Descárgalo totalmente gratis aquí:http://gerardocuellar.com/ebook-entre-el-cliente-y-la-razon/En instagram me encontrarás como:@podcastdisenoNo olvides visitar:http://www.gerardocuellar.com/episodio26Si quieres ser parte del programa Sponsors Creativos:https://www.patreon.com/podcastdisenoSi necesitas diseño disruptivo en tu empresa visita:http://www.vixe.com.mx#diseño, #ambientelaboral, #work #creatividad, #creativo, #creativos, #desafiar, #desafiocreativo, #diseñadores, #diseño, #español, #flare, #mexico, #pensamientocreativo, #podcast, #podcastdediseño, #podcastdiseño, #podcastenespañol, #podcasting, #podcastsobrecreatividad, #podcastsobrediseño #inspiracion

«Суровый веб» — тот самый подкаст от uWebDesign
[#211] Веб-разработка в 2к19 году

«Суровый веб» — тот самый подкаст от uWebDesign

Play Episode Listen Later Oct 18, 2019 128:14


Предложение нового метода в JavaScript, анонс стандарта USB4, несколько интересных стилей и хаков на CSS, веб-разработка 2019 года по версии JetBrains, а также рассуждения о десктопных компьютерах и работе с кадрами в IT компаниях. ПАГНАААААЛЕЕ!!11 Поддержите наш проект на Patreon: uWebDesign на Patreon. Спасибо всем за поддержку! Пробуйте супер хостинг SmartApe. Теперь и с NVMe SSD!↓ Темы подкаста Выпущен революционный стандарт USB4. Десктоп мертв, да здравствует десктоп. Чего нельзя требовать и за что нельзя хвалить сотрудников. String.prototype.replaceAll. Подчеркивания ссылок, которые заполняют фон при наведении. Многослойные тени на CSS3 box-shadow. Поворачиваем курсор мышки на CSS. Веб-разработка в 2к19 году по версии JetBrains. Apple Arcade — лучшее, что случалось с мобильными играми за последние годы. Бета Microsoft Edge на Chromium для Windows и macOS. Уже можно попробовать. Спасибо всем за внимание, дай вам Бог на эти коротенькие семь дней!

República Web
¿Por qué es el desarrollo web moderno tan complicado? #RW112

República Web

Play Episode Listen Later Oct 5, 2019 56:16


Este episodio está inspirado en un artículo del mismo nombre que este episodio y que encontré gracias al canal de Telegram de Andros que informa sobre historias relevantes en Hacker News. Hablamos sobre como el clásico HTML, CSS y JavaScript es perfectamente válido hoy en día, pero como todos sabemos el desarrollo web moderno, especialmente en la parte del front-end se ha ido complicando de una forma tremenda. Cada vez son más las herramientas y los flujos de trabajo que incorporamos o que pensamos que deberíamos incorporar a nuestro día a día. Comentamos cómo JavaScript es el responsable de que exista un cambio radical en la manera de afrontar nuestro trabajo. Hablamos de compatibilidad entre navegadores, CSS3, el estándar ECMAScript 6, Babel y el reto que supone mantener versiones locales y en producción. En la segunda parte del episoido hablamos sobre un curso de Python que ha empezado David y traemos unos interesantes enlaces de Radar. https://www.vrk.dev/2019/07/11/why-is-modern-web-development-so-complicated-a-long-yet-hasty-explanation-part-1/ Canal Telegram Entrevistas en Diferido de José Jiménez https://t.me/entrevistaendiferido Nuevo Canal YouTube Mozilla Developer https://www.youtube.com/channel/UCh5UlGiu9d6LegIeUCW4N1w/videos Introducción a Docker y Portnainer en el canal: https://www.youtube.com/watch?v=xW5chAETRNs&feature=youtu.be Instalación de Drupal 8 on docker y drush https://cursosdedesarrollo.com/2019/09/curso-de-drupal-8-iv-instalacion-con-docker-composer-y-drush/ Nos podéis encontrar en: Web: https://republicaweb.es Telegram: https://t.me/republicaweb Twitter: @republicawebes Facebook: https://www.facebook.com/republicaweb Sitio web de Javier Archeni: https://javierarcheni.com Sitio web de Andros Fenollosa https://programadorwebvalencia.com Sitio web de David Vaquero https://cursosdedesarrollo.com

República Web
¿Por qué es el desarrollo web moderno tan complicado? #RW112

República Web

Play Episode Listen Later Oct 5, 2019 56:16


Este episodio está inspirado en un artículo del mismo nombre que este episodio y que encontré gracias al canal de Telegram de Andros que informa sobre historias relevantes en Hacker News. Hablamos sobre como el clásico HTML, CSS y JavaScript es perfectamente válido hoy en día, pero como todos sabemos el desarrollo web moderno, especialmente en la parte del front-end se ha ido complicando de una forma tremenda. Cada vez son más las herramientas y los flujos de trabajo que incorporamos o que pensamos que deberíamos incorporar a nuestro día a día. Comentamos cómo JavaScript es el responsable de que exista un cambio radical en la manera de afrontar nuestro trabajo. Hablamos de compatibilidad entre navegadores, CSS3, el estándar ECMAScript 6, Babel y el reto que supone mantener versiones locales y en producción. En la segunda parte del episoido hablamos sobre un curso de Python que ha empezado David y traemos unos interesantes enlaces de Radar. https://www.vrk.dev/2019/07/11/why-is-modern-web-development-so-complicated-a-long-yet-hasty-explanation-part-1/ Canal Telegram Entrevistas en Diferido de José Jiménez https://t.me/entrevistaendiferido Nuevo Canal YouTube Mozilla Developer https://www.youtube.com/channel/UCh5UlGiu9d6LegIeUCW4N1w/videos Introducción a Docker y Portnainer en el canal: https://www.youtube.com/watch?v=xW5chAETRNs&feature=youtu.be Instalación de Drupal 8 on docker y drush https://cursosdedesarrollo.com/2019/09/curso-de-drupal-8-iv-instalacion-con-docker-composer-y-drush/ Nos podéis encontrar en: Web: https://republicaweb.es Telegram: https://t.me/republicaweb Twitter: @republicawebes Facebook: https://www.facebook.com/republicaweb Sitio web de Javier Archeni: https://javierarcheni.com Sitio web de Andros Fenollosa https://programadorwebvalencia.com Sitio web de David Vaquero https://cursosdedesarrollo.com

Non Breaking Space Show
Dudley Storey — Using SVG

Non Breaking Space Show

Play Episode Listen Later Feb 13, 2017


Dudley Storey is a Smashing Magazine contributing editor, teacher and speaker, his new book Using SVG with CSS3 and HTML5 is scheduled to be released later this Spring.

RWpod - подкаст про мир Ruby и Web технологии
35 выпуск 04 сезона. Five Rails Gotchas, Vim 8.0, Quill 1.0, Node.js Best Practices, Awesome Grid, Radiobox.css и прочее

RWpod - подкаст про мир Ruby и Web технологии

Play Episode Listen Later Sep 12, 2016 36:37


Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby A proposal of new concurrency model for Ruby 3 by Koichi Sasada, Five Rails Gotchas и Vim 8.0 released Ruby's Swiss Army Knife: The Enumerable Module, When abstraction is a mistake: ActionController::TestCase и Ruby Gems Could Harm Your Memory How Elixir helped us scale our Video User Profile Service for the Olympics, Unique partial indexes with PostgreSQL и Sneakers Exponential Retry Handler JavaScript Farewell to Node.js v5, Preparing for v7, Announcing Quill 1.0 и Stepping down as Nodevember organizer Node.js Best Practices, NaN and typeof и Oh shit, git! Awesome Grid - a curated list of grid(table) libraries and resources, Cookies.js - super simple cookie manipulation и Radiobox.css - a tiny set of CSS3 animations designed for your radio inputs

The Busy Creator Podcast with Prescott Perez-Fox
The Busy Creator 32 w/guest Vijay Mathews

The Busy Creator Podcast with Prescott Perez-Fox

Play Episode Listen Later Nov 17, 2014 41:20


Vijay Mathews (@vijaymathews) is a co-founder of W&Co., an interactive design & development agency based in New York. In the last few years, he's built mobile apps and websites for a variety of clients, focusing on the education, non-profit, retail, and government sectors. This conversation discusses running a multidisciplinary firm, the workflow and roles at W&Co., and the trouble with de facto standards in the design biz.   Show Notes & Links W&Co. does Design AND Development, and has since the beginning Chris Auyeung, Vijay's co-founder at W&Co. Josh Miles discussed the growth of his firm on a previous podcast episode They now “do the kind of work they want to do” They've stayed nimble so they can “keep the overhead low but still provide the quality of work they wanted to provide.” “We didn't have the mindset to say no to work; we were just getting started.” Designers should “know and understand the capabilities and limitations” of software and devices Zeitgeist, En Vogue … can you tell Prescott went to art school? The Polymath aka The Renaissance Man Vijay and his team have moved away from mobile applications toward broader digital/web projects “Maintaining native applications across a wide variety of platforms and devices was impossible.” 80% Websites, 20% Apps HTML5, CSS3, JavaScript “Do you need an app?” A question for webmasters and podcasters Candy Crush W&Co. applications on the iTunes store How The Sausage Gets Made Another reference to “The Museum in Minneapolis” (throwback to Episode 30 with Michael Bierut) Ask yourself “What could it be?” Websites that haven't updated since 1997 “Should you be using a photo-editing tool for web mockups?” ← Click to Tweet Word Processor Wars of the 1980s and The Browser Wars of the 1990s XKCD Comic on competing standards Previous episode on Project Management Apps with Bryan Orr Lingua Franca The Story of QuarkXPress Prescott New Year's Resolution for 2008: “Never use Quark again!” Eisenhower Methodology, again Remember The Milk Tools Adobe Creative Cloud Jira for bug-tracking (and modified for project management) Agile development Techniques Consider longevity in the marketplace (shorter-life projects can be more avant garde) Don't be too conservative during the ideation phase Play to your strengths in your roles (designer, IA, etc.) but join forces as well to have multidisciplinary crossover Utilise Master Pages in InDesign Habits Have a daily scrum meeting Examine your calendar the night before 30-45 minute run early in the morning to clear the head Arrive before the staff to sort email and admin

.NET Rocks!
Building Web User Interfaces with Jen Myers

.NET Rocks!

Play Episode Listen Later Oct 28, 2014 52:00


Carl and Richard talk to Jen Myers about user interface design on the web. The conversation starts out with a broad focus on what has been happening on the web with HTML 5 - the emergence of the Single Page Application (SPA) and the improvements on separation of data, structure and formatting. Jen focuses in on the challenges of the least mature of the trifecta of web applications - CSS. CSS is only at version 3; HTML and JavaScript are older and more mature. And while CSS3 is a pretty good version, there are still challenges there and there are tools to address them.Support this podcast at — https://redcircle.com/net-rocks/donations

.NET Rocks!
Building Web User Interfaces with Jen Myers

.NET Rocks!

Play Episode Listen Later Oct 28, 2014 51:59


Carl and Richard talk to Jen Myers about user interface design on the web. The conversation starts out with a broad focus on what has been happening on the web with HTML 5 - the emergence of the Single Page Application (SPA) and the improvements on separation of data, structure and formatting. Jen focuses in on the challenges of the least mature of the trifecta of web applications - CSS. CSS is only at version 3; HTML and JavaScript are older and more mature. And while CSS3 is a pretty good version, there are still challenges there and there are tools to address them.Support this podcast at — https://redcircle.com/net-rocks/donations

The Web Platform Podcast
10: Mathematics & Dynamic CSS Visualizations

The Web Platform Podcast

Play Episode Listen Later Sep 9, 2014 58:50


In the future, CSS visualizations will dramatically change. How they will change is debatable but they will enable developers to do a lot more than they may think. We may see custom properties like variables to further improve DRY (Don't Repeat Yourself) code & on-the-fly cascading calculations, CSS Extensions to create our own custom selector properties, custom functions, & custom selector combinations.  Some of these rules are even starting to be implemented in browsers today like “will-change” to pre-optimize changes in DOM structures and CSS Shapes. These will further help us define display, flow, & wrapping of content and it's containers. CSS is moving rapidly and this is just the tip of what is to come for web development in the coming years or even months in some cases.   It used to be to create powerful visualizations in a browser you needed to use Flash or some non-standard tool to get the performance & consistency you needed from complicated animations. Today we have help in bridging the gaps of today and tomorrow. CSS Preprocessors given us powerful features in our CSS code. Some of the more notable ones are loops, conditionals, variables, custom mixins/functions, and heavy grade math calculations. While these are extremely useful, they only help us, currently, before we even see CSS in the browser. Online tools like Codepen.io help us quickly build and view CSS, HTML, & JavaScript that can be easily shared and updated without the overhead of understanding setup, build processess, or dependency management. Although extremely powerful, this means that the tools we have only have the ability to allow CSS to react to change in the DOM in a limited capacity. Looking at todays standard CSS, we now have ways of doing some dynamic calculations and conditions in the browser and device viewers. Directives like @supports and @media give us powerful conditionals. We have several types units of measurement, such as viewport units, frequency units, time units, & resolution units. Rules like ‘calc' give us the ability to computationally react to mutations in the DOM tree. Keyframe Directives give us robust animation, the ‘transform' rule yields great power to setup and animate DOM structures and also dynamically change rotation, skewing, scaling, and translation both 2D and 3D space, all without needing one line of JavaScript. Resources http://davidwalsh.name http://codepen.io/thebabydino/live/08634ee35593c97bd8cfb2ddd9324c24 http://davidwalsh.name/css-supports http://www.w3.org/TR/css3-values/ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms http://css-tricks.com/five-questions-with-david-walsh/ http://codepen.io/collection/wHune/ http://codepen.io/thebabydino/pen/jgtof http://codepen.io/thebabydino/ http://techblog.rga.com/math-driven-css/ http://davidwalsh.name/css-flip http://css-tricks.com/a-couple-of-use-cases-for-calc/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations http://stackoverflow.com/users/1397351/ana http://davidwalsh.name/svg-animation http://stackoverflow.com/users/1397351/ana http://stackoverflow.com/help/badges/17/necromancer?userid=1878132 http://sass-lang.com/ http://www.myth.io/ http://dev.w3.org/csswg/css-extensions/ http://sarasoueidan.com/ http://shoptalkshow.com/episodes/129-sara-soueidan/ http://5by5.tv/webahead/81 http://www.sitepoint.com/css-variables-can-preprocessors-cant/ http://codepen.io/shankarcabus/pen/jcyDA http://daneden.github.io/animate.css/ http://codepen.io/thebabydino/tag/calc()/ http://figures.spec.whatwg.org/

The Big Web Show
Episode 111: Web Design Comes of Age

The Big Web Show

Play Episode Listen Later Feb 13, 2014 57:57


Andy Clarke and Zeldman discuss 10 years of web design history, running a successful freelance design business, the importance of writing, approaches to public speaking, CSS3 easter eggs, growing your small design studio business, responsive web design, and more.

Non Breaking Space Show

Estelle started her professional life in architecture, then managed teen health programs. In 2000, she took the natural step of becoming a web standardista. She has consulted for Apple, Yahoo! and Kodakgallery, among others. Estelle provides CSS3, HTML5 and JavaScript tutorials and detailed grids of browser support in her at standardista.com. She is the author of Mobile HTML5 and HTML5 and CSS3 for the Real World. While not coding, she works in construction, de-hippifying her 1960's throwback abode.

Category5 TV - MASTER FEED
245 - The Web Developer's Online Toolkit

Category5 TV - MASTER FEED

Play Episode Listen Later May 30, 2012


Robbie opens up his online web development toolkit and shows you what's inside, and how to use some of the tools.

The Big Web Show
Episode 27: Andy Clarke - It's Hardboiled

The Big Web Show

Play Episode Listen Later Nov 11, 2010 45:09


Andy Clarke joins Jeffrey Zeldman and Dan Benjamin to talk about his new book, Hardboiled Web Design, the evolution of the web, and the right way to design with HTML5 and CSS3. Links for this episode:Fantastic website design in Flintshire, North Wales from Stuff and NonsenseAndy Clarke (Malarkey) on TwitterWeb design and CSS training, workshops and DVDs for web designers | For A Beautiful WebHardboiled Web Design by Andy ClarkeFantastic website design in Flintshire, North Wales from Stuff and NonsenseMy new book, Hardboiled Web Design | Stuff and NonsenseHardboiled Web Design | Five Simple StepsA List Apart: Articles: Web Standards for E-booksTranscending CSS | The Fine Art of Web Design by Andy ClarkeSimon Collison | Colly | The Celebrated Miscellany

yayQuery (audio only)
Episode 16: A Gource of the Source, Of Course, Of Course

yayQuery (audio only)

Play Episode Listen Later Apr 22, 2010 37:41


Spring has arrived, and the air is thick with the smell of buzzwords. So if you've been begging for CSS3, consider your prayers answered. If you didn't think HTML5 Video was winnable until it was skinnable, rejoice! Templating more your thing? Shwing! Plus, jQuery's history will dance before your very eyes in a world premiere music video event that packs a healthy dose of 'corn! If I were you, I would have stopped reading this and clicked play a long time ago

yayQuery
Episode 16: A Gource of the Source, Of Course, Of Course

yayQuery

Play Episode Listen Later Apr 22, 2010 37:40


Spring has arrived, and the air is thick with the smell of buzzwords. So if you've been begging for CSS3, consider your prayers answered. If you didn't think HTML5 Video was winnable until it was skinnable, rejoice! Templating more your thing? Shwing! Plus, jQuery's history will dance before your very eyes in a world premiere music video event that packs a healthy dose of 'corn! If I were you, I would have stopped reading this and clicked play a long time ago