Ceno

Ceno social news website

Notes

https://github.com/WICG/scroll-to-text-fragment

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

Free and open source java: https://adoptopenjdk.net/releases.html https://stackoverflow.com/questions/52431764/difference-between-openjdk-and-adoptopenjdk

Java roadmap: https://www.oracle.com/java/technologies/java-se-support-roadmap.html

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.

In JavaScript use requestAnimationFrame() instead of setInterval()

To build the application jar run the "bootjar" task or if it is a plain program without a build tool, create the jar with artifacts of IDEA.

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.

Here and Here describe Ant path style

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:

• Chart.js
• Recharts
• Chartist

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

Shimmer effect example

A good video about clean architecture

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):

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

Some sites to see the status of web technologies

https://www.youtube.com/watch?v=aJnFGMclhU8&ab_channel=GitHubTraining%26Guides

1. The MDN repository "contains compatibility data for Web technologies as displayed on MDN"
2. Can I use "provides up-to-date browser support tables" for Web technologies and features
3. ECMAScript compatibility tables provides status of ECMAScript support like caniuse
4. HTML5TEST scores and lets you know how well your browser supports HTML5
5. WHAT WEB CAN DO TODAY is something similar to HTML5TEST site

6. Google Chrome roadmap and features (including proposed etc)
7. Firefox implementation and standardization roadmap
8. Microsoft Edge platform status
9. Safari webKit feature status
10. Opera (same as chrome)

---

_{Note that Google Chrome, Microsoft Edge and Opera are all Chromium-based browsers that use Blink browser engine.
Thanks to this GitHub gist.}