My stack is webpack, es6 modules and react for the client and koa for the server.
What I'm trying to achieve is a way to build/serve different versions of css, one for android, another for ios and another for the web.
I know I can achieve a way to put all in one css and just play with the classes according to the headers, but what I really want to do is to serve the minimum amount of css for each device.
I've some workarounds, but they all seem dirty, so let's go community, help me to solve this as elegant as possible.
For all those of you who get here looking for the same, I've created a small loader for webpack2 to achieve this. You can check it out here
Related
I am curious if there is a best practice when it comes to using non-standard fonts that the browser needs to load. I'm trying to decide between downloading and bundling the font faces into my application or just using the <link/> tag to import them from Google's Font CDN.
So far, I know both methods "work" and there isn't a noticeable difference for me, but I'm curious if there's a case that doesn't handle one of these methods well like mobile networks or users in foreign countries.
i have a website where i had a pdf preview as a react component, the pdf should be in real dimension, all works smooth until I start working on making the website responsive, I didn't know wt to do exactly with the pdf preview, I have an idea to scale the whole component up and down like we do with an SVG but idk if that's possible to do
I think you better use a library to preview the PDF.Since you want to make it responsive without affecting the preview.You may make use of libraries like react-pdf. This library may generate PDF files from a URL, a local file within the project, or a base64 encoded version.
And i found this article useful.
Hope this may help you!
And as you have mentioned you have some troubles installing react-pdf it's not very compatible with webpack5that is mostly due to Buffer dependency.
Refer to thsi :react-pdf issues
Without knowing the exact error, it's so difficult to help, so be more specific when you are asking questions.
I am currently building a mobile app using react native. This is a parent app where parents can view marks, homework, fee details etc. We work with multiple schools and each school will need an app of their own. Only changes between these apps as of now is the splash screen and the app icon.
What can I do to keep my codebase more organized and less redundant between every app so that it will be easy to maintain, and also for new releases?
I have done a similar task before. I ported 4 different apps with unique styles from a single react native code base. You can read some related bits here.
Basically you just need to rename your app before building for ios and android.
If you need to apply different styles it is a much harder task just to explain here. However to give a hint, you need to make your app styles reusable like a theme. In my case I was using nativebase themeing. And before renaming the project I was changing the theme folder to be used for each app with a bash script. This gist might give you an idea.
For those looking for an answer,
The right way to build different apps out of the same codebase is to use android variants https://developer.android.com/studio/build/build-variants. This will allow you to sign your app with different keys for each variant. Each of these variants needs to have an appropriate folder inside the android directory, which is the place you configure splash screen, assets etc.
If you are using expo, this is not possible as you are not supposed to mess with native code. expo only supports release channels (dev, staging, prod) versions of your app.
Note: I didn't have to work with ios, so can't provide any useful links myself. But I am sure there will be something similar.
I want to move my existed web app to mobile platforms. How should I transfer my existed css file to React Native css?
Is there any way to do this directly in the app logic, or I should use builders like webpack, if it so, which plugin do I need to use? Or maybe there is some packages for IDEs like Webstorm or Atom?
Any tip will be helpful, just not to do this manually.
There is nothing built into React Native to turn CSS into RN StyleSheets. React Native has a different set of attributes that is supports and some of them behave slightly different from their counterparts in CSS. That said I have a few suggestions for paths forward:
Rewrite your css as StyleSheets as Sintylapse suggested covered here
Use a third party transpiler like this one to convert yous css to React Native StyleSheets.
Write all your styles inline with no stylesheets.
I would recommend the first option if you intend to work on this app or React Native in general for a while. Though it may be a bit rough to learn the syntax and how to write your styles, in the long run you will become more proficient than you would with the other methods. If you are looking for a good place to start with stylesheets this blog post looks promising. The transpiler could work but since it is a third party project I wouldn't be surprised if you ran into a bug and had to comb through generated code to find what is wrong. Writing styles inline can help prototype but it will not make it easy to maintain your app in the long run.
I have few queries on selecting Ionic framework for our Hybrid app project. Since I have not used Ionic before, few queries may seem idiotic. But i would request all to share their thoughts.
Q1. How easy it is to customize any ionic components as per project requirement in both JavaScript and CSS level?
Q2. How much overhead ionic components create in terms of DOM, Memory usage?
Q3. In case of collection-repeat, say i want to display 10 items out of 1000 items at a time. So at any point in time only say, will there be only 10 divs and will only new data be injected in the previous created divs?
Q4. Say, I have selected Ionic for our project but don't need all the UI or other components in it. So does Ionic gives the flexibility to exclude those components from the framework itself and use the rest?
Q5. How easy it is to include an external library into Ionic if required?
Q6. How easy to debug and Ionic app and the tools available?
Q1. Since Ionic is based on SCSS, it's really easy to customize the visual aspects. I did a video about working with scss and Ionic. As for the javascript side of things, if you know how to work with directives, you should be good.
Q2. Ionic aims to the keep the DOM nice and lean, and not change the DOM like you would with jQuery. As far as memory usage, that really depends on the code you write. You still need to write good code to make sure there aren't memory leaks any where.
Q3. Collection-Repeat doesn't really work that way. Plus when you start dealing with different screen heights, it's not going to be easy to deal with. The best why that we've come up with to deal with that is to just render how ever many it will take to fill the view.
Q4. At the moment no, if you start a project with the CLI, you get the whole bundle. Down the road we're thinking about breaking things into external components, but it's not set up yet.
Q5. It's Angular, so if you have another angular directive that you want to include, the process is really simple. Just include the script tag and inject the module as a dependency. If it's not an angular module, then it's a bit more work to wrap it in a directive, but there are plenty of tutorials out there to help.
Q6. The best thing to remember is that we're dealing with a webview, so you can do a lot of debugging right from chrome on desktop. If you need more debugging once you're on a device, iOS lets you debug right from safari on desktop, and android 4.4+ let's you debug app on a device with chrome.