Does anyone know a css(or html) editor that autocompletes code as firebug do in css?
I think its called autocomplete as you type.
thanks
edit:
i found a project called zen-coding that create shortcuts for coding html and css. but im still faster with firebug
Most decent IDEs should offer autocomplete on any language they support.
I'm using Netbeans here, and I can confirm it gives me autocomplete on the various languages I'm using, including HTML and CSS.
http://netbeans.org/
Eclipse, and most major IDEs have a "code assist" feature that propose the possiblities on a hot key (eg., ctrl+space) or on a specific event (press <) or on a timeout (most of these are configurable).
Aptana studio is a eclipse based IDE for web development.
If you are specifically looking for "firebug style" meaning you expect the IDE to auto-complete (rather than propose) then you can tweak the options to get a similar behaviour ("completion Overwrites" rather than "Completion Inserts", for eclipse)
Or try cssUpdater, which syncs your FireBug css changes back to your original css files.
With it, you can construct and tweak you layout in FireBug, hit the sync button and reload the page to see that your layout and css is preserved. http://cssupdater.com
The best firebug-alike approach apps is : http://www.stylizerapp.com/
It's available on PC and Mac too.
Related
Is there a tool which I can use to see missing tag in HTML?
For e.g. if I wrote <div> but forgot to end it with </div> so is there a tool for this? I have a very large HTML file and I suspect because of missing tag I am having problems in displaying so need some tool that can identify it.
Try to validate page on W3 validator (validate via file uplod)it will show all errors.
You can use the Auto-Format feature (Ctrl+K+D) of Microsoft Visual Studio - it reformats your code so that you can easily see whether there are missing tags. I love this feature, it often comes in handy.
You can use http://validator.w3.org/ or notepad++ is the best option to check div's.
Any tool which gives you basic text editing tools can tell you this very easily.Some useful tools are:
1. Visual Studio
2. Notepad++
3. MS word(yes this also shows)
4. Front Page(very old player in this field)
Lots of many more.
Above of all, open your page in chrome or Mozilla then press F12, see the code and fix it.
Visual Studio is so powerful and convenient as HTML,CSS and JS editor.
After typing div,it automatically types /div for me.Espresso can do this as well, but it just doesn't types the TAP or space*4 automatically,that's awful!
So, is there any web editor on Mac as powerful as Visual Stdio.Thanks!
By the way, vs2013 Pro is free for students.
There are many good editors for HTML, CSS and JS for Mac like Espresso, Coda 2, TextMate.
But I personally prefer Sublime Text + Emmet combination.
Emmet Documentation
Check this link also for some of the features of Emmet.
Why don't you take a look at Sublime Text, TextMate or Coda 2?
You may find TypeMetal productive for HTML content authoring. It makes the easy stuff easy, while providing unrestricted access to HTML's full element set. TypeMetal produces streamlined, professional-grade markup, while enabling you to work with fully styled content in a keyboard-shortcut-rich environment. You can find links to a free demo build and the complete online user guide here. (I designed and developed TypeMetal to be the "missing HTML editor" I've long wished for -- hope you'll enjoy it too!)
You can try learning and customizing vim ( = !
I am trying to understand about Chrome (browser) development. I am very new to this and trying to figure out where to start in order to develop for Chrome Browser.
Just have a couple of questions:
What is the difference between Chrome Browser apps vs. plugins vs. extensions (not sure, if this question make sense. But, hope you got what I am asking for)
What kind of applications can I develop for Chrome Browser
What technologies do I need to learn in order to develop for Chrome Browser.
To answer your first question this explains the differences between apps and extensions (I think there's no better way to explain their nature):
https://developers.google.com/chrome/web-store/articles/apps_vs_extensions
What do you mean with "what kind of apps"?
You can develop both hosted and packaged apps if is that what you intended, give a look at this:
https://developers.google.com/chrome/apps/docs/index
Anyway the easiest way to start would be by building an extension, how-tos and
good documentation makes it good to start with:
http://developer.chrome.com/extensions/getstarted.html
Just to add to the above answer which was missing difference between Plugin and Extension is:
Plugin is a third-party library that is plugged-in to the browser and allows for being embedded on a webpage. It affects only the web page that is using the plugin.
Extensions change the browser UI, add menus or change overall look of the browser and can process each page that gets loaded.
So to sum it up - plugins add functionality and extra features to a particular webpage while extensions add functionality and features to the whole browser and change the behavior of the browser.
Just to add on new information since people may continue to hit this question: Chrome has basically deprecated plugins as of March 2017 (Chrome 57). If you go to chrome://plugins now, you won't see anything (you used to see a list of installed plugins with enable-disable links like for extensions).
It seems the reasoning is that the only plugins they actually wanted to allow you to enable/disable are Flash and PDF Viewer, both of which were moved to the Settings menus (if they weren't already there, not sure). The rest are considered to be integral parts of the browser. https://www.ghacks.net/2017/01/29/google-removes-plugin-controls-from-chrome/
Makes things a bit simpler to think about now.
I'm looking to create an extension for personal and possibly personal friend usage as well that simply changes a few colors that are displayed on a website I visit. I use Reddit Enhancement Suite, which has options for 'Night mode' that completely changes the color appearance of Reddit.
I would like to know how to edit or inject CSS code to this website so that the colors used in the website are what I would like them to be when I view the page. Mind you, this is of course just in my browser or in another Chrome browser using my extension.
You can do exactly as you said: you can inject a CSS file or code into the page.
The easiest way is through the manifest (look at the CSS property).
You only need to complete your manifest.json in order for Chrome to know in which pages it has to insert your CSS file into.
If you want to decide programatically when to insert the CSS, you can use chrome.tabs.insertCSS(), where you can insert a CSS file or just the code as a string.
Instead of an extension, you could also do it in a user script. Then you can simply use GM_addStyle, just like with Greasemonkey scripts. It's much simpler to write and more lightweight in terms of memory usage.
There are already extensions made for this. The one I use is called Stylish, which only modifies appearance using CSS3 only, and not html. There are other extensions as well, do some google searches and you will find a few more.
Is there a simple way to save an HTML page that has an external stylesheet (1 or more) referenced but force all of the rules to be inserted into the page itself, inline? So basically I want to move all external rules onto the elements that they affect themselves.
For what it's worth, I'm using nearly every major browser (incase the solution is browser-specific), and I'm on Windows (incase it's OS-specific).
I'm assuming you've seen the online tools that are available like this one? This online tool (which I have not tested but looks like it works) gives you the option of providing a url or source code and shows warnings for cross-browser compatibilities with your styles.
I use a tool that does something like that, but it was written for Ruby and TextMate for Mac. It is released by Campaign Monitor as a way of preparing HTML emails. It brings all the rules from the stylesheet and makes them inline styles.
It might give you a good start. I'll keep looking.
TextMate Email Bundle
The piece that does the heavy lifting is the TamTam RubyGem which brings the CSS inline. However, it seems to only support one style element (not link elements). If you could work with those restrictions, you could get it to work on Windows using Ruby and a ruby script file. Not quite drag and drop I'm afraid.
i use chrome extension Save Page WE