I found this library for responsive CSS on github and then I started to ask myself... is Elm responsive? Theoretically, Elm does anything that HTML, CSS and JavaScript can do... I do not see any ways to read inputs such as operating system or screen size. And there may be other factors I am neglecting.
Perhaps one can write a port?
I have seen at least one case, F# where outside effects or requirements are handled by comonads but that is rather sophisticated solution. Here is a blog on co-effects which talks about Context-aware programming. It sounds sophisticated, but it's exactly what we want in responsive web pages.
Image from Wikipedia.
Most of responsive design is going to come from CSS via #media queries, so the main job of Elm is just to output HTML that isn't hard to style (e.g. avoiding tables for layout or inappropriate inline styles).
If you're wanting to dynamically do something based on the screen size, you can use the Window package, which can either issue a Task to retrieve the current size or subscribe to resizes events.
In general, I would expect that the output of an Elm program won't conflict with implementing a responsive design.
Here you find a step by step instruction how to create a responsive page with Elm: Responsive Design with Elm Style Elements. It avoids juggling with CSS but adjusts the HTML output.
Related
My first attempt at a RWD site was for a simple one-page site for an NFT project. It didn't use media queries, but many lines similar to: max(value, calc(vw*x)) for margins, padding, font-size, etc.
I also was dependent on Javascript. If the screen was <400px I might have a header bar anchored to the top with a profile pic left, title center, hamburger menu right, content underneath. If the resolution was larger socials appeared in one spot, if larger, in the footer. If the screen was over ... 600px, I lost the top header bar; title became the first line in the main content area; hamburger popup menu now a permanent fixture as left navbar, PFP floated left in the content area.
Being new, is this good or bad? I only hear people speak of flex boxes and grids. Not rearranging layouts with JS. Since the layout and content is essentially within JS code, any attempt at SEO for naught?
Using max() and calc() can work for simple layouts, but can become difficult to maintain for more complex layouts. Flexbox and Grid is more effective and efficient for creating responsive layouts. When it comes to SEO, it's important to ensure that your content is accessible to search engines by including it in the HTML of your page.
Javascript is great for making pages dynamic and obviously improving some UX things, but you should know where and when to use it.
You should definitely use CSS and media query for responsiveness on your page. There are a lot of frameworks or libraries that make the css writing process a lot less painful (I use Tailwindcss and I think is a good one).
And as for SEO, if you create a page based entirely on javascript, you will find a lot of difficulties in this area. You should read about server-side rendering, which may help you to improve this.
Today we have a lot of tools that can help you with this, if you use React you have Nextjs, if you use Vue you have Nuxjs and so on.
I'm currently putting together a PoC for the web. I've done about 9 years of iOS development so I think in those contexts/concepts. What I need to build is something similar to a UIScrollView/CATiledLayer for the web.
I need to build out a tool that allows users to build their own flowcharts, something I've already built on iOS. I'm prototyping on the web and I'm not sure where to get started. I've played around with a few canvas libraries thus far.
I want to build something that can have a fixed viewport with other components rendered off-screen. The viewport has fixed bounds that you can expand and allows me to put subcomponents in the view and move them around if I'd like to.
My web/javascript experience is pretty much Ember, React and plain old ES5/ES6. My HTML skills aren't that strong and I think I may have missed something fundamental.
My goal is to have something that can work with an existing react stack my company uses. I'm happy to roll my own solution but would love to get advice about the right direction to pursue. I feel like I have almost nil domain knowledge in this area.
This JS library, Dracula should be of great help to you since you're working with drag and drop flowcharts. You can see a working example here. NOTE: This lib is based on SVG and doesn't use canvas.
Here's another beautiful live demo: Source code for JS Flowchart here
Also take a look at this Dragon drop fiddle
And regarding ScrollView in HTML, you can simply use divs with css styles overflow-y: scroll and/or overflow-x: scroll. Using flex layouts, apart from giving you mobile-like development feel, will help you have so much control over your layouts based on the screen size.
Hope this should get you started.
So I realize one of the big problems currently in responsive web design is that you download large images when they might not be needed, like on a phone-causing a serious performance hit-which you also get to an extent with conditional loading with JS; so my question is couldn't I just load most of my images as background images within media queries and overcome this problem until something better comes around? Example:
/* base styles */
#media all and (min-width: 53.75em) {
header .inner{
background: url(‘../images/football_bg.png’) bottom right
no-repeat;
}
Obviously this is completely non semantic, but could solve the performance issues right?
Yes, using media queries and background images works like a charm, so if it's a good fit for your project then by all means use it.
Using background images isn't always possible though.
If this is the case, one option is Adaptive Images, which will serve different sized images based on the visitor's viewport. It's easy enough to retro-fit to an existing site and check if it will work for you.
Another possiblity if you use Foundation is that they've just released something similar which looks really interesting: Interchange
Good luck!
You could look into using Adaptive Images if you really care about semantics: http://adaptive-images.com/
Also here is a good article about solutions for images and responsive design. http://css-tricks.com/which-responsive-images-solution-should-you-use/
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.
In my app, there is going to be a page that occupies the whole window (i.e. you can't scroll in any direction, the page resizes itself to the window size). I'm sure I can do some CSS trickery to achieve that, but this page is also going to contain some resizable areas. Basically there will be a sidebar that the user can make wider (within a min-max range).
Essentially what I'm trying to do is recreate this page if you select "Border" under Basic Layouts. I'm at a bit of a loss about how to do this. Should I try introducing some jQuery UI, or is there a purely AngularJS was to do it?
I know I haven't provided any code, so I'm not expecting anyone to give me the full working code. But a nudge in the right direction would be great!
No, there isn't a "pure" AngularJS way to do it without writing some new code or adding a framework to the mix such as you mentioned. I'd suggest looking at the more popular UI frameworks and see how they fit (maybe jQueryUI, or even Sencha).
Additionally, you sh/could write a directive to wrap your usage of the component to black-box it a bit more and be in the spirit of AngularJS (& so that you could more easily replace it in the future).
Given that type of functionality can be a bit tricky to create cross-browser (depending on browsers supported), it's probably best left to others who've done it.
A bit late but guess it is what you wanted AngularJS UI Layout
A borderlayout or splitterlayout plugin with AngularJS.