Share your repls and programming experiences

← Back to all posts
Online Note Taking App with full markdown and HTML support
h
MarcusWeinberger (489)

notes.marcusj.tech

A simple, clean, notepad in your browser! Full markdown support with instant rendering, side by side. Create multiple notes!

I need to fix the mobile view for the notes page but the demo page should be fine

Commentshotnewtop
JosephSanthosh (1142)

WOW! I've never seen such a beautiful flask project! THUMBS UP MY FRIEND!

MarcusWeinberger (489)

@JosephSanthosh Thank you very much! I don't have a lot of experience with web design, most of my projects have no UI, so that means a lot to me :)

JosephSanthosh (1142)

@MarcusWeinberger BRO THIS IS INSANE! THUMBS UP MAN

MarcusWeinberger (489)

@Lethdev2019 Your editor is very cool ;) I like the syntax highlighting. I might try add that, I also am looking into adding emoji support :flushed:

Lethdev2019 (145)

@MarcusWeinberger well, i made a decision... let's make something like codesandbox and codepen (and repl.it ;) )

plus, we are open to feedback to improve it.

MarcusWeinberger (489)

@Lethdev2019 That sounds really cool, it would also be neat if you could import the code you're editing directly into your project, e.g. edit a css file using the service, then in your html just do like: <link rel='stylesheet' href='https://coderepl.lethdev2019.repl.co/@myName/project/styles.css'> That would be slick

Lethdev2019 (145)

that is planned for the html,css and js editor.
in a matter of fact, it will insert those into an iframe for that meaning we do not actually need to store the files unless we create a save function, which we are.

the reason i am choosing an iframe is so that it is independent of the website so your css does not change the site css.

oh we are planning a dashboard, auto save function that DOES NOT DISCONNECT YOU EVERY 5MINS ONLY FOR YOU TO LOSE YOUR PROGRESS and something across the lines of repl talk.

I got a node server up for the team so we can continue this project.

I want to say that it is on github here https://github.com/Lethdev2019/PIE

@MarcusWeinberger

MarcusWeinberger (489)

@Lethdev2019 Very nice! I had an autosave function, but the server responds too slowly. I think I'll make an autosave function that doesn't save every keystroke, just saves every minute or so. I've just about finished adding in links

Lethdev2019 (145)

@MarcusWeinberger, well, i know a couple secrets to fix that.

tip: don't use input or on-keydown use on key-up. this is because on keyup waits for typing to stop.

not telling you the rest. Competition is needed.

Lethdev2019 (145)

@MarcusWeinberger also, i am adding blur effect (windows acrylic type blur)

MarcusWeinberger (489)

@Lethdev2019 Very nice, I just added direct document linking, try it out! Click the Create Link button in the navbar when editing a note

Lethdev2019 (145)

@MarcusWeinberger also, just saying that having competition is healthy as you want to create better features than the other person and the other person wants to do that too.

MarcusWeinberger (489)

@Lethdev2019 Oh yeah of course, nothing wrong with a little competition, but I'm always happy to help if I ever can.

MarcusWeinberger (489)

@Lethdev2019 Seems to work fine, I'd rather render the markdown server-side for now but this is the best I can do for now. And the public link should update if you change the note you created it from!

Lethdev2019 (145)

@MarcusWeinberger I got inspired and created my own from scratch (it is currently created --> https://markedjs.lethdev2019.repl.co

you could use this in a blog as an editor and page preview, seriously, Go for it! ;)

I also would love to help with this too because why not?

MarcusWeinberger (489)

@Lethdev2019 Ooh that looks very cool especially the line numbering and braces. I'm really not good with HTML and JS and such but I might try implement this

MarcusWeinberger (489)

@Lethdev2019 Pretty cool, but I've also added some new features to mine ;)

It looks very cool though and I like the theme, I still need to get around to adding a dark theme to mine. But test out the embedded JavaScript feature on mine. You can put {{ js|document.cookie }}, for example, and it'll turn it into <span id='some-uuid'></span><script>document.getElementById('some-uuid').innerHTML = eval('document.cookie')</script>, and you can do {{ date }} which will get replaced with the current date at the time

Lethdev2019 (145)

pretty cool.
I am thinking of adding a note-taking slide out tray to put your pieces of code and... notes. we might also have a dashboard to have "notebooks" and "containers" (where you code).

still hanging on to auto save.

MarcusWeinberger (489)

@Lethdev2019 Yeah that sounds really cool, I need to work on autosave :/

HahaYes (1190)

Marcus, could I use this idea and create one myself?

MarcusWeinberger (489)

@HahaYes Yes of course, you don't have to ask me for permission! I just ask that you show me when you're done :)

MarcusWeinberger (489)

@HahaYes Hey, I saw your repl, and if you want to get db.py working, you'll need to set up a project on Google Firebase, set up a Firestore DB, generate a config.json file. And then, how I've set up from_env to work is that you'll want to base64 encode the contents of your config and paste that in your .env file like CONF=EXAMPLEBASE64DATA==

HahaYes (1190)

@MarcusWeinberger oh lol yeah I forked your project, I do my work on VSCode and Sublime not on here

HahaYes (1190)

This is nice, I was actually thinking about making this yesterday.

Gabby8C0des8 (24)

Enjoy an upvote from me :)

Jeydin21 (0)

It says I need a key of sorts, I see you pull a "Secret Key" from a file but I can't fine the file, what do I do to fix it?

Edbetzig (0)

Excellent Coding! :D

BobTheTomatoPie (1068)

Welp my job here is done, I think I broke it too much lmao

MarcusWeinberger (489)

@BobTheTomatoPie How are you so damn good at CSS. Also, mind sending me a link to that note? Just click the "Create Link" button on the top navbar

BobTheTomatoPie (1068)

sure, I have ton of css practice @MarcusWeinberger

BobTheTomatoPie (1068)

there is one problem, i cant reach the button lmao, all of them are stuck on top of each other @MarcusWeinberger

MarcusWeinberger (489)

@BobTheTomatoPie Ahah oh no, hmm maybe you could make a new blank note, create a link to it, and then copy and paste your css in that new note. The link you made should update with the new content

BobTheTomatoPie (1068)

lemme try, also it will look a bit different as I have edited it a bit since you saw the screenshot @MarcusWeinberger

BobTheTomatoPie (1068)

here I just grabbed the inner stuff, cause it's not creating links when I press create link @MarcusWeinberger

<style> *{ width: 1000vw; height: 50 00vh; background: #367; color: white; font-family: impact; border: 10px solid white; box-shadow: 10px 10px 10px 10px black; border-radius: 1000px; animation: insane 10s infinite; @keyframes insane{ from{font-size: 2px;} to(font-size: 1000px;} } } <style>
MarcusWeinberger (489)

@BobTheTomatoPie oh I'll look into that, it should be working, but thanks

MarcusWeinberger (489)

@BobTheTomatoPie Did you click on the note (open it) and then click "Create Link"?

MarcusWeinberger (489)

@BobTheTomatoPie That's really strange. I'm seeing an error in the logs as well but I can't replicate it myself and I have no clue what's causing it. Btw I put your css up at https://notes.marcusj.tech/link/cancer or alternatively you can embed it with <link rel='stylesheet' href='https://notes.marcusj.tech/link/styles.css?render=false'>

BobTheTomatoPie (1068)

You can literally make a custom theme on accident

BobTheTomatoPie (1068)

the css effects the whole document, you might want to fix that

MarcusWeinberger (489)

@BobTheTomatoPie Damn, I'm not sure how I can. I didn't think about that

BobTheTomatoPie (1068)

Lmao its fun to mess around with at least @MarcusWeinberger

Code1Tech (15)

wow and i thought this was impossible with repl & python. Good job! I have one question, how did you make the icon for the title? eg: <title> hi </title> < For that. It has a note icon next to the "title". I have always been curious about those icons. Thanks.

MarcusWeinberger (489)

@Code1Tech Ah basically, if you look in templates/base.html there's a tag in the header of the page. <link rel="icon" type="image/svg+xml" sizes="48x48" href="/static/note.png">

Code1Tech (15)

oh i get it now! thanks for the help! @MarcusWeinberger

Anonymous67 (0)

Fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by

MocaCDeveloper (199)

Danget..I was gonna do something like this :(

ZDev1 (534)

man
this is good!
tag the #GoodPostArmy

KimiTian08 (10)

SO COOL!

This text editor is really awesome! It's got great features, and it is convenient, simple, and elegant.

HahaYes (1190)

could you explain all of your imports in db.py?

MarcusWeinberger (489)

@HahaYes Sure, everything in db.py is purely to connect to Google Firebase. firebase_admin is needed to run the firebase_admin.initialize_app method. from firebase_admin import credentials is needed to create a credentials.Certificate instance, which has my client configuration and security keys, which is used to initialize the firebase app. firestore is to connect and interact with the firestore database.

MarcusWeinberger (489)

@HahaYes Whoops, forgot about cryptobaker, that's a library I made. I use it to make my hashing algorithms as you can see in DB.hash. The datetime, base64, json, and os modules are for decoding my configuration from my .env file (only visible to me), and generating timestamps for when notes were last edited

HahaYes (1190)

@MarcusWeinberger thanks for the detailed response!