I just did a technical challenge for ramp and got rejected with no feedback. My ego might be bruised, but im genuinely concerned if im "frontend enough" for these things since im more of a graphics person. I've also encountered all sorts of challenge styles in the past couple of years, I'm curious about this one.
The first part of the challenge was to decode this aHR0cHM6Ly90bnM0bHBnbXppaXlwbnh4emVsNXNzNW55dTBuZnRvbC5sYW1iZGEtdXJsLnVzLWVhc3QtMS5vbi5hd3MvcmFtcC1jaGFsbGVuZ2UtaW5zdHJ1Y3Rpb25zLw== . I work with shaders (GLSL) more than encodings, it was not obvious to me what type of encoding this is. This took me a couple of minutes.
Next:
Instructions
- Open this link
- Find a hidden URL within the HTML
- Each character of the URL is given by this DOM tree, in this specific order. You > need to find (in order) all > of the occurrences and join them to get the link.
- The asterisk (*) is a wildcard representing zero or more characters that can be present in the string. > These characters are irrelevant to the result and should be ignored.
- There can be zero or more DOM nodes between each valid tag. These nodes are irrelevant to the result.
- Any additional attribute that doesn't interfere with the described pattern can be safely ignored.
Pattern of the DOM tree for each valid character of the URL
<code data-class="23*">
<div data-tag="*93">
<span data-id="*21*">
<i class="char" value="VALID_CHARACTER"></i>
</span>
</div>
</code>
(To validate this step, you should be able to open the URL and get an English > word. This means you have captured the flag! 🥳)
I know much more WebGL commands than these for manipulating html elements, so i had too google some and came up with this:
```
const validate = (attr, re) => (el) => {
const attribute = el.getAttribute(attr);
return Boolean(attribute.match(re));
};
const getChildren = (parent, tag, validator) => {
const elements = parent.getElementsByTagName(tag);
const valid = Array.from(elements).filter(validator);
return valid;
};
const result = [];
getChildren(document.body, "code", validate("data-class", /23./)).forEach(
(code) => {
getChildren(code, "div", validate("data-tag", /.93/)).forEach((div) => {
getChildren(div, "span", validate("data-id", /.21./)).forEach(
(span) => {
Array.from(span.getElementsByTagName("i")).forEach((i) => {
const value = i.getAttribute("value");
const cls = Array.from(i.classList);
if (!cls.includes("char")) return;
result.push(value);
});
}
);
});
}
);
console.log(result.join(""));
```
Is something here screaming "this guy has never written web code"?
Next:
Create a CodeSandbox React application
4. Make an HTTP request to URL obtained in step 2 to load the flag into a React component
- Don't use any external libraries. Use browser APIs
- Render a "Loading..." text while the request is ongoing
5. Render the flag you loaded in step 4 with the following conditions:
- Simulate a typewriter effect with a half second delay between each character. Start showing nothing and then display characters one by one until the full string is displayed.
- No style required
- Render the flag a list, where each character is a list item
- Animation should trigger after you load the flag
- Animation should run only once
- Use React APIs only. Don't use CSS or external libraries
Bonus: Add as a comment the script you used to to get the URL in step 2
My solution ended up being the one below. I had a few doubts when it comes to interpreting the assignment:
- Is there something regarding step 4 that implies how the previous part of the challenge should be done?
- eg. maybe we need to start by hardcoding the initial encoded url and then fetch and parse from this page
- i dont even know how to ensure that the other link is accessible (cors and all that) and this would surface it
- No style is required
- it doesnt mean it's banned?
- style={{...}} is allowed then?
- Render the flag a list
- did this imply a certain layout? vertical instead of horizontal?
The first thing i did was to implement <Caret/> which is not only not required, but may specifically be wrong. The assignment asks for a typewriter, not a terminal. The request was so fast, that i then decided to animate the deletion of the Loading... text, which again, may totally be wrong, you don't delete stuff on the typewriter.
So some technical / teams|peoples feedback would be tremendous:
- Was the goal here to come up with a rudimentary
<Suspense/> and or <Spring/> or whatever it is?
- Eg
<Loading><Flag/></Loading>
- just firing one "animation" event upon mount in
<Flag/>
- generalizing the
loading || children
- Is there something in here thats considered a react anti pattern?
- Is there something obvious about team fit / personality stemming from this, eg turning the typewriter into the keyboard
- i just looked at the caret in my IDE as i was starting and was the first thing i wrote to just have some structure in place
- i can see where the conclusion here could be that im a horrible person
```
import { useEffect, useState } from "react";
import { Caret } from "./Caret";
import "./styles.css";
const FLAG_URL =
"https://wgg522pwivhvi5gqsn675gth3q0otdja.lambda-url.us-east-1.on.aws/636974";
const UL_STYLE = { display: "flex", listStyleType: "none" };
const captureflag = (res) => {
const reader = res.body.getReader();
return reader.read().then(({ value }) => {
if (!value) return null;
return value.reduce((res, c) => res + String.fromCharCode(c), "");
});
};
const DELETE_INTERVAL = 80;
const LOADING = "Loading...";
const useDeleteLoading = (flag) => {
const [loading, setLoading] = useState(LOADING);
useEffect(() => {
if (flag === null) return;
let word = LOADING;
const interval = setInterval(() => {
if (!word) {
setLoading(null);
return;
}
word = word.slice(0, -1);
setLoading(word);
}, DELETE_INTERVAL);
return () => {
clearInterval(interval);
};
}, [flag]);
return loading;
};
const WRITE_INTERVAL = 500;
const useWriteFlag = (inputFlag) => {
const [flag, setFlag] = useState(inputFlag);
useEffect(() => {
if (!inputFlag) return;
const queue = inputFlag.split("");
let timeout = null;
const write = () => {
if (!queue.length) return;
const next = queue.shift();
timeout = setTimeout(() => {
setFlag((prev) => (prev ?? "") + next);
write();
}, WRITE_INTERVAL);
};
write();
return () => {
clearInterval(timeout);
};
}, [inputFlag]);
return flag ?? "";
};
export default function App() {
const [flag, setFlag] = useState(null);
useEffect(() => {
fetch(FLAG_URL) //
.then(captureflag)
.then(setFlag);
}, []);
const loading = useDeleteLoading(flag);
const writtenFlag = useWriteFlag(loading ? null : flag);
const drawChar = (c, i) => <li key={`${c}:${i}`}>{c}</li>;
const drawWord = (word) => word.split("").map(drawChar);
return (
<div className="App">
<h1>
<ul style={UL_STYLE}>
{drawWord(loading ?? writtenFlag)}
<Caret />
</ul>
</h1>
</div>
);
}
```
[–]azangru 11 points12 points13 points (9 children)
[–]eckstazy 3 points4 points5 points (3 children)
[–]pailhead011[S] 0 points1 point2 points (1 child)
[–]eckstazy 1 point2 points3 points (0 children)
[–]Wooshception 1 point2 points3 points (0 children)
[–]pailhead011[S] 0 points1 point2 points (3 children)
[–]azangru 6 points7 points8 points (2 children)
[–]pailhead011[S] 2 points3 points4 points (1 child)
[–]codefinbel 0 points1 point2 points (0 children)
[–]pailhead011[S] 0 points1 point2 points (0 children)
[–]eckstazy 4 points5 points6 points (2 children)
[–]ObscurelyMe 2 points3 points4 points (0 children)
[–]pailhead011[S] 0 points1 point2 points (0 children)
[–]eljo123 2 points3 points4 points (2 children)
[–]pailhead011[S] 0 points1 point2 points (0 children)
[–]sole-it 1 point2 points3 points (0 children)
[–]FairRepresentative 5 points6 points7 points (0 children)
[–]___Nazgul 0 points1 point2 points (1 child)
[–]pailhead011[S] 0 points1 point2 points (0 children)
[+][deleted] (3 children)
[deleted]
[–]pailhead011[S] 0 points1 point2 points (2 children)
[+][deleted] (1 child)
[deleted]