I used Angular 1 years ago but everything has changed....so I feele like an idiot. I'm using a material design implementation from "unpkg" in a simple desktop based javascript web application. without SCCS, React, etc.
Trying to activate a theme compiled using the theme builder at https://m3.material.io/theme-builder but there are no examples of how to put it into use.
In a simple single page app I have included the unpkg material components like so, following their readme, and a theme package created using the Material site's theme builder
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"** href="/xxxx/assets/css/theme.css"**>
<script type="text/javascript"
src="https://unpkg.com/material-components-web#latest/dist/material-components-web.js">
</script>
<script type="text/javascript"
src="https://unpkg.com/material-components-web#latest/dist/index.js">
</script>
<link type="text/javascript" src="/xxxxx/assets/app.js">
<html>
....
</html>
<script>mdc.autoInit()</script>
But I don't know how/where to put the compiled theme into action. I just get the default theme within the material components within the page. One issue is that while the theme builder explicitly says its for m3, I don't know what version of Material unpkg is giving me. The only example I can find is in back-end code in a c# application. This is an entirely front-end generated UI.
The theme compiled by the theme builder is not compatible with material-components-web. material-components-web is M2 implementation. At the moment there is no M3 web implementation, only work in progress - https://m3.material.io/develop/web
Related
I am working on a Microsoft product in which I want to use Microsoft Teams Icon.
Office UI fabric provides icons of Microsoft Products. But it does not provide a proper way to use them in an app.
https://developer.microsoft.com/en-us/fabric#/styles/web/office-brand-icons
The document states that you can use the brand icons through Icon component, but does not provide sample code for the same.
Documentation
Is there any proper way to use these icons?
Can we really use them using Icon component?
We can use it by importing the styles separately but I don't think its the proper way.
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/6.0.0/css/fabric.min.css">
<div class="ms-Fabric">
<h1 class="ms-font-su">Branded Icon Test</h1>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--xlsx"></div>
</div>
I was planning to migrate to Azure Web Services for hosting my MVC5 web app.
I successfully added continious integration with my git repo which sits on AzureDevOps (formerly known as VSTS). Azure has pulled my repo and I can see my website on .azurewebsites.net but without my css files?
When I view sourceCode I can see different build output as I can see in my localhost (MS Build and deploy regulary everything works fine).
Apparently, Azure all my css files added to one line:
<link href="/Content/css?v=dO_Yd8KQtA539X-oIYSdv6BQQYt4J4R-RXerlkp23281" rel="stylesheet"/>
in my localhost in my head section of the Layout.cshtml is:
<link href="/Content/css/google-font.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/style.css" rel="stylesheet"/>
<link href="/Content/css/swiper.css" rel="stylesheet"/>
<link href="/Content/css/dark.css" rel="stylesheet"/>
<link href="/Content/css/font-icons.css" rel="stylesheet"/>
<link href="/Content/css/animate.css" rel="stylesheet"/>
<link href="/Content/css/magnific-popup.css" rel="stylesheet"/>
<link href="/Content/css/responsive.css" rel="stylesheet"/>
Why Azure do this? I am using .NET Framework 4.6.1, while I saw on Azure WebServices when I create newly one it is 4.7. However, it isn't a source of this problem, right?
Because I have a free trial, I can't contact the Azure Help.
Have you configured bundling and minification?
It is off by default in debug mode.
you can turn it on by setting compilation debug="false"
When you deploy to Azure it deploys in release mode which turns on bundling.
you can read about it here
When I run my app in visual studio 2017 using IIS Express it is able to locate the favicon.ico in the wwwroot folder.
When it's deployed to IIS on a server then it can't find it.
I think it has to do with the url...
in development the url is https://localhost:44359
The favicon show up and if I manually type https://localhost:44359/favicon.ico then it returns it.
in production the url is https://localhost/reporting
The favicon doesn't show up and seems to be looking for it at https://localhost/favicon.ico (which returns a 404).
If I change that to http://localhost/reporting/favicon.ico then it returns the icon.
Can someone please suggest why it's not automatically looking for the icon under /reporting/ ??
I have a couple of routing issues as well, but other than that the app seems to work fine. I think the routing issues may have the same cause as the favicon.
Browsers only check example.com/favicon.ico - they don't check in subfolders.
If you're putting it somewhere non-standard (you are!), you'll need to point browsers to it. In the <head> of your pages:
<link rel="shortcut icon" href="/reporting/favicon.ico">
There is an issue with finding static resources for applications that are in subfolders of a website. However, in Razor pages, in the <head> you can use:
<link rel="shortcut icon" href='#Url.Content("~/favicon.ico")'>
where the ~ refers to your application's wwwroot folder.
I made an Android app in HTML5 and I compile it using Intel XDK + Crosswalk. Does anyone know how to force the app to open in landscape mode?
window.screen.lockOrientation("landscape"); will force landscape in Crosswalk builds.
here is sample code:
<!DOCTYPE html>
<html>
<head>
<title>Demo App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
window.screen.lockOrientation("landscape");
</script>
</head>
<body>
<h1>Landscape</h1>
</body>
</html>
We have not yet added the build controls you need to force opening in landscape in a Crosswalk app. We are working on our Cordova build system, which includes such controls. When that system is working correctly we'll migrate it over to the Crosswalk build system. At that point you should be able to control that aspect of your application.
I just wanted to say that it is possible to set the orientation to landscape if you use Crosswalk. Only problem is you will have to install crosswalk on your own server so that you are able to edit the .py file and edit the part about the AndroidManifest.xml and set the orientation to landscape. So it's not possible yet with XDK but it is possbile on your own server.
You can add the property the manifest.json
you can add the property in file manifest.json
Example:
{
"name": "my app name",
"start_url": "index.html",
"orientation": "landscape"
}
With this you will force all app to use landscape orientation.
Reference:
For More information orientation: Orientation Documentation
For More information manifest: Manifest Documentation
I have to come up with some good looking webpages for my professor which will include pages for topics like research work, current students, alumni, paper published, etc.
Can someone please help me by leading me to some good tutorial in website development ? I have planned to use Adobe Dreamweaver for this ? Is this a good software to start with as i have no prior experience with website development or creating webpages.
DreamWeaver: Not bad!
Just stay away from 'template' feature (updating DW templates makes a big MESS).
DreamWeaver Kick Start
Here's some basic information about DreamWeaver : http://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm
Website Templates
You can even skip designing your website from scratch and find a pre-fabricated one that suits you, with sites like these : http://www.steves-templates.com/
Web Design Kick Start
In case you're still set on designing a website from scratch (a great idea! but more work), it's hard to give out just one link for web-design. I think webdesign has two components : knowing HTML/CSS/etc, and making it "work". Here's a webpage (ugh ads) full of good advice by example, rather than by novel.
http://www.webpagesthatsuck.com/
Dreamweaver will be hard to learn if you cannot pick up the tools properly, because if you are not using the tools within Dreamweaver you might as well use a different text editor with syntax highlighting :
Notepad (or Notepad++)
Vim/Emacs
Coda
Along with a ftp and a local server to test (XAMPP/IIS) your webpages before displaying it to the public.
University webpages are very simple and not very heavy on design (at least from what I have seen).
So you are really only going to need to know what the following mean
<html>
<body>
<head>
<meta>
<title>
<p>
<strong>
<a>
<img>
and focus on the content being served.
And this is a bare html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Please do not use w3schools. Use it for a quick reminder every once in a while as to what certain tags do but do not use it for practice.
So start off with Opera Web Standards Curriculum as said there:
This is a web standards course
comprised of several articles, aimed
at pretty much anyone who wants to
learn web standards–based web design
from scratch. It is intended to take
the reader from nothing more than a
basic familiarity with browsing the
web, to being competent with CSS and
HTML, and have basic knowledge of
JavaScript and how it fits in to the
puzzle.
If you still choose to go the Dreamweaver way here are some supporting articles
Getting Started with Dreamweaver CS3
Getting started with Dreamweaver CS4
Learn Dreamweaver CS5