gabrielmlinassi

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gabrielm.assignmenttracker">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

gabrielmlinassi

#Understanding MVC And MVP (For JavaScript & Backbone Developers)

Before exploring any JavaScript frameworks that assist in structuring applications, it can be useful to gain a basic understanding of architectural design patterns. Design patterns are proven solutions to common development problems and can suggest structural paradigms to help guide us in adding some organization to our application.

I think patterns are exciting as they're effectively a grass roots effort that build upon the collective experience of skilled developers who have previously faced similar problems as we do now. Although developers 10 or 20 years ago may not have been using the same programming languages for implementing patterns, there are many lessons we can learn from their efforts.

In this section, we're going to review two popular patterns - MVC and MVP. The context of our exploration will be how these patterns are related to the popular JavaScript framework Backbone.js, which will be explored in greater detail later on.

gabrielmlinassi

div grow full width/height of remaining view port

div grow full width/height of remaining view port

A Pen by Gabriel Linassi on CodePen.

License.

gabrielmlinassi

/**
 * Performs right-to-left composition, combining multiple functions into a single function.
 * @function compose
 * @param {...Function} args
 * @returns {Function}
 */
const compose = (...fns) => x => fns.reduceRight((output, fn) => fn(output), x, fns);

/**
 * Performs left-to-right composition, combining multiple functions into a single function. Sometimes called `sequence`. Right-to-left composition is typically known as `compose`.

gabrielmlinassi

import { useReducer } from "react";

function login({ email, password }) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === "sample@sample.com" && password === "123") {
        resolve({ email: "Sample User" });
      } else {
        reject({ message: "email or password are wrong" });
      }

gabrielmlinassi

import { useEffect, useState } from "react";

export default function Counter() {
  const { onFaster, onSlower, speed } = useSpeedCountroler();
  const { counterValue } = useAutoCounter(speed);

  return (
    <div>
      <h1>Counter</h1>
      <h2>Current Value: {counterValue}</h2>

gabrielmlinassi

function sayHello(name) {
  console.log(`Hello, ${name}`)
}

sayHello('Gabriel'); // Hello, Gabriel

gabrielmlinassi

[
  {
    "id": 1,
    "name": "Leopard Gaming Chair, High Back PU Leather Office Chair - Black/Blue",
    "price": 189.99,
    "images": [
      "https://images-na.ssl-images-amazon.com/images/I/61vKfuN%2B8TL._AC_SL1500_.jpg",
      "https://images-na.ssl-images-amazon.com/images/I/617ue%2BHuTwL._AC_SL1500_.jpg",
      "https://images-na.ssl-images-amazon.com/images/I/71-UcCz9zoL._AC_SL1500_.jpg",
      "https://images-na.ssl-images-amazon.com/images/I/71Jq7Z11E6L._AC_SL1500_.jpg",

gabrielmlinassi

import styled from "styled-components";
import Carousel from "./../carousel/Carousel";

const S = {};
S.Product = styled.div`
  border: solid 1px;
  font-size: 1.25rem;
`;

S.Details = styled.div`

gabrielmlinassi

import styled from "styled-components";

import Product from "./Product";

const S = {};
S.ProductList = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
`;