teleren/devto huggingface dataset:
Building A math community. MathJax
Tags: math, javascript, tristan
Published: 2021-09-18 00:09:35

#Introduction
- This series is going to be dedicated to building and launching my first web app, which is a website focused around individuals creating and sharing math content. Join me and let us try to to make our way through this.

###How did I found out about MathJax?
- I simply created a post on twitter asking, `Does anyone know any good JavaScript libraries for visualizing math equations?`. Eventually, a geophysicist replied with one word, `MathJax` and that is how I found it. So if you ever have a question, tweet about it into the endless void that is twitter and maybe the void might answer back.

###What is MathJax?
- It is a open-source JavaScript display engine for LaTeX, MathML and AsciiMat notation that works in all modern browsers. It was created with the goal to combine the power of modern web technologies with mathematics. MathJax requires no setup  on the part of the user(no plugins), so the page author can just write documents that include mathematics and be confident that users will be able to view it properly. Basically, just add  MathJax to the project and it will handle displaying all the math.

- In MathJax mathematics is text based rather than image based, meaning that it can improve SEO because the equations are searchable just like normal text on websites.

- MathJax includes the ability to generate speakable text versions of equations that can be used with screen readers. MathJax is highly configurable, allowing authors to customize it for the special requirements for any site

- MathJax also has a rich API that can be used to make the mathematics on our webpages interactive and dynamic.

- So now that we all know a little big more about MathJax I am working on creating a text editor in React that has the abilities of MathJax.


#Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
"Failed to initialize client context with error": A Error When Trying to Run a Widget in the Xcode Simulator (M1 Macs)
Tags: ios, swift, xcode
Published: 2021-09-18 00:05:58

---
title: "Failed to initialize client context with error": A Error When Trying to Run a Widget in the Xcode Simulator (M1 Macs)
published: true
description: 
tags: #iOS #swift #xcode
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p>This is a short post about an issue I recently had with updating a widget for a SwiftUI project. I kept getting a weird error every time I tried to run a widget target in the simulator. The error read "<strong>Failed to initialize client context with error</strong>". This was followed by a crazy long error message spit out by the debug console in Xcode. I googled everything and I finally found the solution! (<strong>Note: This only happened on my M1 Mac</strong>) </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>What you need to do to fix this error is toggle off the "<strong>Open using Rosetta</strong>" button. To do that you need to right click on the Xcode app icon and go to <strong>"Get Info"</strong>. In the Get Info window you are going to want to toggle off the "<strong>Open using Rosetta</strong>" button. Now if you quit Xcode and reopen, you shouldn't see that error pop up again. Go re-run the widget in the simulator and VOILÀ! </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Until Apple fixes all the weird errors with supporting both <strong>Intel</strong> and <strong>M1</strong> chips for Xcode, you might need to toggle on and off "<strong>Open using Rosetta</strong>".</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I really hope this helps you from losing your mind googling for an answer to this solution!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading!</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1800,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttom.com/wp-content/uploads/2021/09/Screen-Shot-2021-09-17-at-7.35.52-PM-444x1024.png" alt="" class="wp-image-1800"/></figure></div>
<!-- /wp:image -->
Open Source: Test & Review a Static Site Generator(SSG)
Tags: opensource, javascript, node, devops
Published: 2021-09-18 00:02:22

Being new to open source, testing SSG can be difficult. My first open source project was creating a static site generator. Honestly, I didn't even know what SSG was, and it took me longer than I expected to complete this project.

I used Node.js to generate HTML file(s) from text file(s), and my partner [Anatoliy Serputov](https://github.com/aserputov) also used it. We met on Slack and decided to collaborate to test and review each other's projects. Even though we used the same language, his way was different from mine: such as using different methods, NPMs, markdown, and the way to generate HTML file from templates. Moreover, after he tested my project and gave me reviews in a nice way, it was a really good experience that someone checked my code carefully and suggested many things for me to improve my project.

###Test & Review
Anatoliy found a very simple and efficient way to generate HTML files using methods and techniques I didn't know. His project successfully generates HTML files, but also I found 5 small issues and posted them on GitHub repository. (URL:https://github.com/aserputov/final-qck-ssg/issues). I would like to summarize them in the following 3 points.

####1.User interface
When the program run, there was no message on the command line if the program run properly. He commented out the console.log('File is created successfully.'), so I suggested him to keep the console. Also, even though HTML files were generated correctly, there was a warning, "(node:16300) ExperimentalWarning: The ESM module loader is experimental.". I'm still not sure why it displays, so I would like to figure out how to get rid of it.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmicpbhif02p5v6q7ao5.png) 

####3.Basic Function
I have the same problem: if spaces includes the name of the text file, the program can't open the file. Therefore, he made it possible to read a text file and generate an HTML file by storing the text file in the specified folder.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktfj5h0mzk9kep4wrav9.png) 

####2.Features
When I run -v or --version flag, only --version worked, and -v didn't work, so I told him, and he already fixed it. In addition, I used Prettier to format the HTML files, so I recommended it to him, and he implemented it too.

###Fix my issues
Issues on GitHub: https://github.com/MizuhoOkimoto/pajama-ssg/issues
These are the issues that Anatoliy reviewed. I will try to fix my issues to make it better and useful! Stay tuned for the update!

###Conclusion
As students, we're not supposed to see other students' code, so testing and reviewing was a new experience. Testing and reviewing another person's project was complex, but I learned many things from his code, and I will fix my issues from his review.
It was our first project, but very complicated, so I couldn't see how to achieve it at first. However, after my classmate and partner helped me through our Slack community, it became clearer in which direction I should move forward.
How to make object properties optional in TypeScript?
Tags: typescript
Published: 2021-09-18 00:00:00

---
  title: How to make object properties optional in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Sep 18 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-object-properties-optional-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-afaab2f4765b19913176a2a6cd485985.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-object-properties-optional-typescript)
  
To make object properties optional, we can declare the variable name, followed by the `:` symbol (colon), followed by the `{}` symbol (Open and close curly brackets). Inside the brackets, we can define the name of the property followed by the `?` (question mark) and `:` (colon) symbol, and finally the type of property to make it an optional object property in TypeScript.

To end the type declaration we can either use the `;` symbol (semi-colon) or the `,` symbol (comma).

### TL;DR

```ts
// simple object
// with types added for each property
// and an optional age property
let personDetails: {
  name: string;
  age?: number;
};

// This is allowed ✅
// we can omit the value for the age property
// and TypeScript won't show us an error
personDetails = {
  name: "John Doe",
};
```

For example, let's say we have an object called `personDetails` having 2 properties called `name` and `age` like this,

```ts
// simple object
const personDetails = {
  name: "John Doe",
  age: 23,
};
```

As you can see from the above code, the `name` property has a value called `John Doe` and the `age` property has a value called `23` but we don't need to have a value for the `age` property which means the `age` property is optional.

To make an object property optional, it can be done like this,

```ts
// simple object
// with types added for each property
// and an optional age property
let personDetails: {
  name: string;
  age?: number;
};
```

Now let's try to add the required property `name` and the optional property `age` values like this,

```ts
// simple object
// with types added for each property
// and an optional age property
let personDetails: {
  name: string;
  age?: number;
};

// This is allowed ✅
personDetails = {
  name: "John Doe",
  age: 23,
};

// This is also allowed ✅ ✅
// we can omit the value for the age property
// and TypeScript won't show us an error
personDetails = {
  name: "John Doe",
};
```

As you can see that TypeScript won't show us an error if don't supply the `age` property which is the functionality we want.

See the execution of the above codes live in [codesandbox](https://codesandbox.io/s/make-object-properties-optional-in-typescript-z1rx9?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Projects Tutorials For Learning React.js
Tags: react, javascript, webdev, typescript
Published: 2021-09-17 23:48:20

## Projects tutorials for learning REACT.JS

+ [ netflix, disney, testla, facebook, whatsapp, amazon clone... - playlist (20 videos)](https://www.youtube.com/watch?v=R_OERlafbmw&list=PL-J2q3Ga50oMQa1JdSJxYoZELwOJAXExP)
+ [ recipe app using react (50min) ](https://www.youtube.com/watch?v=U9T6YkEDkMo)
+ [ React Tutorial: Build an e-commerce site from scratch using React and Netlify (6h 30min)](https://www.youtube.com/watch?v=wPQ1-33teR4)
+ [ 15 projects using React (9h) ](https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=30377s)
+ [ React budget calculator (2h) ](https://www.youtube.com/watch?v=f6HYLHrYpGs)
+ [ React Projects (traversy media) - playlist (30 videos)](https://www.youtube.com/watch?v=FiGmAI5e91M)
+ [ Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js) (1h 30min) ](https://www.youtube.com/watch?v=khJlrj3Y6Ls)
+ [ Response React Portfolio Website Tutorial (2h 30min)  ](https://www.youtube.com/watch?v=7WwtzsSHdpI)
+ [ React E-Commerce App Design Tutorial | React Shopping Cart UI Design (3h) ](https://www.youtube.com/watch?v=c1xTDSIXit8)
+ [ Movies App - React Project (40min) ](https://www.youtube.com/watch?v=sZ0bZGfg_m4)

Have a good day!
Euclid's GCD Algorithm
Tags: python, programming, computerscience, functional
Published: 2021-09-17 23:42:04

```python
# euclid_gcd.py
#   Euclid's algorith states that starting with values m and n, if we were
#   to repeatedly apply the formula: n, m = m, n%M until m is 0.
#   This program finds the GCD of two numbers using this formula.
# by: Scott Gordon

def gcd(n, m):
    while m != 0:
        n, m = m, n % m
    return n


def main():

    print("Welcome to Euclid's GCD algorithm\n")
    num1, num2= input("Enter two natural numbers (n1, n2): ").split(",")

    print(f"The GCD of {num1} and {num2} is {gcd(int(num1),int(num2))}")


if __name__ == '__main__':
    main()
```
Google Maps React Wrapper
Tags: googlemaps, react
Published: 2022-04-01 02:04:40

---
title: Google Maps React Wrapper
published: true
date: 2021-09-17 23:17:44 UTC
tags: googlemaps, react
canonical_url: https://justin.poehnelt.com/posts/google-maps-react-wrapper/
---

The package [@googlemaps/react-wrapper](https://www.npmjs.com/package/@googlemaps/react-wrapper) is a wrapper component that helps load the Google Maps JavaScript API. Below is a short snippet demonstrating usage.

```js
import { Wrapper, Status } from "@googlemaps/react-wrapper";

const render = (status: Status): ReactElement => {
  if (status === Status.LOADING) return <Spinner />;
  if (status === Status.FAILURE) return <ErrorComponent />;
  return null;
};

const MyApp = () => (
  <Wrapper apiKey={"YOUR_API_KEY"} render={render}>
    <MyMapComponent />
  </Wrapper>
);
```

Recently I livecoded its usage and created `google.maps.Map` and `google.maps.Marker` components.

<iframe width="560" height="315" src="https://www.youtube.com/embed/Xwcud1Qnnsw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

If you have any questions about its usage, please feel free to open an issue on [GitHub](https://github.com/googlemaps/react-wrapper/issues).
Laravel migration squashing and use of SQLite in automated testing
Tags: laravel
Published: 2021-09-17 22:40:21

I recently started taking more conscious efforts of improving the confidence I have in my deployments by writing automated tests.

However, since the introduction of [Laravel's  migration squashing](https://laravel.com/docs/8.x/migrations#squashing-migrations), I have been having a hard time writing tests that use the [`RefreshDatabase` trait](https://laravel.com/docs/8.x/database-testing#resetting-the-database-after-each-test). This is particularly because my development is typically with MySQL and testing is with SQLite.

The pains that this new squashing feature brings to sqlite testing is well [documented](https://github.com/laravel/framework/issues?q=is%3Aissue+is%3Aopen+squash), and Taylor himself acknowledges this, because he [recommended against using in-memory sqlite db during testing](https://github.com/laravel/framework/issues/35162#issuecomment-725476371) (btw, in-memory sqlite db is usually the go-to solution for db testing in Laravel.)

Assuming you have already squashed your migrations into dump file and you have something like your `mysql-schema.dump` file, then the way I approach tests that includes migration is to:

**Step 1.** Convert the `mysql-schema.dump` SQL content to SQLite's SQL, and save the file. I typically use [this tool](https://github.com/dumblob/mysql2sqlite)
```
$ mysql2sqlite.sh mysql-schema.dump > converted.sql
```

**Step 2.** Move the new dump to Laravel's schema dump folder, and ensure to [name it appropriately with the connection name](https://github.com/laravel/framework/issues/36523#issuecomment-795646743).

When I follow these steps, it is now much more comfortable writing tests that use the `RefreshDatabase` trait with SQLite as testing db. For as long as I do not come across a better way to handle this migration-squashing-sqlite-testing thingy, I may end up re-visiting this post. So, it is a note to future self!

I hope this post saves you a few minutes of debug time. See you in the next 😎
The REAL difference between 5GHz or 2.4GHz WiFi
Tags: wifi, watercooler
Published: 2021-09-17 22:18:50

This post comes from some interesting tweets I saw, and really speaks to how difficult it can be to get the right amount of "correctness" when you seek to find out about how technology works.

Maybe you know the answer posed in the title, maybe you think you know, maybe you were afraid to ask. Lucky for you, @bnb came asking.

{% tweet 1438886755156045832 %}

Several folks popped in with answers...

{% tweet 1438887540132438016 %}

{% tweet 1438887304878333963 %}

{% tweet 1438897154500792322 %}

We have consensus, right?

Basic Internet research would back this up...

![5 vs 2.4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drazdenpas61tlwef994.png)

Case closed... Except.

{% tweet 1438892061487366144 %}

{% tweet 1438892507480289284 %}

That's a whole different story. But the whole Internet is telling me about "shorter range" at 5GHz.

I don't want to leave anyone here with an absolute conclusion, as I don't want to take anyone here "at face value".

If anyone wants to go deeper in the comments in the comments with some absolute facts on the issue, I very much welcome them.
Lab 1
Tags: opensource, ssg
Published: 2021-09-17 22:17:59

This week I worked with [Joshua Li](https://github.com/joshuali7536) on each other's SSGs. We both wanted to work in C++ so that narrowed down the options quite a bit, I was surprised at how few people wanted to try in C++. 

The hardest part of testing/reviewing Joshua's code was finding anything to critique, it was that good. Like when a prof gives you code to work on, logically organized, concise and without mistakes. His code [wouldn't compile](https://github.com/joshuali7536/LennahSSG/issues/2) using g++ originally, but after ignoring the warnings that came up it compiled fine. I think it was just a case of the compiler being finicky, it wasn't liking the multiple declarations of having prototypes earlier in the file but it ran fine after I ignored those. He also included an executable so it wouldn't have made much of a difference regardless. 

The other issues I logged were more just nitpicks to get to the minimum allowed issue number, I think you'd agree if you took a look at [his repo](https://github.com/joshuali7536/LennahSSG).

My code had a lot of issues when he looked at it yesterday, [for example](https://github.com/gusmccallum/GAS-ssg/issues/8) not creating a `./dist/` folder for output. I've never used _mkdir before so that was something I hadn't yet implemented. 

Another issue was [not iterating through a whole folder](https://github.com/gusmccallum/GAS-ssg/issues/9). I think this one was actually due to an issue naming the output so the files were getting overwritten to a single `.html` file.

I don't think I learned much from the testing and reviewing. Maybe I passed it off too soon but I was pretty aware of the work that had to be done, I just hadn't had time to get it all worked out yet. It was cool having someone to talk to and bounce ideas off of though. I got stuck at one point because my visual studio solution was using the wrong C++ standard, and I quickly got advice from Joshua on how to fix it without having to spend the time troubleshooting and googling fixes. I don't think that's far off from my usual school experience, but maybe that's why an academic environment lends itself so well to open source development. Being in a setting with peers working on the same projects naturally means you're inclined to help each other break through those roadblocks and learn better for it.
GAS SSG
Tags: opensource, ssg
Published: 2021-09-17 21:43:45

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k43yyb9bbfl4r58e124t.png)
 

This week I wrote a Static Site Generator in C++ that takes a text file or folder structure and generates HTML files based on any text files found within. It's been 8 months since I've written any code so it was a big undertaking getting back into it, but it felt good to code in C++ again. There's a lot I could've written more efficiently, some code duplication etc. but it gets the job done and got me working with classmates to solve some problems open source style.

The SSG comes in .cpp form and should be compiled using C++17 to support the recursive file system searching feature from <filesystem>. It accepts command line arguments -i or --input to specify an input file or folder structure, -h or --help for info on the commands to use, and -v or --version for version information.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7laijidv5bx6kbi5eax.png)

If there's a title with 2 blank lines following it, GAS will make this the title of the page. This line will also be be made an `<h1>` element.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unvwy11qn0yxng3u69o7.png)

The blocks of text are split up into `<p>` tags if a blank line is found between them. That's about all there is to it, you can check out the repo  [here](https://github.com/gusmccallum/GAS-ssg) and a sample HTML page generated [here](https://gusmccallum.github.io/).
UNVT活動
Tags: unvt
Published: 2021-09-17 21:26:38

自然発生的に「UNVT 活動」という用語が職場で生まれつつあります。日本の教育現場の伝統「部活動」に近いニュアンスを感じます。島崎藤村の詩に「天地はまさに奮闘と鋭意と活動との舞台なり」という表現があるそうです。私もアクティビストを名乗れる兆しかと面白く感じると共に「活動を展開する」という観点から UNVT を見直してみようと思います。あなたはどう考えますか。
SUHHEE_SSG_OSD-release0.1
Tags: opensource, osd600, cli, html
Published: 2021-09-17 21:14:50

# SUHHEE_SSG_OSD-release0.1
This is an html generator from text file to html.

# Technology used
+  Node.js

# License Used
+ MIT License

# Created by
+ Suhhee Kim

# Github Repo
+https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg

# Before Use You need to do
1. Download or clone the code.<br>
2. Download node, if you dont have it.<br>
3. Add environment variable on your laptop(C:\Program Files\nodejs)<br>
4. Open the codes.<br>
5. Locate yourself to create-ssg (cd create-ssg).<br>
6. Open cmd, type npm i and wait for download.<br>


# Main Features
1. Run by Commands, such as help, version and input(Please look at the HElP for details!)
2. It will convert your text file to Static HTML file with some styles!

# Optional Features
1. It has built in Fancy styled css!
2. Also able to add your external css with the command -styledInput(-s) with link(Details and example is in HELP!)



## Help:
1. create-ssg --version(-v) :<br>
it will show you application name and version<br>
```
  ex.
  $ create-ssg  --version
  $ create-ssg  -v 
  ```
 2. create-ssg  --help(-h) :<br>
         it will give you all the instruction that you need to use this application.<br>
 ```        
  ex.
  $ create-ssg  --help
  $ create-ssg  -h 
  ```       
 3. create-ssg --input [filename/foldername](-i [filename/foldername]) :<br>
         it will automatically create website for you using file that you put in command line<br>
         or if you put folder name then it will automatically get all the txt files from the folder and create website for you.<br>
```
  ex.
  $ create-ssg  --input [filename/foldername]
  $ create-ssg  -i[filename/foldername] 
```
  4. create-ssg --styledInput [filename/foldername] [external css link] (-s [filename/foldername] [external css link]): <br> 
           it will automatically generate website \n \t with beautful external css"
```
  ex.
  $ create-ssg  --steyledInput [filename/foldername] [external css link]<br>
  $ create-ssg  -s [filename/foldername] [external css link]<br>

```