Skip to content
Ceno social news website
Java CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
gradle/wrapper
logo
src
.gitignore
.travis.yml
README.md
build.gradle
ceno.iml
file-watchers.txt
gradlew
gradlew.bat
settings.gradle

README.md

Build Status

Website preview

Ceno

Ceno social news website

Notes

A good article about layered architecture and entity, value object, etc.

Plugins

The following plugins are used in IntelliJ IDEA for developing this project:

  • Lombok: To add support for code generated by Lombok
  • File Watchers (follow this guide)
    • Babel: To transpile ES6+ and TypeScript and React JSX to older ES5 JavaScript
    • YUI Compressor JS: To automatically minify JavaScript files (does not support ES6 and above)
    • SCSS: To automatically convert SCSS files to CSS
    • YUI Compressor CSS: To automatically minify CSS files
  • LiveEdit: To automatically refresh the page when CSS or HTML is modified
  • WakaTime: To keep track of coding activity. View your statistics here.

See file-watchers.txt for instructions on how to install the file watchers.

To disable TypeScript error its service can be disabled in IntelliJ: Go to Settings -> Languages & Frameworks -> TypeScript -> uncheck TypeScript Language Service

To add support for jQuery docs and autocomplete, add its library to IntelliJ: Go to Settings -> Languages & Frameworks -> JavaScript -> Libraries -> Download... -> search jquery and install it.

To configure IntelliJ to recognize React JSX syntax, set the JavaScript version in settings to JSX.

VCS

It's not needed to add .idea directory to VCS (it is by default ignored in the .gitignore file). If it is already added to git, you can remove it (just from git and not filesystem) by the command:

  • git rm --cached -r foldername for a folder and all its files
  • git rm --cached filename for a file and then do a commit.

I prefer to keep the .iml file because it is the required file for an IntelliJ project.

For files to ignore and not to ignore in .idea directory see this article.

If it's needed to switch to another VCS branch but there is uncommitted changes that we do not want to commit right now, there is an option in IntelliJ just for this:

Open "Version Control" tool window -> select "Local Changes" tab -> right-click on the group of changed files -> select "Shelve Changes..." -> commit

Now you can safely switch the branches and do whatever you want.

To restore the changes after checking out the original branch, again open "Version Control" tool window -> select "Shelf" tab -> right-click on the desired group of changed files -> select "Unshelve..." -> commit

Google style guides is followed for coding (Java, HTML, CSS, JavaScript).

For a good article about JavaScript modules click here

To manage vendor-provided CSS and JavaScript files (like jQuery, Bootstrap and so on) and be able to add/change them in project dependencies, we can use webjars.

Can I use could be used to check if browsers support a feature.

Good charting libraries for html:

As of version 2018.3, IntelliJ can sort CSS properties. To enable it go to Settings -> Editor -> Code Style -> Style Sheets -> Arrangement tab. To do the rearrangement, from main menu, select Code -> Show Reformat File Dialog and check Rearrange code checkbox. Checkbox state is remembered, so next time the code is reformatted it is also rearranged.

To integrate Jira or other task management tools on IntelliJ, see here

To use ES modules in JavaScript, if a file doesn't provide exports, use this form of input:

import "/static/vendor/jquery/jquery-3.3.1.js";

Importing in the form import "..." is exactly like placing <script> element in the HTML head; the script is run once and order of import "..."s is important (e.g. try to reorder jquery import and see what happens). See this SO question

To debug JavaScript code in IntelliJ, install "JetBrains IDE Support" extension on chrome. Set your desired breakpoint(s) in the IDE. In chrome, right click on the JetBrains extension icon and select "Inspect in IDEA". Reload the page or do something that reaches the breakpoint.

Note that for this to correctly work, if you code in TypeScript or use the minified version of the js file, the .map file of the js file should be provided.

Absolute vs relative paths

An absolute path starts with the / character, a relative does not.

Suppose we are in the following path (or file): www.ceno.com/static/files; the relative path image.jpg would become www.ceno.com/static/files/image.jpg while the absolute path /image.jpg would become www.ceno.com/image.jpg.

That's all there is to absolute and relative paths!

A way to make the text in the element at most two lines (see here) #someDiv { line-height: 1.5em; height: 3em; /* height is 2x line-height, so two lines will display */ overflow: hidden; /* prevents extra lines from being visible */ }

The following picture shows the effect of different placements of <script> element (see this and this and this for more info): <script> element placement

If you use Ajax, jQuery expects some return value (could be empty) even when the server has responded with 200 status code; in this case if no return value is returned, the jQuery error() callback will be called. To solve this we can return 204 status code as described here or return a simple object as described here.

When submitting a form, follow Post/Redirect/Get Pattern

You can’t perform that action at this time.