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
Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

kedo posted:

I have an upcoming project with a central component that relies on an external API. The backend of the site is WordPress (at the client's request), but I can do pretty much whatever I want on the frontend. I'm curious if anyone has any helpful PHP/JS tools/frameworks they've used previously and would recommend specifically with regards to requesting/caching data from the API? I've worked with lots of APIs previously so I'm not totally ignorant, but I haven't worked on a project where the API was the cornerstone of the project. Thus I want to make sure I don't code something that's going to blow up too easily.

I'm still learning and not quite ready to start using React on client projects, unfortunately.

For requesting data, use fetch.

For caching: entirely depends on the API. You may not *want* to cache if the API returns new stuff over time with the same parameters. If you do cache, it's simple to make your own, and I bet there are a bunch out there already. Basically make selector functions you call with parameters which check an internal cache object. If there is a hit, return that, otherwise do a network thing.

I'll add some code maybe when I'm not on a bus!

Adbot
ADBOT LOVES YOU

kedo
Nov 27, 2007

Scaramouche posted:

That's an interesting question actually. There's tons of info about frameworks to build APIs but not a whole lot about actually using them. The last time I did I kind of gutted out something in Slim but that was a while ago and I have no idea if they're still around/updating.

Hmmm, I'll have to look into that. Based on a quick glance through the documentation


Lumpy posted:

For requesting data, use fetch.

For caching: entirely depends on the API. You may not *want* to cache if the API returns new stuff over time with the same parameters. If you do cache, it's simple to make your own, and I bet there are a bunch out there already. Basically make selector functions you call with parameters which check an internal cache object. If there is a hit, return that, otherwise do a network thing.

I'll add some code maybe when I'm not on a bus!

I've mainly used jQuery's .ajax() previously for this sort of work, but fetch looks handy. And yeah, I've definitely done my own caching previously that works more or less how you describe, but I feel like there must be an easier/better way.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

I think part of the problem you're going to run in to is that a lot of the solutions just arise out of using more advanced frameworks like React/Redux. With React/Redux in particular you end up with selectors functions that automatically cache without going out of your way to create a caching system.

I'm not sure there's going to be a lot of development time going on for not-modern-and-advanced frameworks...though I'd be happy to be proven wrong on that.

spacebard
Jan 1, 2007

Football~

Sleepy Robot posted:

Critique thread in CC is archived, I hope it's ok to ask for design advice here instead.
It accepts a use input list of genres, and a distance from the user's location
and it returns a list of venues (or bands) that match that genre and distance.

So this below is the search feature with some user input:



What main design changes should I make?

I think if the genre input is probably going to be the most heavily used. Maybe make it bigger with larger font inside. Maybe use an autocomplete/tagging style system that shows what you've autocompleted below the search box. Or a library like Chosen to turn a select list. Not sure if Chosen would work here though.

I think that the radius and date inputs don't seem to be aligned well both text and in position.

The palette seems to not correspond to anything. Have you look at what your primary color (#c65758) matches or contrasts with on a color wheel? The blackish color doesn't really seem to work in my opinion, and isn't anywhere near a secondary color for your primary color. I don't think it works at all for flat buttons and inputs on a color background like that. Does the entire set of form inputs need a background at all? A lighter background could work with some highlighting in the primary color or using a darkened version of the primary color as the text color.

I have no idea why the arrows on the side are supposed to indicate. Am I swiping left or right for something like a slideshow? Am I sliding to reveal other functionality?

Overall, it looks like functional like a developer's prototype, but it's busy despite the flat design. A flat design should work for a page like this to highlight the primary action, search, so I think that's alright.

awesomeolion
Nov 5, 2007

"Hi, I'm awesomeolion."

Does anyone have experience with pywikibot / media wiki bot usage? I've got it installed and I'm trying to get it to delete all pages in a category and it just adds this

{{delete|1=Bot: Deleting all pages from category Object}}

At the top of them. Doesn't delete them, just adds that ^. Am I missing something here?

Edit: If there's like a "best way" to admin a wiki from code please let me know. I started by sending individual HTTP GET requests to my wiki API which didn't work very well (for mass changes). Then I tried this pywikibot which seems to work even worse. Maybe this Wikimedia REST API is what I'm after?

awesomeolion fucked around with this message at 22:12 on Sep 21, 2017

Tei
Feb 19, 2011

I just noticed something dumb but interesting.

When a page is busy doing something intensive in javascript, the whole thread is frozen. This include rendering, so that gif with a loading animation stops.

This don't include CSS animations for some reason, they are in a different thread. So if you are doing some intense javascript poo poo, you could show a animated loading icon made in css, and it will continue moving despite everything else in the browser frozen.

I knew CSS animations where awesome, but is new to me that they have paracausical powers :D

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Tei posted:

I just noticed something dumb but interesting.

When a page is busy doing something intensive in javascript, the whole thread is frozen. This include rendering, so that gif with a loading animation stops.

This don't include CSS animations for some reason, they are in a different thread. So if you are doing some intense javascript poo poo, you could show a animated loading icon made in css, and it will continue moving despite everything else in the browser frozen.

I knew CSS animations where awesome, but is new to me that they have paracausical powers :D

Because CSS is not JS, so it doesn't run in the JS thread.

geeves
Sep 16, 2004

Tei posted:

I just noticed something dumb but interesting.

When a page is busy doing something intensive in javascript, the whole thread is frozen. This include rendering, so that gif with a loading animation stops.

This don't include CSS animations for some reason, they are in a different thread. So if you are doing some intense javascript poo poo, you could show a animated loading icon made in css, and it will continue moving despite everything else in the browser frozen.

I knew CSS animations where awesome, but is new to me that they have paracausical powers :D

Good explainer on the JS Event loop / thread

https://www.youtube.com/watch?v=8aGhZQkoFbQ

Tei
Feb 19, 2011

The interesting thing is a gif having to wait for a javascript function to end to continue looping, and a CSS animation not having to.

That javascript froze the browser is not new at all.

Maleh-Vor
Oct 26, 2003

Artificial difficulty.
Design tools talk:
I'm a senior web designer in a small team for a huge company. I've been using Photoshop for a long time, with the Sync plugin from InVision I feel I need a better tool for standard web and responsive design. Iteration is brutal and small tweaks can be a nightmare, so I'm looking for better options. It's gotten to the point I've resorted to mocking stuff up in HTML and CSS at points to get stuff across better.

So, I've been trying out some tools when time allows and well, I'm getting tired of waiting for core features to come to XD, tried out Affinity Designer but had a "death from a thousand papercuts" experience with it, and use a PC, so Sketch is off, unless I run it in a VM or try to get into hackintosh partitioning.

Since I work in a small team, I need to be able to evangelize the product pitching clear advantages over Photoshop/Illustrator. I've been looking at a few options, mainly UXPin, Figma, Webflow and Framer, but I'm getting tool fatigue just looking at all the current options pitching themselves as the next big thing.

Have any designers here used these tools to any decent extent and can possibly recommend one to me?

The Dave
Sep 9, 2003

I would explain how long a minor change takes with the current process, and how moving to a mac + sketch will save enough time that it will pay for itself.

Also, can you describe some of the small tweaks that cause you so much pain? Only because Photoshop has a lot of the same features as sketch, they're just a little slower or named weird.

Maleh-Vor
Oct 26, 2003

Artificial difficulty.

The Dave posted:

I would explain how long a minor change takes with the current process, and how moving to a mac + sketch will save enough time that it will pay for itself.

Also, can you describe some of the small tweaks that cause you so much pain? Only because Photoshop has a lot of the same features as sketch, they're just a little slower or named weird.


I mean mainly things like modifying a text to have 1 additional or fewer lines of text for a higher resolution mockup can require moving a bunch of stuff around and resizing a few objects sometimes, or modifying margins on text blocks which will do the same thing, etc. These are the main things off the top of my head since I had to deal with them today. Mostly just having stuff work like constraints feels like it would make a huge difference, since it would work a lot closer to margins/paddings/borders for box-sizing in web design. This obviously also has a big effect on making responsive mockups.

Hell, just having decent repeat grids and constraints in Photoshop would solve like 90% of my problems, probably.

I had a lot more trouble typing this up than I thought I would because of how distracting your avatar is, by the way. Goddamn, I can't stop staring at it.

Maleh-Vor fucked around with this message at 18:56 on Sep 22, 2017

Maleh-Vor
Oct 26, 2003

Artificial difficulty.
quote != edit

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb

Maleh-Vor posted:

Have any designers here used these tools to any decent extent and can possibly recommend one to me?

The UX/Design team at my work uses https://zeplin.io/ and they seem to be very happy with it

The Dave
Sep 9, 2003

Zeplin is not a design app, it's a documentation app.

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb

The Dave posted:

Zeplin is not a design app, it's a documentation app.

Can you elaborate more on this?

Maleh-Vor
Oct 26, 2003

Artificial difficulty.

fletcher posted:

Can you elaborate more on this?

Zeplin gives you style guides for color palettes, fonts, and measurements for items so you can see their sizes and distances between each other. It's not for actually designing, it's to help your developers build the design you made in Photoshop or Sketch.

huhu
Feb 24, 2006
I'm working on a project (React) that is quickly expanding and we're thinking about doing some refactoring to anticipate when we've got 100+ components/containers running. Any articles worth reading to better focus on this? All of the stuff I'm finding on Google I feel like are all pointing to mid-sized projects.

huhu fucked around with this message at 22:37 on Sep 22, 2017

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

I kind of feel like 100+ components is a mid sized project!

I'll admit I'm not fully clued in to the larger ecosystem of React projects to really know that for sure, though.

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

Apparently Amazon is charging per second now for instances instead of per hour:
https://aws.amazon.com/blogs/aws/new-per-second-billing-for-ec2-instances-and-ebs-volumes/

Does that make them any more appealing to you guys? I remember back when the deep learning threads in GBS had some guys paying out of pocket for compute could have saved some money probably.

Rapner
May 7, 2013


Scaramouche posted:

Apparently Amazon is charging per second now for instances instead of per hour:
https://aws.amazon.com/blogs/aws/new-per-second-billing-for-ec2-instances-and-ebs-volumes/

Does that make them any more appealing to you guys? I remember back when the deep learning threads in GBS had some guys paying out of pocket for compute could have saved some money probably.

If cost sensitivity is important then serverless architectures still beat the pants out of by the second ec2 scaling.

Edit: This is nice though for enterprise or legacy projects where you have always on minimum supply and scale out to handle demand.

Rapner fucked around with this message at 02:17 on Sep 24, 2017

darthbob88
Oct 13, 2011

YOSPOS
Stupid flexbox question: Is there a way to force a row to wrap at a given viewport? I have 4 buttons, on my large desktop they make a nice row, on my phone they wrap to a nice column, but on my laptop they wrap to two rows of 3 + 1, which is laughable. I'd rather it wrapped to two rows of two at that screen size. Is this workable, or should I just advise people against viewing my site on a 1280px screen?

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

I'm not sure how flexbox would do it but last time I had to do it I used -webkit-columns and -webkit-column-break-inside: avoid

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


darthbob88 posted:

Stupid flexbox question: Is there a way to force a row to wrap at a given viewport? I have 4 buttons, on my large desktop they make a nice row, on my phone they wrap to a nice column, but on my laptop they wrap to two rows of 3 + 1, which is laughable. I'd rather it wrapped to two rows of two at that screen size. Is this workable, or should I just advise people against viewing my site on a 1280px screen?

Could you use media queries (CSS) to control the flex-direction and width of the children? Make sure flex-wrap is set to wrap...

Something like this?

Small: flex-direction as column, children 100% width
Medium: flex-direction row, children 50% width
Large: flex-direction row, children 25% width

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



darthbob88 posted:

Stupid flexbox question: Is there a way to force a row to wrap at a given viewport? I have 4 buttons, on my large desktop they make a nice row, on my phone they wrap to a nice column, but on my laptop they wrap to two rows of 3 + 1, which is laughable. I'd rather it wrapped to two rows of two at that screen size. Is this workable, or should I just advise people against viewing my site on a 1280px screen?

Nest two containers inside your flexbox (with two buttons in each) with a minimum width of ~50% and let the outer one wrap.

Also you should probably set a maximum width on a content container if your layout looks bad spread out across a big monitor.

Love Stole the Day
Nov 4, 2012
Please give me free quality professional advice so I can be a baby about it and insult you
I'm sure nobody cares about this, but I released my first thing: a lovely Firefox add-on! https://github.com/wanderrful/Language-Lookup

I posted here a year ago or so about wanting to make a language dictionary lookup-slash-translation thing for Firefox. I wanted it to be fancier than this, but I narrowed my scope by a lot and was able to poop out this functional, minimal thing that fits my needs perfectly. I submitted it to the Fire Add-on list thing or whatever it's called, where I'm sure I will be slapped and banned for throwing crap at them to review, but it works the way I need it to and I don't know of anything else out there that does this. They all just do dumb Google Translate crap, which is really bad quality and not at all what I need.



edit-- it got approved really fast and it is now on the official add-on thing! https://addons.mozilla.org/en-US/firefox/addon/language-lookup/
(I think it's available also on mobile firefox?)

Love Stole the Day fucked around with this message at 15:07 on Sep 26, 2017

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
Congrats man! It's always a nice feeling to put something out there.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

I'm always on the lookout for cool design flourishes that I can dream about having the skills and opportunity to one day never implement myself.

I like the cool color-changing-on-scoll logo on this site.

Description on how the dev did it with SVG clip paths here.

reversefungi
Nov 27, 2003

Master of the high hat!

Thermopyle posted:

I'm always on the lookout for cool design flourishes that I can dream about having the skills and opportunity to one day never implement myself.

I like the cool color-changing-on-scoll logo on this site.

Description on how the dev did it with SVG clip paths here.


I'm sure you know about it, but codepen.io always has some great design stuff, even if a lot of it is pretty over-the-top.

Maleh-Vor
Oct 26, 2003

Artificial difficulty.
I'll take this chance to trot this thing I made out:
https://codepen.io/malehvor/pen/LjMWpx
It changes to random gradients and colors as you move your mouse, with everything as a variable to be customizable.

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb

Maleh-Vor posted:

I'll take this chance to trot this thing I made out:
https://codepen.io/malehvor/pen/LjMWpx
It changes to random gradients and colors as you move your mouse, with everything as a variable to be customizable.

That is pretty neat! It's a little jarring if you move your mouse quickly though. Maybe throttle it so it maxes out at a certain speed?

Maleh-Vor
Oct 26, 2003

Artificial difficulty.
Sensitivity is one of the variables. It's set so high for illustrative purposes but generally I'd set it to be about half as sensitive as it is now!

Giga Gaia
May 2, 2006

360 kickflip to... Meteo?!

Maleh-Vor posted:

I'll take this chance to trot this thing I made out:
https://codepen.io/malehvor/pen/LjMWpx
It changes to random gradients and colors as you move your mouse, with everything as a variable to be customizable.

Didn't this hit the front page of CodePen once? As one of the Picked Pens? Regardless, it's really neat.

poxin
Nov 16, 2003

Why yes... I am full of stars!
Does anyone have a recommendation for a way to output a log file in real-time to the browser? Something similar to running 'tail -f' in linux.

I'm running php (laravel) and js (vue) for this project. I attempted to use Symfony's Process component, which worked, but for long running tasks it required a very high timeout. I would guess a JS solution would be better with some sort of socket?

YO MAMA HEAD
Sep 11, 2007

Have you looked at Laravel Echo? I've never used it (beyond seeing it commented out in the Laravel js boilerplate) but it looks like it could work for you.

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

poxin posted:

Does anyone have a recommendation for a way to output a log file in real-time to the browser? Something similar to running 'tail -f' in linux.

I'm running php (laravel) and js (vue) for this project. I attempted to use Symfony's Process component, which worked, but for long running tasks it required a very high timeout. I would guess a JS solution would be better with some sort of socket?

Use Websockets. Your app just opens up a persistent connection to your backend, and your backend can then shove logs in there whenever it feels like it.

huhu
Feb 24, 2006
Quick rant... Flickr API has some of the shittiest documentation I think I've ever seen. Everything from documentation saying something was optional but actually required to vague errors like "oops, something went wrong".

Please console me with stories of other examples of terrible documentation or ridicule me for being bad at oauth.

MrMoo
Sep 14, 2000

Many projects yield the same generic error on authentication due to "security reasons", i.e. being able to use the feedback to improve an attack. It's a wonderfully lame excuse.

geeves
Sep 16, 2004

huhu posted:

Quick rant... Flickr API has some of the shittiest documentation I think I've ever seen. Everything from documentation saying something was optional but actually required to vague errors like "oops, something went wrong".

Please console me with stories of other examples of terrible documentation or ridicule me for being bad at oauth.

Flickr wasn't so bad to use API-wise until Yahoo really got involved.

Adbot
ADBOT LOVES YOU

huhu
Feb 24, 2006
Whelp. Finally got a JSON response, it's f formatted properly , with the data contained within being an empty array. :woop:

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