How to make polymer componets responsive? [closed] - responsive-design

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Im just begining to use polymer and i was testing to make a demo website using polymer components but i felt difficulty on making the pages responsive ?
Should i use css?
Thanks

Yep, you could use CSS. However, web components can be a bit tricky to get responsive because of their nature of re-use and possibly different locations.
Unfortunately, while CSS/media-queries are one solution, it's not the perfect solution. Why? Because the same component, depending on it's location/container may be desired to look/behave differently. For instance, a "voting" component in a primary content section (800PX wide) may display additional information vs the same component in a right rail (200PX wide) where just the question/answers may be displayed.
What we as web developers really need are "element queries", which allow components to react based on their occupying space (rather than the page-level layout). There are articles and polyfills regarding this that may be of interest to you. One can be found here:
http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/

IMO, you should focus on Web instead of Mobile, because the native Android browsers before Android 4.4 doesn't support Polymer, even with Polyfills!
Anyway there is a core-drawer-panel, which is a responsive layout you can start with.
https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel

Related

When using React, do I even touch plain HTML or are modern Websites built in JSX only? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 months ago.
Improve this question
I am a bit confused...Do companies use HTML/CSS and then add react.js to it or do they just use react + JSX + css only for building Websites?
The html and css with js is almost always the final result. So some companies create first their mock-ups to see how it will be visualized in all the clients they desired to render( mobile desktop etc) and then break it in to components with any behavior they need. Other just take a mock-up and start directly in the frameworks they choose. All depends the money time and resources available.
Normally companies are no longer working with plain HTML/JS/CSS anymore. That means that their use is restricted by the framework/library they are working with. In the case of React and other libraries to build SPA (Single Page Applications), it's a common pattern to use a single HTML file as an entry-point. Regarding JS and CSS they are normally used along with syntax extensions like JSX, libraries like styled-components etc, so they need to be transpiled and bundled to get them to work into the actual browser.

How to add Metaplex/Candymachine function to an existing website? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
I'm hoping someone can point me in the right direction. I would like to add the Metaplex/candymachine function to an existing website that was originally built to work with metamask. Just trying to save myself from having to redo the website. Thanks
There's no real easy way to do this unfortunately unless you have some prior HTML/CSS/and JS knowledge.
What some people do is take the logic from the CandymachineUI which can be found here CandyMachine.ts which is a type script file and port it over to their own website. You could also attempt to remake the UI calling to these functions and data, or failing that pulling the existing Mint area out the CandymachineUI site (built on React) and attempting to slot that into your existing site. I'd recommend if you took that approach that you swap out the MUI components for div's and your own CSS to save adding MUI to your site adding some bloat (unless your site already uses MUI then you good to go).
Bare in mind you'll also need the supporting dependecies too.
There are also other community built UI's out there but you are going to run into the same issues of porting over all the js/ts to your own site.
I always say it's generally quicker to rebuild a site around an already made mint template than it is to put the mint function into an original.

Simple app that shows pages depending on an API built with a static site framework [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
I created a project with React, but now I'm thinking of SEO
My project is very simple, although it shows 3D Models using React Three Fiber
But it also shows pages that are defined depending on some videos obtained from Vimeo (using an API), making the site a little dynamic, since we don't previously know which pages will be shown
The question is, can this site be successfully built using Gatsby, as a Static Sites Framework, or do I have to use an SSR Framework like Vercel's Next, because of the pages that will be generated from an API
Yes Gatsby is a good solution. If you realize in the future that you might need to be re-building the app a little more than you are comfortable with, then you can re-hydrate the browser on the users end to query data that you get from an api. This keeps the benefits of SSG (speed, robustness, and SEO), but adds some flexibility and dynamic nature to your application. You can set it up with the Gatsby docs (which are great for any problems you might have with Gatsby in the future). Extra info below: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr

designing websites for smartphones / mobiles [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
What is the best way to design a website and integrate web design for mobile devices within that website?
I heard the best solution is to simply create a separate CSS file...or redirect to another page that is designed for mobiles...
And are there any tools out there that make this task easier?
A lot depends on the complexity of the site. Many times your best option is to redirect to a mobile specific site. Frameworks like jQuery Mobile can be very useful.
There are multiple ways to achieve this.
You can use responsive CSS media queries to make the same page look different on different device sizes.
In case of standard CMSs like Wordpress/Drupal, there are plugins and themes which automate this for you.
Or you can use a third-party service like MobStac for Developers or Mobify to create a mobile version of your site.
Responsive comes with its own set of limitations; for ex. the markup and content being served to all devices is the same. It does not result in a lighter or faster site by itself. You should look at adaptive instead of plain responsive if you want an optimized experience across devices for your site visitors.

Mobile version of my website, what design width is optimal? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm going to create mobile version of website...
What width should I choose for design? I know that every device have it's own screen width and it's really difficult to fit all devices...
I'm really confused (pretty new to mobile websites world), please help.
Thank you.
Your approach will depend on how much effort you want to (or can) put into this and what range of mobile users you want to target. For minimal effort, simply use 100% as KennyTM points out and expect your website to be browsed on screen widths from 128px to 480px . With this approach, you'll also need to avoid 'advanced' xhtml directives such as css and divs (and javascript) because most mobile browsers cannot handle some aspects of these. Plan to use tables to manage layout.
For a more advanced approach, you can use an open source project called WURFL (http://wurfl.sourceforge.net/) which is a database of mobile browsers and their capabilities (screen width, support for div, css, images etc...). It has a jsp tag library called WNG where you write once and the tag lib will render the most appropriate html to match the user's device. I believe there is also a PHP library for this.
Rgds, Kevin.
For this sort of question, I can highly recommend reading the MobiForge developers' guide. Lots of useful advice in there, including how to pick the compromises that inevitably result from mobile development.

Resources