Hey! I'm a software engineer focused on developing mobile applications. I've been coding for iOS for almost three years now, and on Android for a few months.
WHAT IS A MOBILE DEVELOPER ANY USE TO ME?
Plenty! I love JS and all the ecosystem around it. I want to contribute from Affinibox as much as possible while reaching to become a fullstack JS developer, which is one of my main career goals. I have so much to talk, but let's get to business. Hope you enjoy it!
After installation, I should set my user profile:
git config --global user.name "Eduardo Quadros"
git congit --global user.email "quadros.ea@gmail.com"Considering I have access to the repository:
git clone git@gitlab.com:affinibox-public/dev-candidates.gitTo help maintaining code through development, testing and production phases, different branches are used. Usually master branch is reserved for production code. This creates a branch based on the latest work from a hypothetical branch named development:
git checkout -b "eduardo" "development"As suggested:
cat > file.txt
Hello, world.
First I need to exclusively add the file so git can track it:
git add file.txtThen commit to it:
git commit -m "Add a new text file."git push -u origin eduardoThe -u option will make tracking easier.
First and foremost, to avoid losing work. Pushing to remote can spread copies and make it accessible to collaborators.
Network; a previous branch with the same name; something messed up with settings... an endless list. To solve it, I need to make sure I can properly push new branches, and that nothing conflicts.
Since I based my work on development, I need to merge my code to it before merging to master. But the same principle applies:
git checkout developmentAnd make sure I have the latest work commited to development:
git pull origin development
git merge eduardo
git push origin developmentTo literally add my work to the existing code so collaborators can integrate new features or add bug fixes to production code.
The event produced is called KeyboardEvent. To extract a raw value, I would:
document.getElementById("foo").onkeypress = (event) => {
console.log(event.key);
}I would grab the keyCode property from the event. The ENTER key is set to 13.
document.getElementById("foo").onkeypress = (event) => {
if (event.keyCode == 13) {
console.log("Enter key pressed.");
}
}First, I convert all strings to numbers:
var a = "12 as 12 as 12".split(" ");
a = a.map((element) => {
return Number(element);
});Which results in [12, NaN, 12, NaN, 12]. Now I need to filter numbers:
a = a.filter((element) => {
return !(isNaN(element));
});And there you have it: [12,12,12].
To extract properties from objects, I must:
Object.keys(theObject);I also need to iterate on keys and values to add them to an appropriate position on the new object.
theArray.forEach((element) => {
/* Iterate through elements. */
});The final result is:
var a = "[{a: 1}, {b: 2}, {c: 3}]";
a = a.reduce((accumulator, element) => {
Object.keys(element).forEach((item) => {
accumulator[item] = element[item];
});
return accumulator;
}, {});
console.log(a);Which outputs: { a: 1, b: 2, c: 3 }.
It prints "JavaScript thinks these objects are not equal" because JS only compares values for primitive types. For any other type it compares using references. Since A and B are different instances of objects allocated in different memory positions, testing will always result in false.
There're tons of ways to compare equality of values in objects, but I'd use the function _.isEqual() from the Lodash library.
As desired:
function upperKey(object) {
let key = (Object.keys(object))[0];
let value = (Object.values(object))[0];
let newObject = {};
newObject[key.toUpperCase()] = (typeof(value) === "object")
? upperKey(value)
: value;
return newObject;
}Since I was given the choice, I chose the fetch API here. It's important to say I strongly dislike jQuery in favor for VanillaJS. Also, I've read about Axios and I kind of like it. Maybe I'll use it for future projects.
<script type="text/javascript">
const URL = "https://jsonplaceholder.typicode.com/posts/1";
const responseTitleKey = "title"
fetch(URL).then((response) => {
response.json().then((data) => {
console.log(data[responseTitleKey]);
});
}).catch((error) => {
console.log(error);
});
</script>The function bellow displays an alert after 3 seconds:
const sayHello = () => {
alert("Delayed hello, world!");
}
setTimeout(sayHello, 3000);setInterval executes a code repeatedly with some time interval in between. clearInterval is self-explanatory.
The block bellow will log numbers to console indefinitely until cancelRepeat is called.
let count = 0;
const intervalID = setInterval(() => {
console.log(count++);
}, 2000);
function cancelRepeat(ID) {
clearInterval(ID);
}I've never wrote any code that uses Promises, but after learning about it from the mentioned article I chose to implement this using ES2017 specification, which includes async and await keywords that I find are interesting to use:
Here I define some constants:
const fs = require("fs");
const fp = "./somefile.txt";Then I create a function to encapsulate the Promise code:
async function tryToRead(filepath) {
return new Promise((resolve, reject) => {
fs.readFile(filepath, (error, content) => {
if (error) {
reject(new Error("Failed to read file."));
} else {
resolve(content.toString());
}
});
});
}And then a function to use try and catch:
async function read(filepath) {
try {
let content = await tryToRead(filepath);
console.log(`Found content: ${content}`);
} catch (error) {
console.log(error);
}
};Finally, call the read function:
read(fp);The program outputs the following to the console:
Hello Maria, my name is Jimmy
Hello Maria, my name is not JimmyThe first line is pretty trivial, but the second one works by binding a new value to the this scope in Person. It replaces the name property within the function scope, without actually replacing the value within the class.
I don't know much about Webpack as I'd like, so instead I inspected the page to find the hex code for the gameboy and then searched for it in the project folder. Then replaced efcc19 for the steelblue color:
// file /src/containers/index.less
// line 84
background: #4682b4;The easiest way is to use npm:
npm i --save lodashNo, although I'm not certain. Lodash could be a dependency of another dependency. Anyway, I could add it to package.json.
{A: 1, B: 2, C: 3}{a: 1, b: 2, c: 3}This one took me a lot of effort, because I actually have to deal with: [{},{},{}].
const foo = (...args) => {
return _.chain(input)
.map((item) => [_.head(_.keys(item)).toUpperCase(), _.head(_.values(item))])
.fromPairs()
.value()
}First, I create the scrip itself:
cat > hello.js
console.log("Hello world!");Then I have to add the script to package.json for npm to be able to find it:
"scripts": {
"start": "webpack-dev-server --progress",
"build": "rm -rf ./build/* && webpack --config ./webpack.production.config.js --progress && ls ./build",
"hello": "node hello.js"
}envTest.js should look like this:
console.log(process.env.MY_VAR);It should be the full path for the server folder in the system.
After a quick glance at bluebird docs, I read that readFileAsync() throws an error in case of failure:
const B = require('bluebird');
const _ = require('lodash');
const fs = B.promisifyAll(require('fs'));
const errorMessage = "<file empty or non-existing>";
const readMany = (...filepaths) => B.all(
_.map(filepaths, filepath =>
fs.readFileAsync(filepath)
.then(content => content.toString())
.catch(error => errorMessage)
)
);
readMany('./fileone','./filetwo', './filethree').then(contents => console.log(contents.join('\n')))Dependencies are listed as requirements within myserver.js.
npm install express cookie-parser body-parserFirst, I have to reorder the endpoint callback a few lines up, otherwise it won't call it. Then:
app.use("/sum", (req, res, next) => {
res.json(Number(req.query["a"]) + Number(req.query["b"]));
});Function composition is awesome!
const times = t => x => x * t;After creating file_a.js and file_b.js and put them in a new folder, I had install babel using a specific preset:
npm install --save-dev babel-cli babel-preset-es2015Use Babel to transpile files:
node_modules/.bin/babel . -d ./distAll I have to do to make sure it all works is run:
node file_b.jsYes!
I'm just gonna quote Bruce from Stackoverflow:
import _map from 'lodash/has' is better because lodash holds all it's functions in a single file, so rather than import the whole 'lodash' library at 100k, it's better to just import lodash's _map function which is maybe 2k.
It's for functionalities like these that the beauty of functional programming stands out:
const arrTimes = (multiplier, ...args) => {
return args.map((element) => {
return multiplier * element;
});
}
const test = arrTimes(10, 1, 2, 3, 4);
console.log(test);React is a JavaScript library for building interfaces. Its strenght is component based and the virtual DOM diff algorithms.
React Native is a framework to build Android and iOS apps using JavaScript and works very similarly to React. It's different from typical hybrid framworks because it compiles JS to native code. I've never used it, but the fact that Instagram, Airbnb and even Tesla are using it is reason enough to pay attention.
- It provides a way to execute something before the component initialization.
- props - An object containing state.
- This is used when the component will initialize with some state.
- It's called before
render(). - None.
- It's the only hook called if one's doing server rendering.
- Called immediately after the component is mounted.
- None.
- Great for doing network requests, as setting new state will trigger a re-rendering.
- Called before umnounting and the component gets destroyed.
- None.
- Used to perform any cleaning.
- Called before a mounted component gets new props.
- nextProps - object containing the state to get updated.
- To compare state changes.
- Is called before rendering when new props or state are being received.
- nextProps, nextState
- Useful to tell React a component do not need to re-render after an update. Note that a render may still occur.
- It puts everything together and returns a component or an actual DOM element.
- No parameters here.
- It's required.
I don't have any SQL software on my machine, but this website came handy!
This is the easiest one:
SELECT tradingName FROM affinityGroupAffinityGroup and User both share a property on:
SELECT name FROM user INNER JOIN affinityGroup ON user.id=affinityGroup.ownerIdQuestion 45: the statement that reads all the Names of Users that are not owners of an AffinityGroup:
SELECT * FROM user WHERE id NOT IN (SELECT ownerId FROM affinityGroup);This gives the first result:
SELECT * FROM affinityGroup ORDER BY tradingName LIMIT 1;Question 47: a query that returns only the first letter of the name and the full surname for every user
SELECT SUBSTRING(name,1,1), surname FROM userQuestion 48: What would be the command to open all css files in a folder using Sublime from terminal using the commands above?
I'd build a regex to match all CSS extensions.
"*.(css|sass|scss|less)"
And then attach it to the find command:
find /a_folder -type f -regextype "posix-extended" -iregex "*.(css|sass|scss|less)" | xargs sublIt's:
ssh root@192.168.1.10 -p 2222Question 50: Based on the examples above, what would be command to change white to aliceblue in all CSS files in a folder?
I would combine the previous command to find all CSS files within a folder:
find /a_folder -type f -regextype "posix-extended" -iregex "*.(css|sass|scss|less)"To the command to replace text within a file:
find /a_folder -type f -regextype "posix-extended" -iregex "*.(css|sass|scss|less)" -exec sed -i 's/times/vezes/g' "{}" \;A container is basically an alternative to virtual machines for isolated environments. It runs on the same kernel and filesystem as the host OS, so it requires a lot less space and RAM.
Docker is a container platform, and its power comes from the Dockerfile, an intuitive way to handle configuration.
Question 53: How to this Dockerfile so instead of copying node_modules from the local machine it installs using npm.
By replacing line 9 for:
RUN npm installQuestion 54: Knowing the above, answer with the command to start a Postgres container on your machine at port 5432.
docker run -p 5432:5432 -e POSTGRES_PASSWORD=mysecretpassword postgresThe variable was POSTGRES_PASSWORD and its value was mysecretpassword.
docker run -p 3306:3306 -e MYSQL_ROOT_PASSWORD=mySecretPassword mysqlFrom what I learned, Kubernetes is a container orchestration platform. It can be used to clusterize containers, managing scaling, individual configuration, and monitoring data.
Following the CSS specificity order, the <a> element will inherit color from:
#root a {
color: green;
}I simply added these lines to .my-menu class:
flex-direction: column;
justify-content: space-between;Question 60: How to make it so the items are centralized on the page with the space around them, like:
The CSS will look like this:
.my-menu {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
justify-content: center;
}
.my-link {
display: flex;
justify-content: center;
}No problem! I would like to take the time to thank you for a concise test. Looking forward to hearing from you and possibly get a feedback. Regards!