Code Monkey home page Code Monkey logo

ui5-best-practice's Introduction

DSAG's UI5 best practice guide

GitHub repo size GitHub contributors GitHub GitHub stars GitHub forks

this is not the guide itself (it's over at https://1dsag.github.io/UI5-Best-Practice/), but the corresponding repository with instructions on how to contribute to the guide.

Because the DSAG UI5 best practice guide is a living document πŸ‘¨β€πŸ’» - thriving on and with its' community πŸ₯³

The document is written in (kramdown flavored) markdown and served via jekyll in github pages (https://1dsag.github.io/UI5-Best-Practice/).

Table of contents

Getting started Options

Quick Start with GitHub web-based editor

πŸ‘‰ No local installation
πŸ‘‰ Everything in Browser
πŸ‘‰ Preview after every commit


The web-based editor is as IDE that runs entirely in your browser. With the web-based editor, you can navigate files and source code repositories from GitHub, and make and commit code changes. You can open any repository, fork, or pull request in the editor.
Also you can preview markdown files while you edit.
This makes it very easy to get started since no local installation is required.
You can't see the final result right away, but GitHub can generate that as well for you.

  1. Fork Repo

fork a github project

  1. Go to your created Fork Page

fork a github project

  1. Press just . on your keyboard to switch to the IDE

  2. Create new Branch

fork a github project

  1. Define Branch Name

fork a github project

  1. Start writing

Under /docs is the documentation. Just start editing or create a new folder for a new topic

  1. Preview Site

You can preview the site also within GitHub.
Just go to Settings in your repository and there to Pages.
The link would be https://github.com/YOURUSERNAME/UI5-Best-Practice/settings/pages
Choose here your branch youΒ΄re working on and choose the docs folder.
After you have saved, it takes a few minutes until the page is accessible under the given URL. From then on, the page is rebuilt with every commit.

fork a github project

Development Docker Container

πŸ‘‰ Only Visual Studio Code and Docker needed
πŸ‘‰ Instant Preview of your Changes
πŸ‘‰ Run linting before commiting


This is the easiest way to have your development environment ready in no time. You get a ready to use configured Debian Container which is transparently used by Visual Studio Code.

Installation Steps Docker Container

Install the following programs:

Clone the repository with the command Remote-Containers: Clone Repository in Container Volume...

This will

  • Clone the Repository in a Container Volume
  • Build the Docker Image
  • Start the Docker Container and map the required ports
  • Mount the created Container Volume
  • Install the required npm packages
  • Install the required ruby gems

The only thing left to do is open the console in Visual Studio Code (it is attached to the running Development Container), navigate into the docs folder and start the Development Server:

cd docs
bundle exec jekyll serve --livereload

Local installation

πŸ‘‰ Same as Docker Container
πŸ‘‰ Complete Control over Enviroment


Prerequisites for Windows

Installation Steps Local installation

  • make sure, ruby 2.7 is installed on your system

  • clone the repo

  • switch to the document base $> cd docs

  • $> bundle install
    for installing the github-pages jekyll incarnation

  • start the local gh-pages instance, including automatic browser live-reload

    bundle exec jekyll serve --livereload
    Configuration file: /Users/you/UI5-Best-Practice/docs/_config.yml
                Source: /Users/you/UI5-Best-Practice/docs
           Destination: /Users/you/UI5-Best-Practice/docs/_site
     Incremental build: disabled. Enable with --incremental
          Generating...
           Jekyll Feed: Generating feed for posts
                        done in 0.233 seconds.
     Auto-regeneration: enabled for '/Users/you/UI5-Best-Practice/docs'
     LiveReload address: http://127.0.0.1:35729
        Server address: http://127.0.0.1:4000/
      Server running... press ctrl-c to stop.
  • point your web browser to http://localhost:4000

Contributing

For all information on the development process and best practices for creating content, visit Contributing.

Licensing

This project uses the CC BY 4.0 license : LICENSE

ui5-best-practice's People

Contributors

areichpuc avatar dsagadmin avatar dscbs avatar evilru avatar hkaintz avatar kasch-code avatar loelker avatar marianfoo avatar mschleeweiss avatar osigge avatar rd-janis-burbach avatar rocketscience-dev avatar rotda avatar t-kessel avatar treee111 avatar vobu avatar waldpark avatar wridgeu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ui5-best-practice's Issues

Modernize sample ErrorHandler

Thanks to @t-kessel for setting up the sample error handler. A lot of work has gone into this. I think the code could be improved by introducing some ES6 features and applying other best practices from UI5 (e.g. no usage of sync components (like new sap.m.Button)). Would this be a welcome change or is the code like this on purpose (e.g. to run the code in IE11 without a complex babel setup)?

Implement Github Actions for Linting

In order to ensure a good general and consistent quality of the contributions there should be a review in the Github Actions.
For this purpose, a new Github action is created that checks various things.
For this severall PR are created. Here is a list in which order these PR should be merged.
Still, merge erros will probably happen.

1. Fixing Linting Errors

2. Adding Typescript

3. Linting Actions

4. Create PDFs (optional)

5. Create Documentation about Linting

Usage of Block Inline Attribute Lists (IAL) not possible because of GFM

Hi @vobu ,
I have seen in the documentation of our theme "Just the docs" many examples how to use CSS classes or the TOC in markdown.
So-called "Block Inline Attribute Lists" are used.
https://pmarsceill.github.io/just-the-docs/docs/navigation-structure/#in-page-navigation-with-table-of-contents
If you wanna increase the font-size for example, use using:

Font size 9
{: .fs-9 }

But since GitHub Flavored Markdown (GFM) is used in the config, these IALs cannot be utilised.
Github supports two Markdown proccessor: GFM and kramdown
After I set the Markdown processor to kramdown, it worked.

The IALs are apparently already useful and are also used by our theme.
Did you choose GFM for a special reason?

After the change to kramdown, I only noticed a few changes in the i18n area, which I would then correct.

Investigate Deno

Investigate if Deno can be used instead of Node to run Typescript among other things.

Add new Sponsor for topic Layouts

Unfortunately, no contributor was found for the Layouts topic.
This issue should find a sponsor for it and be linked to the pull request

code samples in the guide from github repo?

I just stumbled upon a ruby gem which can add code from github to jekyll pages:
https://github.com/bwillis/jekyll-github-sample
you can see it in action here:
https://bwillis.github.io/2014/05/28/include-github-repo-code-in-jekyll/

it does not fit in the current setup because of dependencie issues:

$ bundle add jekyll_github_sample
Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies.........
Bundler could not find compatible versions for gem "activesupport":
  In snapshot (Gemfile.lock):
    activesupport (= 3.2.22.5)

  In Gemfile:
    jemoji was resolved to 0.12.0, which depends on
      html-pipeline (~> 2.2) was resolved to 2.14.0, which depends on
        activesupport (>= 2)

    jekyll_github_sample was resolved to 0.3.1, which depends on
      activesupport (~> 4.0)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

it might be worth to check if it could be updated to fit in our setup.
bundler is able to install gems directly form a git repository.

also worth mentioning is the possibility to use gists: https://github.com/jekyll/jekyll-gist

How does this sound to you?

Update CLA

  • describe best practice to create content and how to manage metadata for the pages
  • how to name the url
  • numbering to order the pages
    - describe how to integrate a codesample --> add to readme and CLA

Select DSAG logo and favicon

As a start for the CI of DSAG we can already select a logo because this is already supplied by the theme.
Also a favicon would also be useful
I have already created a template here #22

Improve PDF Action

Currently a Action was created to automatically create a PDF (see #101 )
Unfortunately, when creating this PDF, it will commit to main, but in this project, main is protected.

Is may be better to run this action manually on a branch an create a PR after that.
Maybe do this on Releases

Update CLA for codesample

  • describe how to integrate a codesample --> add to readme and CLA
  • Update Readme to remove Developing and Contributing because this is in contributing.md

Update Topic List

Topic List is quiet out of date
update list to see which topic are still open

Add new Sponsor for topic Patterns

Unfortunately, no contributor was found for the Patterns topic.
This issue should find a sponsor for it and be linked to the pull request

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.