DEV Community: Jorge Carvajal

Maps and React

Jorge Carvajal — Mon, 19 Dec 2022 02:00:47 +0000

Version Information

Node v18
React-Mapbox-Gl v15
Mapbox-Gl v2

React-mapbox-gl is a library that allows you to use Mapbox GL JS, a JavaScript library for interactive, customizable vector maps, within a React application. It provides a set of React components that make it easy to work with Mapbox GL JS in a declarative way, by allowing you to specify the map's behavior and style as props on a React component.

To get started with react-mapbox-gl, you will need to have a Mapbox access token, which you can obtain by signing up for a Mapbox account. Once you have your access token, you can install the library using npm or yarn:

npm install react-mapbox-gl mapbox-gl

yarn add react-mapbox-gl mapbox-gl

Next, you can import the Map component from react-mapbox-gl and use it to render a map in your application:

import React from 'react';
import MapboxGL from 'mapbox-gl';
import { Map } from 'react-mapbox-gl';
const App = () => {
  return (
    <Map
      style={{
        width: '100%',
        height: '100%',
      }}
      mapboxAccessToken={mapbox_token}
      initialViewState={{
        latitude: 29.935260993668,
        longitude: -90.08128396541,
        zoom: 12,
        pitch: 60,
      }}
      mapStyle='mapbox://styles/mapbox/light-v11'
    />
  );
};
export default App;

The Map component takes a number of props that allow you to customize the appearance and behavior of the map. For example, you can use the mapStyle prop to specify the Mapbox style to use for the map, and the center and zoom props to control the initial map view.

You can also add other Mapbox GL JS features to the map using the other components provided by react-mapbox-gl, such as Marker, Popup, and Layer. For example, you can add a marker to the map like this:

import React, { useState } from 'react';
import MapboxGL from 'mapbox-gl';
import { Map, Marker } from 'react-mapbox-gl';

const App = () => {
  const [mark, setMark] = useState()
  const [showPopup, setShowPopup] = useState(false)

const {lat, lon} = mark
return (
    <Map
      style="mapbox://styles/mapbox/streets-v9"
      containerStyle={{
        height: '400px',
        width: '100%'
      }}
      center={[-74.50, 40]}
      zoom={9}
    >
    {/*
    based on the mark object the mark
    the popup will render conditionally
    */}
    {showPopup ?
      <Marker
        longitude={lon}
        latitude={lat}
        onClick={() => setShowPopup(false)}
      >
      </Marker>
    :
      <Popup
        longitude={lon}
        latitude={lat}
        anchor='bottom'
        closeOnClick={false}
        onClose={() => setShowPopup(true)}
        focusAfterOpen={true}
      >
      {/* popup info*/}
      </Popup>
    }
    </Map>
  );
};
export default App;

The Marker and the Popup component takes a coordinates prop that specifies the latitude and longitude of the marker, and you can add any content you want inside the Marker component to customize the appearance of the marker.

react-mapbox-gl also provides several other features that make it easy to work with Mapbox GL JS in a React application. For example, you can use the onStyleLoad prop to perform an action when the map style has finished loading, or use the onClick prop to handle click events on the map. You can find a full list of available props

React Router

Jorge Carvajal — Mon, 05 Dec 2022 01:02:11 +0000

-What is React Router

-Setting up Routes

-Passing Down Props

-Helpful Links

What is React Router

React router is a one of the greatest tool for using react, also one of the intuitive tools for react to use. React Router is a tool to mark your components to endpoints without using your server do that for you. React Router is a sense acts like a server itself, you can pass things down like you could with a request parameter or in a request body in a AJAX request. This can do really nice things to make your webapp do things like building a navigation bar or build components that can be linked through other elements on your page. Another great use is building a 404 page that can catch a user trying to reach your page with a bad endpoint as to not lead them to an bad request page given from the browser. I expect the reader of this blog top understand React basics and I wont get deep into building a react app.

Table of Contents

Setting Up Routes

Setting up pretty straight forward, you will need to set up the routes in your root component. For the sake of explaining I will refer to the root component as App.jsx but the same applies for .tsx and whatever you might want to call your parent component. You will also need a component to show your navigation bar that I will refer as Nav-bar.jsx. App.jsx will hold your routes and render your Nav-bar.jsx, and your Nav-bar.jsx will render the links of your components and the child components that the user has clicked. You will want to also add routes that will also not be in your Nav-bar.jsx but wish to render through another component. You will have to install react router into your package.json with this command:

npm install react-router-dom

After installing this package and setting up your index.jsx, you can start building out your route. App.jsx will look similar to this:

// Required dependencies
import { BrowserRouter, Routes, Route } from "react-router-dom";
// Component that you want to build routes to
import Nav-bar from "./pages/Nav-bar";
import Home from "./pages/Home";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import 404Page from "./pages/404Page";

const App = () => (
     <BrowserRouter>
    <!--Renders nav bar -->
          <Nav-bar />
          <Routes>
               <!-- This is the route to your main page-->
               <Route path="/" element={<Home />}>
               <Route path="page1" element={<Page1 />} />
               <!--Path with a id will act as a query param-->
               <Route path="page2:id" element={<Page2 />} />
               <!--This is a catch all route-->
               <Route path="*" element={<404Page />} />
          </Routes>
    </BrowserRouter>
)

Next thing to do is setup your navigation or Nav-bar.jsx:

import { Outlet, Link } from "react-router-dom";

const Nav-Bar = () => (
  <>
    <nav>
      <ul>
        <!--Sets up links to components-->
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/pothole">page1</Link>
        </li>
      </ul>
    </nav>
    <!--This render clicked component-->
    <Outlet />
  </>
)

App.jsx will render the Nav-bar.jsx as an ul. As you clicked through the li it will render clicked component. 404Page and Page2 are not on the Nav-bar for different reasons. The 404Page will render is the user tries to goto a endpoint that does not exist. Page2 has a :id in its route path and this can be used on page one to pass down props into from another route.

Table of Contents

Pass down Props and State

Passing down props can be really useful tool in your react tool belt. You may want to pass down something like a string that user might have inputted in a form. Lets setup Page1 to pass down a prop down to Page2.
Page1.jsx:

import { Link } from "react-router-dom";

const Page1 = () =>{
     const [user, setUser] = useState(
          {
               id: 123,
               userName: 'Jane Smith'
          }
     );
     return (
          <Link to={'/page2:' + user.id } >
               <button>Submit</button>
          </Link>
     )
}

This is taking the state object and passing down the id value to the Page2 component. To receive the prop in Page2:

import {useLocation} from 'react-router-dom';

const Page2 = () =>{
     const id = useLocation().pathname.split(':')[1];
     return(
          <>
               { id }
          </>
     )
}

Page2 will render 123 on the page that is passed down from Page1. Using the useLocation object at the key of pathname will give you what component was passed down from and the prop that was passed down with it. By splitting it at the colon and taking the 1 index will give you the prop that was passed down. Alternatively you can pass down state this can be useful if you plan on passing down a larger object than just a string. If you change the <Link> on Page1 to this:

<Link to="/page2" state={user}>
     <button>Location</Button>
</Link>

To receive the state from Page2:

import { useLocation } from 'react-router-dom';

const Page2 = () =>{
     const location = useLocation();
     const user = location.state;
     return(
          <p>
               { user.id }
               { user.name }
          </p>
     )
}

This will pass down the whole user object down from Page1 down to Page2. This is really useful if you want pass down larger objects than just a string. Both methods have their own use cases depending on what you are doing and what you need done.

Table of Contents

React Router is a great and need to use piece of technology that is essential to understand how to use in order to build a good react app. Not only is it great to add endpoints to your pages on your react app but it is one of the most intuitive tools to use. There are so many other great things that you can use React Router can do, I would suggest looking at the helpful links to take a deeper dive and feel free to reach out to me through any of my social links, if you find something that you learned about React Router that you love.

Table of Contents

Helpful Links

W3 Schools

React Router Docs

Tyler McGinnis's Blog

GeeksforGeeks Blog

SVGs Explained

Jorge Carvajal — Sat, 26 Nov 2022 02:13:07 +0000

Table of Contents

A SVG is..
The History of SVGs
Parts of an SVG
How to make a SVG
Advance SVG Uses
Conclusion

A SVG is..

SVG stands for scalable vector graphic. As exactly as is sounds these are scalable images that are great for responsive design. Being scalable is great because you can zoom on an SVG image and you will not get any degradation. Usually much smaller than a JPEG or a PNG. SVGs are written in XML code to produce the desired image. If you are not great with plotting points you could use Adobe creative suite to create one or an open source options are GIMP, Inkscape or Krita. Some other great use cases are they are great for creating a mask for images.

The History of SVGs

The history of SVGs go back to the early days of the internet. Created by the World Wide Wed Consortium (W3C) in the late 90s. It was developed to create a way for developers to have vector based imaged that could be scalable and allow for responsive design. Adoption of the svg was initially very slow but when realized by developers and designers how useful an svg can be it took off.

Parts of an SVG

An example of a SVG:

<svg
     viewBox='0 0 100 100'>
     <circle
          cx='50'
          cy='50'
          r='50'
          fill='red'
     />
</svg>

This will render a red circle, one of the basics shapes to make an without using a drawing application. The first part of the svg is viewBox, which defines min-x, min-y, width and height respectively. Moving the circle outside of the viewBox will cut that portion out. Since the drawing is completely scalable I find using 100 and using that a reference to percentages with plotting the rest of the numbers. Next is cx and cy, which is center x and center y plots for the circle. Then there is r which refers to radius of the circle. Finally, fill allows you to color with a few spelt out color and any hex code color.

How to make a SVG

<svg viewBox='0 0 100 100'>
    <path
        stroke='white'
        fill='none'
        d="
            M 10 10
            H 90
            V 90
            H 10
            V 10
         "
     />
</svg>

Thought a complex looking element this is a simple white outline of a square. The most powerful properties for SVGs is path, anything can be drawn with it. The structure of the SVG path is followed by the d property that defines the path to be drawn. The structure for the drawing is defining the kind of line or the starting point which is defined by M. The numbers are followed by x, y plot points. H and V or horizontal and vertical points are followed by one number moving to the next plot point. The default fill is black setting a fill to none will make the area transparent. To find more properties I would suggest taking a look at the MDN Docs for the d properties such as drawing arcs and other lines/points.

Advance SVG Uses

Some cool tricks you can use SVG with is using the path property in your CSS to add changes to your SVG when you hover. An example of this would be:

index.html

<svg id="svg_css" viewBox="0 0 100 100">
     <path
          fill="none"
          stroke="red"
          d="
               M 100, 100
               m -100, -50
               a 50,50 0 1,0 100,0
               a 50,50 0 1,0 -100,0
          "/>
</svg>

stye.css

html, body {
  height: 100%;
  width: 100%;
}
#svg_css:hover path {
  d: path(
    "M 10,10 H 90 V 90 H 10 V 10"
  );
}

The HTML renders a red circle, and the CSS sets a rule on the hover to change the path of the SVG to a square. This is changing the path of the object but you could potentially change or add CSS rules the any of the properties including stroke or fill color.

Another very cool thing you can do is masking. Masking is filling the background of the SVG with an image. This effect can really add a new dimension to you SVGs.

<svg width="600" height="400">
     <mask id="svgmask1">
          <polygon
               fill="#ffffff"
               points="200 0, 400 400, 0 400"
          />
    </mask>
    <image
          xlink:href="cat.jpeg"
          mask="url(#svgmask1)"
     />
</svg>

This will render a triangle with the cat.jpeg being masked out by the triangle. Potentially you could add multiple shapes by the and multiple images within one SVG. This has really deep and has a endless possibility of creativity.

Conclusion

This is just the basics of SVGs and techniques to use them to get a deeper understanding you should take a deeper dive into the MDN Docs on SVGs; there is so much more that delved into. There is such a wide set of use cases for SVGs that solve so many developer problems and open the door for being creative. For more complex images that you might want to develop I would suggest using am art application such as Inkscape or Gimp and it will convert your vector image into an SVG.

Fast Pass on Swift

Jorge Carvajal — Tue, 18 Oct 2022 02:46:58 +0000

Released in 2014 a relatively new language by Apple and open source contributors. Is the language to develop for apple products, from the iPhone, to apple watch to OSX native apps. It is a complied programming language that replaced Objective-C. Though made to replace Objective-C, C, C++ and Objective-C can be compiled alongside with Swift because Xcode uses an Objective-C runtime library. Xcode is the definitive IDE to develop with using Swift. The main frameworks for Swift is Cocoa and Cocoa Touch.

Syntax

Some of the syntax is very similar to other modern languages like Javascript and Python. For Example writing a comments looks something like this:

// this is a single-line comment 
/*
This is 
A multi-line 
Comment 
*/

And similar to Javascript semicolons are not required after each statement in your code but you can optionally use it. Which is very similar to the Javascript commenting syntax. And to do a simple hello program is very simple to Python syntax, looks like this:

var str = “Hello World!”
print(str)

If you add this to a REPL like codePen or Replit, congratulations you wrote your fists swift program.

Datatypes

Swift is a type-safe language, that makes sure you can not reassign the variable to a different datatype by accident. It has 8 built in basic datatypes in swift:
Int: A whole number
Float: A 32-bit floating point number
Double: A 64-bit floating point number
Bool: A boolean, true or false
String: A collection of characters
Character: A single string character
Optional: A variable that can hold either a value or no value
Tuples: Used to group multiple values in a single compound value

Variable Assignments

There are to ways to assign a variable is either using var or let keywords. Assigning a variable with var will give the variable ability to reassigned and the let will do the opposite of that and create a constant. Using the keywords looks like this:

let pi = 3.4;
var index = 1;

Operators

Arithmetic Operator

There are some symbols you can use to do arithmetic operations between operands.

+ adds
- subtracts
* multiples
/ divides
% remainder from dividing the operands

Comparison Operators

Comparison operator compares 2 operands and returns true or false:

== Checks if operand from the left and right of the comparison are equal to each other
!= Checks of the operand are not equal to each other
> Checks if operand from the left is larger than the operand on the right
< Checks if operand from the right is larger than the operand on the left
<= Checks if operand from the left is larger than the operand on the right or equal to
>= Checks if operand from the right is larger than the operand on the left or equal to

This is a simple pass over on the Swift programming language, there is a lot more to know like how to build loops methods and building functions... To get started on building your apple app, I urge you to take a look at the documentation here. It is a very easy language to learn and has a great community in the Swift forums here, it's a great place to ask questions and learn a lot about the language.

Simple Svelte Transitions

Jorge Carvajal — Sun, 09 Oct 2022 23:00:03 +0000

Table of Contents:

Fade
Blur
Fly
Slide
Scale
Draw

Svelte has its own built in transitions that are very easy to use. The transitions are very customizable, they have a couple parameters in common, delay, durarion and easing. All have default values that can be used with out out. Transions are a great way to give your website/app some pazza. The general way to get most of these working just to see what works for you can be something like this:



<script>
import { fade, blur, fly, slide, scale} from 'svelte/transition';

let i = 0 

const handleClick = () => { i++ };

</script>

<div>
  <button on:click='{handleClick}'> ADD </button>
  {#key i }
    <div transition:TRANSITION_NAME="{{duration: 300}}">
      { i }
    </div>
  {/key}
</div>

To test this you would change TRANSITION_NAME to one of the imported transitions. This would render a number and add to i, the change would show the transition. Adding some CSS rules to keep the fixed would make some transitions look better, such as scale and blur. This example is a simple property change that trigger the rerendering of the element, but you could do this with components as well.

Fade

Fade can take in parameter of delay, duration, and easing. The delay is how many milliseconds that before the transition starts, the default is set at 0. Duration is how long the transition last for in milliseconds. The easing takes in a svelte easing function more information can be seen here. An example of fade looks like this:

Tutorial

Docs

Blur

Blur blurs in/out the element that is being rendered. This are some more paramters that blur takes in, delay, durarion and easing just like fade but the other 2 are opacity and amount. The opacity is the will animate in and out of, and amount is the size of the blur.

Docs

Fly

The Fly transition moves one element from an x and y position into frame over last element. This can take a in:fly and an out:fly with parameters passed in. delay, duration,easing opacity and adding a x and y. X and Y move newly rendered element from and into the position using the axis. You can make it look like this:

Tutorial

Docs

Slide

Slide renders element in and out of the frame. Like Blur it takes in delay, duration and an easing function. This is a very simple transition to implement and simple looking animation. An example looks like this:

Docs

Scale

Scale renders element in and out from the z index and grows. It takes in delay, duration, an easing function, start and opacity. Start scales the element initial size. An example looks like this:

Docs

Draw

The draw animation is a one a little more complex but can be very fun to implement. This is used for drawing out SVG in a path. It can be used in something like an icon or an image on the page that you would would to give more of a fancy and fun look. Parameters that it takes in are delay, speed, duration and an easing function. You Svg needs a path and not just a drawn on shape or icon. The transition is invoked in the path parameter in the SVG. A simple implementation looks like this:

Docs

This is just a simple introduction in svelte transitions. To urge you take take a deeper dive into the tutorials that svelte has to offer. The REPL that they have to show you how to use the transition is an easy way to test a transition before implementation. Playing with Animations and getting a feel for them and understanding how to use it and really getting a feel for what it looks like is important.

Svelte Style Scoping

Jorge Carvajal — Sun, 02 Oct 2022 17:51:19 +0000

How Svelte Styling Works
Component based Styling
Global Tag
External Sylesheet
Sources & Resources

Svelte is a relatively new framework/templating language that has a particular way of styling components. This blog was written at the time Svelte version 3.x and SvelteKit was being used. Things have changed from alpha and I'm sure will change with newer versions. Before you continue reading you should have a basic understanding of components, javascript, html and css. If you need some deeper understanding about Svelte check out my other blog post about Svelte. Styling is in Svelte is really fun and interesting. I learned a lot just getting into it on my first personal project with it and I realized there is a lot to understanding on how it works.

How Svelte Styling Works

Understanding what Svelte is doing on the backend is key to understanding how to style your components. Svelte components styles are scoped per component and this is because svelte takes advantage of the way styling works. There are three ways to apply styling rules into your svelte code:

Component
Global
Style Sheet

Each of these have there own set of rules they follow. To style an element in CSS, the specificity will always override the style rules from the parent object or less explicit style rule. Svelte does styled components by attaching a hash to the class name and passing the styles written per component to the elements. So an example of a svelte made html elements would look like this:

<ul class="s-V0aBpCfzfs-B">
    <li class="s-V0aBpCfzfs-B">1</li>
    <li class="s-V0aBpCfzfs-B">2</li>
    <li class="s-V0aBpCfzfs-B">3</li>
</ul>

This <ul> element is in the same component but I made two <ul> components exactly the same with different styling, the components would maintain their individual styles. This is because in the back-end Svelte is adding the hashed class into the styling rules. Understanding what Svelte does on the back-end will help you understand on how to apply style rules that best work for you. I will go from the most specific to the to the most general ways of styling a svelte component. Starting with the Component based styling.

Component based Styling

This style option it what gives svelte its pizazz. A svelte component has three major parts the first is the script which is where the javascript lives, then the html is and then theres the styling. So a typical component looks like this:

<script>

    let i = 'Hello World!'

</script>

<p> { i } </p>

<style>

    p{
        color: green;
    }

</style>

This will render:

<p style='color: green'>Hello World!</p>

Then this component is imported into another the styling will be unaffected. This is because the backend of svelte is creating a hash class name and making a style rule based on the hash class name. This is utilizing the CSS specificity that overrides the general CSS rules. This is great if your component needs some rules that you don't need applied to other similar elements. Rules made here are for the most specific rules that you need applied to your html.
Another interesting thing you could do with your styling is use your javascript variables in your style tag by adding var( --i). This add some dynamics to your svelte styling. An example of that looks like this that would render the same component as above looks like this:

<script>

    export let color = 'green!'

</script>

<p style='--passed: {color}'>Hello World!</p>

<style>

    p{
        color: var(--passed);
    }

</style>

The Global Tag

An amazing tool in your svelte arsenal is applying :global() rules. As said above rules made in a component override any other styling rules. The global tag is used to apply rules to elements that may not carry a certain rule for for that specific element. In other words :global() will not override rules applied to a component. This is helpful to know when styling. A great use case for the global tag is CSS reseting or setting general style to your page, such as fonts. To use it you would do something like this:

:global(*){
    margin: 0px;
    font-family: 'comic-sans':
}

Using a Style Sheet

Using an external stylesheet is the last way to apply styling rules to your svelte. This is done just as you would add an external stylesheet to most frameworks. To have them applied you have to import the style.css in your component. Similarly to :global(), these rules are applied globally when imported to the root svelte file. The import is added like so:

import "/path/to/style.css";

Conclusively, this blog gives you better tools to build a take a deeper dive into svelte. Understanding how style scoping in svelte works is key to understanding how to build a better more dynamic web application. There is component based styling, using the global tag and using an external style sheet. These three styling method have their own use case. A tip I would give after build my first project is style from furtherest scope to the most specific component styling. This method helps to not build clashing rules, and understanding where rules come from.

Sources & Resources:

https://svelte.dev/docs

https://svelte.dev/tutorial/style-directive

https://issuecloser.com/blog/how-svelte-scopes-component-styles

https://css-tricks.com/what-i-like-about-writing-styles-with-svelte/

https://progressivewebninja.com/a-guide-to-css-in-svelte-and-conditional-styling/

Svelte Logic Blocks

Jorge Carvajal — Mon, 22 Aug 2022 05:48:54 +0000

Intro to Logic
If/ Else/ Else IF Blocks
Each Blocks
Key Blocks
Await Blocks
Conclusion

Intro To Svelte Logic

HTML lacks the ability to express any logic when rendering elements to the DOM. Svelte is a templating language it adds the power of Javascript and the capacity of logic right in your HTML to render the DOM in a much more sleek way. This really relieves a huge amount of code that would have to be written in other frameworks. There are 4 types of logic blocks that, if/ else/ else if, each, key and await blocks. All have a different use case. The general syntax for this would look something similar to this:

{#logic block}
<html-element/>
{/logic block}

If/ Else/ Else IF Blocks

If you know this form of logic block from knowing JavaScript, the idea is not much different. You can use a conditional to render and element on a page. Similarly to JS you can chain conditionals together to render corresponding elements to the page.

{#if temp < 60}
<p>Grab a Jacket</p>
{:else if temp < 70}
<p>Perfect Weather</p>
{:else}
<p>Wear some Shorts</p>
{/if}

The example above is a simple lesson on how the logic blocks are constructed within the html. These logic blocks can be chained together with as many else if blocks as you like.

Each Blocks

The Each block is used to to iterate over an arrays or objects within an array to render your elements based on the values. This can create many elements with the same template. The each block will pas the values from the array into the Dom element, and alike to .map() you can also provide you with an index in the rendering if you choose to use it. An example use looks like this:

 let names = [
   { id: '123', name: 'Jorge' },
   { id: '456', name: 'Clare' },
   { id: '789', name: 'John' }
 ];

<ul>
 {#each names as ppl , i}
  <li>
   num: {i}
   Id: {ppl.id}
   Name: {ppl.name}
  </li>
 {/each}
</ul>

Which renders:

num: 0 Id: 123 Name: Jorge
num: 1 Id: 456 Name: Clare
num: 2 Id: 789 Name: John

Key Blocks

Key blocks are a relatively new feature in svelte and arguably one of the more elegant logic blocks. This logic can re-render your DOM element based on a value changes. It also works naturally with transition animations in svelte. So something like this:

import { fade } from 'svelte/transition'
let i = 0;
function count(){
  i++
  setTimeout(count, 1000)
}
count()

{#key i}
<p transition:fade> {i} </p>
{/key}

Will add a fade in animation that uses the count function in the javascript that endlessly counts at one second intervals.

Await Blocks

The Await block works with promises and with that there are three expressions that are used: promise, then and catch. This is great for server side rendering. This really is one of the more complex items to implement in other frame works and Svelte makes this so easy. The syntax for this looks like this:

{#await promise}
 <p>waiting...</p>
{:then value}
 <p>The value is {value}</p>
{:catch error}
 <p>{error.message}</p>
{/await}

Conclusion

This is a basic summary of the way the logic blocks work in svelte I implore you to look at the documentation over at Svelte to get an even deeper understanding on how they work and how to use them. They are a critical part of why I believe svelte is such a great framework.

Links to the Docs

IF/ Else/ Else If

Each

Key

Await

Svelte Explained...

Jorge Carvajal — Sun, 14 Aug 2022 23:46:00 +0000

Svelte is a framework like no other, and according to Stack Overflow it’s the world’s most loved framework in 2021 [1]. The documentation Svelte is absolutely so well written, and there is even a interactive IDE that can help you get started on understanding Svelte. The framework’s main focus is on letting you write less code while still being very versatile, lightweight and letting the compiler, Svelte Kit, do the heavy lifting. It is a component driven framework that uses HTML templates that that you write javascript or typescript directly into the .svelte file.

You can have access to writing Svelte by either using the CDN link or the or installing the project though node. The easiest way to install svelte is by running the commands:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

This will get you a template to start your 1st project. Building a simple “Hello World” is as simple as writing regular HTML and boom you have written your 1st svelte. It handles javascript in the in script tags and passes the variable to the the HTML by wrapping the variable name in {}.

<script>
const name = "Jorge"
</script>
<p>Hello {name}!</p>

As simple as that your page will now have "Hello Jorge". Styles are written a inside a style tag and it is not affected by other imports that might share the same tags. This helps with modularity of Svelte. All on the same svelte file. To understand how to to add event handlers here is a link to something I made in a Svelte REPL. The action on:click with the name of the function will call that function when the click is made. Svelte also has special syntax to write directly in your HTML that can use logic like IF blocks that looks like this:

<script>
    let toggler = { on: false };

    function toggle() {
        toggler.on = !toggler.on;
    }
</script>

{#if toggler.on}
    <button on:click={toggle}>
        ON
    </button>
{/if}

{#if !toggler.on}
    <button on:click={toggle}>
        OFF
    </button>
{/if}

This code has a two buttons that toggle each other when on is clicked it switches to off using the if block logic in the code.

Svelte components are just separate svelte files that are exported from the file into others. When exporting just use the export keyword and you now have access to the exported svelte file to the the file you import it at. The imported file also has access to variables that you might want to use in your code. That looks something like this. This can leads to a very modular design process similar to React.

This is just a brief introduction into Svelte but there is so much more and all can be learned with ease. Wes Bos is such a great resource on the topic and I encourage you to check out his podcast Syntax and his tutorials page as well. Svelte also has a Discord with a great community. I hope this article launches you to take a deeper dive into the framework.

Some Useful Links:
Svelte's Official Website
SvelteKit's Website
MDN Docs

Debugging with VS Code

Jorge Carvajal — Mon, 08 Aug 2022 13:24:00 +0000

VS Code is a very powerful tool to write code in but most developers I have seen debug are usually using the browser developer tools. VS Code has a very customizable and versatile debugging experience. I’m going to take a dive into showing how to successfully use and customize your debugger to get it working for your front-end projects.

The debugging menu can be brought up using the Run and Debug menu item in the GUI or if you like hotkeys you can use ⇧⌘D. This menu gives you a couple of GUI options but the most impressive part is using a JSON to customize your debugging experience. By clicking the create a JSON file that is used to debug. On the bottom right of the window it will show a add configurations button that can help you fill out your JSON.

In the configurations array they’re are certain properties you want to add. The name key is what you are testing for, and this could be whatever name you want to give it, but remember be kind to your future self and be descriptive. The next is going to be key will be type, for most front end testing you will give it chrome. Then you will give the property of request to launch and this will launch the project. The next key/value pair is url and address of your locally ran live server address. Finally you will add webRoot with the key of ${workspaceFolder}, this will let VS Code know where you are working. All send and done will look like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debugging",
      "type": "chrome",
      "request":  "launch",
      "url": "http://127.0.0.1:5500/index.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Now you will have access to the configuration in the dropdown menu in the debugger. Once you run that debugger instance it will open a new instance of Chrome with your project. Now to the left of your individual lines of code you can add breakpoints and it will stop the code as its running at whatever line you add a breakpoint. Once a breakpoint is activated you can use the top right buttons to navigate your code. You have Continue/ pause, Step over, step into, step out, restart, and stop.

Once you’re at this point you can do some other nifty things. If you hover over variables you can see its value, you can also add variables to the watch tab to keep track of variable’s value as your code executes. With the variables tab you can see what variables are available in the respective scope. The call stack tab will give you insight on what your current call stack looks like.

Hopefully now that you have a little peek at what VS Code's debugger is capable of you will want to take a deeper dive on your own and really understand the capabilities of the debugger. For more information I suggest going to the Official Microsoft documentation on the debugger and understanding the configurations that can be added to the launch.json file can do.

Expanding on .reduce()

Jorge Carvajal — Wed, 15 Jun 2022 00:24:08 +0000

How 'Reduce', a high order function, works in Javascript

Javascript’s reduce function is is a helpful tool to execute useful tasks. From adding an array, to finding averages of an array, to creating a well formatted object from an array, to even flattening an array --it can really be the Swiss army knife of javascript functions. The key to using reduce is truly understanding how it works. This article will go over how to dissect the reduce method, how to use reduce, as well as how to use cases for the reduce method.

Recreating Reduce

The first thing to know is that reduce takes in a user passed callback function that loops over elements in an array. The callback function takes in an accumulator, a current value, index, and the collection.To build reduce you also need to know that it takes in a ‘seed’ value that can be a starting value of the loop or even set to an output datatype. The example below shows how reduce works

How reduce works

The call back function is a key part of how reduce works. In the example below is a simple addition of all the values in the array. Like in any method, the correct syntax for using reduce involves putting the array that you would like to pass through, followed by a period and the call back function. After that, if you'd like, you can include the seed. For example, in the case below, the seed is zero, however, without it you would get the same result.

The call back function has 4 parameters that can be used to execute the action you are trying to execute:

Accumulator: Always starts off with the value of the seed.
CurrentValue: Is the 1st value in the array
Index: The index of the current value that is being passed
Array: The entire collection

Use Cases for Reduce

Above we learned how to use the reduce method to find the sum of an array. However, that is only one way to use reduce. In fact, the reduce method can serve many purposes. For example, it can find an average, return objects from an array, return odd numbers from an array, and even flatten or filter.

Creating an Object

Sometimes passing your array through reduce into an object can be a very useful way to use reduce. The result variable takes the array pets and reduces it into an object with the amount of time that the element is repeated in the array. Since the accumulator takes the value of seed at the first iteration of the callback function and then passes the key plus one in the key and property in the accumulator. At each iteration it will check for the key and add one if the key is not there.

Average

Finding the average of the array is a great example of using all the parameters in the callback function. Using array.length can help you find the end of the array and the index can signify what index reduce is on in its loop. In an if loop you execute the accumulator divided by the amount of elements in the array and the return of that would give you an average.

Flatten

Though there is a flatten function, reduce can also accomplish flattening nested sub-arrays by using concat and taking the elements in the sub-array into the accumulator. Assigning the seed to an empty array is not necessary to run the reduce as intended in this case because if you leave out it will pass the elements into the first array.

Filter

By creating a conditional it will pass the true current values into the accumulator recreating a filter function. Using the other argument, index or array, you can also use it to pass certain indexes, like odd or even placements, an nth place in the array or a combination of conditionals.

Conclusion

The reduce method can be one of the more versatile functions in your javascript arsenal. However, while you can use it to replace other functions in Javascript, it can also make your code less clean, so it's important to know the aforementioned functions. At the same time, if you are in a pinch, the multi-tool functions can come in very handy.

DEV Community: Jorge Carvajal

Maps and React

Version Information

React Router

Table of Contents

What is React Router

Setting Up Routes

Pass down Props and State

Helpful Links

SVGs Explained

A SVG is..

The History of SVGs

Parts of an SVG

How to make a SVG

Advance SVG Uses

Conclusion

Fast Pass on Swift

Syntax

Datatypes

Variable Assignments

Operators

Arithmetic Operator

Comparison Operators

Simple Svelte Transitions

Fade

Blur

Fly

Slide

Scale

Draw

Svelte Style Scoping

Table of Contents

How Svelte Styling Works

Component based Styling

The Global Tag

Using a Style Sheet

Sources & Resources:

Svelte Logic Blocks

Table Of Contents

Links to the Docs

Svelte Explained...

Debugging with VS Code

Expanding on .reduce()

How 'Reduce', a high order function, works in Javascript

Recreating Reduce

How reduce works

Use Cases for Reduce

Creating an Object

Average

Flatten

Filter

Conclusion