FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 21 users online :: 0 Registered, 0 Hidden and 21 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

List of Editors and Tips for Writing Code

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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 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
Jazeon
Jazeon

Gender : Unspecified
Posts : 116
Points : 3149
Reputation : 29
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://foruminion.forumotion.com/

PostJazeon 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.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Jazeon
Jazeon

Gender : Unspecified
Posts : 116
Points : 3149
Reputation : 29
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://foruminion.forumotion.com/

PostJazeon 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. List of Editors and Tips for Writing Code 1f619
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Ch@lo Valdez
Ch@lo Valdez

Gender : Male
Age : 48
Posts : 65
Points : 3658
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3

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

sometimes bad indentation is in order to make it difficult to read or not?
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 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).
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 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.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 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...
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 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).
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 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.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 14:12

I'll try it later and let you know what happens.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
YoshiGM
YoshiGM
Member
Gender : Male
Age : 31
Posts : 13
Points : 2732
Reputation : 7
Language : Spanish & English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://www.yoshifansclub.com https://twitter.com/YoshiGM

PostYoshiGM 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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
RyanPham
RyanPham
Member
Gender : Male
Age : 21
Posts : 11
Points : 2950
Reputation : 1
Language : Vietnamese; English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://a9family13-17.forumvi.com

PostRyanPham Sat 31 Dec 2016, 09:14

Well, I'm using Brackets Cool List of Editors and Tips for Writing Code 1f609 List of Editors and Tips for Writing Code 1f609
It is a lightweight but modern text editor. It has live preview mode, many extensions. I really enjoy coding in Brackets List of Editors and Tips for Writing Code 1f44d List of Editors and Tips for Writing Code 1f44d List of Editors and Tips for Writing Code 1f44d
Sponsored content

PostSponsored content

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