Is there a way to create embedded "pure as3" swf fonts using compc (without the flex framework integration)? If I embed a font like this in my as3:
package fonts
{
import flash.display.Sprite;
import flash.text.Font;
public class Helvetica extends Sprite
{
[Embed(source='Helvetica.otf', fontName='Helvetica')]
public static var Helvetica :Class;
Font.registerFont( Helvetica );
}
}
using compc.exe -compiler.keep-generated-actionscript=true
I see flex makes some boilerplate as3 code including things like this:
import mx.core.IFlexModule;
import mx.core.IFlexModuleFactory;
import mx.core.EmbeddedFontRegistry;
which prevents me from using the embedded font in "pure as3" projects. Is there a way to get flex-free fonts using compc?
I am hoping there is an easy solution like this one for Bitmap Assets.
well, i think the method disrribed should work anyhow ... you just got to replace few more classes ... probably EmbeddedFontRegistry, so it won't have any dependancies ... just stuff in an empty method ...
greetz
back2dos
Related
I'm migrating a create-react-app to nextjs and am learning the ups and downs for the first time. Nextjs 13 introduces next/font and it seems, as I'm learning nextjs for the first time, a good idea to use it in my workflow rather than learning methods that be deprecated.
Desire
I want to use several Google Fonts and be able to reuse them across the app dynamically. As in, I could create a single file:
fonts.js
import { Roboto, Poppins } from '#next/font/google';
export const roboto = Roboto({
weight: '400',
subsets: ['latin'],
variable: '--roboto-default'
});
export const poppins = Poppins({
weight: '400',
subsets: ['latin'],
variable: '--poppins-default'
});
And reference this in any component in such a way that if I change the const name, or any parameters, all affected components will change.
My previous experiences / familiarity
In react-create-app I used sass globals in external stylesheets. I could import google fonts the standard way (#import), in a stylesheet and create a variable like so:
globalfonts.sass
$font01: 'Roboto, arial, sans-serif';
Components throughout the app could have their own stylesheets that referenced:
import globalfonts.sass
.componentname {
font-family: $font01
}
And if I changed the value of $font01, all components would adjust. This made it very easy to sketch out changes. I could create a similar $font01--size variable too, etc.
Question
I'm looking for a similar functionality in nextjs13 using next/font as mentioned above in previous experiences, via a stylesheet.
I've created an app/fonts.js file and I import it in app/layout.js in the app directory but I'm a bit lost as to what to do next as documentation still seems to reference the older method of using the pages directory, which appears to be being phased out.
I can import a const from fonts.js into each component and reference them inline as constname.className. But this obfuscates things by splitting my styling between stylesheets and inline font references. If I want to change font configs across the entire app quickly, it feels so much more straightforward to use sass globals.
Follow up question:
As I feel like very few references to next/font online are mentioning stylesheets, I feel I need to ask: Are stylesheets dying out? Is styling each component inline on a component-by-component basis becoming more popular?
Attempt
If I try the following in app/layout.jsx
import { roboto, poppins } from './fonts';
import styles from './globals.scss'
export default function RootLayout({ children }) {
return (
<html lang="en">
{/*
<head /> will contain the components returned by the nearest parent
head.jsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
*/}
<head />
<body className={roboto.className}>{children}</body>
</html>
)
}
The roboto font is not used. I'm unsure as to what I've done wrong.
And if I go and use className={roboto.className} on every single component I want to use this font for (some examples seem to suggest this method), it feels like I'm shooting myself in the foot if I want to change that font in the future. I'll have lost the single reference point I was using in my old method with having $font01
What's the easiest way to use a large css library (like bootstrap) in web components / shadowDOM app using LitElement?
Tried the following:
Use the link tag within the component. Works, but creates FOUC (flash of unstyled content).
Render everything to Light DOM (I'm using LitElement and they have a createRenderRoot() override. Works as well, but as the app gets more complex, maintaining component document isolation would be nice.
Looking for the simplest way to just use boostrap in this setting.
LitElement's recommended way to add styles to components is via the styles property. Loading external .css files this way is not straightforward, but there are some solutions.
The import way
If your definition of "simplest way" comprises using transpilers or module bundlers then you can use non-js inlined imports to accomplish something like the following:
import bootstrap from './path/to/bootstrap.css';
// ...
class MyElement extends LitElement {
static styles = bootstrap; // If your build system already converted
// the stylesheet to a CSSResult
static styles = unsafeCss(bootstrap); // If bootstrap is plain text
}
There are many plugins dedicated to this: see for example babel-plugin-inline-import, rollup-plugin-lit-css, rollup-plugin-postcss-lit, webpack-lit-loader.
The wrapper way
If you want to keep things (almost) buildless you can write a simple postinstall script that generates a .js file that exports the lit-ified styles:
// bootstrap.css.js
import {css} from 'lit-element';
export const bootstrap = css`
<bootstrap here>
`;
// my-element.js
import {bootstrap} from './bootstrap.css.js';
class MyElement extends LitElement {
static styles = bootstrap;
}
About Shadow DOM
If you want to use Shadow DOM you'll have to import the library in every component that needs to use it, even nested ones. This is not as onerous as it seems thanks to Constructable Stylesheets, used by Lit under the hood; think of it as a way for components to join style contexts more than a replication of identical stylesheets. Also, to keep things organized you can create a "base" component that imports bootstrap and extend it wherever needed:
import bootstrap from 'path/to/bootstrap.css';
export class BaseElement extends LitElement {
static styles = bootstrap;
}
class MyElement extends BaseElement {
render() {
// Bootstrap is ready to use here!
return html``;
}
}
Lit documentation about style sharing: https://lit.dev/docs/components/styles/#sharing-styles
In a React app I can include my CSS either using import or <link> it in the index.html file (From a CDN, for example).
What is the difference?
Is there any significant performance difference between the two methods?
To be clear, I mean this type of import from inside a *js or *.jsx file:
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
In theory, the only difference between them is that import is the CSS mechanism to include a style sheet and the HTML mechanism. However, browsers handle them differently, giving a clear advantage in terms of performance.
Also, using the tag allows you to define "preferred" and alternate stylesheets. You can't do that with import.
Overall, the tag is processed more quickly than the import rule (which is apparently somewhat slow as far as the css processing engine is concerned).
I have a web app built by Web app, which takes a lot of time to first loading.
After investigation- I've tried a lot of improvements, also that one of using only critical CSS on server side rendering.
but now' after SSR has finished- React generates a lot more CSS rules- which are not used at this point,
so my question is:
Is that possible to split CSS and load them on demand (i.e.: on route change)?
Any help will be appreciated.
Thanks in advance!
Try using css-modules.
/* style.css */
.className {
color: green;
}
Let's say you have the above styles file. You can use the below code to apply the styles.
import styles from "./style.css";
const ExampleComponent = () => (
<div className={styles.className}>
Hello World!
</div>
);
You should do the webpack config to make importing CSS files to work.
css-modules documentation
Dynamically imported components / Async components react loadable.
I solved the problem by using the amazing package: 'react-universal-component',
you can read about it more here and here.
You can use then the css chunks, or the way I did it-
split css files according to your components, and call them from the component itself, without using a 'wholeCss.css' file or something like this.
This way, you can be sure that no needed css was not loaded.
The site I'm currently developing uses Bootstrap's glyphicons for icons. I've just discovered that the site will be used in places where font downloading is disabled (users with IE11 which implements a group security policy). Given that I need to display these icons and that enabling font downloads is not an option I'm looking for ways I can do this. At the moment I see 2 options:
Remove the font icons and replace them with an image sprite
Use conditional comments (do these even work with IE11?) to provide an IE11 specific fallback
Is there anything else I can do in this situation or am I limited to those 2 choices?
My goto Workflow is using SVG sprites.
Here is my setup:
Optimize Icons using SVGO (https://github.com/svg/svgo)
Creat SVG Sprite using SVGStore (https://github.com/w0rm/gulp-svgstore)
Embed SVG via SVG tag
Use SVG4Everybody (https://github.com/jonathantneal/svg4everybody) to allow Cross Origin Requests
I use a gulp task to take care of it.
gulpfile.js
import gulp from 'gulp';
import gulpSvgmin from 'gulp-svgmin';
import gulpSvgstore from 'gulp-svgstore';
const dirs = {
source: './source',
dest : './dist'
};
gulp.task('svg:icons', () => {
return gulp.src(`${dirs.source}/assets/images/icons/**/*.svg`)
.pipe(gulpSvgmin())
.pipe(gulpSvgstore())
.pipe(gulp.dest(`${dirs.dest}/assets/images`));
});
index.html
<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/icons.svg#ICON_ID"></use></svg>
<script src="path/to/svg4everybody.js"></script>
This works pretty well and allows you to style your icons via CSS.