I have a more generic question. We want to install an editor in our application to allow teachers to teach others through learning posts. In order to accomplish this we plan to start with the classic ckeditor5 and then customize it to allow certain users to add things like science and math formulas, slide show presentations, etc.
Are we too early for this with CKE5? Should we stick with CKE4 and use the variety of plug-ins that are offered out of the box.
I just want to make sure CKE5 is ready for prime time.
Thanks so much for your response.
Ckeditor4 pros:
A lot of plugins available and easy to create custom plugin
UI customisation easy
A lot of pre-build skins available including Microsoft word 2013
Custom build can be easily made with online builder
CKeditor4 cons:
Difficult to implement with frameworks like react. Has to be implemented by creation script elements and appending to the DOM.
CKeditor5 pros:
Direct implementation with react possible with rpm packages.
Basic UI and toolbar looks a little better than ck4
CKeditor cons:
Very Less plugins available.
Plugins need to be installed as packages
UI customisation difficult
From Which editor is best:
The choice between the editors depends on the user’s specific needs
and requirements.
You should consider continuing using CKEditor 4 if the compatibility
with old browsers is a must for you or if features that are essential
for you are not yet available in CKEditor 5. However, being a totally
new editor, with time CKEditor 5 will have more and more features
developed and available for end users to benefit from. At the same
time, we are determined to continue the CKEditor 4 development and
maintenance for some good time still. The CKEditor 4.x line is under a
“Long Term Support” (LTS) programme which means that its development
and support is guaranteed until 2023, giving the users enough time to
make a move towards CKEditor 5.
If great user experience and clean UI are your priority and the
features currently available with CKEditor 5 Builds (Classic editor,
Inline editor, Balloon editor, Document editor) are sufficient for
your use case, then you should consider using CKEditor 5 Builds.
To find out more about CKEditor 5 Builds refer to the CKEditor 5 Builds documentation.
If you wish to create your own text editing solution and have full
control over every aspect of the editor, from UI to features, and the
possibility to enable real-time collaborative editing inside the
editor you should consider CKEditor 5 Framework.
To find out more about CKEditor 5 Framework refer to the CKEditor 5 Framework documentation.
From How to migrate from CKEditor 4 to CKEditor 5:
When compared to its predecessor, CKEditor 5 should be considered a
totally new editor. Every single aspect of it was redesigned — from
installation, to integration, to features, to its data model, and
finally to its API. Therefore, moving applications using a previous
CKEditor version to version 5 cannot be simply called an "upgrade". It
is something bigger, so the "migration" term fits better.
CKEditor 5's architecture and custom data model makes it possible to enable real-time collaborative editing.
In 2019 Chris Harris wrote this comment:
We have been using CKEditor 4 for some years, and since support is to
be dropped soon, I have just spent several days working on migrating
to CKEditor 5. This has been a frustrating experience, and as a
result, we will probably be moving to some other alternative instead.
My frustrations with CKEditor 5 include:
There are few features by default, and every new feature needs a different plugin, each one needing research and time to add in.
Adding plugins is not a simple download/install. Each one needs editing the main build config file, doing a rebuild, working out the
config we want, putting it in the build config file, building again.
None of which is difficult, but certainly more hassle than I would
expect.
CKeditor 4 had a re-sizeable window, CKEditor 5 doesn't. Adding CSS3 resizeable works, but had some odd effects when changing focus
from the editor to the page outside it (the window would resize to its
default size). I'm not saying that's the fault of CKEditor 5, but it's
another example where bringing it up to 4 level is not simple.
CKeditor 4 used inline element styling for e.g. floating an image left/right. CKEditor 5 doesn't, it adds a class to the element. So the
code produced by the editor doesn't work right without additional
styling, which adds complication to the deployment of the code it
produces.
My research suggests I'm not the only one who would like a simple
download that provided the same functionality as CKEditor 4, but it's
not available - by design. And I've come to the conclusion that the
design of CKeditor 5 has been driven ideologically, providing
something that the creators think developers ought to want - rather
than something they really do want.
See more on:
What is different about CKEditor 5 compared to CKEditor 4?
CKEditor FAQ
Migration from CKEditor
Bringing collaborative editing to any application
I want to make a little painting program. So i am going over if it's even possible. As with all good painting programs it needs to have pressure sensitivity. And i don't think i have ever come across anyway to get pressure sensitivity of mouse/tablet. Is there a workaround.
The thing i have come closest to is touch event that is supposed to have pressure property.
This question has been asked before but that was like in 2009. I am hoping that there would be something available this time.
Chrome apps are also an option.
As far as I know only Firefox support this through a proprietary property on the event object:
var pressure = event.mozPressure;
which keeps a value between 0.0 and 1.0.
Wacom has a plugin that can be installed to give browsers an API to read these sort of values from but I guess it only works with their own tablets.
Hello from the future world of 2022!
There is a PointerEvent API that appears to be supported by major browsers, and pressure can be read out from the PointerEvent.pressure property.
tldraw is an example of a project using this API.
Notes on operating system support for this:
macOS
I can confirm pressure-sensitivity with tldraw's drawing tool works for me on macOS, with either Chrome or Firefox, and a cheap Wacom tablet. Safari did not.
Linux
Chrome on Linux works out of the box; I used the Flatpak version. Your mileage may vary with the .deb or Snap package.
For Firefox, you may need to do this or this to get pressure-sensitivity working. There seems to be a regression with Xinput 2 support being tracked by bug #1207700, so maybe this will be fixed some day.
Windows
I don't imagine you'll have any problems on Windows, but I'm unable to test.
If you were interested in creating a web-based paint program in 2022, you might have a look at Pressure.js, which claims to support both pressure input and "3D Touch" present on some Apple devices in a single library. I have no first-hand experience with this library, though, so I can't back up those claims.
It's true this comes 9 years too late for your project. Sorry about that. But this question ranks high in search results for "pressure sensitivity javascript api," so perhaps it can still be useful to someone.
I've watched an already well known video where Bret Victor, former Apple UI designer shows amazing demos with immediate updates of running code after changing literally one symbol in source code.
To make my question clear to those who haven't seen or don't have time to watch the video: I want to use a tool like that to write my own software. Is the tool he was demonstrating available, or are there other similar tools?
It doesn't matter which languages/environments, I just want to have my code running and then change a line in source and immediately see the results updated without restarting it.
The video is also available on YouTube, and the key points are:
03:30 - 05:30 - Live coding a graphical algorithm (space)
11:00 - 14:30 - Live coding some game code (space & time)
17:30 - 21:30 - Live coding local variables (state)
Who does it
You will find a lot interesting things in the React and ELM communities, and in frontend functional programming communities in general.
Some recent full-stack platforms that are somehow trying to provide a development environment of this kind are:
Eve:
A Andreessen Horowitz / Y-Combinator startup, 2.3 million funded, from Chris Granger, an influent Clojure programmer who already built LightTables.
Technologies: Rust (backend), TypeScript (frontend) with a home-made implementation of React concepts (what they call "microReact")
Unison:
Not a company (yet?) but supported by a Patreon campaign, from Paul Chiusano (author of famous book "FP in Scala").
Technologies: Haskell (backend), ELM (frontend).
Note: you can see that the guys behind these tools are experienced functional programmers. Check "how it works" section.
How it works -> functional programming
Programs have state.
Why was Bret Victor's able to make that video?
Because:
his architecture is explicit about state mutations
he uses functional purity
he record historical facts as state, rather than current UI state
One tool inspired by this talk is the ELM language.
ELM states that:
So at the root of the debugger is the design of Elm itself. If you do
not start with the right design choices at the language level,
creating a time-traveling debugger quickly becomes extremely complex.
Even languages that partially fulfill the necessary design
requirements will have serious challenges.
So what you really have to understand is that it is not the technology that is interesting, but the underlying software architecture. Once you have the architecture, it is not so hard to add such debugging features.
Many in the ReactJS/Flux communities have shown that we can achieve really great things with this kind of architecture. David Nolen of Om's ClojureScript hype is probably the trigger, and Dan Abramov has shown recently that we can achieve very similar things that compare to Bret Victor's debugging.
Myself I've been experimenting with recording user session videos in JSON, which is also a feature that is leveraged by this kind of architecture.
So, you have to understand that what he achieves is not done by clever code tricks or a super language, but really good architectural patterns.
These patterns are not even new, they are used by database creators and some backend developers for a very long time under different names, including command/event sourcing, journaling... If you want an introduction, the Confluent.IO blog is a very pedagogic source.
The problem is not even about reloading code, it is all about what to do with the state after the code has been reloaded.
What you really need to understand is that there's no unique answer to that question: it all depends on what you want to achieve.
For example in Bret Victor's example with Mario, when he modifies some parameter like the gravity, you can see that it can affect both the past (what he has recorded) and the future (the actions he'll do after the code change). This means that the user intent is reinterpreted in a different context, producing a new history of facts (often called command-sourcing).
While this is really interesting for video games like he has shown, this is absolutely useless for many other applications. Let's take an example of an accountability application, where the tax % can increase or decrease every year. Do you really think modifying the current year tax % should have any effect on the balance sheet of 10 years ago? Obviously not, but it may still have effects on the current year.
Also the Mario positions tray when adjusting the jump parameter, the tool can't know by himself that it has to display it for the Mario element. You have to be explicit about it otherwise it could do the same for the clouds or the turtle. And does it make sense to do the same for the accountability app?
What I mean here is that this is a cool demo, that has been well-produced. You can't get a similar dev environment that work so well out of the box. But you can learn the architectural patterns that permit to do it easily, and use tools like ELM / Om / Redux / Flux / ReactJS (and some Haskell / Scala / Erlang may be useful too!), that will help you greatly in implementing them correctly and provide you the most they can for hot reloading.
Chris Granger is building something called Light Table that looks like a promising move in this direction. Initially it only support Clojure, but he is promising to support other languages in the future.
http://www.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/
http://app.kodowa.com/playground
I believe the following allow changing a line in source (and seeing the immediate effects):
Codea Air Code: Code on your browser (in Lua), see the output on a wifi-connected iPad.
Water by Gabriel Florit. HTML, CSS, runs in a browser.
Live Scratchpad by Neonux. Mozilla extension.
Swift Interactive Playgrounds: comes with Xcode 6, for coding in the Swift programming language.
JS Bin: HTML, CSS, Javascript, runs in a browser.
Light Table: example on Youtube.
Atom: with preview html plugin.
Note: I have experience only with 1, 5-7. For many of these, I don't think you can put your cursor on a certain part of the code and have the relevant portions of the image highlighted.
Edit: added items no. 4 (2014.10.27), 5 (2014.10.31), and 6-7 (2015.03.12).
Edit 2 (2015.06.25): from http://sixrevisions.com/tools/code-demo-sites/ (most of these are HTML/CSS/Javascript).
Codepen
Liveweave
dabblet
jsfiddle
kodtest
Plunker
CSSDeck
Reloado
ideone
JQ.VER.SION
SQL Fiddle
I've built a plug-in for Emacs, PyCharm, and Eclipse called Live Coding in Python that covers two of the three features you asked about. It instantly updates the result of a turtle graphics algorithm while you type the code.
It also displays the state of local variables next to each assignment. Here's an example display of a binary search algorithm:
def search(n, a): | n = 3 a = [1, 2, 4]
low = 0 | low = 0
high = len(a) - 1 | high = 2
while low <= high: | |
mid = (low + high) / 2 | mid = 1 | mid = 2
v = a[mid] | v = 2 | v = 4
if n == v: | |
return mid | |
if n < v: | |
high = mid - 1 | | high = 1
else: | |
low = mid + 1 | low = 2 |
return -1 | return -1
|
i = search(3, [1, 2, 4]) | i = -1
The IPython Notebook is step in that direction. Although, it is more geared towards Interactive Exploratory Analysis for scientific problem, I find it to be very interactive and fun to develop with.
http://ipython.org/
I also just discovered Live Code. After some experimentation I found, it does not encompass all the principles of Bret Victor philosophy. It has a straight forward syntax but the UI doesn't make for interactive development. They still have some way to go.
http://livecode.com/
Then there is also R. Since the new developments with Shiny and knitr some interesting innovations are taking place which is line with Bret's philosophy.
rNotebook
Live demo
There's COLT — a live coding tool for Flash (ActionScript3). It allows methods updates, adding new fields/methods/classes, updating embedded assets, etc at runtime while preserving the application state, just like in Bret Victor's video. There are some demo videos of it in action, with this being the most impressive one so far.
It doesn't force you into any new IDE, it's a separate tool which sends the incremental updates to the running app when you hit 'save' in your IDE.
JavaScript support is also announced.
Haskell for Mac may have a limited audience since it’s (a) platform-specific — as you may have guessed from the name — and (b) commercial software ($20 at present). But it’s very explicitly based on Brett Victor’s ideas, as discussed in an early blog post.
It certainly deserves to be added to any exhaustive list of programming environments that implement “Learnable Programming”.
Code orchestra guys recently released their livecoding tool called C.O.L.T. It supports JavaScript and ActionScript and looks very promising. Highly recommended to try it out.
These days for frontend development a lot of the tools offer something called "hot-reloading", basically making your changes in code immediately visible in the browser/mobile emulator. This is independent of the IDE/editor.
In Rally software, how can you create a chart that shows the Releases, but then also shows the Iterations. For example, filter by Release, but then have the Iterations in the Release be boxed or different colors to show the progression through the Release.
The standard reports in Rally don't support that mode but it's a good idea. You can add it to Rally Ideas and see how many votes it gets.
Alternatively, you could create it yourself using Rally's App SDK.
Two parts to this question
Does Apple provide in Lion, Mac OS X 10.7 (Build 11A511) an API that might enable a third party developer to add a sidebar to iCal 5.0 (1535)?
If not provided by Apple: what would be the best starting point for a hack?
The first that comes to mind:
SIMBL — not specifically updated for Lion, but certainly proving itself good for many purposes.
Context
In this question I'm focused solely on the sidebar:
primarily for a list of calendars — grouped as they were, or better than, in Snow Leopard
with only minimal interest in mini-months, which were optional in the sidebar in Snow Leopard (it's trivially simple to switch between year, month and other views in iCal 5.x)
integrated with iCal (not running as a separate application).
This question, not for the possibility of detaching the aqua popover — that might form a separate question.
In Apple Support Communities:
sidebar missing from iCal in Lion — seeking a third party product to restore lost functionality
I see Mac OS X v10.6 to v10.7 API Diffs and other documents, but I'm not a developer so I'm not sure of the best starting point for browsing and understanding APIs. (I have archaic ADC Online membership and more, but for my level of interest/understanding etc., I have chosen to not enrol in the Mac Developer Program.)
Thank you!
Update, February 2012
It seems that for the developer preview of Mountain Lion, Apple has restored the sidebar to iCal. Great news, if this feature makes it to release … but still, an answer to this Lion-specific question will be appreciated.