How do i make working custom css in ionic? - ionic-framework

I've added custom css in ionic+angular which is working absolutely perfect with browser and its devices, but while i am generating apk for android device custom css is not working in android.
I am running this command to generate APK : ionic cordova run android
For more information i attached ionic version and index html screenshot.
version screenshot
Index.Html screenshot

First, make sure that "appStyle.css" file is written with S uppercase. Windows machines are case insensitive and Linux Machines (Android) are case sensitive.
Second, make sure that you're changing the index.html at src folder, not at www. Because www is the generated files and it is rewritten every build.
At last, as Abdul said in the comment, you should import your CSS files at app/app.scss.
#import '../assets/css/font-awesome.min';
I recommend you to put the css files outside from assets, which is recommended only static files, like images.

Related

vscode extension development: svelte content not loading in webview after building the vscode extension

I am building a vscode extension by using svelte for webview. I am following https://youtu.be/a5DX5pQ9p5M. But the deployment of extension is not mentioned in the tutorial .
So i am following https://code.visualstudio.com/api/working-with-extensions/publishing-extension.
So after packaging the extension with vsce package and installing the extension the extension doesn't load svelte content but when running in developer mode everything works fine.
I tried creating the package extension multiple Times but still didn't work.
Check if all necessarily files are included via:
vsce ls
(You can also open packaged extensions, they are just ZIP-archives with a different extension.)
If they are not (e.g. src is excluded by default), you probably can create a .vscodeignore file and manually specify what to exclude.
Running extension problems can be inspected via Help > Toggle Developer Tools, usually you will find some errors in the console.
I do not know if debugging forces the extension to load, but if so, make sure you have set the correct activationEvents.

How to create/provide multiple example apps for a flutter plugin?

Flutter seems to have a very strict/rigid structure for plugins with example folder and all contents inside that folder.
I want to provide multiple examples with my plugin. Something like examples folder and then examples/demo1 and examples/demo2 as two different app examples.
I tried doing this but flutter run or pub get command breaks with this change. it's gets stuck with below error which wasn't thrown with exact same code in previous structure before change. Also my app actually follow embedding v2 code so this error is completely false too.
The plugin `<MY PLUGIN>` requires your app to be migrated to the Android embedding v2. Follow the steps on
https://flutter.dev/go/android-project-migration and re-run this command.
Somehow is it expecting that there should be only one example and that too with example folder only ?
Can someone help, and if possible point me to a plugin project where it's using multiple examples ?
After trying multiple ways to deal with the situation,
I ended up with a good enough solution.
I moved entire flutter repo inside an sdk directory, and then Introduced a samples folder at root level which can contain multiple sample applications.
sdk itself has a default sample app under example folder which I kept so sdk can ship with one example project.
Final structure look like below,
- Root
- sdk
- Flutter plugin project (like android/example/ios/lib directory etc.)
- samples
- sampleOne
- sampleTwo
I then mentioned relative path to sdk for sampleOne or sampleTwo inside their pubspec.yaml like path: ../../sdk/
When I want to open sampleOne in AndroidStudio, I import sampleOne directory and it works like charm. Make sure you don't import entire samples directory or sampleOne/Android.
For any regular Flutter commands for plugin, I run them inside sdk directory and everything works fine as expected. So I would run publish or pub get inside root/sdk directory

Cannot view scss files while working with Ionic on dev tools

I'm trying out some very basic Ionic tutorials from Ionic website (Ionic Tutorial), and i want to be able to view and modify scss from dev tools.
The app functions correctly, css classes i've added in scss files work correctly as well but i see a main.css file instead of the foo.css from which it was compiled. I can even view typescript files on dev tools and debug, which means source map for js->ts is working. It's the css-> scss that's not working.
I can see these files on www/build
main.js
main.map.js
main.css
main.map.css
Which means the source map is generated correctly.
I have also enabled css source maps in chrome from
- DevTools -> Settings ->Sources -> Enable CSS source maps
I would mark this as duplicate but it seems like i cannot. Answer can be found on this SO postenter link description here. Basically,
You'll need to extend your sass.config.js file, by default source mapping for sass is disabled.
config/sass.config.js:
module.exports = {
sourceMap: true,
}
package.json:
"config": {
"ionic_sass": "./config/sass.config.js",
}
I can verify that this works.

Obfuscation in Ext Js 4.2 with Sencha CMD 3

I just installed all the required tools for the new Sencha Cmd(Ruby, Compass, Ext Js 4.2 SDK) everything works fine, but I don't know how to obtain the unique obfuscated file from the .js sources in my Ext Js application.
Any help, please? Thanks in advance.
I tried the "sencha app build" command from all the folders in my application path, always get the "Please ensure this command was executed from a valid application directory. Unable to locate 'app.dir' config property from 'sencha.cfg'
After more reading about the subject I think before the "sencha app build" command to work I need to generate the bootstrap.js file manually because my application wasn't generated using the framework, but I'm stuck here also. Anyone ever did that? Please?
The best way to get things work if your have legacy project (when project structure is not generated by sencha cmd tool) is to generate empty project and the move all necessary files/folders in to your existing project and try to adjust all configurations. You will need to move:
.sencha folder
folder with extjs development classes
bootstrap.js, bootsrap.css, build.xml
modify you start page correspondingly (index.html, index.jsp, or whatever)
create application.js to start your application
bootstrap files are always generated automatically. To generate it normally you have to use sencha app refresh command.
Basically the most important changes have to be made in .sencha folder. Most of the config files in this folder have a lot of comments so this is not a problem to understand what to change. Also it's good idea to refer official doc page: Sencha CMD

Compile existing Lua app using XCode for iOS5

We had a freelance developer that went rogue and now I'm left with a Lua-based app with no build files.
I have a degree in computer science, but have no experience with Lua, so I'm wondering how I can compile this (or any Lua app) with XCode for iOS.
It's a fairly simple app. It appears as though it loads in images for navigation and displays other images as content.
How do I tell XCode to compile Lua for iOS though? I have all the files in XCode and it's compiling, but clearly its ignoring the .lua files and compiling the application shell.
I have Lua downloaded by source and also installed it via MacPorts. I read that I need to link lua.h and luac.h but I don't see how to add it as a build target.
Any advise or direction would be much appreciated.
These are the files I have:
Source Code/
build.settings
Clinical_Data/
page4a_2_Anim.lua
page4a_3_Anim.lua
page4a_4_Anim.lua
page4a_5_Anim.lua
page4b_2_Anim.lua
page4b_3_Anim.lua
page4b_4_Anim.lua
page4d_2_Anim.lua
page4d_3_Anim.lua
page4d_4_Anim.lua
config.lua
home.lua
Icon-72.png
images/
<*.png files>
main.lua
manifests/
CaseStudy.manifest.txt
ClinicalData.manifest.txt
Experience.manifest.txt
Home.manifest.txt
NavElements.manifest.txt
Pathology.manifest.txt
References.manifest.txt
Restasis.manifest.txt
menu.lua
page4a_2_Anim.lua
page4a_3_Anim.lua
page4a_4_Anim.lua
page4a_5_Anim.lua
page4b_2_Anim.lua
page4b_3_Anim.lua
page4b_4_Anim.lua
page4d_2_Anim.lua
page4d_3_Anim.lua
page4d_4_Anim.lua
parser.lua
pdfs/
<*.pdf files>
section.lua
slide.lua
slideView.lua
ui.lua
It's probably linking lua from your installed lua code. There'll be a -llua in your link code. Somewhere in your source files there'll be a
luaL_loadfile(L, file);
command. This loads the lua file.
If it's corona it might have a different way to load - haven't used it.
If you need an IDE http://www.eclipse.org/koneki/ldt/ is superb. You can remote debug your app very easily.
It looks like it may be corona from anscamobile.com.
You can download a trial version from their site to see if it compiles.