Recent Tutorials
Who is online?
In total there are 13 users online :: 0 Registered, 0 Hidden and 13 Guests

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17
Keywords

List of Editors and Tips for Writing Code

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 30 Aug 2016, 18:43

Introduction and Tips


As a web developer you'll need tools. What kinds of tools would you need ? Text editors and IDEs ! Editing code in a plain text pad and even on the forums is a bad idea. Why ? Regular plain text pads don't provide you with syntax highlighting ( the stuff that makes code pretty ), indentation guidelines and memory, auto-completion of code, etc ..! Editing on the forums is an even worse idea, because forumotion's editors constantly mess up indentation which makes the code unreadable, the javascript editor totally lacks syntax highlighting, and sometimes you may just accidentally reload or close the page losing all your progress !

To efficiently write and read your code you should follow these 2 important rules :

  1. ALWAYS use a text editing program that supports syntax highlighting. Syntax highlighting colors the code, making it easier for you to read and identify certain keywords and phrases.

  2. INDENT your code for nested tags and statements, and separate large code blocks by an empty line break. Proper indentation ( 2 or 4 spaces ) helps make your code easier to read, allowing you to know what's inside what ! Click the spoiler below to reveal the indentation examples.
    Click to view examples:
    Below are examples of good and bad indentation. You'll realize the code under "good indentation" is a lot easier to read, because it uses indentation and line breaks. Wink

    Bad Indentation


    HTML :
    Code:
    <div id="something"><h1>Page Title</h1><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div><div id="bottom-something"><a href="#">Click Here</a></div>

    CSS :
    Code:
    #something {background:red;color:blue;font-size:12px;font-family:arial;}#bottom-something{text-align:center;color:purple;font-weight:bold;}p{color:yellow;}

    JavaScript
    Code:
    function hello(name){if(name) {alert('Hello ' + name + '!');}else{alert('Hello world !');}};


    Good Indentation


    HTML :
    Code:
    <div id="something">
      <h1>Page Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
    </div>

    <div id="bottom-something">
      <a href="#">Click Here</a>
    </div>

    CSS :
    Code:
    #something {
      background:red;
      color:blue;
      font-size:12px;
      font-family:arial;
    }

    #bottom-something {
      text-align:center;
      color:purple;
      font-weight:bold;
    }

    p { color:yellow; }

    JavaScript
    Code:
    function hello (name) {
      if (name) {
        alert('Hello ' + name + '!');

      } else {
        alert('Hello world !');
      }
    };

    Below are some links which explain style guides for each language.

    HTML : http://www.w3schools.com/html/html5_syntax.asp
    HTML / CSS : https://google.github.io/styleguide/htmlcssguide.xml
    JavaScript : http://www.w3schools.com/js/js_conventions.asp


If you follow these two important rules, you'll be able to understand what you're writing with no problem ! See the next section for tools that you can use to write your code. grrr!!!!!


Editors


Below is a list of free programs and online editors that you can edit and test your code with. I highly recommend using at least one of these editors to edit and test your code with.


  1. Atom (atom.io)
    Atom is a text editor + IDE and one of my personal favorite programs for editing code. It's free, open source, and highly customizable. Most of all it comes with tons of features to assist you in coding, such as multiple editing panes, smart auto-completion, file system browser, etc..

  2. Brackets (brackets.io)
    It is a lightweight but modern text editor. It has live preview mode, many extensions. - @RyanPham

  3. Notepad++ (notepad-plus-plus.org)
    Notepad++ is another good text editor that I used regularly before finding Atom. It provides a number of tools and supported code types for editing, and is an all round good tool to have for writing code.

  4. JSFiddle (jsfiddle.net)
    JSFiddle is an excellent online editor for writing, testing, previewing, and sharing code as well as collaborating with other users.

  5. CodePen (codepen.io)
    CodePen is another online editor that allows you to write, test, preview, and share your code online.


That's all for now ! If you have any questions or want to add something to the list above just leave a reply below. Good luck ! Angel


Last edited by Ange Tuteur on Mon 31 Oct 2016, 11:12; edited 1 time in total
avatar
Jazeon

Title :
ポジティブな精神的態度
Gender : Unspecified
Posts : 116
Points : 711
Reputation : 29
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://foruminion.forumotion.com/

PostJazeon on Sat 03 Sep 2016, 07:44

Currently using the Atom you recommended though, I like the theme and the highlights of code. The only thing lacking coming from them is only if they allow a live demo or version of the coded template similar to weaver.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 03 Sep 2016, 08:29

@Jazeon I never thought of that before.. Surprised I searched and they have a package for it :
https://atom.io/packages/atom-html-preview

You can install it via Settings ( CTRL+, or File > Settings ) > Install > Search "live preview" > Click packages ( should be the first result ) > Install

I tested it so far and it works niiiiiiice with HTML files. *-* You have to press CTRL+SHIFT+H while editing the html file to bring up the preview pane. Pretty awesome, I wonder why I didn't think of looking for something like this sooner. Big eyes
avatar
Jazeon

Title :
ポジティブな精神的態度
Gender : Unspecified
Posts : 116
Points : 711
Reputation : 29
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://foruminion.forumotion.com/

PostJazeon on Sat 03 Sep 2016, 12:31

@Ange Tuteur wrote:@Jazeon I never thought of that before.. Surprised I searched and they have a package for it :
https://atom.io/packages/atom-html-preview

You can install it via Settings ( CTRL+, or File > Settings ) > Install > Search "live preview" > Click packages ( should be the first result ) > Install

I tested it so far and it works niiiiiiice with HTML files. *-* You have to press CTRL+SHIFT+H while editing the html file to bring up the preview pane. Pretty awesome, I wonder why I didn't think of looking for something like this sooner. Big eyes

Okay this is definitely something now which I could list as a free program on par with Weaver, knowing now that they offer for free, a feature to do live previews on coding, But I guess a minor downside would be that you have to keep on pressing that combination keys to preview, while on Dreamweaver, you are absolutely doing both live preview and coding.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 05 Sep 2016, 13:22

Yep, there's a lot of user-created packages for Atom. So if you're thinking of something, someone may have already made it. Just gotta search their packages to find out. ^^ That's the only problem with the preview, but once you open the side panel you don't need to press the keys again because it'll auto-update. I noticed the auto-updates are a little delayed though.

LOL did you see this one ? I'm gonna try that out. xD
avatar
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 41
Posts : 65
Points : 1230
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Fri 21 Oct 2016, 09:57

sometimes bad indentation is in order to make it difficult to read or not?
avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2092
Points : 2759
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 31 Oct 2016, 10:46

@Ange Tuteur

"CodePen is like JSFiddle" psh please

Shouldn't that be the other way around... CodePen is the best and has always been my favorite (unless I can get that power code stuff to work on Atom sheesh).
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 31 Oct 2016, 10:56

^ Yeah it should, it could go both ways since they do the same thing though. Maybe I should hack that part off Razz

Did you install the package into Atom ? Press ctrl+, to open settings > go to install > search "activate power mode" and click Enter. Should be the first package by JoelBesada. You should also get the HTML preview package too. Wink


@Ch@lo Valdez wrote:sometimes bad indentation is in order to make it difficult to read or not?
Bad indentation is a no-no for code that's supposed to be read. If the code is optimized for performance ( minified ) then it's understandable.
avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2092
Points : 2759
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 31 Oct 2016, 11:04

@Ange Tuteur wrote:^ Yeah it should, it could go both ways since they do the same thing though. Maybe I should hack that part off Razz

Did you install the package into Atom ? Press ctrl+, to open settings > go to install > search "activate power mode" and click Enter. Should be the first package by JoelBesada. You should also get the HTML preview package too. Wink

Not really. JSFiddle you gotta click "Run" but on CP, it runs the code if you stop editing it Razz

PLUS it autosaves AND has preprocessors. JSFiddle can't really compete.

And I'll try that when I get on my laptop.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 31 Oct 2016, 11:15

Ah yeah that does get annoying having to click "run" every time. tongue

Does it now ? I'll have to give some of those JS preprocessors a try on CP. Shifty

Righto ! Lemme know how it goes. Thumb right
avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2092
Points : 2759
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Wed 02 Nov 2016, 08:06

@Ange Tuteur I got power mode and the html preview but how did you get the little sparks to fly out of the text...
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 03 Nov 2016, 11:39

Oh by default the particles start showing at combo 50. You can modify the settings to show them at combo 1, or disable the combo mode entirely. Go to Settings ( CTRL+, ) > Packages > Activate Power Mode > Settings > Combo Mode - Activation Threshold
avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2092
Points : 2759
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 13:48

Oh okay. I was only at 40 and I was like WTF waiting for some sparkles. Thank you.

And quick question: Do you use Atom to test your tutorials out before you use them? Because it's kinda weird working with the SCEditor in Atom (two editors usually pop up when I save an HTML page).
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 03 Nov 2016, 13:59

I usually test my stuff directly on the forum.

1. Sometimes I'll do it via console for certain scripts.
F12 ( CTRL+SHIFT+I ) > Console tab > Paste my code > Hit enter

2. Other times I go on my test forum and test the code there.

I've actually never used previews too much while writing my code. I do find the HTML previewer convenient for edit HTML files though. I wonder why there's two editors popping up ? o_O
avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2092
Points : 2759
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 14:03

I have no clue.

Like Press Ctrl + S while viewing a topic and open the HTML file after you save it.

You'll see what I mean.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 03 Nov 2016, 14:08

Try deleting the script tag whose source ends with "instance-sceditor.js" -- might have .download on the end too.
avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2092
Points : 2759
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 14:12

I'll try it later and let you know what happens.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 03 Nov 2016, 14:44

Alright lemme know. Salute It worked on my end when I tested it. I think it was invoking a second instance of the editor, hence the two sceditors.
avatar
YoshiGM
Member
Title :
Gender : Male
Age : 24
Posts : 13
Points : 294
Reputation : 7
Language : Spanish & English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.yoshifansclub.com https://twitter.com/YoshiGM

PostYoshiGM on Mon 07 Nov 2016, 16:31

I've tested Notepad++
and in my oppinion is a good option like you said in the first post.

The highlight of the codes is good, but I think it is a matter of taste, because my sometimes I get tired and lose ground ..

I usually do codes with reliable Notepad and since I'm not a frequent programmer, for what I'm doing well hehe
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 08 Nov 2016, 11:24

Yeees ^^ notepad++ is an all round good editor for editing code. I still keep it on my computer because I use it from time to time.
avatar
RyanPham
Member
Title :
Gender : Male
Age : 15
Posts : 11
Points : 512
Reputation : 1
Language : Vietnamese; English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://a9family13-17.forumvi.com

PostRyanPham on Sat 31 Dec 2016, 09:14

Well, I'm using Brackets Cool
It is a lightweight but modern text editor. It has live preview mode, many extensions. I really enjoy coding in Brackets

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum