The new redesign of Reddit features a really slick WYSIWYG/Markdown editor. Screenshots:
Once clicking on "Switch to markdown":
Is this an open-source library available for implementation, or is this entirely an internal Reddit-only solution?
On another note, I've been comparing a whole bunch of Markdown editors, and can't seem to find anything that works really well with React. SimpleMDE isn't bad, but its last commit was two and a half years ago, and it has no official React bindings either.
What would be my best alternative for direct implementation into a React app?
Related
I am used to make front-end code through react and pretty familiar with using react tools(usually cra) right now.
But now i want to know basic react working process.
I hope i can understand the code from node_modules/react or react-dom or whatever.
So i pulled the reactjs(facebook) source code in github.
And i am reading react.development.js file right now.
But i can not understand lots of things.
There are so many materials for how to use react.
But i can not find very well why is react works that way.
I already know about HMR, HOC, Virtual-Dom etc. that Main big concepts of react.
And even i can make Custom hooks and build up my project with presentational-container pattern and adapt the atomic pattern and i made my own design pattern. So i think i am pretty good to make application right now.
But I am just really eager to know about open source code to read.
Are there someone does code review for such Module files directly?
Annotaion is not enough for understand full of code.
Or if i study javascript more then i can understand?
Thanks for reading.
Background story (you can skip to question)
As a begginer (full-stack, but about 8 years behind) I'm struggling with deciding what to learn.
Vue and Nuxt.js are great to understand, but as a designer, I really miss the option to use Framer Motion. Also the fact that I can't use Tailwind UI (Headless UI) with Nuxt (as of right now) since Nuxt still uses Vue 2.
As I worked on my app I felt that I would have much better online support with React, specifically with Next.js to make the learning curve easier. The overall community is bigger and there are much more tutorials. But I discovered that Nuxt used some things that Next is missing (probably?) — like auto registering components.
The question:
I really miss not caring about writing an import path to each component I use.
Nuxt.js did this automatically. Is there something similar in Nuxt.js?
I could also nest them in subfolders like this:
/components/Point/Section/Table/Row.vue
and put them in code like: <PointSectionTableRow />
Thanks Estus for the comment that IDE's handle autoimport. I discovered VS Code Auto import plugin that can autoimport components, icons etc with just a tooltip click. Very handy!
This question already has an answer here:
Does Adobe Flex have the ability to compile into HTML/JavaScript?
(1 answer)
Closed 6 years ago.
To give a brief background I am a C++ programmer who has worked mainly on back-end systems, but now has to develop a front-end gui (mainly an interactive dashboard with lots of charts and comparisons and so on) as well along with a back-end financial system.
Few years back I had worked on a similar project and used Flex to develop a dashboard. But searching the net, it seems that Flex is not well supported anymore (nobody pouring money on it) and will go out of fashion soon (Am I right???). So I continued searching and the names that popped up are ExtJS (which was prevalent few year back) and AngularJS (heard it for the first time now). Spent some time searching both and both seems fine. So can you dashboard developers please help answer the following questions (as well as provide important input that I may be overlooking right now):
Cross-Compatibility: Need to develop desktop and mobile apps along with web page.
Prevalence: I will need to learn the technologies. Would prefer it they are popular and widely used
Dashboard features: Stuff like ability to go into bar graph and pie charts and stuff.
Ease of programming: Quality of Editors/IDE available, speed of programming etc.
Anything important that I am missing
In my opinion, I would go with Flex, because:
You already know it
Flex is a "compact" solution to your problem. Web frameworks imply you to learn a lot of new things. AngularJS is certainly cool but every web tek require you to master JS, CSS (I hate it), HTML, FireBug, PhoneGap, .... Web teks are a mess (IMHO !!!)
Coming from C++, working with Flex is more comfortable than web tek. Dependency injection is cool but it's a new vision of the world. JS is really powerfull but is (also) a functional language and you will need to get a "lambda mind".
Two year ago I decided to try ExtJS to make a dashboard for an hospital. I gave up after some days when happened that finding and solving a simple bug in my simple app took me a full day! [I forgot a parenthesis. The page didn't open saying nothing at all).
I'm now trying to learn Flex because I need to produce a simple app for smartphone (I'm a newbie in that) that should be ready in a month and with Flex I think it's easier for me to succeed than with any web tech framework. I know that Flex future is obscure but I think it's too good to be killed even if Google's pressure is strong ;)
No-one seems to be keen to answer this question - I guess because it's a definitely going to be an opinon based answer. I'll give it a go...
To answer your first question - Flex is if not on the way out, at least on a low simmer. Adobe Flash Builder 4.7 (the main Flex tooling IDE) has not been updated for well over a year now and I can't see any updates on the horizon.
Apache, who now own the codebase are doing a nice job with updates, but progress is slow.
One possible bright area is FlexJS, a compiler that outputs Javascript and HTML. It's still alpha at the moment, but it could be an option.
I've never developed in ExtJS, but it seems it's time has come and gone - it's still used, but it's definitely been superseded by Angular and other frameworks such as Knockout.
Cross-Compatibility - AngularJS works is almost all browsers from IE8 up and that includes most modern mobile browsers. People often use JQuery Mobile in combo with Angular and Bootstrap to get the functionality they need. Bootstrap is responsive, so if you lay out your UI correctly, it should work for all devices.
Flex is also cross compatible in the form of Adobe Air, but it's less easy to get it onto people's devices - they need to download the Air framework.
AngularJS is the number one framework by a huge margin at the moment - and it's still growing. Check out this graph from google trends. The combination of technologies includes Javascript, CSS, Grunt, Bower, Node.js and concepts such as dependency injection, MVC and responsive layout - all this stuff is useful for other projects. Once you master Angularjs, you'll be ready for a lot of other stuff.
Learning Flex seems to be a bit of a dead end at the moment - you'll notice the absence of any recent Flex blog posts. It's not cool right now, and it's just too uncertain if it's going to survive.
Using Angularjs and D3 for example is reasonably straightforward - a web search will show lots of examples here. Plus you can do basic drawing using svg elements directly in your HTML code. Here's a nice article on the subject.
Since Angular is a Javascript framework, there are many many options here - you could use SublimeText, Atom, PhpStorm or one of many other choices. As I said earlier, your choices are much more limited if you choose Flex.
Finally, don't forget that this is all just my opinion, but Angularjs is just really fun to develop in - binding is just so cool. So are directives. Dependency injection just rocks. I think you'll like it!
Sorry for the bias here, but I can't help it!!
Hopefully this writeup helps you a little. Good luck.
AngularJS is a good choice for complex web application (both desktop and mobile).
There is a project that implements Dashboard/Widgets functionality with AngularJS.
GitHub source code https://github.com/DataTorrent/malhar-angular-dashboard
live demo http://datatorrent.github.io/malhar-angular-dashboard/#/
more advanced demo (charts, etc.) http://datatorrent.github.io/malhar-dashboard-webapp/#/
It targets desktop browsers so far but has a lot of features:
Adding/removing widgets
Widgets are instantiated dynamically (from corresponding directive or template)
Widgets drag and drop (with jQuery UI Sortable)
Horizontal and vertical widgets resize
Fluid layout (widgets can have percentage-based width, or have width set in any other unit)
Any directive or template can be a widget
Connecting widgets to real-time data (WebSocket, REST, etc.)
Changing widget data source dynamically (from widget options)
Saving widgets state to local storage
Multiple Dashboard Layouts
Disclaimer & Long Winding Question Approaching
I know topics like this have been beaten to death here so suffice to say I'm not asking about which framework is better, I don't really care about opinions on the better framework. They all do pretty amazing things.
The Question
Given that I have an existing web application, made of mostly regular HTML+CSS (jQuery where needed), which is the optimal framework to integrate a few "rich" pages into typically a regular stream of HTML.
Reason
I am trying to bring our proven application into the realm of awesome desktop like UI but I want to do it one small piece, one screen at time. But for our users, support personel and especially me taking it slow is the only option.
Also, with our branding requirements having a framework that just takes over the viewport isn't an option, it has to play nice with other HTML on the screen.
Imagine the example being a rich user manager in an otherwise plain HTML+CSS environment.
Experience Thus Far
Dojo + Dijit
Pros: The new 1.5 widgets plus the claro theme is the cure for what ails us. Dojo seems to be able to use markup to create the UI which is very appealing and has a fair amount of widgets.
Cons: Holy bloated lib Batman! Dojo seems to be enormous and I have to learn a custom build system to get it to stop requesting 4,800 javascript files. This complex empire of Javascript makes me believe I won't be able to create much that isn't already there.
ExtJS
Pros: Amazing set of widgets, does everything we could possibly want. Seems quick, every version brings new improvements.
Cons: I'm not sure how to use this without the entire display being EXT. I'm still building a web site, so I would prefer something that could integrate into what we already have. Some pointers here would be great.
YUI
Pros: Well, it's Yahoo isn't it? AWS console is downright wicked. Plenty of support and a giant community.
Cons: Well, it's Yahoo isn't it? AWS console is the only wicked thing. Complex for someone who's used to jQuery.
Help Me
I am willing to accept experience, links to ways to solve problems I've outlined, new toolkits (even though I'm pretty sure I've seen most by now) or even just advice.
Regarding ExtJS, it's pretty easy to start it in an existing div with something like this:
Ext.onReady(function() {
App = new Ext.Panel({...})
App.render('div-id')
});
The App panel can then have it's own layout manager.
This might be useful if you're familiar with jQuery, but not yet familiar with YUI 3 syntax: http://www.jsrosettastone.com/
Each of the libs you listed is excellent. When embarking on a larger scale project, the quality of a lib's documentation, community, and commitment to support become more relevant.
With Dojo, keep in mind that outside of dojo base, it only ever loads what you tell it to. But yes, without a built layer, that means it could easily end up requesting 50 JS files at startup for a large application using a bunch of widgets.
There are several pages in the reference guide documenting the build script: http://www.dojotoolkit.org/reference-guide/build/index.html
Rebecca Murphey wrote a nice blog post outlining an example app and build profile that you might find illuminative: http://blog.rebeccamurphey.com/scaffolding-a-buildable-dojo-application
If you get stuck, there's likely to be people in the Dojo IRC channel that can help.
RE ExtJS: I'm not sure what your exact situation is, but keep in mind that if you're intending to use it in commercial non-open-source software, you need to pay for licenses: http://www.sencha.com/store/js/
I'm a little curious as to why you think the size / number of requests is specifically an issue with Dojo though. I haven't used the others, but I'd expect it to be somewhat of a potential concern with any of them.
We have been looking at the ExtJS samples quite a few times over the years and recently decided to use it because I was looking at the samples and saw a Tree Grid and felt like "Yes this is exactly what I need". So I download ExtJS read a bit on the getting started/FAQ/Tutorial from the website.
Then I decide to try to use the Tree Grid to find out it's not in the documentation anywhere. so I thought it was just that the documentation was not fully updated for the latest 3.1 release so I look at the sample code to realize that most of the JS classes used for that sample are under the ux/treegrid folder, and the only place I could find that code was by downloading it directly from the sample. I never found any documentation for it anywhere.
Not only that, I also found that there are two very similar samples: Tree Grid and a Column Tree that shows how to customize the Tree Panel component, which confuses me even more. Neither have documentation for them and I can't tell if this code is supported or which one I should use or even if I should use any of them in fact; is this code production ready or just something that was thrown out there to show a nice sample and the extensibility of ExtJS ?
I noticed that many of the samples shown on ExtJS website are using components that are not part of the 'ext-all.js' and are not really documented. So I guess I am missing something about what ExtJS is supposed to be or the general philosophy behind this library ?
I guess I was expecting that most of the samples on their website would be available widgets from the library demonstrating how to use them, not showing me "Here's what you could do if you knew how to extend those components".
Any help/comments to enlighten me would be appreciated!
Thanks
With user extensions, generally, you are on your own - which is not a bad thing. Your best bet is to read the code and if it's well documented, you may be able to run jsdoc on it. I know this is not what most people want to hear, but it's best to understand the code you are adding to your project as if it was your own.
Specifically for the ux.treegrid.TreeGrid you are using, there are plenty of examples in the forums and on the net to get you rolling (I think TreeGrid is newer than the ColumnTree). If you get stuck on a specific issue, the forums and stackoverflow are the perfect places to get a quick answer.
So I guess my answer is, "Download the extension and start playing with it as if you wrote it yourself. When you run into a problem, post it here.".
I have found site where you can download more or less full ExtJS documentation with ux (User eXtension)
http://www.diloc.de/blog/extdocsuite/
Short description of the link.
ExtDocSuite
The ExtDocSuite is an Adobe Air Application that includes the current ExtJS 3.2 Documentation in a single application to install. We provide this package, because ExtJS has not yet updated the Air Documentation app for Ext 3.2.
Features:
* Includes the latest Documentation for ExtJS 3.2.0
* Includes the latest ux Documentation from the examples/ folder (using ext-doc)
* Includes the latest Ext.Air Documentation. (using ext-doc)
* Search works (online)
* EXPERIMENTAL per-class search aids in finding the right documentation in big classes
* Integrated Update-System so that your documentation always stays up to date
Starting with Ext 4.0, official ux'es have become much better supported and documented by being included with the API docs (look under the Ext.ux.* namespace).
The Ext 3.3 ux docs are located here. Not sure how complete they are, so YMMV (e.g. both TreeGrid and ColumnTree are included, but without any real documentation).
I encountered the exact same problem recently when I went to use the row editor capability (attached to grid). Being a long time ExtJS user, I never stopped to think about the lack of documentation accompanying the examples, but your comments are spot on.
For the RowEditor, I found documentation on the internet. I also find the ExtJS forums to be a great place to find suggestions, code samples, and links to documentation .