Edwin Kofler

@eankeen (1515) • UC Santa Cruz
in-progress full stack and devops engineer. kofler.dev
What Are Cycles?
posted to Ask by TimothyAnderso1

Hi! Cycles are the point system of repl.it. For example, I have about 240 cycles right now. They're earned when people upvote your posts or if one of your answers to a question (on replit ask) has been marked as the "correct" answer).

Student accidentally deleted code - any way to get prior version of program?
posted to Ask by kmcleod

Not sure if you found the solution, but the button can be hidden away. It might also be called "saved".

Once you click on it, then you can access the history mode. On the left sidebar, there's some "change file" text.

Once you click on that, then you can restore a specific file to a specific point in time. I don't think you revert the whole repl though - only a specific file.

how to clear screen
posted to Ask by jmbeaner

hey!

because you are using python, it is pretty easy to do this

at the top of your file

import replit

to clear the screen, call the clear function

replit.clear()

if you want to see this in action, i forked a repl (credit to @jamiebally) here

hope i could help :P

What language?
posted to Ask by mkhoi

Clear choice of JavaScript for me! Use it all the time and I absolutely love it!

What should we code?
posted to Ask by katyadee

Like some of the others mentioned, multiplayer games are an awesome idea! Even just simple ones would be fun!

Font from another file
posted to Ask by TheImagin33r

hi!

to start off, i would recommend converting your .tff font file into a more web-friendly format such as .woff or woff2 using a conversion tool (i like to use (fontsquirrel)[https://www.fontsquirrel.com/tools/webfont-generator]), although this isn't strictly necessary

after you convert and upload that to your repl, then you can add it to your stylesheet with css. the crucial part being, you use the @font-face at-rule

@font-face {
        font-family: 'Baloo Bhai';
        src: url('fonts/baloobhai-regular.woff2') format('woff2'),
             url('fonts/baloobhai-regular.woff') format('woff'),
             url('fonts/baloobhai-regular.tff') format('truetype');
}

so when the browser 'imports' in the font, it tries to import the 'woff2' first, then the 'woff', then the 'truetype' format of the font. this is good because woff2 has better compression and will load faster relative to the other formats

then, in your css, you can just use it like any other font

h1 {
    font-family: 'Baloo Bhai'
}

i made an example using the baloo bhai font in this repl

hope i was able to help :)

Programming Language Jam -- Let the hacking begin!
posted to Announcements by amasad

@mamcx one method is creating a language extension for vscode to add syntax highlighting. you can find some info about it here: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide. naturally, that would only work with vscode. if, for example, you are showing the language in the browser with the monaco text editor, they support this: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages. the latter would probably be the best thing to do because iirc replit uses the monaco editor

👾We're hosting a Game Jam! 👾
posted to Share by katyadee

Super excited! Hyped up for this!

What advice would you give to someone new to coding?
posted to Ask by katyadee

I wish someone told me to manage my time better when I started out. It can get addicting at times and cause some inefficient coding habits if your'e not careful. For advice, I'd recommend not being afraid to try something new, even if it's completely unfamiliar.

██ Empty 2 (⚠️warning: this one is super cool) ██
posted to Share by eankeen

@mat1 I'm smh my head also! Can't believe I only mentioned 3 of your mistakes. Probably should have cut you less slack...

Running Exe
posted to Ask by JackMozza1

hey!

so these repls are all running the linux kernel. linux is *nix system, just like the mac you said you use in the comments. neither of them are unable to run .exe files natively

if you want to run .exe files i would recommend looking into wine. in a sentence, it gives you a compatibility layer for running windows programs on your mac or linux computer.

if you are trying to execute some windows executable file, i would just recommend installing wine on your mac, and running the executable with wine. (there are a lot of good tutorials online for this)

i am not sure why you would need the executable file in the repl you gave us. running it in that python repl is pretty much nearly impossible for all practical purposes, so i would recommend finding an alternate solution if it contains some code you want to run.

hopefully i was able to help :P

Can't view board-only posts
posted to Ask by MatthewDoan1

yeah i seem to be getting this as well

even after scrolling down passed announcements and pinned posts, the categories are still jumbled up despite me selecting one. i guess we can file a bug repot or wait for it to be fixed :P

Varibles
posted to Ask by caseabj32qj

hi!

in your html, you can add a button

<button id="myButton">button text</button>

in your javascript, you can add the following

document.getElementById("myButton").addEventListener("click", function(event) {
    console.log("i got clicked");
    console.log("this is the variable X: ", X);
});

this adds a listener to your button. so that when you click it, it executes the function. the function just logs some text to the console

Repl.it Desktop 😯
posted to Ask by PDanielY

yah so i have actually helped out with the other replit desktop app you were talking about. are ya looking for any features specifically?

i feel like if we all collaborate on a single solution instead of having duplicate work, we can get a lot done faster :)

sorta interested - how are ya thinking about making this new desktop app. kinda curious about the technologies or plans you have :P

Realtime file updates
posted to Share by amasad

awesome! this is a monumental feature

How Repl works (specifically HTML repls)
posted to Ask by xxpertHacker

we know that repl handles html repls differently not just from those facts, but because loading time on html repls is much faster and doesn't have that loading / progress bar. i don't know precisely the differences between html repls and non-html repls.

you can find all repl types that are treated like non-html repls, or regular repls on their polygott repository. we know the environment of each repl of those different languages is the same. and by environment, i mean libraries (ex. libc), programming langauges (nodejs, python), binaries (ex. /bin/ls, /sbin/fdisk), and other stuff you would expect in a linux operating system. this is all pacakged up in a process container compliant with the OCI spec, (like a docker container). it does say 'base image', so i'm not sure exactly what kind of sugar they put on top, if any - would have to inspect a little bit more

and i doubt the difference in the existence and behaviors of a "predefined .replit file" is dependent on how the operating is setup. so it's not like replit patches the readdir syscall on the host machine or patches ls to specifically exclude .replit files, that would be absolutely ludicrous

and the only reference to .replit in their public code is in the same repository that i linked, in the polygott-gitignore file. they are specifically ignoring a folder called .replit

whether specifically this is stored in a file (unlikely) or whether the defaults can be accessed over an internal, beats me, so maybe someone else can shed some light over it

so if you actually open up one of the files in the repository i linked, you can see the defualt run command under the run stanza

so that directly answers your question XP

What advice would you give to someone new to coding?
posted to Ask by katyadee

@katyadee Yeah, last summer I developed a habit of staying up later and later to complete features. At first I slept in, but when I started setting alarms for early in the morning, I got really sleep deprived. I was literally living the meme of code, eat, and sleep for a week or so before I snapped out of it. So yah that's when I realized setting deadlines is important, like deadlines of when to actually stop coding, or deadlines to complete certain features. And learning when to just stop coding and take a break.

Introduction to control flow question
posted to Ask by silverflag22

Hi! I reformatted your question to make it a bit easier for others to understand. :)

With JavaScript, if statements look like this:

if(someValue > 10) {
   someBoolean = true;
}

If you want to test for a string, you may want to do something like someValue == "someString" instead of someValue > 10.

I would recommend looking at this page or this page if you want to learn more.

Hopefully I was able to help =P

🎮 Tetris [without canvas !]
posted to Share by smrsan761

This is really neat! Love the sound effects. Maybe make it so you earn more money when you get a tetris or destroy multiple levels at once?

Repl.it GFX Public Beta: Build Games and GUI Apps
posted to Announcements by amasad

Huge fan of these improvements for GUI interfaces! Love the current developments and
I'm excited for the future of repl.it!

Hello from Repl.it's newest designer!
posted to Announcements by tangert

welcome!
love the file icons - they're real nice addition

Wolfenstein 3D style raycaster in JavaScript
posted to Share by pythonb5

thats pretty neat!

How to animate border like heartbeat monitor using css.
posted to Ask by iamarul

hi!

so i could think of two approaches

  1. using svgs
    you can use svg lines to create the green heartbeat lines, and try to illuminate that. i had a shot at this repl, but its harder to mask the flashing behind the black background. i tried to create an svg mask to 'cut out' the area where the svg lines are, but i had no luck. maybe you can construct svgs in a different ways to make the light illumination easier

  2. instead of drawing shapes via svg, you can use css shapes. this admittedly is probably a bit more difficult, but youll have more css to use at your disposal

maybe if you show us what you have so far, we can offer suggestions :)

Import vs Require in JS
posted to Ask by MatthewDoan1

hi!

require and import are both functions / keywords you can use to import a module, or to use some functions or variables from another person's code.

require is based on the commonjs module (cjs) specifications. because this is implemented by node, you can use it in node. however, the browser does not understand require at all, so you cannot use it in the browser.

good news, browsers do understand ecmascript modules (esm). ecmascript modules were added in es6, or the ecma2015 version of javascript. if you are running a modern browser, you will be able to use them.

bad news though, not all libraries support running their ecmascript modules directly in the browser. colyseus does not support this (here is a modified snippet from their main page)

dont know nodejs build-systems like webpack? just save and drop the javascript distribution file into your project and ignore the import statements presented here in the documentation.

oversimplifying, webpack lets you convert any import (esm), require (cjs), or other types of modules into something the browser can understand. so you an use pieces of code from other files using import or require, and convert it to a format that the browser can understand.

webpack may be overly complex in this case, so i would recommend doing what they asked (to drop the javascript distribution file and ignore the import statements).

so your html, will just include the script tag, and your custom script

<body>
  <main>
    <h1>Whatever html</h1>
  </main>
  <script src="my-colyseus.js"></script>
  <script src="my-script.js"></script>
</body>
// remove import statements. when you use the script (as in the html above), `Colyseus` becomes a global variable, meaning you can use it basically anywhere
// import * as Colyseus from "colyseus.js";

let client = new Colyseus.Client('ws://localhost:2567');

client.join("room_name").then(room => {
    console.log(room.sessionId, "joined", room.name);
}).catch(e => {
    console.log("JOIN ERROR", e);
});

but i noticed that you want to use modules in your code! like i said, you wont be able to use commonjs module, but you can use ecmascript modules (check here for a simple example)

i actually had some fun and forked your repl. all i did was add some files under the client folder, and some stuff in your node app so those files get served

  • you might notice that i can access the global variable Colyseus from any module (as long as i write it below the <script src="colyseus.js"></script> file in the html)
  • also, note that if your javascript file has import or export statements, you must add type="module" to the script tag of that file in your html
Bored
posted to Ask by Highwayman

you can try a text based adventure game. if that is too simple, you can try to think of more complex game mechanics that will force you to improve your coding style or practices.

Upload an image
posted to Ask by The3rdIcon

hey! 😜

so if you have some image on your computer, you can drag that file and drop it into the editor (specifically, drag it on top of the area marked with the red rectangle below). after a few seconds the file should show up

hope i was able to help :)

Game making🎮
posted to Ask by rabofan70

hey!
whether you're building some terminal-based game or a graphical one, you'll need to know a particular programming language fairly well. for example, if you are creating a graphical game with javascript, you may want to be knowledgeable and have experience with the modern features of javascript.

i would recommend starting out small. for example, if you want to make some 3d action-based game, you may want to start out with some smaller 2d games. as you create the smalller games, you will learn the tools and structure required to build larger and more advanced games.

hope i could help :)

DEV SPOTLIGHT #09: Application is more important than just knowing facts.
posted to Announcements by katyadee

thanks for this amazing dev spotlight! it was pretty cool doing the interview

SPACE challenge results!
posted to Announcements by jajoosam

Grats to @Kognise for winning! Looking at all the submissions was pretty fun!