DOM not fully loaded - layout

Please check this web address It is what I have designed.
https://www.derafsh.app
If you open this in a mobile device, you will see embedded tweets overlap, if you rotate your mobile device and again rotate it back, the layout issue gets resolved. Could you please advise why this is happening?
I have tried applying different classes and javascript styling but no luckI am using Twitter's embedding functionality here

Related

Facebook playable ads with phaser

I am trying to make Facebook playable ad using Phaser3.60 but the problem is that Facebook block XMLHttpRequest which is used internally in phaser load to load images and sounds.
do do any one know a way to images to phaser without using its loader and without using XMLHttpResquest.
I tried to use imageLoadType: "HTMLImageElement" but it also gives me the same error, I dont know if facebook detect the XMLHttpRequest in the Phaser.min or in the game code.
I'm not sure if this is the solution for your specific problem, but after some tinkering, I learn abit about facebooks playable ads.
Disclaimer: First of all, I was not able the get the zip version to run.(not on the preview Tool and not even on a real campain)
With a single file index.html, with all the data inlined (just under the 2MB limit), I can upload the application and get the same Warning,
BUT after I click the Application (what executes FbPlayableAd.onCTAClick(), as mentioned in the yellow highlighted part), then the Done Button is activated, and I can deploy the ad.
I hope this helps.

Removed Thirtdparty webvitals issue

I checked the pageinsights of "http://www.briddles.com/riddle/9-bodmas?l=333"
Most of these are thirdparty. How can i sove it ?
I see 3 important groups there:
Youtube
Google Ads or analytics
Facebook
Here is what I would do:
I see the youtube player is hidden by default, I would reserve some space for the player (maybe with a lightweight placeholder) and only append the iframe when the user clicks "view answer". This lite-youtube web component is awesome and might help you out. Trust me.
Normally Google ads is not something you want to get rid of. I would just make sure to load these scripts with the async attribute at least.
For the facebook comments I imagine 3 approaches:
3.1. Render a placeholder with a button saying "See comments" or something like that and only fetch the scripts when the user press that button.
3.2. Use the Intersection Observer API so when comments section scroll into view, fetch de scripts and render. (You will have to reserve some space to avoid CLS).
3.3. Remove the comments section (if there is almost no usage) or use a different provider that is optimized for web vitals. I don't know which one, but it's still an option.
Extra recommendations:
The main image is too heavy for mobile users, try to use a responsive image, compress the image and choose a lighter format like webp for browsers that support it. More info about image optimization here.
Reduce the amount of fonts you use and, if possible, host it by yourself and use a CDN. Google fonts is practical but to host your fonts is better for performance.

Change browser window size programmatically

I am developing a responsive website. For each and every change I made in javascript, css & html file, I need to test it in all possible screen size in portrait and landscape mode. Normally we used to test it in 3 to 5 different browser window size, and in portrait & landscape. I felt changing screensize and orientation again and again is a tedious job. So planned to write a tool, which will open multiple browser windows in a different screen size with the given url loaded in it. Any idea, or advice how to start this?
PS. If you are voting for deleting this question, please consider commenting with some suggestion how I can start, or is there any free tool available for this.
Thanks in advance.
There are number of great tools and services for helping test a website in just about every possible OS/browser/size these days.
BrowserStack.com allows you to pull up your website on nearly every combination of OS/browser/size and use the site to see how elements and features perform. There are other many other services that do this.
Another option would be a browser extension/plugin like Chrome's Window Resizer. It allows you to quickly toggle between common (and custom) window sizes. This is the most manual of the three options here, and the only free option.
One final option is Adobe's Edge Inspect. This app allows you to connect several devices to your computer and simultaneously browse a site across each of the devices. It also allows you to remote inspection on each of the connected devices.
Tools like Selenium can drive browsers and resize them as needed. Depending on the language of your choice, google for something like: selenium resize browser (language of your choice)

WP7 Emulator Browser not displaying anything

I use the webbrowser control to display a webpage from an application, but it just displayed a white screen. I tried Internet Explorer and it did not display anything either.
Any ideas how to fix this problem.
Thanks a lot in advance.
Windows Phone Emulator requires a DirectX 10 or above capable graphics card with a WDDM 1.1 driver. I assume that you got an error message on first start of the emulator that your graphic adapter isn't capable for all functions the emulator is using and that this may impact XNA games and sometimes silverlight like this one:
If your graphic adapter does not fully support DirectX 10 or doesn't has a WDDM 1.1 driver you will only see a white screen instead of the rendered webpage. This also affects all controls using MultiScaleImage, including the webbrowser control. As far as I know there is no solution for this at the moment.
To check if the emulator is running the required GPU emulation take a look at the arrow to open the application list and if it points to the right or left. If it points to the left, NO GPU is available - if it points to the right (as on the hardware phone itself) the GPU is available and rendering should work as expected.
See also this page in the msdn.
You haven't said if you're testing a local/private page or one on the web.
Also test other pages on the web. Can you view anything or just your own page.
If you can't see pages on the public web then you have a networking issue
If you can see public pages but not locally hosted ones then you probably have a different networking issue. If you're on an actual device or the emulator will likely greatly affect this.
The other things it may are:
you're trying to view a page that is to compilcated to be displayed (if there is such a thing - test with a very simple static page first)
the page uses useragent detecction and doesn't recognise the user agent and so is serving nothing
the page has complex javascript which runs before the page is rendered and the javascript is failing and so the page is never displayed.

Unable to link directly to WMV video file

I have a wmv video hosted in SharePoint. I've created a Content Editor web part with a bit of custom content and I've placed a simple link to the video Click to view.
There is really nothing special going on here. Some users can click on the link and the video opens in their default video player. Other users see a range of different errors/prompts. Some users are prompted for their network credentials and others receive a generic "Internet Explorer cannot display the webpage.
The same problems occur if I create a generic HTML web page (outside of SharePoint) and have users try to launch the video.
I am trying to avoid embedding the video in the HTML and just have users link directly to the video itself.
Has anyone encountered this issue and do you have any suggestions for making this work?
This appears to be a combination of browser issues and file security.
People are being asked for their network credentials because the file itself is not "public"; it requires authentication to be read, or appears to do so from your description. Different browsers will display different messages when attempting to authenticate for the file.
Additionally, the default player for a browser may not be set or the browser may not allow passoff to third party programs, both of which will generate different messages for different browsers. This will always be an issue for hot-linked videos, and there's nothing you can do about it except use some guaranteed playback platform that all consuming browsers must have installed, such as Flash or Silverlight. That comes with issues all on its own, but such is the nature of the online world.

Resources