Using styled-components in React project with SSR. When the page loads more than half of the page weight consuming by styled components. Is there any way to improve this? Is it possible to minify generated styles ?
[
'babel-plugin-styled-components',
{
ssr: true,
displayName: false,
fileName: false,
}
]
You can pass this in your .babelrc config.
Good documentation here - https://styled-components.com/docs/tooling#minification
Although I am searching for a way to custom minify my classes. Anybody with any leads on that, please let me know.
Related
In the Apache Cordova doc (https://cordova.apache.org/docs/en/10.x/guide/platforms/electron/index.html), it is suggested to set "nodeIntegration" to true in settings.json file to use NodeJs and Electron API in the renderer part of my app.
However, in the electron doc, this action is not recommended for security reasons, and it is suggested to use a preload script to do so.
Is it possible to do the same with cordova-electron ?
Something like this doesn't seems to work :
{
"browserWindow": {
"width": 1024,
"height": 768,
"fullscreen": false,
"frame": false,
"webPreferences": {
"nodeIntegration": false,
"preload": "file://{Directory}/preload.js",
"contextIsolation": true
}
}
The "preload" option isn't read.
I'm using cordova 10, with cordova-electron 2.0.
Thanks in advance for any advice. :)
According to the Electron documentation we have to use absolute path for the preload and file:// protocol is considered as a non-absolute. If you change the path to a really absolute one the app will try to preload it.
The problem here is defining dynamic path in that json configuration. As far as I can see it couldn't be set using __dirname directive, so the easiest way at least for now is using nodeIntergration: true in cordova-electron build
I have installed Loopback 4, and mounted my legacy Loopback 3 app into it as part of my migration - all good so far.
However my (swagger-ui shaped) explorer renders expanded by default - and there are a LOT of endpoints and services - making it very hard to find what I'm looking for.
My instinct tells me I should be able to add a configuration here in my application.ts - but I cannot find anything.
this.configure(RestExplorerBindings.COMPONENT).to({
path: '/explorer',
docExpansion:'none' <<<<< this is what I would expect/like
});
this.component(RestExplorerComponent);
Has anyone been able to accomplish this? It seems from the forums there are a lot of requests for something like this.
You could try this.
https://www.npmjs.com/package/#loopback/rest-explorer
Overriding the Swagger UI index.html
For more flexibility, the indexTemplatePath property can be used to allow full customization of Swagger UI configuration options.
indexTemplatePath should be an absolute path to a html.ejs template.
To get started, download the default index.html.ejs,
add /explorer/index.html.ejs to your project, and update the configuration:
this.configure(RestExplorerBindings.COMPONENT).to({
// For example, create a directory "explorer" at the same level
// as "src" and "node_modules" in your applciation structure
indexTemplatePath: path.resolve(__dirname, '../explorer/index.html.ejs'),
});
you can then add
docExpansion: 'none',
inside the index.html.ejs file.
const ui = SwaggerUIBundle({
url: '<%- openApiSpecUrl %>',
dom_id: '#swagger-ui',
deepLinking: true,
filter: true,
docExpansion: 'none',
defaultModelsExpandDepth: 0,
defaultModelExpandDepth: 0,
presets: [
SwaggerUIBundle.presets.apis,
// SwaggerUIStandalonePreset
SwaggerUIStandalonePreset.slice(1) // Disable the top bar
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: 'StandaloneLayout'
})
I created a site with nuxt.js and bootstrap. For the responsive views i need to create different image sizes. Nuxt.js can't resize images. How do you do this?
Now I have the solution. Install responsive-loader and sharp.
Modify the nuxt.config.js and add the code under build: {}:
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
// Default block
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
// Default block end
// here I tell webpack not to include jpgs and pngs
// as base64 as an inline image
config.module.rules.find(
rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;
// now i configure the responsive-loader
config.module.rules.push({
test: /\.(jpe?g|png)$/i,
loader: 'responsive-loader',
options: {
min: 575,
max: 1140,
steps: 7,
placeholder: false,
quality: 60,
adapter: require("responsive-loader/sharp")
}
})
}
}
Now you can use the following code to display images
<img :src="require('~/assets/images/Foo.jpg?size=400')" :srcset="require('~/assets/images/Foo.jpg').srcSet">
If you don't want to rely on webpack for responsively loading images, you may want to try this nuxt module: https://github.com/reallifedigital/nuxt-image-loader-module
The downside to this module is that it doesn't currently support srcset natively and requires a local installation of the Graphicsmagick library. The upside is that anything that's available in Graphicsmagick (image manipulation wise) can be used to process your images. Also, you can implement your own image srcset from following the instructions and implementing your image tag like this:
<img src="image.png" srcset="image-1x.png?style=1x 1x, image-2x.png?style=2x 2x alt="" />
You should be able to implement any responsive image this way.
For our responsive views in nuxt, such as a 'feed' of latest content, we wanted to use smaller images from what was being used on the main articles, so this module does exactly what we need it to.
Disclosure: I wrote this module to solve our particular responsive requirement which, given the original poster's description, sounds like there's a lot of overlap.
It's not a task for Nuxt, but for Webpack.
You have to install a webpack loader to resize your images on build task and that will inject the srcSet in your html generated from Nuxt.js
eg. responsive-loader https://github.com/herrstucki/responsive-loader
About Nuxt.js & webpack configuration: https://nuxtjs.org/faq/extend-webpack
In my Apostrophe cms I have a portion in the header like this (in the outerLayout.html file):
<div id="sticky-header">
...
</div>
In the footer I have done the following:
<script src="/thirdparty/jquery/jquery-3.2.1.min.js"></script>
<script src="/thirdparty/sticky/jquery.sticky.js"></script>
I understand that apostrophe somehow includes jQuery, but if I do not include it myself I get an error in the console:
jquery.sticky.js:22 Uncaught ReferenceError: jQuery is not defined
at jquery.sticky.js:22
at jquery.sticky.js:24
I also have the following in one of the always.js files
$("#sticky-header").sticky({
topSpacing:0,
zIndex:1000
});
And that generates the error:
always.js:109 Uncaught TypeError: $(...).sticky is not a function
at always.js:109
How can I solve this?
In your case, the reason you need to push your own copy of jQuery is that including files from outerLayout is running front-end javascript OUTSIDE of Apostrophe's front-end asset pipeline.
To include your 3rd party / custom javascript INSIDE Apostrophe's asset pipeline (which is recommended and where jQuery is initially run) you need to push the javascript files from an Apostrophe module.
The quickest path forward is to push the asset from the apostrophe-assets module which should already be in your project.
in app.js
...
'apostrophe-assets': {
scripts: [
{
name: 'yourFile'
}
]
},
...
This will load lib/modules/apostrophe-assets/public/js/yourFile.js
More on pushing assets to the browser here http://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html
Down the road you may want to organize front-end assets by their appropriate module instead of pushing them all in a heap, this would be a good reference
http://apostrophecms.org/docs/tutorials/getting-started/custom-widgets.html#adding-a-java-script-widget-player-on-the-browser-side
Also, what you can expect to be there when you do push javascript
http://apostrophecms.org/docs/tutorials/getting-started/custom-widgets.html#what-39-s-available-in-the-browser
Thanx a lot Stuart - that definitely pushed me in the right direction :)
However what I ended up doing to make it work was to first put the files in lib/modules/apostrophe-assets/public/js/ like you suggested, and then edit the lib/modules/apostrophe-assets/index.js file:
module.exports = {
stylesheets: [
{
name: 'site'
}
],
scripts: [
{
name: 'bootstrap/js/bootstrap.min'
},
{
name: 'sticky/jquery.sticky'
},
{
name: 'scrollto/jquery.scrollTo.min'
}
]
};
I'm just migrating from Magento 1.x to Magento 2.x. I found that Magento2 uses RequireJS for handling JavaScript files. So I learnt what RequireJS is, and how to use it.
I found that most of the examples uses data-main="main" to define the configuration file.
In Magento2's default_head_blocks.xml file, I found the script tag like this:
<script src="requirejs/require.js"/>
Here they did not specify any data-main.
These are my questions:
How Magento2/RequireJS knows which JS should be loaded for configuration? (I found requirejs-config.js for this in multiple places)
By default Magento2 loads lots of JS (more than 20), how can I limit them?
I could not find enough documentation on this.
The best place to get all your answers for Magento 2 JS development is the Magento 2 docs, it really is a useful resource on this. http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html explains in detail about component initialisation.
To answer your two questions above -
Q.1. How Magento2/RequireJS knows which JS should be loaded for
configuration? (I found requirejs-config.js for this in multiple
places)
In each Magento 2 module there is a requirejs-config.js file to load all that modules configuration. i.e.
var config = {
map: {
'*': {
compareItems: 'Magento_Catalog/js/compare',
compareList: 'Magento_Catalog/js/list',
relatedProducts: 'Magento_Catalog/js/related-products',
upsellProducts: 'Magento_Catalog/js/upsell-products',
productListToolbarForm: 'Magento_Catalog/js/product/list/toolbar',
catalogGallery: 'Magento_Catalog/js/gallery',
priceBox: 'Magento_Catalog/js/price-box',
priceOptionDate: 'Magento_Catalog/js/price-option-date',
priceOptionFile: 'Magento_Catalog/js/price-option-file',
priceOptions: 'Magento_Catalog/js/price-options',
priceUtils: 'Magento_Catalog/js/price-utils',
catalogAddToCart: 'Magento_Catalog/js/catalog-add-to-cart'
}
}
};
This is telling requirejs where all the required JavaScript files are located.
There are multiple way to tell Magento when to use your JS file -
data-mage-init on a HTML element. e.g. <div class="block upsell" data-mage-init="{"upsellProducts":{}}" data-limit="0" data-shuffle="0">
script tag on the page e.g
<script type="text/x-magento-init">
{
"[data-role=tocart-form], .form.map.checkout": {
"catalogAddToCart": {}
}
}
</script>
within a JS file e.g. $('.yourSelector').yourPlugin();
Q.2. By default Magento2 loads lot's of JS (more than 20), how can I
limit them?
The sheer number of JS files that are loaded as a result of multiple modules is one of the downsides, however, with the correct usage of full page caching with a reverse proxy like Varnish the performance reduction is negligible, even in a development server.