teleren/devto huggingface dataset:
Pure Liquid, a starter kit for static websites with Liquid template
Tags: webdev, tutorial, jamstack, template
Published: 2022-09-18 16:32:13

There are a lot of template engines for static websites and dynamic websites. It takes time to learn a new template engine, especially for junior developers.

I wanted to standardize using the same template engine picked from Pug, EJS, Liquid, and so on in the project team to solve the issue.

It's been increased to build e-commerce sites with Shopify recently in my team. Shopify adopts Liquid as a template engine for theme development and introduces it to third-party developers.

Liquid is a template language created by Shopify, but you actually can leverage it to develop other products than Shopify.

For example, it might be more productive that you could develop a static website with Liquid if you usually build e-commerce sites with Shopify.

I made a starter kit for static websites and Jamstack with the liquid template from the above point of view.

## Pure Liquid
The name of starter kit is "Pure Liquid".
Pure Liquid enables you to develop a website more effectively than before if you are a theme developer for Shopify.
You can also choose the Jamstack pattern in this kit.

[💧 Pure Liquid](https://github.com/Kazuki-tam/pure-liquid#readme)

## Features
- Built-in static site generator
- Breaking HTML smaller files with Liquid
- HTML Validation with HTML-validate
- Lint TS files with ESLint
- Lint SCSS files with Stylelint
- Format code with prettier
- Compress images
- Creating SVG sprites
- Built-in test runner with Jest and Playwright

## Requirements
You need to follow these requirements below. I recommend you to use Yarn as a package manager.

- [Node v16+](https://nodejs.org/en/)
- [Yarn v2 (Recommendation)](https://yarnpkg.com/)

## Quick overview
You can set up a static website by running one command.
Please replace `<YOUR-PROJECT-NAME>` with your own.

```bash
yarn create pure-liquid <YOUR-PROJECT-NAME>
```

You are ready to develop, so follow the below commands to start.

```bash
cd <YOUR-PROJECT-NAME> && yarn build && yarn start
```

You'll see a default page when you access `http://localhost:8080`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5c3x3xd78xud6bl3b48.png)

## Thank you!
I appreciate you for reading this article through to the end.
I'll be trying to keep this starter kit as up-to-date as possible. Cheers!
ADOBE acquires FIGMA !!!
Tags: webdev, news, design
Published: 2022-09-18 15:33:57

As per the information received, Adobe has acquired Figma, which is said to be a new era of collaborative creativity, as detailed on their official news page.

[Adobe news](https://news.adobe.com/news/news-details/2022/Adobe-to-Acquire-Figma/default.aspx)

Adobe turns out to be one of the largest software companies.

## **Adobe Vs Figma**

Figma and Adobe both offer web design tools, but Figma has more free features currently.

Figma sells its core product using a freemium model, with the free 'Starter' plan being free for up to three editors.

In Adobe XD, you design in one place but share in another. Changes from different co-editors need to be merged manually.

Figma is Web-based, so your design file is a Web link, a kind of collaborative space for your entire team.

Figma is mostly used by medium-level companies compared to Adobe XD right now.

I'm not sure in the future, this may make the usage of Figma also expensive.

Usually, when an acquisition occurs, some pros and cons may occur.

## **Pros**

- Global exposure
- Market dominance
- New skills and resources
- Expertise is available
- Capital availability
- New perspectives and ideas

Among these, some are also mentioned by Adobe when defining their acquisition of Figma.

## **Cons**

- Cultural clashes between two companies
- Job losses or an increase in unemployment
- Employee morale may suffer
- Conflicts between company objectives
- Product establishment difficulties compared to previous approaches

The above facts purely depend on how things proceed in the upcoming months.

Adobe has already acquired more than 15 companies, so the pros and cons of things would be definitely looked up by them and handled properly.

In this technological world, there is always something which comes as a replacement for another as the era changes.

So let's hope for the best. If you have any thoughts as a developer on adobe acquiring figma feel free to drop below 👇

Thanks for reading ❤️ 

Connect with me via [Twitter](https://twitter.com/Dhanush_Nehru), [Instagram](https://instagram.com/Dhanush_Nehru), or [Github](https://github.com/dhanushnehru).
Github Field Day Philippines
Tags: github, microsoft, githubfieldday, philippines
Published: 2022-09-18 15:24:38


I just want to document my experience on attending the face to face Unconference for tech leader in Philippine Community.


Im Moren, an aspiring Info Tech student. I really wanted to share this great opportunity to meet all Tech Enthusiast in my country. Last September 1, 2022, I received an email stating that I've been selected as one of the attendees of Github FieldDay Philippines 🇵🇭 .

Who attend Field Day?
Field Day is for student leaders, and members of technical communities. Most attendees will be undergraduate students & young professionals.

What's an unconference?

It is a participant-oriented meeting where the attendees choose a topic or an agenda and discuss the particular agenda. There is an exchange of ideas and opinions. At the Field Day, most of the events will be talks and discussions conducted by the attendees.

How much does Field Day cost?
Field Day is free

Did we get a swag?
Yes!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2m41j8a4yo76lbbhxm5.jpeg)


Who is organizing Field Day?
Field Day is organized by GitHub Education, GitHub Field Expert, GitHub Campus Experts, Microsoft Learn Student Ambassadors, Google Developer Student Clubs, and technical student leaders.

credits to https://githubfieldday.com/ph2022/

EVENT REVIEW

Keynote Session 🌂

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u47i0zgay2dfq7lib4tt.jpeg)
We met Kuya.Dev on the day of the event. He share his insight  for career building in the tech industry.

You can find him on https://follow.kuya.dev.

Lightning Talk 🌂

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s69wncj9drvd7ovbjh1m.jpeg)

We also meet Mr. Ian that gives an inspiring message to achieve our dreams. He discuss Unlocking Potentials and Opportunities: Dream it. Build it. Live it.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oma4m2kj1qzk780ecxek.jpeg)

It’s such a wonderful experience for all inspiring tech students.
It’s an honor to connect with you all and build a strong foundation for the future tech. For all the community that shared their experiences from campus organization. Thank you. Be one empower billion. See you on the industry.


A regional unconference for leaders of technical student communities 💜💜💜 

You can checkout more here: https://githubfieldday.com/ph2022/


#githubfielddayphilippines #githubfieldday #github
Two things that make my Terminal experience awesome 🚀 in Mac/Linux
Tags: productivity, javascript, linux, webdev
Published: 2022-09-18 14:57:48

Hello people if you're a terminal or command person you would really wanna know these 2 things.


I have been using [iterm2](https://iterm2.com/) in mac and [Terminator](https://terminator-gtk3.readthedocs.io/en/latest/) in linux for a very long time because it provides me with the helpful feature that can split a single terminal window in to multiple panes.

When working with several terminal windows, this multiple pane view is extremely useful for organising them.

![Iterm2 Split pane view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj0bfb48vz3wmdocf7mq.png)

## 1. Fig
{% embed https://fig.io/ %}

This man autocompleted almost everything from reading package.json for commands ( web development related work) to github and basic command line operations.

Here is some basic web dev and git flows.

![Web Dev & Git Flows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r14z2fi6mvyri7hsviiz.gif)

This is currently stable in mac , beta in linux and in the development for windows.

## 2. theFuck
{% embed https://github.com/nvbn/thefuck %}


![Fuck helping me in git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/238xm99zy7wmlu267nky.gif)

Yep you heard that right and _The fuck_ is available for **Mac and Linux**.

When I make spelling errors in commands, I say “**fuck**,” and they take it personally. It doesn’t have to be that word personsally if its NSFW. We can configure to something like Jesus!

It doesn't have to be that word personsally if its NSFW. We can configure to something like **Jesus**

For my purposes, it works flawlessly, and I also have an Ubuntu laptop where I frequently use it.

_Peace_🕊

---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

## More Free Articles From me 

{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}
Hey there! I'm back
Published: 2022-09-18 14:30:58

Hey hey hey ! 
I'm back again, after a long time 😅.
Sorry for the delay, as you know I'm in 9th grade so there was a lot of pressure of exams and all the other things. But I'm now back I'll be coming back soon and I will starting writing in a week or so. I wrote this post just to tell you all that I'm here. Meet you soon again in a few days.

_spandy_
An Absurd Way to Try Amazon DynamoDB On-Demand
Tags: beginners, aws, database, cloud
Published: 2022-09-18 14:28:53

There are different ways to learn and test Amazon DynamoDB on-demand and test how the database processes requests without capacity planning. There are conventional ones, where you [follow the AWS documentation](https://aws.amazon.com/blogs/aws/amazon-dynamodb-on-demand-no-capacity-planning-and-pay-per-request-pricing/) and _"start 1,000 Lambda functions in parallel to generate load on the API endpoint, using random HTTP methods and random data for the item"_.

Or you can try a more absurd way to demonstrate how the write capacity and your billing are predictable in an on-demand mode. You can [cycle the Tour de France from Briançon to Alpe d'Huez](https://www.letour.fr/en/stage-12), invoking a Lambda function to generate the required load and match the profile of the stage. Climbing the legendary and gruelling Col du Galibier and Col de la Croix de Fer on two wheels is significantly harder than on DynamoDB.

**ConsumedWriteCapacityUnits**
![ConsumedWriteCapacityUnits on the Tour de France](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nglzote7594acf94q2i.png)

**Lambda Invocations**

![Lambda Invocations on the Tour de France](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oq8v7c5jblxbrcjcvux8.png)
The correlation between the _ConsumedWriteCapacityUnits_ that we pay on DynamoDB - as there is no provisioned one - and the _Lambda Invocations_ metrics is pretty striking. And they both match the route we had to cycle.

**Conclusions**

DynamoDB is indeed elastic but It is just a game, do not take me too seriously. Now go out there and start cycling!
"Copy to Clipboard" functionality in plain JavaScript
Tags: webdev, javascript, tutorial, programming
Published: 2022-09-18 14:20:27

In modern browsers, you can use Clipboard API to read and write to the system clipboard.

Clipboard API consists of four asynchronous methods:

- `navigator.clipboard.read()` - reading arbitrary data
- `navigator.clipboard.readText()` - reading text
- `navigator.clipboard.write()` - writing arbitrary data
- `navigator.clipboard.writeText()` - writing text

It's very easy to use the `writeText()` method to implement a simple "Copy to Clipboard" functionality.

HTML:
```html
<input type="text" id="copy-text">
<button id="copy-btn">Copy to Clipboard</button>
```

JavaScript:
```javascript
document.getElementById("copy-btn").addEventListener("click", function(e) {
  if (!navigator.clipboard) {
    console.error('Clipboard API is not available');
    return;
  }

  let text = document.getElementById("copy-text").value;
  navigator.clipboard.writeText(text).then(function() {
    console.log("Copied to clipboard");
  }, function(err) {
    console.error(err);
  })  
})
```

If you try to run this code, you should see "Copied to clipboard" text in the console after clicking the copy button.

## Explanation

```javascript
document.getElementById("copy-btn").addEventListener("click", function(e) {
  if (!navigator.clipboard) {
    console.error('Clipboard API is not available');
    return;
  }
```

First, we're attaching onclick event handler to our "#copy-btn" button, and checking `navigator.clipboard` is available. We don't want our code to break if it's not, so we will just log an error and return.

```javascript
  let text = document.getElementById("copy-text").value;

  navigator.clipboard.writeText(text).then(function() {
    console.log("Copied to clipboard");
  }, function(err) {
    console.error(err);
  })  
```

Then we're getting the text value from our "copy-text" input element, and using `navigator.clipboard.writeText` method to write it to the system clipboard. Keep in mind that `writeText` is an async method that returns a promise, and you need to use the promise API directly (like the above), or use async/await.

Common mistake I've seen often is to do something like this:
```javascript
navigator.clipboard.writeText(text)
console.log("Copied to clipboard")
```

Which will log "Copied to clipboard" immediately after calling `writeText` (regardless if the operation was successful or not).

## Permissions API

"clipboard-write" permission is automatically granted to pages when they are in the active tab, but if you need to explicitly check for the permission, you can use something like this:

```javascript
navigator.permissions.query({ name: "clipboard-write" }).then(p => console.log(p.state))
```
        
<hr><small>
Note: This is a snapshot of the wiki page from the <a href="https://betterways.dev">BetterWays.dev wiki</a>, you can find the latest, better formatted version here: <a href="https://betterways.dev/copy-to-clipboard-in-plain-javascript">betterways.dev/copy-to-clipboard-in-plain-javascript</a>.
</small>
What are the Photo Organizers?
Tags: tutorial, multimedia, ir, search
Published: 2022-09-18 14:16:59

## Multimedia Organizers functions
* They currently perform the search in photo set by organizing the photos based on their date, location, categories, etc.;
* They suggest to create a folder structure and put the files on it;
* They make automation for the import of the new photos into IR Multimedia Systems.

&nbsp;&nbsp;&nbsp; 
Also they make photo albums more searchable (that is driven by IR Multimedia Systems) by enriching the metadata (and improving its consistency) with minimal human involvement.

&nbsp;&nbsp;&nbsp; Therefore, they are chosen as a subject for the overview and comparison. 
[This](https://www.pixpa.com/blog/photo-organiser) provides the list of Photo Organizers for professional photographers and those organizers can be used by a usual user with a big photo album. 
There are even relevant [online courses](https://www.organizepictures.com/organize-digital-photos-course) available to guide the user how to organize the photos.
The more detailed comparison of photo organizers is provided by Wikipedia and available [here](https://en.wikipedia.org/wiki/Image_organizer).

![Multimedia Organizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9v4tgfi7uv6wdkrbyhg.png)

## Multimedia Organizer requirements
* They shall be able to identify of inconsistent or not existing photo metadata;
* They shall be able to suggest the ways to solve the inconsistency and absence;
* The most automated approach possible should be used because a user is going to work with a large number of items;
* A toolset available for a usual user and not for the enterprises shall be used as well.
* They shall provide integration with such Multimedia IR Systems like digiKam and Synology Moments.

## Multimedia Organizer approaches to create folder structure
* The idea is to avoid photos having the same file name in the folder.
* The folder name can be something like Date_Shoot-Type_Event Name;
* It can also include a location or any other information the user wants;
* In such a way the user can create subfolders based on the number of photographers or cameras;
Write Jest tests faster in VS Code with this extension
Tags: javascript, testing, showdev, productivity
Published: 2022-09-18 14:06:32

Hey there!

I’ve just released the VS Code extension for `jest-test-gen`, this is the fastest way to get an initial unit test file with boilerplate code in one click, directly from your favorite IDE.


To try it out simply use the link to install the extension:

https://marketplace.visualstudio.com/items?itemName=com-egm0121.vs-jest-test-gen

or just search for “**jest test gen**” inside the extension search bar in VS Code.

This will add a new command called “Generate Jest tests” to your command palette.

To use it simply open a (js| ts | tsx ) file in VS Code and then run the “Generate Jest tests” command and the generate unit test file will be written next to your source file and opened in the editor for you.

It supports code generation for the following exports:

- Typescript typed React class && functional components 
- React class && functional components 
- ES6 Classes 
- Named functions and arrow functions
- POJOs with methods

Try it out and let me know your feedback! 😃

For any issue found with the generated code, file an Issue on the `jest-test-gen` repo: https://github.com/egm0121/jest-test-gen

If you find this useful, please ⭐️ the project on [GitHub](https://github.com/egm0121/jest-test-gen).

Happy Coding!
AWS Lambda Function URLs and API Gateway
Tags: aws, lambda, apigateway, awslambd
Published: 2022-09-18 14:04:34

To construct resilient and scalable microservices, Enterprises are adopting **AWS Lambda aka serverless functions**. These microservices are composed of a couple of serverless capabilities that put into effect the commercial enterprise logic. Each characteristic is mapped to API endpoints, methods, and assets the usage of offerings inclusive of Amazon API Gateway and ALB.


We must say that **API Gateway** and **Function URLs** provide comparable features. But there are a few high-quality suit use instances for each Function URL and API Gateways. 
Lambda function URLs permit you to invoke your lambda function from a HTTPS endpoint. This permits you to show your function to packages outdoor of AWS with a HTTP client.
Earlier, customers who desired to expose their lambda function thru HTTP endpoint needed to first create a API gateway endpoint after which companion their lambda feature with it. This required some setup and know how API gateway works and its internals.
![AWS Lambda Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr60hs1dlwaxi6o7ovz8.PNG)

Lambda function URLs make this procedure lots lots easier. You can now fast upload a HTTPS endpoint via way of means of configuring your lambda function from the advanced settings section of the AWS Lambda console OR one can easily use IAC- cloudformation/CDK to configure it.

![Lambda Function URLs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6vwhu1bisdt8rpdfnfl.png)

![Function URLs Endpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohc1423ownvj9epg8e6b.png)
Function URLs are satisfactory to be used wherein you have to put in force a single-characteristic microservice with a public endpoint that doesn’t require the superior capability of API Gateway, inclusive of request validation, custom authorizers, or caching. For example, whilst you are imposing webhook handlers, shape validators etc. It is likewise the most effective manner to invoke your Lambda features in the course of studies and improvement with out leaving the Lambda console or integrating extra services.


![Lambda with API Gateway](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pobcvveu5fuq3fl43d18.png)
![Amazon API Gateway Ednpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k46lps3fpm4g5vjykyf8.png)
Amazon API Gateway is a service that makes it smooth in an effort to create, publish, and maintain APIs. Use API Gateway to take benefit of abilities like custom authorizers, request validation and transformation, IP whitelist / blacklisting, authorization through integration with Amazon Cognito and so on.

I'd highly suggest to try Lambda Function URLs for some use case to avoid API Gateway configuration and obviously the cost.