teleren/devto huggingface dataset:
Scrolling to the Top in CSS
Tags: css, webdev
Published: 2020-08-03 13:40:24

This post was inspired by "[Stop Using Fixed Headers and Start Using Sticky Ones](https://dev.to/luisaugusto/stop-using-fixed-headers-and-start-using-sticky-ones-1k30)" by Luis Augusto, where he explained why `position: fixed` is an inferior way of sticking headers.

{% post https://dev.to/luisaugusto/stop-using-fixed-headers-and-start-using-sticky-ones-1k30 %}

## Problem

I want to add one tip for anyone doing sticky/fixed headers while keeping internal links working correctly. If you have a long page, you might include a table of contents that links to sections on the page. 

See this example from [our documentation site](https://documentation.platformos.com/api-reference/liquid/introduction):

![Table of contents](https://dev-to-uploads.s3.amazonaws.com/i/9bq3h2msj0vhzfefj8ju.png
)

By default, when you click on an internal link, the browser scrolls the page just below that element, which will cause it to be invisible for the user. This causes confusion. It is even worse if you have a fixed/sticky header on your website like we do because even more content will be covered due to this behavior. 

See an example from our documentation site after clicking on "Output":

![Before](https://dev-to-uploads.s3.amazonaws.com/i/hx2mkn17hd9wpexq37el.png)

This behavior is not user-friendly, so in the old days there were [multiple hacks](https://css-tricks.com/hash-tag-links-padding/) to fix it - I usually resorted to JavaScript because it didn't leave a trace in CSS or HTML.

# The modern solution

In 2020, there is a better way: use the CSS property called `scroll-margin-top`. Add it to a header that you are linking to, and the browser will subtract this value when scrolling. In our case we added:

```css
main h2, main h3 {
    scroll-margin-top: 95px;
}  
```

And now, after clicking on "Output":

![After](https://dev-to-uploads.s3.amazonaws.com/i/oe00ibtqslhky57grlmf.png)

We get a much better experience with a native-only solution.

[See a live demo](https://documentation.platformos.com/api-reference/liquid/introduction).

[Read more on scroll-margin on CSS-Tricks](https://css-tricks.com/almanac/properties/s/scroll-margin/).

## Read more

If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website. 

{% link https://dev.to/platformos/using-webp-in-your-existing-webpage-809 %}

{% link https://dev.to/platformos/optimizing-images-for-the-web-18gc %}

{% link https://dev.to/platformos/3-tips-on-preserving-website-speed-5g0c %}
Seeing Sound with Amit Nambiar
Tags: codeland, audio, visualization
Published: 2020-07-23 11:52:46

---
title: Seeing Sound with Amit Nambiar
published: true
description: Sharing a passion project of visualizing audio in 3D, talking through the assumptions, limitations, and challenges.
tags: codeland, audio, visualization
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dw8xm7m8ycvafjwfaqtr.png
---
Hey, I'm Amit! I'm an architect turned computational designer who now helps architects and engineers make buildings faster and better. 

In this talk I'm going to talk about a passion project I've been working on where I'm trying to visualise audio in 3D. Sound is an excitation of a medium like air which moves like a wave from the source. While this is well known when it comes to understanding the physics of it we are often introduced to squiggly lines on a paper followed by abstract interpretation of it in math. In this talk I'll be talking about my research project where I  parse audio using the WebAudioAPI and visualise it in its complete volumetric glory in the browser. I'll talk about my assumptions, limitations and challenges encountered in the process and attempt to breakdown the physics of some by showing its wavelike behaviour and how I use this information to create a 3D visualization.

Check it out at:
https://lotusaudio.herokuapp.com/view/5ee4fe4610a0ec114483fd4e

Slides:
{% slideshare NM9EY9oYslwfE %}

**[Here is a download link to the talk slides (PDF)](https://drive.google.com/file/d/1aE_MKYVWXeU2BI3LbpexjSs37vYefRon/view?usp=sharing)**

---
_This talk will be presented as part of [CodeLand:Distributed](https://codelandconf.com) on **July 23**.  After the talk is streamed as part of the conference, it will be added to this post as a recorded video._
Another stupid idea - another mini tool 
Tags: showdev, javascript, webdev, react
Published: 2020-07-17 09:52:49

---
title: Another stupid idea - another mini tool 
published: true
description: UI Component Playground
tags: #showdev, #javascript, #webdev, #react
---

People who've been reading for a while already know what I build and when I build them and they also already know where this post is headed. (For them: the link is at the end people)

Anyway, I have been looking for a simpler react playground for a while now.

"Codesandbox?" 
- nah that's just too much feature set. 

"Setup a personal storybook?" 
- nope. 

"Dude! Just import react scripts in codepen and go with it!"
- That's something I did for a while now, but then I got lazier and also upset by the fact that no one thought of building something minimal. 

Guess what.. I did. 

I went so minimal I didn't even spend time thinking for a name, I was watching a youtube video, the guys says "hen" and I was like , "Yeah, that's going to be the name!"

Now, I wanted to get as excited as a teleshopping host but I don't have that much energy at the moment.

### Short Description
It renders your react components in real time so you can use it for designing components or try out that new css experiment you just read about on CSS Tricks.


[Hen](https://hen.reaper.im)

I'm out.

Updates: 
 - Fixed the loss of focus on input state changes and smoother renders
Shifting left on the SDLC, .NET 5 improvements, and the Slack sequel
Tags: performancematters, performance, monitoring, dotnet
Published: 2020-07-19 21:30:52

Hi folks, 

Welcome back to another edition of Performance Matters. If you're a Ruby dev, you'll be happy to hear that our [Ruby APM beta is now LIVE!](https://twitter.com/raygunio/status/1283554835980185600) We're always looking for more beta testers and would love to hear your valuable feedback. 

This week, hear from our CEO, John-Daniel Trask, about the importance of shifting left in the SDLC, further improvements to .NET 5, and the sequel to Slack's terrible, no-good, very bad day.  

Enjoy! 

Your Curator 

------------------------------

#### FEATURED ARTICLES

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3fu91s6hoxon04ldblfz.png)

<strong>APM isn't just for Ops: Shifting Left and supercharging your developers</strong>

Hear directly from the CEO of Raygun, John-Daniel Trask, why the monitoring industry has been discussing shifting left on the SDLC.

[What this means for you](https://raygun.com/blog/shifting-left/?utm_medium=email&utm_source=performance_matters_dev_to&utm_campaign=shifting_left)

------------------------------

<strong>.NET 5 perf improvements</strong>

Releasing later this year, .NET 5 is already seeing a wealth of performance improvements. 

[Read about them](https://devblogs.microsoft.com/dotnet/performance-improvements-in-net-5/)

------------------------------

<strong>All hands on deck at Slack</strong>

Last week we covered an article outlining a very, very bad day at Slack. Learn how they responded to it. 

[Learn from their mistakes](https://slack.engineering/all-hands-on-deck-91d6986c3ee)

------------------------------

#### BUG OF THE WEEK

<strong>Spotify, Pinterest, Tinder, and others crash due to Facebook issue</strong>

Multiple big-name applications were crashing this week due to a now resolved issue involving Facebook log-ins. 

[Find out what happened](https://techcrunch.com/2020/07/10/facebook-code-change-caused-outage-for-spotify-pinterest-and-waze-apps/)

------------------------------

#### COMMUNITY

<strong>Simpsons against DevOps</strong>

This week we're wanting to hopefully bring a smile to your face by shouting out a comedy page that pokes fun at DevOps... with daily Simpsons memes 🤔

[Have a chuckle](https://twitter.com/SimpsonsOps)


------------------------------

If you think Performance Matters is pretty great, why not [sign up](https://performancematters.dev/) to receive it in your inbox every week? 🙌

------------------------------

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f3in3d0co2914exwgmkp.png)

------------------------------
10 extension ยอดนิยมสำหรับผู้ ใช้ vscode ประจำปี 2019
Tags: vscode, extension
Published: 2020-07-18 06:14:31

###**วิธีการติดตั้ง Extension บน VSCode**###
1. ให้กดปุ่ม Ctrl+Shift+X หรือกดปุ่ม Extension
2. ในช่องค้นหาด้านบน ให้พิมพ์ชื่อ Extension ที่ต้องการ
3. คลิกที่ปุ่ม Install เมื่อทำการติดตั้งเสร็จเรียบร้อยก็ให้คลิกที่ปุ่ม Reload

###**1.VS Color Picker, Color Highlight**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/slaqgl11aqtm1x7ghcj4.jpg)
ใช้เลือกสีในการไฮไลท์โค้ด มีสองโหมดให้เลือกจะเลือกสีเอง หรือ ไปดูดมาจากที่อื่นๆ ข้างนอกโปรแกรมก็ดูดได้

###**2.Open In Default Browser**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y0j8bfbb54etqit14oos.jpg)
เป็นวิธีการทำให้ VS Code สามารถรัน HTML ผ่าน browser ได้ โดยกดปุ่ม Ctrl+Shift+X หรือกดปุ่ม Extension ให้พิมพ์คำว่า open in browser

###**3.Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0hj649aapmtgoy3ckwwz.gif)
Bootstrap ช่วยในเรื่องการทำเว็บให้ responsive (รองรับทุกขนาดหน้าจอของผู้ใช้) แต่จริงๆ Bootstrap ยังทำให้ชีวิตเราง่ายขึ้นในหลายๆ ด้านมาก ไม่ว่าจะเป็นการดีไซน์เว็บให้สวยงามทันสมัยโดยที่เราเขียนโค้ดนิดเดียว หรือการจัด layout (แบบ) หน้าเว็บเราง่ายๆ โดยไม่ต้องเขียนโค้ด CSS เยอะ

###**4.GitHub**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3eu49kqpruavwqwshac3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lpx0zy6veghjkxsr47hm.jpg)
เวลามีโปรเจกต์หลาย ๆ คนคงจะพอคุ้นหูคุ้นตากันมาบ้างกับคำว่า “Git” หรือก็คือเครื่องมือ Version control ที่มีไว้สำหรับจัดเก็บความเปลี่ยนแปลงของไฟล์ในโปรเจกต์ของเราหรือทีม ไม่ว่าเราจะเพิ่ม ลบ เปลี่ยน ระบบก็จะบันทึกไว้ ทำให้เราสามารถรู้ประวัติการเปลี่ยนแปลงและความเคลื่อนไหวต่าง ๆ ของโปรเจกต์ที่เราถืออยู่ได้

###**5.Auto Close Tag**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k87u0bcmm671fefiel7s.gif)
เขียนแค่ tag เปิดก็พอ ไม่ต้องเขียน tag ปิด ลง Auto Close Tag ไว้ให้ editor ทำการปิด tag ให้เรา จะช่วยลดเวลาในการเขียนโค้ด

###**6.Auto Rename Tag**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e8rvg0nstjhtq96u5zwj.gif)
Auto Rename Tag เป็น Extension ที่ช่วยให้ผมสามารถแก้ไขชื่อ Tag แล้วตัวปิด Tag จะเปลี่ยนไปตามชื่อ Tag ที่แก้ไขด้วย ช่วยเพิ่มความสะดวกในการเขียนโค้ด

###**7.Live server**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l8693v6rsl2kqtv70dej.gif)
Live Server จะเป็นหน้าจอที่ 2 ช่วยแสดงผลลัพธ์ของโปรแกรมใน Code Editor แบบสดๆ ไม่ต้องนั่งสลับจอ หรือ Refresh ให้เสียเวลา เท่านี้การเขียนโค้ดก็จะง่าย และเร็วขึ้นอีกหลายเท่า

###**8.Quokka.js**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/etovsw3vjgsfoouyq88f.gif)
Quokka จะช่วยในการแก้ไขจุดบกพร่อง และทดสอบโค้ด Javascript ให้โดยอัตโนมัติ พร้อมทั้งแสดงผลลัพธ์ให้ดู ทำให้ไม่ต้องเสียเวลาไปดีบั๊กภายหลัง

###**9.vscode-icons**###

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0whpg93vwfnp8v9cvumj.gif)
‘VS Code Icons’ จะมาช่วยแยกประเภทของไฟล์ต่าง ๆ ในโปรเจคด้วย Icon ที่เป็นสัญลักษณ์ ที่ทำให้ง่ายสำหรับการค้นหาจึงช่วยประหยัดเวลา

###**10.Import Cost**###
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3jly8xc9o4ywm2sdhyrt.gif)
extension ที่จะคอยแสดงขนาดไฟล์ของ package ที่เรา import เข้ามา โดยจะแสดงให้เห็นทันทีว่า package ตัวไหนมีขนาดไฟล์เท่าไหร่
Microsoft Edge introduces native dark-mode
Tags: news, edge, browser
Published: 2020-07-18 07:46:48

A new option to force render webpages in *dark mode* has been added to Microsoft Edge.

### How to enable this feature?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hxqg0bg0trg9k266ecyw.png)

* Type `edge://flags/#enable-force-dark` into the URL bar. 
* Enable *Force Dark Mode for Web Contents*
* Restart

> Maybe this would be the reason people will move away from chrome

Hope this helped 💖
🤖E1 | Which Framework is the best😉? | 2020
Tags: qna, framework, motivation, coding
Published: 2020-07-19 11:14:33

In this series, I am going to be answering your coding/designing questions. I don't claim I have a lot of experience or that I know everything, I am just going to give you examples that have worked for me and I hope they will work for you as well.


In this video, I answer:
👣GENERAL QUESTIONS
1. How old are you? 1:11
2. Where are you from? 1:36
3. Are you an app developer? 1:49
4. Are you a UX/UI designer? 2:32
5. When did you realize you want to be in the tech field? 3:14


👣CODE and DESIGN questions
6. What's the fastest mobile development solution? 4:59
7. What are the best sources for development? 6:38
(check below for more information)
8. Any good tips for UX/UI? 9:09
(check below for more information)
9. Why should one write vanilla plain javascript? 11:38
10.Best framework?
React, vueJS, AngularJS? 13:10
11. Which framework should I learn first
(React, vueJS, AngularJS)? 13:51


👣COMING UP questions
- Brain fog 
- Procrastination 
- Motivation


************************************

Αbout the 7th Question 
To learn javascript I suggest starting with freeCodeCamp - freecodecamp.org
💪Check out my [playlist](https://www.youtube.com/watch?v=nijJ0xFZt8g&list=PLxktx98zP3aAylA3it3TYyF7x6lDhc0qi) on reviewing online courses (from udemy, codecamedy etc), to find out what best suits your needs

Αbout the 8th  Question
💪My free [course](https://www.youtube.com/playlistlist=PLxktx98zP3aBJpKas1z2zLQjSmzE3_CT3) about ux and UI, I think you'll like it!

💪Some [tools](https://www.youtube.com/playlistlist=PLxktx98zP3aBJpKas1z2zLQjSmzE3_CT3) that can help you in picking colors, images, typography, inspiration on design, etc
 


Αbout the 5th Question 
💪This is the [video](https://youtu.be/Y7m6rZXtNn8) on how I started my coding journey 


✅Season 1 of QnA can be found [here](https://www.youtube.com/playlistlist=PLxktx98zP3aDdYxC55TRQlm9k7nD60Wcb)
✅Season 2, Ep2 [here](https://youtu.be/oTEzCr-FmPc)

************************************

🤔If you have any question and you are searching for an answer, or you if you want a code/design review please choose a way to participate: 
1. leave a comment in this video.
2. or go the "community" tab on my YouTube channel and leave a comment there.
3. or go on twitter, find me on @BatsouElef, and ask me anything 


************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elefintech/)
Codebytes: How to mock upload files in the test cases
Tags: mockfileupload, fillinfile, javascript, codebytes
Published: 2020-07-19 06:27:42

---
title: Codebytes: How to mock upload files in the test cases
published: true
description: Mock file uploads with file input elements

tags: mockfileupload,fillInFile, javascript,codebytes
//cover_image: https://direct_url_to_image.jpg
---

Mocking file uploads with file input elements is not straight forward as mocking other HTML elements while writing test cases. Why and how do we do that?

```
<input type="file" id="file-upload" onchange="doSomething" />
```

The file input elements have [FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList) object as its value. The FileList is nothing but a collection of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects. The FileList object is **read-only** and we **cannot construct custom FileList** since it has no implementation of its constructor.

However, there is a way to construct them using the [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object.

DataTransfer object is responsible for holding the file objects in FileList during files drag & drop. We are gonna bypass the DataTransfer event's file addition methods to construct a FileList with our mocked files.

 Let's create one,

```
const dt = () => new DataTransfer() || new ClipboardEvent('').clipboardData;
```
> If the browser didn't support constructing a new DataTransfer, let's get the DataTransfer object from the [ClipboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData) (mock's file copy-paste) alternatively.

let's create a blob to construct a file object.

```
let fileString = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==';

(or)

let fileString = 'https://some-image-url.png';

let blob = await fetch(fileString).then(res => {
  return res.blob();
});
```

And now file object,
```
let file = new File([blob], "sample.jpg", { type: 'image/png'})
```
will add the file object to the DataTransfer,
```
let dt = dt();
dt.items.add(file);
```
and it's time to add the FileList to the file input element

```
let $fileElement = document.getElementById('file-upload');
$fileElement.files = dt.files;
```
🎉 Yay! The files have been added to the file element and now let's emit the change event so that your UI can respond to the file upload.

```
let changeEvent = new Event('change');
$fileElement.dispatchEvent(changeEvent);
```

To ease this, I have created a test helper util to fill files to the file input element.

```
await fillInFIle('#file-upload') ✅
```

Check the GitHub repo for more details on the util:

{% github https://github.com/prakashchokalingam/fill-in-file no-readme %}
Hi, we’re ErgoSesh and we are thrilled to be at CodeLand!
Tags: codeland
Published: 2020-07-23 11:51:23

---
title: Hi, we’re ErgoSesh and we are thrilled to be at CodeLand!
published: true
description: ErgoSesh is a team of ergonomic specialists revolutionizing the standard ergonomic assessment. 
tags: codeland
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gd64gb6ws9lk1xd2lxn0.png
---

[ErgoSesh](http://ergosesh.com/) is a team of ergonomic specialists revolutionizing the standard ergonomic assessment. We empower you through education, giving you the tools to be more mindful about your workspace. This is especially important for people who spend a lot of timing sitting or standing at a computer. 

ErgoSesh is also a dealer of ergonomic furniture including seating, sit to stand tables, and accessories. 

### Got questions? Let's Chat!

We are excited to be at CodeLand, and to meet everyone attending! You can reach us on our [DEV Connect channel](https://dev.to/join_channel_invitation/ergosesh-4oa1?invitation_slug=invitation-link-beb7bc) today at these times:

- 9:00-11:00am EDT
- 1:00-2:00pm EDT
- 5:00-7:00pm EDT

You can also leave a comment down below if those times don't work for you :)

### A special discount for CodeLand attendees ✨

We're happy to share 10% off of an online [ErgoSesh Appointment](http://ergosesh.com/) for all CodeLand attendees - just use promo code `CODELAND2020` at checkout!
Day 20: Code Refactoring
Tags: 100daysofcode, javascript
Published: 2020-08-05 18:10:04

I refactored the code in [consuming API's](https://dev.to/mtee/consuming-api-s-part-2-1b51) to two functions as a way to separate concerns. One function gets the habits from the database while the other displays the habits on a webpage.
```javascript
let getHabits = async function () {
  try {
    const response = await axios({
      url: 'http://localhost:4000/habittracker/habits',
      method: 'get'
    })
    displaySavedHabits(response);
  }
  catch (err) {
    console.log(err)
  }
}
```
I'll simply call the `displaySavedHabits()` function inside the `gethabits()` and pass in response as a parameter.
```javascript
let displaySavedHabits = function (response) {
//code to loop through response data and display on a webpage
}
```

Meanwhile whats cooking is a function to delete habits from the webpage. I should have the code working in no time.


_10 more days down_🥳🥳
_Day 20_
I created the Android logo using CSS and only 1 DIV. What do you think?
Tags: discuss, codenewbie, css, codepen
Published: 2020-08-09 09:09:30

The following image was drawn in CSS using only 1 DIV:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/14216ek6p3qabyker7lq.png)

I created the logo when I was bored and wanted to challenge myself drawing something with CSS but using only 1 DIV - the minimal amount of HTML element. The source code can be inspected here:

https://codepen.io/thadeuszlay/pen/ByRRZK

The result of it inspired me to do more of those projects - drawing something in CSS and using only 1 div. 

Do you have any questions? Let me know
SSIS Integration with existing Kafka Server
Tags: help, ssis, kafka
Published: 2020-08-12 11:24:43

We try to Integrate our existing Kafka server to our SSIS services, due we do complex transformation process to our Kafka messages which cannot meet our expectation for low latency when we use manual Python programming.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a0wosmyqxhim7axcejj1.png)

The job is to trigger SSIS process when there is new messages in Kafka server. Our message is in JSON format due the Kafka source is Debezium CDC source from our PostgreSQL. SSIS will breakdown the message into several new row and insert it into representative destination tables. As there's no Kafka Connectors to SSIS, so we use scripting task.

We use Confluent Client as our backbone for scripting the connectors, as it was also available with Apache Kafka, but we confused how to push the messages directly into SSIS, so we can make our Kafka server as a data source to our SSIS with this script and trigger SSIS process if there's new message come from Kafka. We still new using scripting for Kafka connection in SSIS due lack of example sources.
Simplifying DevOps: Live Stream Happening Now
Tags: devops, kubernetes, googlecloud, github
Published: 2020-08-12 17:43:12

There's a live premiere happening now about simplifying your DevOps with Chuka Ofili, a Google Developer Expert + Gigster Full Stack Engineer + Cloud Architect, who is discussing how to simplify your DevOps stack with skaffold, flux, k8s, docker, github, gitops, slack, and more: https://www.youtube.com/watch?v=vdPOI09polo&feature=em-lsp
What's the best documentation you've ever come across?
Tags: discuss, documentation, productivity
Published: 2020-08-12 22:18:56

---
title: What's the best documentation you've ever come across?
published: true
description: 
tags: #discuss #documentation #productivity
//cover_image: https://direct_url_to_image.jpg
---
Can you recall the best piece of documentation that's stuck in your mind? Did it help inspire you to write better documentation yourself?
MB01 Mybatis Overview
Tags: learning, mybatis
Published: 2020-08-13 06:03:22

## 此篇主要讲解一些Mybatis的基础

# Mybatis的功能

- 持久层框架
- 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集的过程
- 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的实体类映射成数据库中的记录

# 持久层

数据持久化——将程序的数据从瞬时状态（内存）转化到持久状态（存到数据库或IO文件）