Image
I'm working with next js for a digital agency website. There are several scripts that we should use in our next app. Firstly we tried to use script in _document.js file. Then we tried to create a component with those scripts and import it where it is needed. But unfortunately we failed in both cases. The scripts doesn't work. We also tried to use Script component from next. It’s also not working. But while we use those scripts directly to the component, as shown in the image, surprisingly it works. But we don’t want to use them every time with every components directly. We want to use it for one time but should work for every components that rendered. Is there any way to do this? I'm a new bee in this programing world. So I'm expecting help from my elders. Thanks in advance.
I'm trying to write those scripts for one time and expecting from them to do work for all the pages that rendered in the UI.
Related
The end result of what I'm trying to achieve is rather than having a single applications.css file, I want to split it into two sections -- a section I'm going to inline into the <head> tag, and then everything else. The reasoning behind this is that we want to inline the portion of our CSS that applies to above-the-fold elements of the page.
What I'm wondering is if there's a way to leverage the asset pipeline to remove the portion of the CSS that's inlined from the application.css file?
I feel like this is one of those problems where the way I'm thinking about the problem may be the biggest blocker, so totally open to alternative ways to think about this (i.e. not using the asset pipeline).
Just to make the problem more interesting, ideally I'd like a way to do this that's independent of the project itself, because there are multiple Rails front-ends where I'll need to apply this technique.
NOTE: Determining which part of the CSS I want to inline is not the problem -- that I have solved. What I'm looking for is a way to, as we continue to update our CSS in the future, make generating the two parts of the CSS a simple rake task, or integrated into the asset pipeline so it's done on deploy, etc.
Seems like the most straightforward way of doing this, if we assume that the asset pipeline (a.k.a. sprockets) is the right approach, is extending sprockets via an exporter -- the thing that actually writes assets to disk.
Update: I've instead looked at css-purge as an off-the-shelf solution for identifying which CSS is used on a given page. Having this as a separate tool that doesn't care that a given page was generated via a Rails app helps make it more useful.
Hi I am currently trying to follow this guide:
https://ribbonworkbench.uservoice.com/knowledgebase/articles/132235-create-a-workflow-short-cut-ribbon-button-no-code
So that I can create a button on the ribbon in CRM to start a workflow. The idea being that the user will fill in part of the form and then request approval.
However I have ran into an issue which is that at one point I have to define the library for the command actions to use and the guide state that we must use the "/_static/_common/scripts/RibbonActions.js" and the "/_static/_forms/form.js" library.
However not having done this before I have no idea how to include the library in the solution, so nothing appears on the library selection screen. I have tried searching how to complete this step but to no avail. Any help would be greatly appreciated.
Thank you.
What I understood is that you are trying to call a workflow from javascript on click of a ribbon button. If you have any reference javascript assembly then both of them should be referred for the javascript method to work as expected.
Lets assume we have two different javascripts files like reference.js and actual.js And the button is supposed to call a method button_click from actual.js. In such a case we will be adding two commands as follows:
Library:reference.js and FunctionName:isNaN
Library:actual.js and FunctionName:button_click
This way the reference javascript also will be loaded and the method should be working properly. Hope I was able to address your query. Let me know if you have any questions or still the problem persists.
There is a possibility to enter plain text to library field instead of choosing from a selector.
I'm new to and am loving Meteor. But, of course, every framework with nice features has flaws. For Meteor, it seems like the flaw is the amount of client-side scripts that have to be loaded to get an app rolling. Because of this, a relatively empty meteor app can take a bit longer to actually render anything than I'd like. I feel like it makes the site seem like it's broken for the first 6 seconds.
I know I could remove dependencies to save some time. I'm sure things are a bit better compressed outside of production mode as well, but in case this doesn't help when my app is finished, I'd like to be able to give the user some indication that the page is working.
One way I thought of doing this would be to add a background style while the scripts are loading. The problem with this seems to be that anything you add to a head tag in meteor gets loaded after the 20 or so scripts.
Is there any way to put style tags above Meteor's script tags and have styles render before scripts load and start processing?
It appears that by adding css files to the "client" directory and leaving their link tags out of the head tag completely, the stylesheets load before the scripts, solving my problem.
Let that be a lesson to me.
I often have a problem where I'm working on a dynamic web app with tons of front-end or back-end code and there is a CSS problem that just eludes me despite an hour of scratching my head. I know that StackOverflow could solve it in a second, and I'd like to post it, but I either have to
Make the app public along with steps to reproduce the state, or
Tediously copy out the DOM and assets (CSS) along with the current state.
Neither is very straightforward. Note that the DOM is dynamically generated so "View Source" won't cut it. Similarly, the CSS could be spread out across multiple files and I'd like to just grab it all at once.
Is there an easy way to copy out the DOM and all CSS as a single file so that I can insert it into something like JSFiddle and be on my way?
The quickest way to get all HTML on the page as-is is to paste this in the address bar:
javascript:alert(document.body.outerHTML)
You can also use the console, of course, but the above works even in old IE versions and is easier to copy/paste.
I don't think there's a good way to get the CSS at all, but you could try using a jQuery selector or similar to get the URLs:
$('link[type="text/css"]')
.each(function(x, link){
console.log(link.attributes.href.value)});
And downloading and concatenating the CSS.
Every tutorial/example i can find for meteor shows a single view application. I would like to build something a little more complex. I'm unclear how to approach multiple views...preferably in a way that's somewhat scalable?
The iron-router package lets you access different views (layouts) by nice, REST-ful human-friendly clean URLs. It supports parameters in the URL, "loading" templates, waiting for subscriptions to finish loading, before and after hooks etc.
At this point you can only create Single Page applications with Meteor. Note that Single Page, doesn't mean you can't have several views - use iron-router for that.
But by design, Meteor serves a big fat unique JavaScript/HTML/CSS application down to the browser, though there's a feature request to allow incremental loading. It is then up to the application (or more precisely, the JavaScript framework), to dynamically render its views in order to display different "pages".
I was wondering the same thing and it took me way too much time getting something started. I finally got a paged app working solidly by using Backbone views and routes, so I created a simple boilerplate project to make setting up an app like this easier in the future.
Live demo here: backbone-boilerplate.meteor.com
Source code here: github.com/justinmc/meteor-backbone-boilerplate
Have you looked at madewith.meteor.com?
A bunch of apps there have multiple views using Backbone also Jonathan Kingston who created britto has started simple meteor framework called Stellar
At this stage of the game not sure if there really are best practices. But these two seem to be the current flow.
You can also make a tabbed interface for multiple views. There is a package project "Smart package for generating a tabbed interface with pushState" github project here: https://github.com/possibilities/meteor-tabs
The best solution right now is using a routing package (router is basic but works). The workflow is something like this:
declare routes; return a template name for each route
place the reactive helper provided by the package in your body tag
the reactive helper will return the template associated to that route
you create a template for each route and optionally set custom publish functions
Router will give you browser history (client side).
Note that at this time there are some limitation on the way Meteor handles html/js. They are load all at the same time. The bright side is that once the app is loaded, page transitions will be instant.