Recently I tried Compose-Web but was not able to do anything good as my Jetpack Compose knowledge was of no use(I'm Android Developer) since all HTML-related components were being used.
But initially I heard that there are two ways to make a compose-web project
Using DOM API(HTML components like Div, Span, etc)
Using Compose Widgets(Rows, Columns)
Is the second method still valid?
if yes how can I use it in the project because by default IntelliJ is providing HTML components.
How to make Compose-web application as an Android Developer?
I'm asking this here because there is very less content available about compose web on the internet.
The ability to use compose.ui widgets with the js target is currently in the experimental stage. You can check it out in action as part of this experimental multiplatform example:
https://github.com/JetBrains/compose-jb/tree/master/experimental/examples/falling-balls-mpp
(there used to be a standalone js version in the top-level examples directory, but it got merged and now all the links to it are broken on the compose for web landing pages)
I've verified that it works after upgrading the webpack version to 4.10 in the build.gradle.kts file. Messing around with it myself, I noticed TODOs popping up in the console and it responding slowly to rapid page resizing, so I wouldn't think about using it for production use just yet.
If we are talking about 3rd party libraries, a very impressive library
that wraps material-components-web#14.0.0 for usage inside compose for web is Kompose Material Design Components (KMDC).
There is also a demo site here
Related
I am starting to build my own website using the Django framework. It has become apparent that in order to make quick progress I will have to use some form of external library to handle most of my HTML/CSS/Javascript, for example, https://materializecss.com
I have begun investigating different websites to see what works and what doesn't and I was wondering if there is a quick way to identify what UI library a particular website is using.
Chrome's 'inspect' tool doesn't really help me because I get lost with so much HTML.
For example, this website https://www.moneyunder30.com/category/banking apparently uses https://materializecss.com, is there a general place hidden deep in the HTML where I could look to find this information?
Thanks
There's a pretty cool Chrome extension called Wappalyzer
I am deploying a web application and I am able to compress CSS and js in my web application using page speed module in nginx/apache, but couldn't able to remove HTML white space.
Does anyone has done this before, I have seen this implementation in a major website such as LinkedIn Facebook, and Google.
Does removing white space in HTML add performance boost? As per my understanding removing whitespace reduces some extra bytes.
Here is an example of a condensed version of HTML page from google.
Does removing white space in HTML add performance boost?
Unlikely will you benefit much given that gzip is enabled for your site. The more you save during such a stripping phase the less benefit you would gain from gzipping and vice versa.
BTW, mod_pagespeed has the collapsible module doing what you're asking.
If mod_pagespeed doesn't meet your requirements
Multiple options
if you have a static html pages that just need to be returned to the user it's quite easy to do in offline mode
you can also do it at backend level using your framework batteries. I.e. in case you use a python framework this module could be used
django-html is an HTML minifier for Python, with full support for HTML
5. It supports Django, Flask and many other Python web frameworks. It also provides a command line tool, that can be used for static
websites or deployment scripts.
if none of the options above are viable use some 3rd party modules doing it at nginx level
depending on your needs you might also consider services like cloudflare
You can use tools like https://www.textfixer.com/html/compress-html-compression.php
If you use a text editor like atom or vscode you might as well look for a plugin that does that for you.
It doesn't really affect much on the performance, as you said it will reduce some bytes, but as I suspect you're not building something as big as an Amazon site it doesn't quite matter, moreover it will be a pain to read the code.
After reading up on critical path css, I was wondering how I could embed this into my builds. Are there any finished tools out there that does this already? The process needs to be automatable to avoid the inline CSS getting out of sync with other CSS.
If there is no such tool today, I can see how I could make one (say a grunt plugin), using this experimental script together with PhantomJS, but there is no point in re-inventing the wheel (if there is one already).
I had exactly the same idea - if you're still looking, I built exactly what we both wanted:
Critical Path CSS Generator. (I didn't end up using the tool you linked too since it misses psuedo selectors, media queries, non -webkit prefixed css rules etc).
More documentation is on the way, but basically just install PhantomJS first and then call the script like this:
phantomjs penthouse.js http://youSite.com/page1 yourSite.css > yourSite-criticalcss-page1.css
phantomjs penthouse.js http://youSite.com/page2 yourSite.css > yourSite-criticalcss-page2.css
You can pass in minified CSS as well as unminified - I don't modify the CSS except for removing unmatched selectors, rules (and I remove comments).
Use IISpeed or the Apache/Nginx PageSpeed modules
Google maintains some wonderful modules called PageSpeed that works for Apache and Nginx front servers. For those on .NET, just use IISpeed, the IIS equivalent of the PageSpeed modules. It is commercial and costs 100$, but is quite marvelous from a front-end perspective in what it does, and (among lots of other stuff) handles the main problem when using Penthouse: dealing with changing/dynamic content generation.
It works by injecting some javascript into the head of some of the first visitors to any page, analysing which css rules are actually being used. Then, after some rounds, it then collects these css rules and injects them as inline css in the head of that page for all subsequent visitors.
This is totally automatic and works on any ASP.NET page. You then avoid having to manually run Penthouse (mentioned above) on every page you like to speed up, and remembering to keep that css up to date (otherwise it will be out of date at some time, messing up your styles).
Penthouse is still great for pages where the content is mostly static.
I am looking for a general mechanism to internationalize web application that have to work in offline mode.
Initially I was considering adding data-i18n tags to elements but this seems like a very ugly solution.
I came across http://panacodalabs.github.com/The-M-Docs/#components_&_utilities/m_i18n however I do not wish (or can due to time constrains) port my application to that framework.
I need a HTML5 jQuery Mobile friendly solution to this issue, that works in offline mode.
It seems to me that this crucial component is missing on the HTML5 framework.
I wouldn't necessarily say this is a feature JQM should provide, because this is probably done best with some server side logic.
there would be two ways I can think of doing this:
1. have all your language translations in some standalone js files, which you would have to include in manifest file. check the datebox plugin to see how this could be done ( top right - options).
2. create a local database and store translations in the required languages there.
i think the first one should be easier to handle, but probably harder to setup/maintain. also, depending on the amount of translations, js files do become large...
Have you looked at the jQuery i18n plugin?
http://recursive-design.com/projects/jquery-i18n/
I'm currently using it with jQuery 1.7.1 and jQuery Mobile 1.1.0, and it works perfectly.
I want to develop a desktop application/widget, and would love to use a web technology stack. so I can...
Reuse existing skills
Run on multiple platforms (OsX, Windows)
Update application code without having the user upgrade (part/all of the code gets downloaded from the web)
Running in a browser is probably the best option, but one thing that is getting in the way is the browser's chrome (frame, tabs menus etc.) and background, as I want to create a transparent application (e.g. a semi-transparent, round clock that would display on top of other apps).
I'm thinking that a custom version of a browser (chrome or firefox) is probably the answer. All I would need to do is have a shortcut like:
...\chrome.exe -transparent -no_chrome ...\mywidget.html
Seems to me like a fairly obvious need, so before I consider forking chromium, I'm thinking there must be something like this already.
I know there's http://awesomium.com/ ($2,900 license cost), but it is an overkill as I don't need to embed a browser into a desktop app, API and all, and the cost is prohibitively high for a low-cost, limited distribution app.
There is also http://mozillalabs.com/chromeless/ but it doesn't seem actively maintained.
In addition, for both options, the installation overhead is huge (installing a full-fledged browser for the sake of running a widget).
Any suggestions? (please not Adobe Air - I want to use a standard web tech stack)
Take a look at this discussion for several options
http://news.ycombinator.com/item?id=2829126
-FT