varemenos / codemagic Goto Github PK
View Code? Open in Web Editor NEWCodemagic.gr is a powerful online code editor for web development
Home Page: http://codemagic.gr
License: MIT License
Codemagic.gr is a powerful online code editor for web development
Home Page: http://codemagic.gr
License: MIT License
Opening #settings
for the first time will move it lower by ~1em
Use an implementation of the code below to fix this issue:
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
}
div = "<div style='background-color: red; width: 50px; height: 50px;'></div>";
console.log(div);
console.log(escapeHtml(div));
Currently it's almost impossible to close the editor's options panel (Ctrl
+ Alt
+ P
while inside an editor)
There is a possible bug with js-beautify's html (and possibly css) beautification as mentioned in this bug report: beautifier/js-beautify#342
This can be easily reproduced by signing out
Beta phase
I have tested on Firefox, Safari and Chrome that:
http//codemagic.gr
doesn't load correctly when accessed for the first time (with empty/disabled cache).
It is always reproducible on my iMac, just disable the cache in your browser and reload it.
Initially, at load time, some part of the UI is visible while the editors are not visible until subsequent page reloads.
The problem is related to differences in how the page is handled during the first visit and successive reloads from the cache.
So the problem will show itself during the first visit to the page (was my case) and after clearing the cache, or if the user have completely disabled the cache.
It seems related to the RequireJS loader miserably failing to load the "libs/jsuri" file.
The error I get in the console of all the mentioned browsers is:
Uncaught Error: Mismatched anonymous define() module: function (require) {
require(["libs/jsuri"], function(){
... all the source code
}
http://requirejs.org/docs/errors.html#mismatch
so the error seems clear enough to me.
Differences in network speed/latency may create these problems in poorly designed/tested loaders. Hope you can fix it, also not the easiest thing.
Diego
Give the users the ability to upload their project in Google Drive which they will then be able to edit, test etc
It'd be better for the user if we would to use overflow:hidden
for the main window when widescreen is enabled.
Need to add live update support
There is a click related issue with the toolbar's buttons not executing their "command".
The page needs to separate at the horizontal or vertical half, giving 50% of its space to the panels and the other 50% to the results iframe.
Use iconMoon to generate a font file that includes only the glyphs you need and not the whole pack. + extra points for including countless icons for free
Currently the default route is #new
, we should change this to #home
once the homepage is ready.
use Google Drive API to save the user tests after the users signed in via the Google+ API.
requires #25
use rvh
(responsive view height) and rvw
(responsive view width) GET parameters to toggle the responsive view.
for example ?rvh=480&rvw=320
Create minifying, building, preprocessing tasks with grunt.js
use this "โฎ" character for resize: http://amp-what.com/?#q=%E2%8B%AE
Pop-ups (like the settings and credit ones) need to be positioned properly in the center of the page either via CSS or JS.
Use jsBeautifier library for cleaner code
https://github.com/einars/js-beautify
Use the new Google Drive collaboration API to allow users to collab
maybe by using this?
Create an automated way to track down external libraries and list by version in the dropdown menu.
Currently it's either one or the other, either make both work or get rid of the built-in console.
Use the google plus API to allow users to sign in via Google+
use this css in the #right
:
#right{
float: right;
width: 100%;
}
Porting the application to backbone.js will help fix quite a lot of bugs, requested features and the start of the implementation of the backend.
Consider switching away from select2 and into chosen.js
This is the phase which will be reached once the back-end is ready
Need to consider reimplementing the oauth flow so that the user stays connected without the need to refresh the page
When a new update, there should be a one-time-display notification that will mention the changes and new features to let the user know.
When switching color scheme and If the HTML panel is hidden, the theme's background doesn't apply to the panel wrapper, making it seem "broken".
Unfortunately I can't find a library that will help me support this feature.
Hopefully soon, something will show up
use require.js to asynchronously load the required libraries (like markdown.js and less.js)
After the back-end is implemented, there should be a way to register in codeMagic via twitter, github, facebook and other social websites.
It doesn't prettify properly (specially in CSS mode)
example: .asdf:hover{}
turns into .asdf :hover{}
Beta
Create a credits page where the all the components used and their licenses can be listed and credited.
The HTML5 validator doesn't validate the html of the website due to the inclusion of an <h1>
inside a list
Read this
And most probably remove the border-radius
After the front-end is ready, the back-end should be implemented.
console's scrollbar doesn't have the same color as the others (HTML, CSS, JS)
It seems to me that most of the users who use codeMagic for the first time don't realize that after they insert their code in the proper panels, they have to press the execute button and therefore think that codeMagic is broken (or useless).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.