How to use Bootstrap 4 & Sass on Visual Studio 2019 - css

I've just upgraded to VS2019 and found it doesn't come with much out of the box in terms of modern web development.
I'm looking to compile Boostrap with some variable changes & run the results through autoprefixer and then minify. I'm not yet ready to move to core so the project is in .net 4.7.
I've found Web Compiler, which will compile & minify the Sass but this is very dangerous to rely on because it doesn't autoprefix bootstrap. Using the default distribution of Bootstrap you get autoprefixing so it will work on older browsers as well. Just using web compiler you will get a nice, tight minified file customized to your liking that will look great on your dev machine and then fail in an untraceable way on deployment for users with older browsers.
I've also found the Autoprefixer extension, which doesn't seem to work at all. There is an autoprefixer menu in the context menu but it is greyed out. There seems to be no way to configure tasks as far as I can tell so even if it did work you have to right click on stuff each time.
So I'm wondering why I spent over $1000 to upgrade to VS2019 when it just doesn't do the basics of modern web development. Would it have been better just to use free tools? Or is there some way to get it to work.

Related

Is there a way to use CSS with PyCharm?

I've been trying to use css in a pycharm project (I'm using flask, so that's why I'm using pycharm)-and I learned Pycharm isn't available in Community edition of Pycharm. When running the website, it leads to a bunch of problems-and the code I have doesn't have any problems. I've watched numerous tutorials on how to add CSS as a language, but none work. Is it possible to add CSS as a language to Pycharm Community edition? I'm using 2020.2.
You can use it by enabling the plugins on the Settings/Preferences Plugins page, see Managing Plugins for details See here and here where the completion for CSS, SCSS, Less, and Sass classes and ids are available in HTML files, in various types of templates (for example, in Angular or Vue.js), as well as in JSX code for Professional Edition. For Community Edition see this

A-Frame: standalone environment (ala PhoneGap)

Are there any options for packaging an A-Frame application into a standalone form? Sort of like how PhoneGap packages webapps?
I imagine the solution would need to package all HTML/JS files and resources together with a standalone browser? And then launch with 'headset mode' on by default?
A-Frame apps are just webapp, so try the existing toolchains like Cordova or Phonegap. There may be issues and your mileage may vary though as we don't put much effort towards those use cases. There are several issues filed for Cordova + A-Frame on GitHub for an introductory read.
It seems though recent webvr-polyfill issues may not be friendly for WebViews: https://github.com/aframevr/aframe/issues/1940
I've been using crosswalk lately, all the latest APIs and no browser compatibility problems.
It's very easy to add on to an existing html5 project : https://crosswalk-project.org/

SASS without Ruby for .NET application

I've been recently reading up on SASS(Simply Awesome StyleSheets) on codeschool but when I actually tried installing it, it turns out I need to install RVM(Ruby) as SASS was written in Ruby.
So I have a two questions here:
I understand that there are other CSS frameworks like LESS but they don't seem to be as powerful/popular. How true is this? I wouldn't mind switching to LESS if does not need Ruby at all.
Is there a compiler for SASS in .NET or Java family of languages and if there is, how production ready is it? I do not want to keep checking the generated CSS file when debugging or making changes.
1.I understand that there are other CSS frameworks like LESS but they don't seem to be as powerful/popular. How true is this? I wouldn't
mind switching to LESS if does not need Ruby
Here is my take on this.
LESS like SASS is a CSS preprocessor but it is pure JS based and thus can be parsed directly by browser if you include less.js file in head. You may also generate a CSS file offline and then ship it to production. Please note that you will need node.js to actually run LESS. LESS is built on top of it. LESS if not more powerful than SASS, is equally powerful in terms of features. Go ahead and use LESS, you'll never miss a thing about SASS.
2.Is there a compiler for SASS in .NET or Java family of languages and if there is, how production ready is it? I do not want to keep
checking the generated CSS file when debugging or making changes.
There is actually a C version of SASS called libsass. See its site at http://libsass.org/.Libsass is just a library. To run the code locally (i.e. to compile your stylesheets),you may use SassC https://github.com/hcatlin/sassc , an implementer written in C. 
This really comes down to what you want to your preprocessor to do and which fits your project requirements the best. People will argue either or all day long. For me what I see the main difference is that in LESS I can't do as many programatical things, like loops, for each statements. That kind of thing.
SASS is ruby based, therefore you need to have ruby installed. There are extensions you can use in Visual Studio to make SASS compiling easier. Web workbench and Sassy Studio. Support will be coming to Web Essentials some time soon.
So I think it comes down to which you think fits best. I prefer to use LESS in Visual Studio (using DotLess) just because I feel it's better supported and I don't need to install Ruby (I big consideration when working with multiple developers).

Flex/Openlaslzo for RIAs?

I recently stumbled upon flex/openlaszlo (OL). Both seem very useful and I have a few questions about them:
What is needed to deploy flex apps? From what I understand, the flex sdk
is open source, but the other tools
(for development and deployment) are
proprietary.
What is needed to deploy openlaszlo? Is it completely open
source (from development to
deployment), or does it have
development/deployment "gotchas" like
flex?
Specifically, I'd like to use flex or openlaszlo to either augment or
replace an editable table I created
using js, ajax, html, and css. Is this
the type of thing flex/OL can/should
be used for? Are there any drawbacks
or pitfalls to using flex/OL for this
rather than straight js, ajax, html,
css?
Thanks.
Edit: Are there any licensing (use) restrictions on applications built on flex? i.e. applications built on flex can be for only non-commercial use, unless a commercial license is purchased?
The following link has some discussion about openlaszlo and flex, it may help you:
Use the best open source client-side framework for cloud computing
You do not need anything special to deploy Flex apps. Just put the compile app (a SWF file) on any web server. Flex apps can talk to any back-end.
Flex SDK is free, but Flex Builder is not. You can use the free and open source FlashDevelop to write flex apps - it doesn't have drag-n-drop features like flex builder, but it offers code hinting and stuff. I don't know about openlaszlo.
Below is the link providing details of tools/IDEs for developing OpenLazlo applications
http://wiki.openlaszlo.org/Development_Tools
Re: "What is needed to deploy openlaszlo? Is it completely open source (from development to deployment)"
OpenLaszlo is OpenSource, but the typical versions you install come with the main components pre-compiled into a SWF for the SWF run-time. However, you can download the full source code if you wish to look at it and/or compile the core yourself:
Last official released version (4.9.0): http://download.openlaszlo.org/4.9.0/openlaszlo-4.9.0-src.tar.gz
Nightly builds:
http://download.openlaszlo.org/nightly/trunk/ (you will see "source" as an option after you click the link of the version you want)
OpenLaszlo does not require anything else to be deployed but itself, except if your application is compiled to the SWF run-time then the user will need the Adobe Flash player installed in their browser to use it.
I'll answer your last question: the biggest drawback to using Flex is that it requires the client to have the Flash Player plugin installed in their browser. Not that big a deal for most people since Flash Player is over 98% of all computers. With the straight Javascript, AJAX, HTML, CSS approach it should work on all browsers, assuming you wrote it correctly.

What are the Pros/Cons of Flash Builder vs. FlashDevelop?

I want to play around a bit with FLASH for app development. I'm looking for a good IDE for that. Someone suggested Flash Develop.
Flash Builder
Pros
better debugging and profiling
visual designer for MXML
because of Eclipse: support for other languages (eg. with Aptana, PDT...) and usage of plug-ins for the Eclipse Platform with features not shipped with FlexBuilder (code snippets with CFEclipse "Dynamic Snippets", "auto-code" for getter/setters with Monkey scripts...)
support of virtual folders/files (links to external files/folders handled intern by Eclipse, so also working on Windows)
refactoring (renaming of classes, functions, properties with automatic changing of dependencies)
Cons
Commercial license
Big and because of Eclipse problematic with newer Eclipse versions for the FlexBuilder plug-in version (eg. not working with Eclipse Ganymede 3.4.1)
adding and configuring the missing features with Eclipse plug-ins needs time and searching in the Internet (which plug-in? settings etc.)
Code assist only average and sometimes buggy eg. if correct imports are missing ("java.lang.NullPointerException")
missing of a code formatter or automatic get/setters (but there are solutions with other Eclipse plugins like Monkey Scripts, CFeclipse, Flexformatter "FlexPrettyPrintCommand"...)
sometimes a bit sluggish if background tasks in Eclipse are working
no package explorer
AS2 and AS3 only - no Haxe
FlashDevelop
Pros
free and Open Source (developed with C#)
lightweight and snappy
best available Code Assist for ActionScript
supports all flash languages - AS2, AS3, haxe
"auto code" for automatic getter/setter, variables, code for event handlers
code snippets with integrated snippet editor
extendible with plug-ins
support for asdoc comments
package explorer (show classes, symbols from a SWC file)
basic refactoring
multiple source code folders per project
useful plugins : ANT integration, SWC creation, mini map, quick navigate
Cons
only for Windows
no visual designer for MXML
no support of virtual folders/files inside the project
weak refactoring
changing classpaths must be done manually
plug-ins often not working in newer versions and many plug-ins are only rarely updated
limited support for debugging Haxe applications
Common
Pros
projects for full range of flash apps : websites, AIR (desktop, mobile)
debugging of FP/AIR apps with breakpoints and stepping
debugging with watch windows and locals
support for ASDoc comments
automatic adding of imports and organizing of imports
class wizard
SVG/GIT integration
Cons
no editing of graphics or animation (use Flash IDE for that)
Summary
For debugging, visual design of MXML forms : Flash Builder
For coding AS2/AS3/Haxe projects under Windows : FlashDevelop
Major reason to use FlexBuilder: has a real debugger you can set breakpoints and single step and watch/edit variables.
Unless FlashDevelop has .. developed .. don't think it got any of that yet.
BTW - if you are a student/teacher FlexBuilder can be had for free
Flex builder has a design view for MXML so you can build more visually. Flashdevelop on the other hand is free!
I've been using Flash Developer. Trying now FlashDevelop. FlashDevelop is fast and light, and I'm trying to switch just because of that.
I'm using HG + TortoiseHG for source control. I have 2 screens, so having external source control is not a big problem. Also the IDE stays a little cleaner by not having all the little source control icons.
DesignView helps with not having integrated design.
Also, I can debug with FlashDevelop and see the variables. I'm using FD3.2.1.
Along with what was already mentioned, Flex Builder has some nice tools that helps a developer to learn how to create a data enabled Flex application in form of the Data Wizards and also a nice web services introspection tool that automatically creates an ActionScript 3 client for a web service.
I'm using the new Jetbrains IntelliJ 8, and it's great (especially if your used to java developement). Has a lot better XML/JavaScript editors that any other IDE.
The latest version of IntelliJ also has a good flex/javascript debugger.
Here are two objective contrasts between FlashDevelop (with the Flex 3 SDK) and FlexBuilder. First, only FlexBuilder includes AdvancedDataGrid. Second, FlashDevelop has no source control integration.
AdvancedDataGrid is not included in either the free or open source Flex 3 SDKs; if you want it, you have to buy FlexBuilder. (I assume it is probably possible to use it via another SDK if you possess FlexBuilder.)
FlashDevelop doesn't have any source control integration, FlexBuilder possesses the existing, stable source control options for Eclipse. This includes Subclipse for SVN, as well as a lot of other things. As a longtime Visual Studio and Emacs user, in FlashDevelop I'm beginning to feel unsatisfied with leaving the editor to check in.
Flash Builder, even in version 4.5, has primitive, useless syntax coloring and customization features. From a 700$ package I was expecting at least what I can do with my free text editor.
In the syntax coloring preferences, there is a total of 6 keywords, and you cannot add any custom one.
How am I expected to code having variable names, function calls, and classes look exactly the same?
I will stick to Flash Pro CS5.5 and SciTe.

Resources