The related tag is executing a GTM container within itself, creating a potential security risk on the site. It would be ideal for us to gain access to that nested container to determine what is within it and migrate it to the parent container in order to remove the nested container completely.
What could be the possible solution of this issue?
Well just look at the ID of the other container, reach out to whoever manages your GTM assets and task them with finding the owner of the mentioned container and gain access.
If you want to copy things over from that container to yours and get rid of it without having access to it... You could inspect your local sources, but that would just be a lot of minified code mixed with user logic. There used to be this tool called GTM spy, but it's not available currently. Finally, you can just block that container from loading and study what changes in the DOM and in the Network tab when you smoke test main functionalities of the site.
Related
My company runs a web application and in a couple of places our clients have a text editor (CKeditor) into which they can enter text for display on the customer facing area of the app. The information has to be displayed in very specific ways due to the way the products are regulated, and the client often copy/pastes html with inline style rules that they get from directly from their suppliers.
A couple of times now, we've had issues come up where the inline style rules aren't assigned to classes or anything, so they affect other parts of the page. We can go in and manually fix the code, but it absorbs a bunch of time, and we run the risk of adjusting something and taking a product out of compliance, if we fix it we take on some liability.
We can't have the client be responsible for fixing it, as they have no clue what they're looking at, they literally paste it from the supplier.
We can make it so that the areas of the customer portal with content from the CKeditor open in a new tab instead of being displayed on the same page, and then the style rules wouldn't touch anything that they're not supposed to. This is the solution I'm considering right now, but it'll take a fair amount of time and will require the client to communicate the change to all of their customers; again, pretty strict regulations.
My question: Is there some way we can just put a container around any content entered into CKeditor, so it only affects a limited area on the display page? Something that will basically limit the scope of inline style rules, but that we can create outside of the ckeditor?
Thank you!
Apologies for any faulty terminology or vagueness, I'm new to the field and faking it as best I can currently :)
I just wanted to make sure I would be approaching this problem correctly when it comes time to publish our website next week that has had a few pages added onto it. Any advice is greatly appreciated.
So, as of right now we have an original container (Container 1) in Google Tag Manager, it has a few tags set up and working, great.
Last week, I created a new container in GTM (Container 2) and have been using that to test our dev. website. Adding a few tags to the new pages of our website so I am ready to add them to our actual published website once it goes live.
When I created Container 2 I sent the GTM code to the developer and he put it into the header of the dev. website
My question is.. when we publish the dev. website are we going to need to remove that code from the header and replace it with Container 1's code that way we are operating on the existing tags and I only have to replicate the few tags I made in Container 2?
Clarification: I want to keep my tags from Container 1 and use this container as the website still needs all these tags, I was just creating tags for additional pages to the website, it has otherwise remained the same.
Generally, you're not supposed to use a separate GTM container for lowers. GTM has its own environments made exactly for this case. You can just make a lower environment in GTM, get code for it and install it on your site's lower env. Here's more on it: https://support.google.com/tagmanager/answer/6311518?hl=en
Most of sites that use GTM, would use the same container and the same GTM env on prod and on lowers. They would just use the preview function in GTM to make sure everything's as expected and publish to the only env they have. And it works pretty fine in vast majority of cases.
In rare cases, it can be justified to have different GTM containers for dev and prod. But when you do this, you will have to keep both containers equivalent and your publishing to prod now would have to involve moving changes from one container to another, which is not a typical way of using GTM, so GTM itself doesn't have capabilities to do that elegantly. You would have to either export and import the whole workspace with changes to the prod container, or use this handy extension: https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa?hl=en
Now that we've overviewed how things should be done, let's get to your question at hand.
Your questions is, basically, asking whether your developers are going to replace container 1 with container 2 when pushing the lowers to prod. Ask them. But generally, it's better to have three things in place:
Have developers never push the GTM code from dev to prod, maintaining different GTM snippets on dev and prod.
Have a universal container-agnostic tracking logic in your containers, so that even if the developers push the dev container to prod, your tracking is still perfect and all the events are going to the production GA rather than dev GA.
Have a universal, container-agnostic logic that console.warns a GTM message if it detects that the dev container is being used on prod.
There.
In short, the easiest thing for you is to keep container 1 on prod and 2 on dev always, but maintain parity between them and move changes from 2 to 1 every time you're done with your work. That's the expedient option.
The proper thing to do is to remove container 2 completely, create an environment in container 1, have your lower env container 1 code deployed to dev, notify the devs that that container is for dev only and make sure your code there is universal.
Is there any way to load an angular component in isolation for design & testing purposes? I am attempting to redesign some components for a fairly complex angular app (it was started in angular2-rc and although it has been updated it's still following some bad design patterns - mostly due to work previously done by inexperienced devs on unreasonably tight deadlines, needless to say we are now developing this in-house). This makes it difficult to access certain nested components.
Currently my workflow for designing and testing a component is as follows:
Run the backend app (because of authentication checks etc. - the app is entirely private so needs a valid login to access anything)
Run the angular app (ng serve handles this and will obviously auto reload on change)
Log in to app
Navigate back to the relevant page (due to the login redirect taking me away from the page I was on)
Fill in the required data on the page to get to the point where my new component would show in a normal use case
Design/test/etc my new component, making any necessary changes
if (!done) { goto 2; } else { return; }
This seems excessive for designing a single component. There must be a better way to simply load my component directly for design and testing purposes. Ideally I would like my workflow to be something along the lines of:
Load the angular component directly instead of having to run the entire app (preferably with a way to mock any necessary inputs, services, etc)
Design and test component to ensure desired layout, style, functionality, ux, etc - making any changes as necessary
if (!done) { goto 1; } else { goto 4; }
Integrate component into app
Is what I'm looking for even possible? Surely I'm not the first person to run into this problem - UI frameworks are the first come to mind given how they provide a library of generic components to drop in wherever necessary.
Am I missing something? Or is the only way to do this just to create a simple mocked test app and drop the in-dev components there for quick and easy access?
Update
To clarify, I'm specifically trying to rapidly & iteratively design this component from a mostly visual/rendering perspective. I need to ensure cross-browser consistency, responsiveness at different screen resolutions, elements not overlapping incorrectly or rendering offscreen, colors/fonts/sizes/positions are appropriate in the context of the component (eg. <h3> is too big and looks out of place, lets try <h4> instead and see how that looks) etc. where the component has nested components which need to be displayed.
I tagged the question with html & css intentionally - not because those are the languages the component uses, but because those are the aspects of the component I am trying to test.
Thanks to those who have helpfully pasted a link to the docs (which, yes I have read) explaining how to unit test the component and briefly describing how to test certain rendering conditions based on the code (applied classes, attributes, styles etc). What I was unfortunately unable to find in there are tests such as:
expect(myComponent).toDisplayIdenticallyAcross(browser.Chrome, browser.Firefox, browser.Edge, browser.Safari);
expect(myLabel.color).toContrastWellWith(myComponent.backgroundColor);
expect(myNestedComponent).toRenderEntirelyOnScreenWithoutOverlapping(true);
That is to be expected as these are more subjective things which can really only be tested by looking at them and making minor tweaks as necessary. I'm simply trying to find a simpler way to do that without having to reload the entire app a minimum of three times just to see whether having my heading left, center or right aligned looks better.
I think it's hard to do unit testing on visual characteristics like you describe in your edit. I've never had to do that for a react app, generally you build a component and worry about what it looks like, and partially worry about it's layout, and it's parent also handles part of it's layout because the layout can vary on different pages but the component itself should still visually look the same. Also if you don't want to keep refreshing the page you can use chrome dev tools to update the css and see how it looks, then when you pick something you like, apply it to your actual code
Components are just classes. And they can be tested as such.
More
https://angular.io/guide/testing#component-test-basics
I know there are several tools available to find unused CSS on a static web page. But in most real world scenarios I encounter, a lot of the CSS is used after some or the other interaction on the page, maybe a new modal opening up or an options popup etc.
In such scenarios, what would you suggest? How do I keep a tab on my ever-growing render blocking CSS?
The only way I guess one could do that is by running regular unused-css-detector type tools in conjunction with Selenium - test known interactions and see whats left unused. But a big assumption here is that I'd need to know all interactions on my page which could use new CSS. Is there a way to achieve my goal without making this assumption?
In an ideal world, I'd be able to post-back all CSS used by a visitor's browser on my page to my server. Then I'd collect data over a month, aggregate, and get a pretty accurate idea about actual unused CSS.
Any good ideas?
I am the author of a tool that is aiming at doing what you are describing. Everywhere I worked, the CSS is this "append-only" thing that is too risky, too time-consuming to clean up. And even when you try, the ROI is so low that it not worth it.
So I am working on a tool that is very similar to what you are describing. The goal is to bring confidence on what can be removed, and to actually do it automatically by submitting pull requests.
A snippet of JavaScript is running in the browser and sends reports of what is being used to a server. Once enough data is accumulated to build some "confidence score", it can create Pull Request automatically to remove selectors that are actually not used.
It is still very early stage, but you are welcome to try it and give some feedback about it.
https://www.bleachcss.com/
I'm new to Go. I'm understanding the basics more and more but now I'm trying to learn how to interface the code with HTML.
My simple scenario is that I have a single web page with a list that's created by Go fetching information from a database, then building the html page from a group of templates. All I want is to make a simple list that will allow me to somehow mark it as complete/done when the <div> is clicked or something. Also, to be able to fully delete a "row" in my webpage list, a div basically.
So my list will indicate something is complete (I assume I must use Go to alter the css) and delete an item (completely remove that block of html). And remember, these items are stored in a database, so I must be able to identify the specific item.
Any help, ideas, resources, pseudocode, pointers would be greatly appreciated!
In web development, there are two "ends" where code executes; the browser and the server, aka. the front-end and the back-end.
A "click" happens in the browser and will execute code in the browser. That "browser-code" in turn may or may not contact the server for additional information and then render that information to the browser.
That means; the server has no control over what happens in the browser* and vice versa. That's the basics of web development.
Go is a language good for building servers. Javacript is the language that most browsers understand. What you need is Javascript, not Go.
* this is not entirely true but good enough as a base to start learning.