Click here to Skip to main content
Click here to Skip to main content

Post an article on Code Project using Submission Page

, 6 Dec 2013
Rate this:
Please Sign up or sign in to vote.
Post an article with code on Code Project choosing Option 1 in Submit New Article Page

Introduction

After years on Code Project, receiving and reading the Code Project News Daily that keeps me in touch on edge technologies and rumors and weekly Newsletter with interesting, cool code article and references why don't start to write and post an article?
So I decided to post a sample code, Hello world program, one of the simplest program, to learn how to.

In Code Project main page I found a big link Post an Article Code Project home page

to Submit a New Article page.

 Submit a new Article

Two options in this page: 

  • Option 1: Post directly using the Submission Page, with Article item as default in dropdown list, other two list items are Tip/Trick and Reference. 
  • Option 2: Send your article to an editor and have us do the hard work

I chose Option 1 letting Article and Start Writing!>>. New page is Article Submission Wizard and I'll show each wizard section in detail.

Background    

This article just shows and uses a wizard, so no knowledge is required apart c# very basic and a little of html.

Article Submission Wizard 

Article submission wizard is a single page that contains everything you need to write and post your article on Code Project.

At the top of wizard page you find:

Submission Page header
  • two dropdown list with Section and Subsection for set article's topic: as section I choose CodeProject FAQs Questions inside Reading General group in the opening left combo box and General for Subsection
  • text box for article name, Enter your article's title here, I wrote Post article on Code Project using Submission Page
  • your name and article's date creation are by default
  • Tags with an opening window with check boxes to help you to set properly Language, Platform, Technlogy, Audience, Skill Level, Topic
  • text box: Please add a 1-line description of your article here, I replaced with Post an article with code on Code Project choosing Option 1 in Submit New Article Page

On the right I left Type as Article, Licence as CPOL and Who can edit Admin Only

HTML editor

The middle part of Submission Wizard page is:

Html editor and right submision page part

On the left the html editor and on the right the article files, generally file images. Under the html editor is shown the Final article URL as will be http://www.codeproject.com/Articles/IdArticle/Article Name.

In this paragraph I'll show you the editor. In the html editor there is the template where you can write your article, with prefixed paragraph, Introduction, Background, Using Code and Points of Interest. I've written this article on it adding more paragraphs.

In Html source mode you see the formatting, very simple, just <p>, <h2>, <br> tags,  and <pre> tag before code section. The style sheet is not included, probably is by default.

Html editor in source mode

Weakness: when you select a text, prompt doesn't go to the same text switching from design mode to HTML mode and also HTML mode presentation is too verbose, without indentation, browsing online in two modes is not so fluid, with two scrollbars, the html editor one and that of your browser.
I think wizard is enough if you want to write the article directly on design, but it's not the right solution for work in html source mode.

HTML editor toolbar  

HTML editor toolbar

Toolbar is essential but contains all the basic to formatting an article and uploading files or media.
It's is made of:
Buttons
1st row: Bold, Italic, var for variable name, Strikethrough, Subscript, Superscript, Cut, Copy, Paste selection, Undo and Do your last action, Find and Replace.
2nd row: Insert/Modify: image, movie, horizontal rule, Insert Web link and anchor, Remove bad tags and formatting, InsertTable, Toggle Borders, Justify Left, Center and Right, Decrease and Increase Indent, Ordered List, Bulleted List, HTML toggle between HTML and Design Mode
Three dropdowns:

  • format: Normal, Formatted, Heading (2, 3, 4, 5, 6), Cite  for text article
  • Language: Plain Text, ASP:NET, c#, many more...  for code part
  • Unordered List you can change the bullet image with File downloads, Compact List, Delegates, ...

To upload an image, Insert image button opens a window where you can set property for image:

Insert Image

Using the code  

Using the code is the paragraph to write a brief description of how to use the article or code. The class names, the methods and properties, any tricks or tips. OK.

Hello World program displays a fixed message on console, Hello World.
In c# static Main function is program entry-point with optional string args.
Console.WriteLine function displays the argument on console and goes to a new line.
Console.Readline waits an input so console doesn't quit and message is readable from user.

I put my code inside <pre> element, the coloured section, setting dropdown language format in html editor toolbar as c#, translate in html with attribute cs in pre tag.
With var button you add <code> tag, for variables and classes names. 

In Wizard html editor you don't see language formatting.

using System;
 
namespace Hello_World
{
    class Program
    {
        static void Main(string[] args)
        {  
           var i =0;         
           Console.WriteLine("Hello World");
           Console.ReadLine();
        }
    }
}    

Wizard right part: Draft, Current Files, Upload Files, Article source Url 

 Drafts and Current Files empty

In Wizard's right part, outside the html editor, two buttons for Save or Discard draft, Between them the time of last saving, less than 1 minute when you edit, then Current Files with tip Files are relative to the current document. eg <img src="myimage.jpg">, No files uploaded at the beginning.
Section part to Upload Files and in the end Article source Url is only for reposting.

In Upload Files section you can Browse File or Drag and Drop File Here with request: Please keep each document file under 10 MB. Please  keep each image file under 1 MB and the width < 640px. Permitted file types are: ZIP, JPG, GIF, PNG, SWF, FLV, MP4.

File Section with files

My article's file images are uploaded either with Drag and Drop or with Browse File inside Upload Files section.
Browse file is a two steps uploading file, in the sample I Browse File with the name Header empty.png and you need one more step with Upload Files button.

Current Files lists uploaded files with size and dimension and you can, eventually, rename them or see in a new page. In the sample I've five files.

Issues: sometimes uploading file you get: Unexpected error during upload. One or more files may not have been uploaded and also file list name is odd redisplaying file with old name.

Preview, Save Version, Publish

Preview, Save Version and Publish

I'm in the end, now I've to post my work, using the below part of the Submission Page.
Two text boxes:  Any comments for our editors? and Briefly comment on what was changed.
I set in first one: Please, could you check if my section and subsection are right for my article subject? In fact I'm not sure of my choice, Tools and IDE for section and General for Subsection, maybe there is something better. In fact after feedback I set CodeProject FAQs updating my Article Submission Wizard as you see,
I left the second one blank because is my first article version.

Next steps info say: Once you've previewed and submitted your article, your article will go into a queue for approval by the community. The approval process is usually very quick.
OK, I'll waiting for...

Two checked boxes: Work in progress: don't publish and I have read and agree to the contributor's agreement. 
Two buttons: Publish and Preview available in a new page, where you can read your article as will be published, formatting code included.
You can publish only checked I have read and agree to the contributor's agreement and sure you have written a good article.

If you check
Work in progress: don't publish, Publish button is replaced by Save this Version button, unchecking comes back Publish one.

Save this version

To edit, update your draft, if you log in Code Project, on the right-top of home page, in My Article hyperlink, you'll find yours. You can continue your work or delete it.

Points of Interest 

I wrote my first article on Code Project, it's never too late. Wizard to Submit a New Article is not difficult to use but maybe for bigger article, Option 2 Send your article to an editor and have us do the hard work is better. Write an article in Code Project with the Submission Wizard has been studied in depth in A Guide To Writing Articles For Code Project by Marc Clifton and Code Project Article FAQ by Sean Ewington.

Probably if you've posted any articles, you know better than me cons and pros of Article Submission Wizard. 

Hope you enjoy my work! Thanks!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

In my little programming career, I wrote code in c# and sites with ASP.NET using NET Framework, as well as HTML/CSS; I'm using MS SQL Server or MySQL as database. I read interesting articles about functional language with sample code and I know Javascript basic for site client side with asynchronous request and new libraries as jquery and knockout. In future I would test angular.js.
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionHow do I upload source code? PinprofessionalDietmar Schoder26-Jul-14 2:18 
QuestionWrong Section PinprotectorDaveAuld7-Dec-13 4:20 
AnswerRe: Wrong Section PinmemberMauro Vezzoli9-Dec-13 7:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 7 Dec 2013
Article Copyright 2013 by Mauro Vezzoli
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid