I'm learning web-technologies and programming languages. Start learning about frameworks and other stuff. Looking at Bootstrap Front-End Framework. Some details I don't got about this thing.
On official web page it says you can download compiled and sources of Bootstrap. I don't get it, how can Front-End development be "source" and "compiled", ain't they just scripts that browser interprets?
Bootstrap uses LESS files to generate CSS files. The pre-compiled version contains the output from LESS. If you want to modify Bootstrap you'll need the source and then compile the LESS files into CSS.
The term compile is the word LESS uses on their website.
http://lesscss.org/
Doesn't it all compile in the browser upon page load? I'm guessing this means that it was compiled and tested before shipping, but I don't understand why this would need to be advertised.
No, Bootstrap can not run in the browser without the CSS being compiled using LESS.
From Extending Bootstrap:
Bootstrap is made with LESS at its core, a dynamic stylesheet language
created by our good friend, Alexis Sellier. It makes developing
systems-based CSS faster, easier, and more fun.
Since our CSS is written with Less and utilizes variables and mixins,
it needs to be compiled for final production implementation. Here's
how.
Bootstrap is written in LESS, a language that gets "processed" into CSS. It is common to use the word "compilation" to refer to this processing, as compilation is generally speaking the act of translating a language to another one.
Related
I am very eager to learn in the area of web-development and lately I started learning server-side programming after doing front-end web-development first.
Now it appeared to me that there are some templating languages such as jade/pug. However I cannot seem to fully understand the concept/purpose of these languages.
Do you first create your front-end part using html5 and css and then
convert this html to pug in order to use it for server-side
programming?
if so, why not just use html?
Or do you actually create your webpages using pug from scratch?
I do understand that a lot of information can be found with a quick google search. Therefore I want to emphasize that I actually did a lot of searching already. However, I cannot seem to fully grasp the concept or maybe I don't ask the right questions.
Therefore, I would really appreciate it if someone could explain what the exact role of these templating languages is in web development so that I understand the bigger picture.
I am using pug for three main reasons:
less to write (CSS selector like syntax, no closing tags)
better readability because you are basically writing the DOM instead of tags
the "extends" functionality to avoid duplicate code
Other (obvious) reasons are the possibility to use variables, loops, if-statements or even function calls to format or transform data in any possible way.
I usually create a layout.pug file containing everything that is contained in every page plus a block main and other views that extends layout. Depending on the project I also use a block head and block script to allow specific pages to inject additional stylesheets or scripts.
I got used to only writing pug code combined with stylus which concept is quite similar, so having to write plain HTML or CSS from time to time even got annoying.
Pug is also great in combination with bootstrap and/or Angular so I see no reason not to use it.
I am attempting to develop a GUI application for Tails. I'm doing the initial development on Debian 8 since development directly in Tails can be a pain.
I started out using Anjuta, but the documentation is essentially non-existent. The Anjuta website has nothing at all about how Glade is integrated or how to use it. I can't even track down documentation on how to change the main window title. The only tutorial I found has you start a project and build it using the default files that are generated for a GTKmm project.
Is there a good book or online tutorial out there for doing GUI development in Anjuta?
This is maybe not a complete answer, but it's too large to put in as a comment. I use Anjuta fairly regularly, but I share your feeling about the missing documentation (which is, by the way, not unique for Anjuta). I appreciate Anjuta (and Glade) very much, so don't take the following as criticisms on either program.
I would recommend you consider using PyGTK for GUI creation. It is a lot more productive. You can design the GUI in Glade - exactly the same way you would do for C/C++ - and then implement the code in Python, which you can also edit and manage from Anjuta. There are plenty of code examples, for example on the nullege code search engine.
About the work flow in Anjuta (for C/C++). It is based mainly on the Autotools system, so you should really read up a little on make, Makefile, and related tools. Though in principle Anjuta manages this, you will, sooner or later hit a problem, and some knowledge about Autotools will help you a long way (also this tutorial or this one. This slide series is interesting - probably because it is more graphical. There are even some video tutorials, like this one.).
There is no real necessity to use Glade from inside Anjuta. In fact, Glade has passed a long process distancing itself from 'code generation'. It now only contains an XML generator, which can be called separately. I find the screen space left for Glade inside Anjuta insufficient for comfortable work anyway.
So, in conclusion: If you mainly need a GUI, consider Python + Gtk. If you do need C or C++, Anjuta is a great IDE, but look at Gtk Development examples (like this one). Following those, the use of Anjuta should be a lot clearer.
EDIT:
Very useful answer. I have some underlying legacy code that has to be
C++. Is there a way to mix Python and C++ in Anjuta, or do you know of
any guideposts or tutorials for such?
You can open a C++ project in Anjuta - maybe even import you legacy code directly as a Makefile project. You can also add new files to your C/C++ project and create them as Python files. I've never tried to do that though, and I'm not sure how Anjuta would treat them, for example, in the Makefile(s). I don't have large projects mixing languages at the moment, but for small projects, I like 'Geany', because it doesn't get in the way. You do have to maintain the Makefiles manually.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Firstly I apologise for the long post. I have been asking a few questions about haxe and its suitability as a tool to solve a problem I am facing. I have very limited knowledge of haxe but what I do know is my ideal role for haxe in my project is not the normal use of haxe. So what I'm trying to avoid is wasting time I don't have learning this language (despite it looking really fun and powerful) only to find that it isn't fit for purpose. So I am hoping to get some advice from you haxe seasoned vets on whether it is fit for purpose. I truly hope that it is.
Here is what I am trying to achieve:
I work in the games industry and I need to create a game in both C++ and JS. C++ for an embedded system and JS for online and mobile. I am very experienced in both C++ and JS.
The games I develop I only want to write the once. Now I could use something like emscripten for going from C++ to JS but this will result in compiled JS code that cant be debugged with chrome dev tools easily. I'm converned that I will run into edge case bugs with the compiled JS that I cant easily tace back to the original C++. Plus some platforms for the game would require fairness laboratories to view the source code which would be an issue for compiled JS.
What I really need is a source to source compiler that produces native and human readable c++ and JS code that I can then work with and modify in its native form if necessary, hence haxe. I've looked at the code produced by haxe for C++ and JS. JS looks perfectly easy to understand and work with. C++ not so much but still just about acceptable. I can even stop haxe from compiling and linking C++ which I dont need. I only want the source code.
So far so good.
Now I have a game framework in c++ that uses oxygine 2d engine. It is capable of showing sprites etc as well as a framework I have created for message buses and finite state machines (loads more useful classes too). I also have a similar framework in JS which uses Pixijs for its 2d engine and has its own message bus etc just like the C++ engine.
Now what I want to be able to do is write modules in haxe that when I transpile to both C++ and JS that the code can be included as part of the framework and work with its respected language engine. Each object I create in haxe will be very encapsulated and will just need to subscribe to the message bus, handle messages and send messages back. It may also need to know how to use its engines state machine. So I have no idea if this is even possible with haxe as the message bus (along with other objects) will not be written in haxe but will be supplied to the module after it has been transpiled and built in its native project. Maybe I can write my own haxe library that knows the syntax for my two game engines and can transpile depending on its target language? Not sure it that is possible.
Thanks for taking the time to read, and any advice you can give.
You can use
#if cpp
// c++ implementation
#elseif js
// javascript implementation
#end
to allow some different implementations for different targets, this can go anywhere in your code, so you can pass a Haxe value to different functions for different targets.
To use extern definitions:
http://haxe.org/manual/lf-externs.html
http://old.haxe.org/doc/js/extern_libraries
With c++ specifically it might be more complex you need to look at CFFI or Linc
https://snowkit.github.io/linc/
The complexity is probably getting the types across. Remember Haxe c++ has managed memory your engine might do things differently. Also HL is coming soon and may have some advantages.
Looking at oxygine2d it seems a bit like the Flash API? And I know pixijs is based roughly off the Flash API. I believe that OpenFL now uses pixijs for WebGL rendering. You might want to also look at NME ( has nearly same interface for C++ as OpenFL, but NME has stuff like Cppia setup and is sometimes more stable ). If the JS or C++ is too slow you need to look into shaders and Luxe/Kha for render and you might want to also try Heaps it uses Lime ( openfl ) and some haxe js webgl I think.
If you need 2D physics then use Nape it can be used with any of the Haxe toolkits (Luxe, OpenFL, Kha, Flambe), there is physaxe but that's not used as much. Kha and Nape info eg:
https://github.com/lewislepton/kha-examples/blob/master/NAPE/Sources/Project.hx
I really suspect that your making your life hard by wanting to use different engines for different platforms when probably HaxeFlixel or Punk could give you all you need running with Nape on one of the cross target toolkits, but it's very feasible to do it your way.
Maybe look at Tink or Thx for signals event buses and the like, macros (like used in Tink) allow a lot of structures to be built at compile and so can reduce much of the overhead by doing it before run-time, so tweens can be pre-calculated by the compiler. There is a hxcpp debugger and if you run Haxe in chrome it should give you the Haxe line number via js source mapping.
Hopefully I have covered some aspects of your large question.
Haxe allows you to mix and match with native, but I think to use Pixijs and oxygine 2d is probably not ideal as there is bound to be enough good game tools in pure Haxe with target optimizations built in, you just need to go onto Kha IRC, Luxe gitter, and Haxe IRC and OpenFL forum and ask a few questions.
I am planning to build a web dashboard where I can analyze the financial records from a company through graphics, tables, ...
I already have the software, so the dashboard will only read the data, and not manipulate it.
It will be something like this, but simpler. Containing reports, graphics, options to select dates, intervals, etc.
But I am thinking, is it viable to use Clojure? And jQuery, CSS, HTML also.
Currently I work with the Luminus Web Framework for Clojure, but I am wondering if it is worth to do this in Clojure or if there are other languages that are better to do it.
Of course I am familiar with the language already, so it is a pro. But I am also open to suggestions.
It is not that hard at all! In fact, there exist great libraries which solve all the challenges involved in building a dashboard - scheduling, caching, transferring data to the client, visualization(and auto reloading).
We are working on a framework for building realtime Clojure dashboard. Have a look at https://github.com/multunus/dashboard-clj. We have used the following libraries:
Immutant's scheduler for scheduling
Core.async to simplify data flow on the backend
Sente for websocket communication
re-frame for client side state and view management
Stuart Sierra's component library for managing stateful components
In order to create beautiful visualizations you may take a look at d3 or highcharts. CLJSJS and Reagent cookbook will gives a good overview of how to use these js libraries(and many many more).
Clojure is an absolutely fantastic tool for building a web dashboard. The other answers here do a pretty good job of laying out the landscape as far as basic web technologies. On this side of things, I'll simply add I'm a big Reagent / Re-frame fan, and would go that route for React wrapper over Om.
As far as data visualizations, you may be interested in checking out Vega-Lite & Vega, which you can use from Clojure or ClojureScript (Reagent) by using a simple but flexible dataviz library I wrote called Oz:
https://github.com/metasoarous/oz
Vega-Lite & Vega are designed based on the ideas of the Grammar of Graphics, which inspired R's popular ggplot2 library. The core idea is that data visualizations should be built according to declarative descriptions of how properties of the data map to aesthetics of the visualization. Vega-Lite & Vega however take things one step further in providing a grammar of interaction, which allows for the construction of interactive data visualizations and sophisticated explorer views. Moreover, it ups the ante on the declarative nature of the GG in that Vega-Lite and Vega specifications are described as pure data (JSON), making it very in line with the data-driven philosophy of the Clojure world, and paving the way for seamless interoperability with other languages and sharing features.
Vega-Lite is more or less the higher lever, day-to-day data science tool, focusing on providing high leverage and automation based on very spartan specifications. It compiles to Vega, which is a somewhat lower level and more powerful, but less automated version of Vega-Lite. Usually starting out with Vega-Lite, and switching to Vega only as needed is sufficient.
For more on Vega & Vega-Lite see: https://vega.github.io.
I don't see any reasons why it wouldn't be viable to build a web dashboard in Clojurescript.
I suggest that you look into a library call reagent, which provides a minimalistic interface between react and clojurescript, so theoretically everything you can do with react should be possible in clojurescript/reagent (with the added benefit that it will be faster than React). You probably might be interested in reframe which is a framework for building single page applications.
React has been proven as a robust tool to build powerful UI.
You can do everything you can do in JavaScript using ClojureScript (just as you can do everything you do in Java using Clojure). So as others have commented, I would definitely recommend ClojureScript, especially since you know Clojure already. You may find out that you do not need jQuery etc.
The common choice to generate html is to use React.js via a wrapper library like:
reagent
Om
Both can generate HTML.
Reagent (and maybe re-frame) are the easiest ones to get started. Especially since there are components libraries like soda-ash, and a hiccup-like syntax.
Om (by the creator of ClojureScript), and maybe untangled are also a good choice, especially if you need to manage complex data. You can get a hiccup-like syntax via sablono.
Dashboards have been built using it (see the circleCI dashboard as a real-life dashboard example). This is the one I use personally.
Hoplon is also an interesting choice, as you mentioned.
Also have a look at cljsjs for pre-packaged js libraries.
As for the CSS, this is an orthogonal concern but yes of course you can use it (or even less and sass, there are Clojure wrappers for it). You can even generate CSS from Clojure code with garden,
You can find an example project using boot (by the same authors as hoplon), sass, reagent called saapas, but there are many more in the wild.
As you see there are many viable options in ClojureScript to build a dashboard. I am myself building one and settled on Om.next, partly because I was using React.js before.
I read many times that YUI will load modules dynamically based on need. or based on parent module. Like here it is written
The overlay module will pull in the widget, widget-stack,
widget-position, widget-position-align, widget-position-constrain and
widget-stdmod extensions it uses.
So, how can I determine the final size of data getting downloaded for a web page due to YUI usage.
Actually I was thinking how one can compare the datasize of YUI with that of another library (JQuery).
If you want file size vs functionality comparison, a close approximation based on features would be the simpleyui.js package (though the feature compilation is not 1:1), and be sure to look at gzip size as Tivac said.
Also keep in mind that JS lib file size comparison used as a reason to choose one over another is often a red herring. Your site likely includes a number of images, many of which will easy be larger than the lib and several additional modules. More relevant comparisons would be how the library is structured, what its relative strengths are, what's included out of the box (officially supported features vs 3rd party plugins), its community and documentation, etc. Pretty much any lib will serve your basic DHTML needs, and neither you or your users will notice the difference. Choose what works for you, and helps you build clean, maintainable code that you or your successor won't hate in a few months.
The Configurator will give you a file-size breakdown & automatically selects the needed modules.