let me share my problem with you. To begin with I'm a junior-mid level web developer currently implementing a travel site. To deliver this I have a task in which I cannot find an efficient solution.
This travel site will be provided in different hotels. For each hotel, the main theme for the app will be different for example the background images, the colors of some buttons etc. My first suggestion would be to have the CSS files for each hotel and by reading the name of the hotel from the state to import the according css. But the hotels will be many and by using so many files my bundle file will be enormous which I don't need. Another solution would be sending all the colors and images from the server but this will have a use impact in my code and I will have to refactor it in so many places. The idea of the server is fine I think
But I want to use some theme template to makes these changes according to the server. Do you know something about that?
I think there is no need to send all the colors and images from the server. You can store all of it on a frontend part and get only a type from the server and apply different styles based on this type. Maybe this library can help you here.
Related
I have an e-commerce react app, so as you know every product has at least three or four images, so to show the image of product in my website i created a folder with a name of " images " inside the public folder so everytime i want to show images of a specific product i can get and show them very simply and for Now this is very very awesome.
The Problem:
as we know each e-commerce website should have an admin where he can publish new products and upload new images, so by the time may be i will have thousands of images in my website.
Question
what is the best practice to store images of my react app ?
do i need to use third party like AWS or Firebase ?
Thank you.
Storing images in the code-base assets folder is not the best option for large number of images. Handling updates, inserts is a big problem. So you have the following options.
Options: Cloud/On Premises
You may store in the cloud like AWS S3
If you want to store on premises, you may store in MongoDB Grids
or even on the File System with file-path stored in the database.
Step Ahead
But going ahead you might need responsive images according to the image placeholder. Example for an image you might need thumbnails of different sizes lets say for listing pages, android apps, iOS apps.You might also need to compress the images in case they are heavy for web purpose.
In that case you may choose to store the images in the desired
resolutions.For this you'll have to store multiple versions on an image. For example product1/original.jpg, product1/compressed.jpg, product1/300x300.jpg etc
You may resize/crop the images on the fly. If you want to write your resizing systems you may write ImageMagick/vips/PIL etc based code.You may try to search for readymade nginx based plugins to server responsive images.
If you do not want to do this resizing stuff yourself you may use image storage services like imgix,cloudinary,akamai that provides CDN + image manipulations.Some of these provide storage+manipulation while some only manipulation.
I have a question related to React Native.
I have existing application that should be themed and theming should be part of the configurable settings. There should be 3 aspects of such theming: changing colors/theme, changing logo and add custom fonts
I see this is a way that there will be settings view where:
there will be possibility to upload image, image will be stored in filesystem in ios and android and then used as a brand logo
there will be multiple settings regarding some primary, secondary, buttons colors as hash values, or maybe some color picker component
The most complicated stuff is having custom fonts that can be configured by user in setting view of application. Anybody have experience with doing such a thing?
Any thought/suggestions in above points will be helpful. Like links to native libraries for both platform or any tips from more experiences React Native developers
The best ways I see to achieve what you want are :
Use https://github.com/itinance/react-native-fs to access file system so you can easily store and access the logo that the user want. If the image has some size restrictions you could as well store your image Base64 string in AsyncStorage but this is not recommended.
You can have a kind of theming system by using a global style file that your screens use, the values requested (for example "dark", "light" etc...) can be store in AsyncStorage.
Do you want the user to be able to use his own personal font ? I don't think this is possible. If you want to have multiple fonts and the user can choose which font will be used in a list for example you can follow this tutorial to install custom fonts : https://medium.com/#kswanie21/custom-fonts-in-react-native-tutorial-for-ios-android-76ceeaa0eb78. Then all you want to do is use your theming system to select the fontFamily that your text elements will be using !
Let me know if I'm not clear enough or you need advices, I recently did what you try to achieve :)
I am currently working out an admin interface with a Live Preview and I am still not 100% on how to structure it properly.
My page basically consists out of two parts. The Admin Interface and the Live Preview. Obviously, the Admin Interface fills some variables with data and the Live Preview displays this.
Therefore, the Admin Interface needs to bind variables, that the Live Preview will bind for reading.
Furthermore, the Live Preview in the end (if possible) should be re-used as the final product that displays a set of information. All it does is display a single JSON file that is received from the server (when in product mode) and in case of the Live Preview it will need to update the data Live as its edited.
One more note: Both, the Live Preview and the Admin Interface consist of elements like directives again and parts of the Admin Interface need to be loaded dynamically by having a user add a page with a certain type of content.
After researching how modules are handled I came up with the following:
Live Preview is a Module
Admin Interface is a Module
My page includes both modules
Both of them should be connected to something central that provides the ability of editing the data (bound variables?) and reading the data so its updated live.
Ideally, this would be a service, so later on when loading the "Live Preview" as an actual product, can just use the same kind of service which in this case provides the information from our Database instead of a variable in its scope.
Is this a good approach? Is there a way to have a service that on the one hand side can be edited lively like in a two way binding so that my live preview can also pick it up? Is there something I can use instead of the services, like a controller? How should I go on about this?
You are doing everything right. I don't think that it is relevant as to whether the preview and admin panel are their own modules or contained within one. You will find people using module seperation in a wide variety of ways within their Angular apps.
What I think you said that is important and correct is to connect the preview and admin panel via a Service. Other methods of connecting these two (i.e. $rootScope) are costly and bad practice.
If you will be re-using live preview in many locations of your application I would wrap it in a directive.
You should feel confident in your approach, it's a good one.
Hello we have a non profit application built in Google App Engine for Java.
This application allows people to register as Blood Donors on our system.
As a result we want to email them their print ready e-BloodDonor cards.
What is the way to create such cards where we can define the design of the card and contents are filled dynamically based on registered data?
Please advise
You could create the layout in HTML, just like a normal view in your app, and then email them the link to that page to print it out. You could also go the much-more-complex route of generating PDFs or images for each user. PDFBox by Apache is pretty good for PDF generation.
I'd really recommend the HTML route, though, if it works for you. In my experience, it's much easier to do HTML layouts than it is to program PDF layouts in Java.
Any idea, how can we create already running website to Mobile Website?
Are there, ready made plug-ins / components available ?
I've found some like wapple.net however it is paid one, which is not feasible for client's budget.
I have found, XML creations is pretty easy in CakePHP, though your ideas would be appreciated.
Kindly share more details on the same !
Regards,
i dont think that you'll find a plugin that will transform your website for mobile. because there are too many decisions to make when creating a mobile web, for me it's like creating a completly different website with only the necessary information that your website has..
But maybe there are components that might help you with the small taks (like detecting the user agent and stuff).. here you can read two good articles about creating a mobile website:
http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
There's also a few JS frameworks that will help you with the interaction with the user, i've only used Sencha touch..
But my guess is that you'll have to adapt/create "manually" the css, html and js for mobile, and I don't think that there's a magical tool to do that, you'll have to do it yourself (or pay someone to do it =D)
Hope this helps, Good Luck!
You may be interested in my answer over here:
CakePHP v2.2.1 Solution (+ Cookies to persist mobile/desktop/other layout)
In a nutshell:
Lets you setup mobile layouts /Views/Layouts/mobile/default.ctp
Mobile views /Views/Pages/mobile/home.ctp
Sets a template variable $is_mobile
Lets you force a specific layout ?forcedLayout=desktop, and remembers this in a COOKIE
If no layout is forced it uses CakePHP's User-Agent detection to make the decision $this->request->is('mobile')
If no ../mobile/ layout or view file exists then it falls back to the default layout or view.
Typically with cakephp you want to create a separate view layout for mobile viewing. The app controller should change the default view layout to the mobile one when detecting a mobile browser.
Your mobile view layout should be made by you, only you know what data on your site is important and what is not (aka, what should be removed /kept for mobile viewing) Also your mobile layout can use alternate CSS and only load the elements you want.
To learn more about creating views in cakephp see the cookbook: