teleren/devto huggingface dataset:
[JS] Understanding JavaScript Variables and Assignment Operators
Tags: javascript, webdev, beginners
Published: 2022-01-25 02:46:30

> Reference
_Codecademy._ Retrieved from https://www.codecademy.com/

***

A variable is a container for data that is stored in computer memory. It is referenced by a descriptive name that a programmer can call to assign a specific value and retrieve it.

```javascript
let name = "Tammy";
const found = false;
var age = 3;
console.log(name, found, age);
// Tammy, false, 3
```

To declare a variable in JavaScript, any of these three keywords can be used along with a variable name:

* `var` is used in pre-ES6 versions of JavaScript.
* `let` is the preferred way to declare a variable when it can be reassigned.
* `const` is the preferred way to declare a variable with a constant value.

***

##  `let` Keyword

 `let` creates a local variable in JavaScript & can be re-assigned. Initialization during the declaration of a `let` variable is optional. A `let` variable will contain `undefined` if nothing is assigned to it.

```javascript
let count; 
console.log(count); // Prints: undefined
count = 10;
console.log(count); // Prints: 10
```

***

## `const` Keyword

 A constant variable can be declared using the keyword `const`. It must have an assignment. Any attempt of re-assigning a `const` variable will result in JavaScript runtime error.

```javascript
const numberOfColumns = 4;
numberOfColumns = 8;
// TypeError: Assignment to constant variable.
```

***

## Assignment Operators

An assignment operator assigns a value to its left operand based on the value of its right operand. Here are some of them:

* `+=` addition assignment
* `-=` subtraction assignment
* `*=` multiplication assignment
* `/=` division assignment

```javascript
let number = 100;

// Both statements will add 10
number = number + 10;
number += 10;

console.log(number); 
// Prints: 120
```

***

## String Interpolation

String interpolation is the process of evaluating string literals containing one or more placeholders \(expressions, variables, etc\).

It can be performed using template literals: `text ${expression} text`.

```javascript
let age = 7;

// String concatenation
'Tommy is ' + age + ' years old.';

// String interpolation
`Tommy is ${age} years old.`;
```
Supabase an Open Source Alternative
Tags: webdev, javascript, beginners, podcast
Published: 2022-01-25 02:37:32


Original: https://codingcat.dev/podcast/2-3-supabase-an-open-source-alternative

{% youtube https://www.youtube.com/watch?v=OCxifrifiU0 %}

## Questions

1. What was the inspiration behind creating Supabase?
  1. Why base it off Firebase features, or at least brand it that way?
2. What are the benefits to using Supabase?
3. What are some of the features of Supabase?
4. Is Postgres slower than some other databases like Firestore or DynamoDb.ll
5. Serverless Functions are coming soon?!

###
Salesforce Data Integration using Heroku Connect
Tags: salesforce, heroku, lwc
Published: 2022-01-25 02:28:53

---
title: Salesforce Data Integration using Heroku Connect
published: true
description: 
tags: salesforce, heroku, LWC
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cw89ytmragw2xuv6be8y.jpg
---

This blog will provide a high-level overview of how I used Heroku Connect to bring data to a Heroku app built with Lightning Web Component Open Source. I will go over the definition, the setup, configurations, and the result.

##Heroku Connect

> Heroku Connect is an add-on that synchronizes data between your Salesforce organization and a Heroku Postgres database. Using Heroku Connect with Heroku Postgres, you can build custom applications that interact with your Salesforce data.


##Setup

I created a simple app to showcase a list of puppies available for sale.  I used Lightning Web Components Open Source and Salesforce Design System.  I set up a simple Express server, connected postgres using URI, and used node-postgres to query the database. The app was deployed to Heroku. 

In Salesforce, I created a custom object to store information about the puppies such as age, name, and breed.

##Configuration

I logged in to the Heroku dashboard, navigated to resources, and selected two add-ons: Heroku connect and Heroku Postgres to use as a database. 

![heroku dashboard](https://i.imgur.com/aZoFHSK.png)

Next, I mapped my custom objects and necessary fields.

![heroku mapping](https://i.imgur.com/eOoM3Sp.png)

Then restarted the app to apply the changes.


##Result

After following all steps listed above, I was able to view the Salesforce data in my app.
![puppies gallery](https://i.imgur.com/ZxXkXb4.png)

I logged in to Salesforce, updated the second puppy's name from Berlin to Rio. 

![puppies images](https://i.imgur.com/Djal5Mi.png)

After the change, I opened the Heroku app and the name change was reflected.

![puppies images after](https://i.imgur.com/ip8JTef.png)


##Conclusion

By utilizing Heroku connect, I was able to replica my Salesforce data and display it on a public website for all users to see. While the use case that I explored only needed one-way communication, Heroku connect also has bidirectional data replication. This is useful in cases where users need to create or update information stored in Salesforce. To learn more and view limitations, refer to the documentation [Heroku](https://devcenter.heroku.com/articles/heroku-connect).
Images To PDF
Tags: ironpdf, pdf, csharp, dotnet
Published: 2022-01-25 02:28:42

---
canonical_url: https://ironpdf.com/examples/image-to-pdf/
---

## Images to PDF

**C#:**
```
// PM> Install-Package IronPdf
using IronPdf;
using System.IO;
using System.Linq;
 
// One or more images as IEnumerable.  This example selects all JPEG images in a specific folder.
var ImageFiles = System.IO.Directory.EnumerateFiles(@"C:\project\assets").Where(f => f.EndsWith(".jpg") || f.EndsWith(".jpeg"));
 
// Convert the images to a PDF and save it.
ImageToPdfConverter.ImageToPdf(ImageFiles).SaveAs(@"C:\project\composite.pdf");
 
//Also see PdfDocument.RasterizeToImageFiles() method to flatten a PDF to images or thumbnails
```

**VB:**
```
' PM> Install-Package IronPdf
Imports IronPdf
Imports System.IO
Imports System.Linq
 
' One or more images as IEnumerable.  This example selects all JPEG images in a specific folder.
Private ImageFiles = System.IO.Directory.EnumerateFiles("C:\project\assets").Where(Function(f) f.EndsWith(".jpg") OrElse f.EndsWith(".jpeg"))
 
' Convert the images to a PDF and save it.
ImageToPdfConverter.ImageToPdf(ImageFiles).SaveAs("C:\project\composite.pdf")
 
'Also see PdfDocument.RasterizeToImageFiles() method to flatten a PDF to images or thumbnails
```

PDF documents can be easily constructed from one or more image files using the IronPdf.ImageToPdfConverter Class.
Make money as a frontend Developer 🤑
Published: 2022-01-25 02:15:57


My name is Brian and I am a frontend Developer I'm currently working as a freelancer and today I would like to share with you about the opportunity of being a frontend engineer.

As a frontend developer, you have a unique opportunity to make a lot of money. There are many companies that are looking for talented frontend developers, and they are willing to pay top dollar for the best talent.

If you are a frontend developer, you can make a good living by working for a company or by starting your own business. There are many opportunities for frontend developers, and the demand for their skills is high.

In order to make money as a frontend developer, you need to be skilled in HTML, CSS, and JavaScript. These are the three main technologies that frontend developers use. You also need to be familiar with web browsers and how they work.

In addition to these skills, you should also be familiar with design principles. This will help you to create attractive and user-friendly interfaces.

If you want to make money as a frontend developer, you need to be able to work independently. You also need to be able to work with a team of developers.

If you are a freelance developer, you can make a good living by charging a high hourly rate. If you are working for a company, you may be able to negotiate a higher salary.

The demand for frontend developers is high, and the pay is good. If you are skilled in HTML, CSS, and JavaScript, you can make a lot of money as a frontend developer. 

Thanks for reading my article if you have any tips on how to make money as a frontend Developer please leave a comment. Feel free to contact me on brianlemba2@gmail.com 
Or you can follow me on GitHub [follow](GitHub.com/yakumwamba)

Thanks 😊
15 CSS basics that will 🚀 boost your designing confidence as a frontend developer by 10x🦄🎉
Tags: css, frontend, webdev, design
Published: 2022-01-25 02:02:02


**1. Use CSS Grid for Better Layouts**

CSS Grid Layout is a new way to create layouts on the web. It provides a more efficient way to layout your content than using floats or positioning.

**2. Use Media Queries to Target Different Devices**

Media queries allow you to target different devices with different CSS properties. This is a great way to make your site look great on all devices.

**3. Use CSS Animations for Eye-Catching Effects**

CSS Animations allow you to create eye-catching effects that can really make your site stand out.

**4. Use Pseudo-Classes to Add More Style to Your Links**

Pseudo-classes allow you to add more style to your links, making them more visually appealing.

**5. Use the :before and :after Pseudo-Elements to Add Content to Your Pages**

:before and :after pseudo-elements allow you to add content to your pages, which can be used to create interesting effects.

**6. Use the transform Property to Transform Your Elements**

The transform property allows you to transform your elements, which can create some cool effects.

**7. Use the transition Property to Create Smooth Animations**

The transition property allows you to create smooth animations between CSS properties.

**8. Use the opacity Property to Create Transparent Elements**

The opacity property allows you to create transparent elements, which can be used to create interesting effects.

**9. Use the box-shadow Property to Add Shadows to Your Elements**

The box-shadow property allows you to add shadows to your elements, which can give them a more polished look.

**10. Use the border-radius Property to Add Curved Borders to Your Elements**

The border-radius property allows you to add curved borders to your elements, which can give them a more polished look.

**11. Use the font-family Property to Choose the Fonts for Your Pages**

The font-family property allows you to choose the fonts for your pages, which can help to create a more unified look.

**12. Use the font-size Property to Control the Size of Your Fonts**

The font-size property allows you to control the size of your fonts, which can help to create a more unified look.

**13. Use the color Property to Control the Color of Your Text**

The color property allows you to control the color of your text, which can be used to create a more unified look.

**14. Use the background-color Property to Control the Background Color of Your Pages**

The background-color property allows you to control the background color of your pages, which can be used to create a more unified look.

**15. Use the margin and padding Properties to Control the Space Around Your Elements**

The margin and padding properties allow you to control the space around your elements, which can help to create a more polished look.

Thanks for reading through I hope this article helps you in anyway. 


Please comment any other trick that I may have missed out.

Thanks.

Kindly follow me on [git](GitHub.com/yakumwamba)
Using No-Code with Builder - Part 2
Tags: webdev, javascript, beginners, podcast
Published: 2022-01-25 01:58:55


Original: https://codingcat.dev/podcast/2-2-using-no-code-with-builder-io-part-2

{% youtube https://www.youtube.com/watch?v=xEJa5W1_y_A %}

## Questions

1. How do blocks work in builder?
2. Do we see designers flipping their mindset to this more flex based layout?
3. Do you see companies handing this off to marketers to play with?
4. What is the code output from Builder like?
5. Can you deploy to different environments?

## Additional Links

Everlane, Clothing and Apparel - [https://www.everlane.com/](https://www.everlane.com/)

Atoms, For all things Shoes - [https://www.atoms.com/](https://www.atoms.com/)

Figma to HTML, CSS, React & more! [https://www.figma.com/community/plugin/747985167520967365](https://www.figma.com/community/plugin/747985167520967365)
Free Movie Rental
Published: 2022-01-25 01:50:58

My project is an app that lets users look at a list of movies and their summary's. I have hard coded this list of movies in a db.json file. I then used fetch to retrieve the data and incorporate it in my app. When the user clicks on the website he is introduced to the app through a welcome page. The user will then click on the enter link to see the list of movies already provided. The user will see a list of movies. In order to look at the summary's, the user has to click the show summary button. To hide the summary after reading it, there is a button right next to the show summary button that will allow the user to hide the summary. The user has the ability to add a movie to the list by clicking the link on the bottom of the page. Clicking this link will navigate the user to a page only showing text bars that will need to by filled with a new movie name and the movies summary. When finished, the user can click the enter button and go back to the list of movies and see the new movie updated on the screen. I achieved this by fetching the data once again but this time I made a POST request to the json server. If the user does not like one of the movies on the list, the user also has the option to delete the movies from the list by pushing the Delete Movie button. After reviewing all the movies and reading their summary's the user can choose the movie that they want to download. There is a link that says Download This Movie. When clicked, it will navigate the user to a page with some simple HTML saying that the movie will be downloaded soon. I feel the most difficult part of this project was to keep the code organized. Everything should be running through my app component. This was easy at first but became difficult as I introduced more code and components into the project. As I was coding, I realized that there are multiple ways to do one simple task. this made it a bit more difficult because I was trying to figure out what way would make my code clean and simple. I learned from my professor to always try to make your code clean and easy to read. This is very important because when there is something wrong with the code, making it clean will make it easy to find and fix the mistake. I am becoming more and more comfortable writing code and developing new material.
Using No-Code with Builder - Part 1
Tags: webdev, javascript, beginners, podcast
Published: 2022-01-25 01:47:52


Original: https://codingcat.dev/podcast/2-1-using-no-code-with-builder-io-part-1

{% youtube https://www.youtube.com/watch?v=sczoHXThVl8 %}

## Questions

1. What is a no code solution?
2. What is the difference between no code solutions like Wix or Squarespace and Builder**?**
3. Demo - [https://github.com/BuilderIO/builder/tree/main/examples/next-js-simple](https://github.com/BuilderIO/builder/tree/main/examples/next-js-simple)
4. Is there a dev preview version?
5. Is Builder.registerComponent hitting an API?
What are the differences between Svelte and react.js
Published: 2022-01-25 01:47:32


There are a few key differences between Svelte and React.js:

1. Svelte is a compiler, while React is a library. This means that Svelte outputs code that is ready to run, while React needs to be compiled into code that can run on a web browser.

2. Svelte is a newer technology, having been released in late 2017. React was first released in 2013.

3. Svelte is smaller in size, and can be less memory-intensive than React.

4. Svelte is less popular than React, but is gaining in popularity. 

5. Svelte has a smaller community of developers than React. 

Overall, both Svelte and React are great technologies, and it is difficult to say which is better. It really depends on your individual needs and preferences.

Thanks for making time to read this post. 

Please [follow me](GitHub.com/yakumwamba) on GitHub

Thanks happy coding ✌️
Holiday Funisode - Ask us Anything
Tags: podcast, webdev, javascript, beginners
Published: 2022-01-25 01:43:59

---
title: Holiday Funisode - Ask us Anything
description: We sit down with past Purrfect.dev guests to chat about Web Dev in 2021.
tags: podcast, webdev, javascript, beginners
cover_image: https://media.codingcat.dev/image/upload/b_rgb:5e1186,c_pad,w_1000,h_420/main-codingcatdev-photo/snow_event
series: purrfect_dev_1
published: true
canonical_url: https://codingcat.dev/podcast/holiday-funisode-ask-us-anything
---

Original: https://codingcat.dev/podcast/holiday-funisode-ask-us-anything

We sit down with past Purrfect.dev guests to chat about Web Dev in 2021.

{% youtube https://youtu.be/xeLTL9Q-2dY %}
How to find a frontend engineering job 2022
Published: 2022-01-25 01:40:00


In an economy where the average job tenure is 4.6 years, it’s important to be proactive about your career. Whether you’re just starting out or you’re looking for a change, learning how to get a job as a frontend engineer is a valuable skill.



Frontend engineering is a rapidly growing field. By 2023, there will be a shortage of 230,000 frontend engineers in the United States alone.

So, how can you make sure you’re one of the lucky few who lands a job in this in-demand field? Here are a few tips:

**1. Stay up to date with the latest trends and technologies**.

Frontend engineering is a constantly evolving field, so it’s important to stay up to date with the latest trends and technologies. If you want to get a job as a frontend engineer, you need to be able to not only design and build webpages, but also be familiar with the latest tools and frameworks.

**2. Get involved in the community.**

One of the best ways to stay up to date with the latest frontend engineering trends is to get involved in the community. There are a number of online and offline communities where you can learn from and connect with other frontend engineers. Attending meetups and conferences is a great way to meet other professionals and learn about the latest industry trends.

**3. Build a portfolio of your work**.

In order to get a job as a frontend engineer, you need to be able to show potential employers your work. A portfolio is the best way to do this. Make sure to include a variety of projects, from simple websites to more complex applications. If you don’t have any projects to include, you can also create a personal website or blog and showcase your work there.

**4. Get certified**.

There are a number of frontend engineering certification programs available, such as the Certified Front-End Engineer certification from the American Graphics Institute. Getting certified can demonstrate your knowledge and skills to potential employers and can help you stand out from the competition.

**5. Stay up to date on job postings**.

One of the best ways to find out about job openings is to stay up to date on job postings. There are a number of job boards and websites that list job openings for frontend engineers. Signing up for job alerts is a great way to make sure you don’t miss any opportunities.

 Landing a job as a frontend engineer can be challenging, but it’s definitely not impossible. By following these tips, you’ll be on your way to landing your dream job in no time.

Thanks for reading.
If you need any help building a portfolio contact me on brianlemba2@gmail.com
GitHub.com/yakumwamba
Creating Opportunities with Girl Develop It
Tags: webdev, javascript, beginners, podcast
Published: 2022-01-25 01:39:21


Original: https://codingcat.dev/podcast/1-51-creating-opportunities-with-girl-develop-it

{% youtube https://www.youtube.com/watch?v=xy19oczTQuk %}

## Questions

1. What is Girl Develop It and how did you get involved?
2. How do you get involved and start participating in Girl Develop It?
3. Where do you sign up for events?
4. What are the pricing options to join?
5. Are there scholarships?
6. Can you transition from a student to a teacher?
7. What opportunities are offered through GDI?
8. Can you tell us about the recent hackathon you held?
9. Do you bring in businesses to watch presentations or judge?
10. Does GDI partner with any other organizations?
11. Who can come to events? [https://girldevelopit.com/code-of-conduct/](https://girldevelopit.com/code-of-conduct/)
12. Is it okay to be a lurker in the classes and not be as active?
13. How can companies and sponsors get involved and reach out? [https://girldevelopit.com/partners/](https://girldevelopit.com/partners/)
14. Why should someone choose GDI to start their coding journey?
15. Where would you send someone who is just starting out to get involved?
16. What are some upcoming events?

## Additional Links

* GDI Events - [https://girldevelopit.com/events/#/list](https://girldevelopit.com/events/#/list)
Making State Management Domain Agnostic with @derxjs
Tags: webdev, javascript, beginners, podcast
Published: 2022-01-25 01:34:31


Original: https://codingcat.dev/podcast/1-50-making-state-management-domain-agnostic-with-derxjs

{% youtube https://www.youtube.com/watch?v=o12i7Ijveow %}

## Questions

1. **First tell us a little about yourself and your background.**  
  1. Senior Engineer and Engineering Manager at Nrwl
  2. Father of 6, Grandfather of 2
  3. Enthusiast for writing/podcasting/oss/other forms of communication (tech or otherwise)
  4. Co-founder DeRose Brothers Real Estate
2. What was your motivation to create @derxjs? 
  1. I'm extremely "long" on RxJS - in particular in its ability to elegantly compose domain-agnostic state management code.
  2. derxjs is a way of packaging that power in a way that separates "state" concerns with "view" concerns (the `DeRxJSViewModel` interface)
  3. derxjs/reducer is our first package for assisting folks in writing domain agnostic state management (that harnesses the power of RxJS without actually writing any)
  4. derxjs/react is our first package on the other side of the `DeRxJSViewModel` interface - designed to help folks leverage RxJS in their react projects (again, without actually writing any RxJS code)
3. How does this differ from rxjs or Redux? 
  1. This is a 'framework' (may be generous) for using RxJS - a 'spiritual successor' to NgRx
  2. derxjs/reducer should feel extremely familiar to anyone that's written NgRx or Redux code.
  3. Exciting things in the pipes from the "framework": declarative testing tools && ai powered code-generation

## Additional Links

* NPM `@derxjs/viewmodel` - [https://www.npmjs.com/package/@derxjs/view-model](https://www.npmjs.com/package/@derxjs/view-model)
* [https://www.npmjs.com/package/@derxjs/react](https://www.npmjs.com/package/@derxjs/react)
* [https://www.npmjs.com/package/@derxjs/reducer](https://www.npmjs.com/package/@derxjs/reducer)
* GitHub - [https://github.com/ZackDeRose/derxjs](https://github.com/ZackDeRose/derxjs)
* Part1 - [https://dev.to/zackderose/the-derxjsviewmodel-pattern-the-e-mc-2-of-state-management-part-1-3dka](https://dev.to/zackderose/the-derxjsviewmodel-pattern-the-e-mc-2-of-state-management-part-1-3dka)
* Part2 - [https://dev.to/zackderose/the-derxjsviewmodel-pattern-the-emc2-of-state-management-part-2-2i73](https://dev.to/zackderose/the-derxjsviewmodel-pattern-the-emc2-of-state-management-part-2-2i73)