Aztechnology
Member
Edit: Nevermind I figured it out.
-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
Aztechnology
Member
Is there any way to create a BB code or embed an HTML/CSS sheet here for a comparison image slider?
I'd like to link my images as a comparison image slider instead of just filling the page with excessive images when letting people compare the difference in an images in a thread. Do I have to link to a separate page and just link it? What are my options?
I'd like to link my images as a comparison image slider instead of just filling the page with excessive images when letting people compare the difference in an images in a thread. Do I have to link to a separate page and just link it? What are my options?
External link. It would be problematic if you could load js on a public forum.
Aztechnology
Member
Yea, I can imagine. Guessing there's no way to actually embed it though?
I had found this which is independent of JS.
https://codepen.io/beben-koben/pen/JKzyf
But I'd still need to setup an external webpage. Probably better to just create an HTML page/CSS, zip and share.
Iframes aren't allowed either. Github is probably your best bet for hosting as you can serve raw files for free and set them up as webpages.
Aztechnology
Member
Cool I'll look into it, thanks!
I'm doing some usability research and I'm looking to get people with dev experience to sign up for a few tests I'm planning on running in the coming weeks.
It'll be online, roughly 20-30 minutes and we'll need to record your screen + mic.
If any of you aren't familiar with usability testing, you'll be using an application and speaking your mind as you interact with it, expressing when things don't work the way you expect or when you hit any roadblocks. If any of you are up to it, please PM me for info or quote to view the form. You'll be compensated for your time (Amazon gift card).
Oh and if you sign up, DON'T try using the app beforehand.
It'll be online, roughly 20-30 minutes and we'll need to record your screen + mic.
If any of you aren't familiar with usability testing, you'll be using an application and speaking your mind as you interact with it, expressing when things don't work the way you expect or when you hit any roadblocks. If any of you are up to it, please PM me for info or quote to view the form. You'll be compensated for your time (Amazon gift card).
Oh and if you sign up, DON'T try using the app beforehand.
Tathanen
Get Inside Her!
I've been just following the official learning path. Building out their sample app, then gonna go page by page through the rest of the doc. They actually changed their whole quickstart in the middle of me using it which was kind of a pain in the ass.
Lister
Banned
Rangle's angular 2 training book is pretty up to date. I use it as a reference a lot.
https://angular-2-training-book.rangle.io/
I'd also recommend angular cli as your tooling environment, at least while learning.
I'm sitting here scratching my head what Apple was thinking killing deeplinks into apps with iOS 9.2
A client wants me to build a WhatsApp sharing icon that redirects into the appstore if the app is missing. It simply does not work anymore. All you get is an ugly and uninformative popup dialog telling you it cannot open the page because the address is invalid.
The worst part is, that it was all fine and dandy with iOS 8, where you could use an iframe to open the app or redirect to the appstore, if this did not work.
Too bad web intents died and there is nothing else on the horizon to get us out of this mess. What a shame
A client wants me to build a WhatsApp sharing icon that redirects into the appstore if the app is missing. It simply does not work anymore. All you get is an ugly and uninformative popup dialog telling you it cannot open the page because the address is invalid.
The worst part is, that it was all fine and dandy with iOS 8, where you could use an iframe to open the app or redirect to the appstore, if this did not work.
Too bad web intents died and there is nothing else on the horizon to get us out of this mess. What a shame
Web Share, the successor to web-intents just entered origin trials on Chrome: https://developers.google.com/web/updates/2016/10/navigator-share. Of course that doesn't mean anything for iOS since Apple makes a habit of stalling or avoiding certain web features to protect their app store.
so I'm trying to turn this into code:
I'm having an awful time trying to figure how to make the separators work
so far I got this:
https://jsfiddle.net/sikaffy/2ps7djhy/1/
HELP
I'm having an awful time trying to figure how to make the separators work
so far I got this:
https://jsfiddle.net/sikaffy/2ps7djhy/1/
HELP
runningjoke
Member
so I'm trying to turn this into code:
I'm having an awful time trying to figure how to make the separators work
so far I got this:
https://jsfiddle.net/sikaffy/2ps7djhy/1/
HELP
something like this? https://jsfiddle.net/b10hau8o/
thank you!!!!!
close to the edge
Member
Does anyone here have experience with Typescript? I'm having some issues with importing Javascript modules.I want to use a JS library (SimpleMDE) that has a type definition file on NPM (@types/simplemde). The typings file doesn't have a module like other ones that I've used, so I can't import it like the others (it just does "declare namespace SimpleMDE" and "declare class SimpleMDE") but the compiler finds it as a global variable, so it compiles just fine. When I try to actually open the page though, the browser complains about not finding the SimpleMDE class and I've also checked the built bundle.js file and the JS library is not there.
My setup is Typescript 2.1, Webpack and NPM. Source is here, the relevant file is src/components/Editor.tsx.
My setup is Typescript 2.1, Webpack and NPM. Source is here, the relevant file is src/components/Editor.tsx.
runningjoke
Member
If you just link the lib in your html file it probably works right? I've only done a hello world in TypeScript so I'm not 100% sure, but can you do `import 'simplemde';` like regular ES2015?
close to the edge
Member
I've not tried actually linking the JS file itself. import "simplemde" does work and the JS file is now included in the bundle.js file that Webpack builds, but the browser still complains with the same error. Really weird. I'll look into this some more tomorrow.
Does anyone use Adobe Muse here? I know it's pretty laughable to serious web developers, but I just do simple stuff and am having some issues with responsive design on it.
Just in case anyone does use it or is familiar: My responsive elements resize, however, they resize on their center points, leaving tons of space between elements. They're set for responsive width and height. Any ideas?
Can anyone help?
Just in case anyone does use it or is familiar: My responsive elements resize, however, they resize on their center points, leaving tons of space between elements. They're set for responsive width and height. Any ideas?
Can anyone help?
Syphon Filter
Member
Do you guys think its worth it to pay for host and domain for my portfolio? I have been using the free 000webhost all along but if paying is worth it I am willing to consider it.
*Figured it out*
Kinda.
Does anyone have any input on break points? After giving it some thought, I'm going to redesign starting with mobile, and then tablet / desktop. I think it'll help me organize my content better and (hopefully) avoid a lot of issues later on with different mediums.
That said, does most everyone stick to 320 for mobile and 768 for tablet?
Kinda.
Does anyone have any input on break points? After giving it some thought, I'm going to redesign starting with mobile, and then tablet / desktop. I think it'll help me organize my content better and (hopefully) avoid a lot of issues later on with different mediums.
That said, does most everyone stick to 320 for mobile and 768 for tablet?
It's worth paying for a domain name and hosting it somewhere free like GitHub Pages.
Lister
Banned
Id take alook at what the popular frameworks use.
Looks like bootstrap's breakpoints are:
Under 768 for extra small, 768 up to 991 for small, medium after that and 1200+ for large.
Apple devices are somewhat a standard regarding mobile breakpoints.
So 768 for tablet portrait and 1024 for tablet horizontal.
In the end it depends on the project and design. I have to use like 6 breakpoints right now for example, as the designer loved to change little things a lot even between the "normal"breakpoints.
So 768 for tablet portrait and 1024 for tablet horizontal.
In the end it depends on the project and design. I have to use like 6 breakpoints right now for example, as the designer loved to change little things a lot even between the "normal"breakpoints.
The Albatross
Member
Domain, sure. Host, it's up to you and you probably don't need one these days with services like Heroku or GitHub Pages. If you're technically inclined you could explore Amazon AWS and pay a few pennies a month to host your stuff and learn about AWS in the meantime.
I personally still have a host for my company website but it could easily be stored on a free service, but sometimes I need a place to stash a new client site for development or something, and so it helps to have that host available. Plus it's a tax write off.
I generally stick with bootstraps, 480px -> 768 -> 992 -> 1200
You just have to decide what makes sense for your project and content. Those are fairly common breakpoints but they might not always make sense.
The BBC for example have numerous style guides and tips about why they do what they do when using a grid system instead of just designing around screen size.
http://www.bbc.co.uk/gel/guidelines/how-to-design-for-the-web#what-is-responsive-web-design-
Syphon Filter
Member
What makes paying for the domain worth it? Also is the github pages for designers too? As I am more of a designer.
Tathanen
Get Inside Her!
Breakpoints are silly. A responsive site reflows based on the content design, and when a viewport is too small for that specific content. That may be six different points based on how it reflows, and none of them may correspond to random device widths.
But that's not how designers think, they are more interested in nice screens with a fake iPad as a background... It's possible to get some additional breakpoints between the normal ones, but I did not work on a single project in the last 5 years where we didn't have a phone, tablet and desktop breakpoint...
Domain names are cheap and look more professional if available, i.e. BobRoss.com > BobRoss.geocities.com. If you're looking for WYSIWYG to develop then I'm not sure GitHub Pages is for you, maybe someone here has a better alternative.
PetriP-TNT
Member
You can host any static site with GitHub Pages, so you can create your website with your WYSIWYG editor of choice.
Tathanen
Get Inside Her!
You are right. But it's how I try to condition designers at our company to think.
It.. doesn't really work. D:
We ask our freelance designers to work with me when I code their pages. If they can't see an arbitrary design breakpoint isn't the word of law "in real life", then we're not working with them on the next project.
StopMakingSense
Member
I generally just do a mobile and desktop design, and then when building out make the decisions at what point things best start breaking down in the middle.
When you both design and code and have an open minded client, sure. When the client signs off on designs and expects "nothing" in between those two, it gets more complicated in my experience. That "mobile" version may only look as designed in a very small fraction of screens, whereas the made-up tablet-appropriate elements will be likely to appear fairly quickly and often. Device agnosticism is the only real way to design user-centered interfaces.
This year, I've been developing internal web apps for work primarily with ASP.NET MVC / IIS. For the past couple of months, I've been moving towards React front-ends for the Views. I've been making do with ReactJS.Net, but I'm not satisfied with the support and feature state of it so far.
Recently, I've thought about moving to node to serve React-built apps that make calls to a .Net web service/api. The main roadblock is that I need to have node run as an IIS module, and the only solution for that seems to be iisnode. ReactJS.Net already has a small community of developers and iisnode is just that much more niche.
Anyone have experience with either iisnode or ReactJS.Net? Once I can get modules/WebPack working in Visual Studio I could be fine to just forget node for the time being, but I'm still left wondering if having node for React views would just make developement simpler.
Also, I'm still using MVC 5, so maybe my wants of node/npm integration are better fleshed out with ASP.NET Core. I also haven't installed node tools for Visual Studio yet, so maybe that would be satisfactory (I want command line development).
Recently, I've thought about moving to node to serve React-built apps that make calls to a .Net web service/api. The main roadblock is that I need to have node run as an IIS module, and the only solution for that seems to be iisnode. ReactJS.Net already has a small community of developers and iisnode is just that much more niche.
Anyone have experience with either iisnode or ReactJS.Net? Once I can get modules/WebPack working in Visual Studio I could be fine to just forget node for the time being, but I'm still left wondering if having node for React views would just make developement simpler.
Also, I'm still using MVC 5, so maybe my wants of node/npm integration are better fleshed out with ASP.NET Core. I also haven't installed node tools for Visual Studio yet, so maybe that would be satisfactory (I want command line development).
cartoon_soldier
Member
Anybody here good with SEO?
I have a question.
I setup a website for my business with a URL (www.kumarhero.com) using WIX.
Now I have another domain, www.herobikes.in redirecting to my site. Should I submit the other domain in Google Search Console for indexing?
I have a question.
I setup a website for my business with a URL (www.kumarhero.com) using WIX.
Now I have another domain, www.herobikes.in redirecting to my site. Should I submit the other domain in Google Search Console for indexing?
StopMakingSense
Member
No, it doesn't matter, unless that was an old domain that has existing inbound links to it. Then you'd want to make sure your are redirecting as a 301 to the proper url.
cartoon_soldier
Member
So submitting it won't index the second domain you mean?
StopMakingSense
Member
Oh I think I misread you. Go ahead and index the new domain. Might speed stuff up. Hard to say. A lot of that is just waiting for google to work.
Do be sure to properly redirect the content on the old domain, if possible.
rockinreelin
Member
So what's the dealio with angular2 nowadays? Seems everyone hightailed it to react around 1.5 years ago but I am not see a whole lot of react sites out there to be honest. At least with the sites I visit on a regular basis.
PetriP-TNT
Member
You don't see the react as much as you could spot the angular, maybe that's why.
Yeah, no react-tags. Not sure if it's a common convention, but I've seen people label react components with their Pascal case class.
PetriP-TNT
Member
You can download React dev tools and the React-tab will pop up on your dev tools on sites with React
You can download React dev tools and the React-tab will pop up on your dev tools on sites with React
Nice. I've been meaning to dl that.