Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
I've used jspdf for trucking load sheets and it's worked well, without any issues: http://parall.ax/products/jspdf

Never tried to print labels but because it's creating a pdf via data-uri you shouldn't have any issues with default styles overriding measurements or anything like that.

Adbot
ADBOT LOVES YOU

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

supermikhail posted:

Chrome after a while stops reloading JavaScript and gets it from the cache which is annoying when I'm editing it (supposedly it's not just JavaScript, but this is what's annoying). How do you work this thing? (Right now I "Clear Browsing Data").

Work in an incognito tab. If you're working with offline web apps this is also nice for having a fresh cache for testing and development.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Lexicon posted:

As a side project, I've decided to migrate my resume out of Apple Pages and into html - the idea being that I can version control it properly, etc. I'd like the CSS to roughly look like a paper resume at desktop device size, be appropriately responsive on mobile, and competently 'print to PDF' such that the resulting PDF looks like it came out of a word processor and not a web browser.

I know this is vague, but can anyone give me any pointers on getting started? The markup and responsive stuff will be easy enough, but I'm not sure how to tackle that third requirement.

I'm not really sure what you mean by 'looks like it came out of a word processor' but you can specify different css files for print than for screen, so you can optimize your layout specifically for a sheet of paper easily enough.

e;fb

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

pipes! posted:

Here's some of the newsletters I subscribe to (also Sidebar):

Twitter is also a great resource. Find personalities in areas you want to focus in, make use lists, and use a service that only show tweets with links to cull resources.

Thanks for the links. It's hard to tell what is going to be good vs. linkspam. http://webplatformdaily.org/ is a good site to check daily as well.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
Why can't the devs work in Linux? Plenty of web dev tools available in OSX are also compiled for Linux. What keeps them in windows at all?

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Pivo posted:

Just the current scroll position. It's a browser thing, I know we're not doing it on purpose. Just doing window.reload(true) or whatever it is to not grab from cache, since we've got a modal where people do some poo poo and if it succeeds we want to reload the page and we show a little success thing at the top and then their new data. The page has gotten long though and I'm annoyed that some browsers save the scroll position (although it's awesome when I'm actually browsing the web) so people don't see that success message and it looks all hosed.

Don't ask me, I'm not a front-end guy, just got roped into it like so many of us do.

If you don't have any other javascript that executes on page load, put this in a script tag after your <body> tag closes:
JavaScript code:
window.scroll(0,0);
if you do have javascript that executes on page load, just put it alongside that stuff.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
It's weird that .scroll only goes halfway up the page, maybe something is interrupting it. maybe something trying to take over scroll functionality?

Also, just pointing out, I can't think of many reasons you should have to use window.reload. Really the only one I can think of is if you're using appcache and you've swapped caches.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Pivo posted:

But seriously, how would you have fixed it?

Trying to display a font in a way that it wasn't designed? What's to fix?

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

fletcher posted:

Wasn't somebody just asking about whether they should use YUI in this thread?

http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui

According to some folks in IRC, Yahoo's teams are trying out Ember and React right now.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Lumpy posted:

Need to learn ux? Here's how

Make your call to action the link, and never, ever, ever, ever use the words 'click here' on a web page. That means you have utterly failed.

You got me!

But yeah, call to action.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Heskie posted:

I had a similar issue where a PNG was reversed upside down for my client's Safari a while back. They were using OSX Tiger (Safari 5 I think?) but it looked fine for me in Mavericks/Safari 7.

I think it was caused by the image's colour profile being saved as RGB rather than CMYK, so it could be that?

Web stuff should always be RGB. I doubt it was that.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

hayden. posted:

I'm making a sort of Harvest Moon game in HTML/Canvas and eventually want it to be multiplayer. In the meantime I want to be able to store map data (it's a tile structure). I want to be able to save and load this map data across multiple computers because I do dev work on three separate PCs, so that means the localstorage option is out doesn't it?

Another idea I had was using AJAX to a PHP page to get the data out of a MySQL database, but I am using GitHub to host my project and I'm not sure of an elegant way to have the database connection info not publicly available. This also has the downside of having to do a SQL query for data every single time a player needs it and it seems like that'd be really slow/resource intensive if there were a lot of people playing. This might be okay though because I don't really need real-time updating with a harvest moon like game, there can be a few second lag between updates and not really be a big deal.

The other option is using websockets or whatever to connect to a node.js server, but I'm only somewhat familiar with node and that'd be the most time consuming option and again run into the problem of storing database login/password in a file (to connect to a remote SQL database) on GitHub.

I also saw some possible options of having a local data storage solution with node.js, like maybe redis or a node package that stores data locally in JSON. That way the data would sync on GitHub.

I'm also concerned about the future of node because I know the lead guy left recently.

Can someone tell me what some good options are here?

If you need to load and save map data across multiple clients you definitely need a database somewhere. The easiest way to keep connection info to your DB secret is probably to make a separate module that you can require into your main server code that contains the info, and put that module into your .gitignore file. I wouldn't worry about your sql queries being slow unless they're really heavy.

Whether you use PHP or node for your back-end code is pretty much up to preference and what you want to learn/practice. Both are able to respond to ajax requests or use websockets. Are you planning on hosting the game on github pages or do you have a web server for that? As far as I know you wouldn't be able to run server-side code off github - just static pages and source code.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
I've been introducing stuff like grunt very gradually at work and I can see the value, especially for stuff like React where being able to recompile the jsx files live is pretty great. Not sure I want to jump down the browserify rabbit hole, but working with Node I can see the benefit of just being able to toss in node modules to solve problems I'd have some custom lib sitting around for previously.

Watching the .net devs at work struggle for a whole day to get up and running with a visual studio solution and all its stupid dependencies is enough to keep me off the IDE path for now. Sublime and Terminal are quite enough.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

caiman posted:

Which is better/faster/optimal: to call jQuery from Google's CDN in addition to your main JS file; or to use your own jQuery file that's combined into your main JS file? Option one means loading Google's fast and likely cached jQuery file, but option two means one less http request. Thoughts?

Generally people recommend hosting your own these days. The initial gain from faster loading is quite marginal compared to the risk of malicious injection of code into the cdn version (like could have happened last week with jquery), the cdn going down, etc.

It's also one more thing you can wrap together into your bundle if you're concatting/minifying your scripts.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

substitute posted:

I think Atom (https://www.atom.io) in the 6-12 months will probably become one of, if not THE defacto code/text editors for web development (and maybe more). Get on board now people.

I use and love Sublime Text every single day of my life. But I think Atom is going to be huge.

I tried it for a day last week and it crashed on me three times. I want to like it but sublime is just faster, more stable, and has a better package community right now.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

fuf posted:

Does the iphone browser try and detect phone numbers on pages and make them clickable? Client is complaining that when she clicks the phone number link it doesn't work and the number is invalid, but there is no link on the phone number. :confused:

drop this meta tag in your <head>:
code:
<meta name="format-detection" content="telephone=no">
source: https://developer.apple.com/library...0007899-CH6-SW1

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Mostly Sober posted:

Hi guys, I've just joined a small research project as a developer working on a learning analytics dashboard that looks similar to this:



They want the ability to drag and drop/reorder the individual cards at will using react. Would any front-end pros be able to point me in the right direction with regards to developing something like this, or any plugins that I can use to implement this functionality?

I've primarily been on the back-end till now and aren't too sure where to start, thanks!

This sounds like a great use case for react-grid-layout: https://github.com/STRML/react-grid-layout

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

nexus6 posted:

I'm being put on a project that will essentially need to be a webapp/HTML & JS game that
  • can be used on an iPad or a larger touchscreen monitor
  • can store data entered into fields in the app
  • can store the score achieved in the game
  • can (given an internet connection) upload stored data
  • can (given an internet connection) download data (e.g. previous game scores)
  • can work offline

(...)

Does anyone have a better way to solve this issue? I'm afraid the only alternative I have to doing this is quitting my job and if I ever have to do something like this again it will be a real option.

I'm not an iOS developer! Stop pitching offline iPad apps!

Your solution sounds fine. Application cache will handle caching your files offline quite well, as long as you get used to the way it works. localStorage has a 5MB limit on most browser/device combos and that's a lot of JSON. If you need more than that, look into pouchdb's client-side library for good cross-browser database functionality.

For pretty much everything other than UI testing you can develop in Chrome on your machine and emulate various levels of network connectivity as needed. I do a lot of web application development for iDevices in this way, and I rarely need to hook an iPad up for debugging anymore.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
There's also this: http://jsconsole.com/remote-debugging.html

But yeah, it's a pain and Chrome definitely doesn't always act the same as Safari.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

fuf posted:

Am I right that Safari on iPhone cuts off the top of a web page with its menu bar? Kind of annoying. Is there any way to stop that or to force a site to go fullscreen?

It does not, and the only way your site can go fullscreen is with a meta tag if your users save it to their homescreen.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
There are a ton of minimal css frameworks out there now as an alternative to bootstrap. I'm really liking Bulma lately but there are plenty of others. There is really very little need to go and use css modules or css in js, especially for a small project.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

ModeSix posted:

What does the asp. Net ecosystem bring to the table that really will make me want to do it?

Nothing except jobs.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Thermopyle posted:

Others have said the stuff I would say mostly, but I wanted to add that the new fetch api is pretty nice and there's a good polyfill for older browsers.

This. Fetch is great. https://github.com/github/fetch

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Knifegrab posted:

So I pass a props array to a component. Sometimes I reorder that array but my component doesn't update, and I'm guessing its because it is only looking at the top level of the arraay and since its just a sort the actual reference doesn't change. Copying the whole array seems like a process intensive thing, is there another way to force the copmonent to update. I wuld assume I could try and use ComponentWillReceiveProps but I am not sure if that will even be invoked since I doubt it sees this as a prop change...

The weird thing is I am slice the array so I would imagine the array reference is chanigng which I htought would cause a re-render in react. This is quite annoying.

This is what keys are for. Give each element in your array of components a key that is relevant to its contents (not the index) and that should solve the issue.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

McGlockenshire posted:

Not to belabor the point, especially after being pointed to the JS thread, but I'm irritated that all the transpiling solutions are so focused on the node ecosystem. I have no interest in installing a thousand dependencies so that I can invoke a tool every time I save a file to recompile the world before I can see if my code works.

Are there any ES6 shims or transpilers that work reliably just in browsers, as something I can just drop in and use script tags with? Google suggests that the only project(s) that did this (Babel) pivoted to be 100% preprocessed server side bullshit within the past two years.

I'm trying to tinker and get around to learning ES6 here, not build something for production.

Sounds like you want babel-standalone: https://github.com/babel/babel-standalone#usage

I went here: http://babeljs.io/docs/setup/#installation and clicked "Prototyping in the browser".

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Ruggan posted:

Ok so that is all well and good for application code with well written tests. I agree that your approach makes sense.

Maybe this is the wrong thread, but how do you guys handle versioning databases, if at all? This has always been a pain point and I've never found a good way. (...)

I would really love to hear how other large companies handle versioning databases in a robust, testable, trackable, clean way. Or even how you write good test scripts for database operations.

This may be a useless answer depending on your ecosystem, but at work we use SQL Server, and Visual Studio allows you to define your database in a project and generate migration scripts against a given database or just create a new one. It's great because the step of compiling helps you find bad references and you can migrate from any existing schema to your latest. Everything's just flat files so it's easy to put in version control and the diffs are useful, too. I'm not aware of any other solutions that are as good.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Ruggan posted:

Material UI (Next) vs Ant Design. Anyone used these?

I mean I have read some people in this thread mention Material UI. How’s your experience been? Did you use the beta version of the upcoming V1?

Anyone used Ant Design instead? Looks almost more robust than Material UI but not sure it’ll win as mainstream. It’s also not US based which means features / translations are English second.

Assuming you're talking about react libraries, I used material-ui a couple years ago and was extremely unimpressed with it, specifically how it handles themes and colors. Huge pain in the rear end. Maybe it's better now. React-md looks like it may be a better option if you want to go the Material route: https://react-md.mlaursen.com/

We use semantic-ui at work now and I really have no complaints, it's very comprehensive, easily extended, the docs are great, and it looks great: https://react.semantic-ui.com/

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
The Chrome team pretty regularly implements features using APIs that are still in the process of being proposed as web standards. Hell, google hangouts doesn't work in firefox because google implemented it using webrtc stuff that isn't standard. It's kinda rich for a google employee to be saying that.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

ChadSexington posted:

I'm setting up a personal site for myself and considering using CSS Grid for layout and responsive design. I'm pretty comfortable with HTML/CSS/JS, but I'm primarily a backend developer and out-of-date with what's going on in web design right now. I'm wondering if there's another option I should be looking at. Bootstrap, maybe?

Css grid serves a specific layout purpose so I'd recommend reading up on grid and flexbox and the differences between them to see what serves your needs. Rolling your own css is a great way to learn and I'd definitely recommend doing that over using bootstrap if your goal is to learn.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

UnfurledSails posted:

Is there a service that can send people a one-off email when they enter their email address in a form? I'm using Squarespace to whip up with a basic website for my father's company. Due to legal reasons he can't just list the prices, so he needs to send them on demand via email instead.

I've heard of MailChimp but that seems to be more about mailing list subscriptions and not an immediate response.

Check out Sendgrid, they have a free plan that lets you send 100 emails/day. We use it at work for one-off emailing (registration, etc).

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Nolgthorn posted:

Yesterday I was developing something and I added a `setTimeout` to my code. Compilation started warning about how `timers` was not defined and when running it in my browser it didn't work. It took quite a bit of frustration before discovering that Visual Studio Code had automatically placed `import timers from 'timers';` at the top of my file. I have no idea why.

Anyone have any clue, is that a new feature? How and what is `timers` and why is it related to `setTimeout` it looks like a node thing? I couldn't find any setting I could turn off.

Yeah VS Code does this thing where it looks through type definitions for the thing you're typing and imports it automatically if you tab-complete to that particular intellisense suggestion. I think the setting that controls it is `typescript.autoImportSuggestions.enabled`

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
That's fine until you want your sidebar to be full height, at which point you're hacking around with clearfix. Flex fixes a real layout problem.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

the heat goes wrong posted:

Just use flexbox man. While Grid is cool and all, it isn't that supported yet.

Support is actually pretty good, the main issue is IE of course: https://caniuse.com/#feat=css-grid

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Grump posted:

Does anyone have any experience implementing both Google Tag Manager and Analytics in a React app that uses React Router? Do I need both Google products? From what I’m reading, I can easily use GTM to create triggers on window location changes, but the actual user interactions are going to have to be coded into the event handlers with analytics.js

Is that right?

Yeah but there are libraries to make it work more nicely with react, like this one by the NY Times: https://github.com/NYTimes/react-tracking

I haven't used it but it might be worth looking into.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Tei posted:

I think Article 13 in the european union is the worst thing to happen to democratic values, freedom, security, privacy and web software developers.

Tei posted:

I have yet to study how Article 13 works in detail

ok

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Dominoes posted:

Hey dudes. Does anyone know what a Post body for JSON is supposed to look like? In Django, I print the request.body as:
Python code:
b'{"name": "My name", "email": "test@test.org", "message": "Nothing to say"}'
Is this correct, or are there extra bits needed? (Assuming 'body' is synonymous with 'payload', which appears to be the case for practical purposes)

but receive the error:
code:
Unsupported Media Type: /api/contact
request.content_type is
code:
text/plain;charset=UTF-8 CTYPE
. Does this mean "Content-Type": "application-json" in the header isn't being sent correctly? I assume this would trigger the above error.

request.content_params: {'charset': 'UTF-8'} CTYPE params]

edit: I think this is the issue; something's not taking on the client-side headers-setting.

Your post body is valid JSON so yeah the issue is the content-type header not being set correctly. it should be application/json, not application-json (assuming you didn't typo that)

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Nolgthorn posted:

You really just want to set window.location.href to the file location and let their browser do what it does with the filetype. In most cases it'll download.

Just to elaborate, this depends on the content-disposition header returned by the server. 'attachment' will make it prompt to save, 'inline' will attempt to display it in the browser.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
Microsoft Azure has a similar api and Here maps has one as well, shop around a bit.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

New Coke posted:

I've been maintaining an Angular app that allows employees to clock in via a web portal, and some of them are seeing the time appear incorrectly. First off, I've added a bit of logging to try to get some visibility into the problem and confirm my suspicion; that some of their browsers are using an incorrect timezone.

My first question, just so that I know I'm on the right track, is whether or not this line of code is telling me what I think it is:

code:
new Date().getTimezoneOffset()
I know what this should be, given my location, and based on the logging I've implemented, the user that has been experiencing this does get a different result for this. Am I correct in concluding that the browser's timezone is the issue here?

My second question is how this actually happens, or more importantly how the user can correct this. The offending browser is Chrome 81 for Android, and as far as I can tell there's no way to view or change the timezone; it's just set automatically using the system settings (yet the clock for this device is actually set correctly).

Finally, since all the users are in the same timezone, just hard coding the app to display correctly for the specified timezone is also an option. Do Angular date pipes provide a way to do this? Ideally, this would accommodate Daylight Savings, so that this doesn't break again in the spring.

You should be handling all this time stuff on the server side. Never trust the client. Make an endpoint that the client posts to that simply indicates the user clocked in. Get the time on the server when the request comes in and store it in your database in UTC. When you display that time to a user, send it to the client in UTC and use the client time zone to translate it, at which point the previous suggestions about luxon and moment become relevant.

Adbot
ADBOT LOVES YOU

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Violator posted:

I've been taking a look at my current workflow so the recent JS talk has been good.

What's the thinking on Bootstrap? Is there a better alternative? I used to build everything by hand on every project but then started using Bootstrap to simplify things since I was redoing a lot on every project.

Yeah there are tons of good css frameworks these days, just depends on what things you’re looking for.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply