Develop Reference

How to use multiple images in ReactJS application?

I have a ReactJS application. I have 100 images(icons) of country flags. I need to use them in my application. I have 2 ways to do so, want to know best way to do so such that -
1) I only have to make 1 hhtp call to get the images
2) It is the most optimum way to handle this scenario.
Method 1 - I can sprite all the 100 images. And then make 1 http call to get the image and make use of background positions to get correct image.
In this method I wanted to know if
a) If using CSS Sprites is the modern way of doing so? Any better way?
b) If using CSS sprites, any tool to create a Sprite image and get the correct position values?
Method 2 - In my project, currently all images are inside a /src/images folder. If I put the 100 images inside this folder, it will make 100 http calls. Correct me if I am wrong. Can I put them inside /public/images folder so that the images are bundled and not excess http call is to be made? (If I reference any image file in public folder I get the error - 'Relative imports outside of src/ are not supported.') Anyway, where do you usually place images, inside /src/images or /public/images? What are the advantages in either?

I would go with the second option. Depending on the tooling, you can use Webpack or other bundlers to compress (gzip or Brotli compression).
You can optimize images to make sure they are not overly large and properly formatted, then compress and serve from a reverse proxy server.
To further boost performance, you can defer off-screen assets so that the images that you need are loaded as they are needed which lowers the initial fetch size.
Lastly, you can use in-memory caching, S3 (or other cloud storage), and a Content Delivery Network (like Cloudforce, Akkimai, and others), to store images in the cloud in close proximity to the user. CDNs are optimized to deliver such static assets and might be something to consider incorporating.

With such a heavy usage of images, I would suggest that you LazyLoad the images with option 2.
Consider a case where you have 100 products on your web page. If you request all the 100 product images at the same time and at the very beginning, it would slow down the load time. With lazy loading, we would only load, let’s say, 30 images that are visible to the user initially. Then, when the user starts scrolling down the page, we will keep loading more images. This would help improve the initial load time and the user experience. There will be cases where the user doesn’t scroll down the entire page and hence some images would not get loaded at all. Thus, you also end up saving on bandwidth costs for image delivery.
Since you are using reactjs, there are many packages available for this. Here I'll suggest one of them but feel free to explore more: React-Lazyload
You can even deliver the images through some CDN to further fasten the loading. Also, resizing them to actual needed size is a good way. Moreover you can also use JPG encoded at 80-90 quality as it won't make much of a difference in image quality, but reduce the file size dramatically.

compressing entire webpages (HTML and JS)

I have found some tools like this one that let me create "auto-extracting" javascript for javascript code in a web page, which employ a variety of techniques to minimize transfer size.
I have a webpage which does have a rather large chunk of javascript code in it. But since I haven't gotten around to optimizing the filesize yet I was thinking about doing the same sort of thing with the HTML bits of my website too. On my blog page the PHP script pulls HTML snippets from a large number of text files, and concatenates them into one giant HTML file which is sent out. Chrome tells me that compressing it with gzip would reduce the filesize by two-thirds.
However I did turn off the gzip compression because what was happening was if you downloaded any of my zip archives I hosted via Internet Explorer, it would herp derp neglect to gunzip them so the file downloaded by IE is always corrupted. I guess I can turn gzip back on if I fix this little issue, but for the time being I'd like to try to see if I can make a self-extracting HTML page. Is it possible to have javascript extract a giant HTML string and add the entire chunk as child of the body element? Would that work?

It will be slower to do that, and very error prone. Any Javascript error will cause the entire page to not render, and your SEO will be absolutely destroyed. Stick to regularly rendered HTML: as the browser is downloading / parsing the HTML, it will begin fetching other resources (images, scripts, css) and rendering the layout. Don't be so focused on strictly smallest download size, but rather quickest overall experience.
Make heavy use of the freely available CDNs. There are the big two: Google and Microsoft, that host a variety of scripts like jQuery and Modernizr. Stick to Google where possible, they seem to have a much higher adoption than Microsoft and thusly a higher chance of a warm cache. Past that, use CDNJS for other publically-available libraries -- they have a lot.
Minify your existing Javascript, and enable content compression for static and dynamic pages. Don't force it on, let the browser request it. What version of IE are you seeing corruption on? I haven't seen that be an issue since IE6...
Using the Javascript packers will make your site appear slower at the expense of saving a few more bytes of transfer on your end. Not only does a script have to run, but now you're asking the users' browser to perform an additional (potentially large) extra step before your scripts can run.
If you're trying to download individual files (with the Save-As dialog), you can't use gzip with a content type of 'application/zip'. The actual Zip format is available with PHP, use those libraries instead.

As a quick win Cloudflare has an auto minify feature for HTML, JS and CSS. We've been using it for a little while now with good results. Definitely worth a look.

Accessing Local Files with jQuery

I believe that this question has been asked in a few different forms, but I've read quite a few different responses.
At first, I had a web-application written with mostly jQuery that would make use of servlets to retrieve information from various locations JavaScript could not access (ie. Feeds, images from a server, etc.). Now, however, I've been told to do away with the servlets and application configuration classes so that this project of mine contains only HTML, CSS, and JavaScript/jQuery. Rather than pulling the images off of the server, I need to retrieve them from a local file on the computer. I know that allowing this might seem like terrible design, but it's what I've been asked to do. At any rate, what I really need to do is count the number of image files in a directory and then perhaps compile an array of the filenames themselves. I could do this fine in Java when using the servlets, but without them, I'm not sure how or even if this can be done.
I'm basically trying to use the jQuery Cycle plug-in to cycle through these images like a slideshow. I inject (or $("#div").append()) these images into the div by using a loop based on the number of images present.
So, is there a way I can do this with using JavaScript, HTML, jQuery plug-in, etc? I'd like to avoid using PHP and Java at this point...

You can't just read a directory with JavaScript; however, there appears to be a way to "exploit" how browsers function using http://www.irt.org/articles/js014/. It may not be pretty, but the demo works in the latest Chrome and IE7-9 for me. I'm sure some of the techniques could be updated to use cleaner code if you'd like to improve upon it.
EDIT:
Another technique you could use can be found in Javascript read files in folder
It definitely looks to be a cleaner solution. What I'd recommend is extracting the body contents to inject into a hidden div or using the path for an iframe that you can read from.

different CSS stylesheet for iPad and iPhone in universal application

I have what is essentially an offline web site embedded in a UIWebView. I've created a stylesheet to format everything nicely on the iPhone screen, but I need different formatting to take better advantage of the iPad's screen.
I tried using code to simply copy a different stylesheet into place, but this involves modifying the application bundle which is either discouraged or, in this case, just doesn't work.
Can anyone think of a way to have a different stylesheet loaded based on whether the app is running on the iPhone or iPad? I have thousands of HTML files which are synchronized with a web site so I can't very easily modify all of them. I need some way to change the stylesheet that gets loaded using javascript or by moving the css file into a certain location.
I should also mention that this is a universal application with almost the exact same code (and slightly different nib files) running on both.

Can you use a CSS media query? You could inject it into your pages using stringByEvaluatingJavaScriptFromString:.

Via your server side code, you could detect the iPad User Agent and write out a link tag to a different stylesheet. I would probably go with server side logic rather than Javascript, simply because I don't like the possibility of a "flicker" of doing this with Javascript.

Why dont you have a look at 960 Grid System http://960.gs . It helps to use different CSS formats based on the device it encounters

How to generate graphics into photoshop using actionscript?

I've a text file with content like this:
id, pixelsize, color, text
block1, 200x60, black, Header
block2, 200x180, white, Body
block2, 200x60, black, Footer
Now using actionscript,
I want to generate a psd file which would generate a 3 vertical block graphics (like this) after parsing the given file. All the blocks are placed vertically on top of each other.
Convert this psd file into PDF automatically using the script.
Automate this whole process without opening photoshop. Is it possible?
Please help. Thanks.

You aren't going to be able to create a PSD w/o opening Photoshop. Even when you use something like Adobe Bridge to batch process files from any Adobe app it still uses the appropriate app to open a supported file and perform actions on it.
I have seen apps that allow you to output PDFs from user defined text and variable images (PageFlex comes to mind)...but even then, saving Adobe-compatible files aren't simple tasks to turn off and on (like when you make a text file). There's a lot of data to manage even with PDFs and I'd suspect even more when you look at a PSD file.
Unless you can find an open-source app that somehow allows you mess with its coding so that you can bypass opening it 100% to output a somewhat compatible PSD/PDF file, I don't think you're going to be able to automate much w/o lots of work and some potentially expensive software solutions.
Long answer short, I think you'll have to use Photoshop at some point in your solution. On the upside, you could make a recording of actions in PS so that individual files can be output to whatever format you like...and those I'm sure can be scripted into complicated solutions.

You can do this kind of thing using the ExtendScript Toolkit from Adobe.
Not sure you can do it without having Photoshop open, however.

Given that you want a PDF at the end, could you use something like AlivePDF (ActionScript 3 Open-Source PDF Library)?
If you actually need to also generate a PSD, I'm not sure how you do that from scratch, but the Photoshop SDK would be a good place to start, as well as getting a good understanding of bytearrays.