Category Archives: JavaScript

JavaScript

Google Apps Script – reading and store feeds from feedly website – part 055.

You need to have an account with feeds on feedly.com and create a on this website. Open your google drive , create a new spreadsheet and open the Google Apps Script editor. This will allow to use this source code and the result of the running will be add into your spreadsheet:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function getFeedlyFeeds() {
  // your User ID-ul
  var userId = "";
  // your Access Token-ul
  var accessToken = "";
 
  var apiUrl = "https://cloud.feedly.com/v3/"; // URL for API Feedly
 
  //GET all feeds
  var response = UrlFetchApp.fetch(apiUrl + "streams/contents?streamId=user/" + userId + "/category/global.all", {
    headers: {
      Authorization: "Bearer " + accessToken
    },
    muteHttpExceptions: true
  });
 
  // check HTTP answer
  var statusCode = response.getResponseCode();
  if (statusCode === 200) {
    var responseData = JSON.parse(response.getContentText());
    // store data into items
    var items = responseData.items;
 
    // sorting
    items.sort(function(a, b) {
      var dateA = new Date(a.published);
      var dateB = new Date(b.published);
      return dateA - dateB;
    });
 
    // iterations for feeds
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      var title = item.title;
      var url = item.canonicalUrl || item.originId;
      var published = new Date(item.published);
 
      // create sheet name
      var sheetName = published.toISOString().split("T")[0];
 
      // get sheet
      var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
 
      // if sheet is not exist then create it
      if (!sheet) {
        sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet(sheetName);
        sheet.getRange("A1").setValue("Feed Title");
        sheet.getRange("B1").setValue("Feed URL");
        sheet.getRange("C1").setValue("Published Date");
      }
 
      // add feeds
      var lastRow = sheet.getLastRow();
      sheet.getRange(lastRow + 1, 1).setValue(title);
      sheet.getRange(lastRow + 1, 2).setValue(url);
      sheet.getRange(lastRow + 1, 3).setValue(published);
    }
  } else {
    Logger.log("Error HTTP: " + statusCode);
  }
}

JavaScript – page settings – 004.

This is an example of source code from an HTML page with basic settings:

JavaScript
1
2
3
4
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-...=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

The integrity attribute is used to ensure that the resource is loaded – in this case, the CSS file from the external CDN. The attribute value contains a cryptographic hash of the file contents, which is checked against the downloaded… Read More »

JavaScript – tweakpane example – 001.

This is a simple example with the tweakpane. Tweakpane is a compact pane library for fine-tuning parameters and monitoring value changes. I tested with this example source code created by me and works great:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.1/dist/tweakpane.min.js"></script>
</head>
<body>
  <div>TEST Tweakpane example</div>
  <div id='container' data-width="10px" style="width: 300px;"><canvas></canvas></div>
<script>
 
const size = +document.querySelector('#container').dataset.width
const canvas = document.querySelector('canvas')
canvas.width = size
canvas.height = size
const ctx = canvas.getContext('2d')
ctx.translate(size / 2, size / 2)
 
// a default definition for a class is not used to draw now
class ClassTEST {
  var_x = 0.5;
  var_y = 0.5;
  constructor() {
    this.setup()
    this.draw()
  }
  setup = () => {
    this._var_x = this.var_x
    this._var_y = -this.var_y
  };
  draw = () => {
    ctx.beginPath()
    
    requestAnimationFrame(this.draw)
  };
}
// end class ClassTEST
// create the new ClassTEST instance not used
const newClassTEST = new ClassTEST();
// next rows is used to draw on browser
const pane = new Tweakpane.Pane({container : document.getElementById('container')});
 
const folder = pane.addFolder({
  title: "Controls"
});
 
let values = {
  count: 1,
  lines: 1
};
 
folder.addInput(values, 'count', {
  min: 0,
  max: 99,
  step: 1
})
 
folder.addInput(values, 'lines', {
  min: 10,
  max: 100,
  step: 1
})
 
const btn = pane.addButton({
  title: 'Increment count by 3',
  //label: 'counter',   // optional
});
 
btn.on('click', () => {
  values.count += 3;
  pane.refresh();
});
 
const folder2 = pane.addFolder({
  title: "show a title "
});
 
const lastChange = (e) => e.last && s.setup()
folder2.addInput(newClassTEST, 'var_x', { min: 0.35, max: 0.95, step: 0.01 }).on('change', lastChange)
folder2.addInput(newClassTEST, 'var_y', { min: 0.2, max: 1, step: 0.01 }).on('change', lastChange)
 
</script>
</body>
</html>

If you want to test just use the Visual Code with Live Server extension, copy the source code and use… Read More »

JavaScript – airtable nodejs example – 002.

In the last tutorial, I used a default template project and this is shown on the source code like this:

JavaScript
1
table.select({maxRecords:3,view:'All tasks'}).firstPage();

If you use a grid view, see the next image: then the source code for selection is this:

JavaScript
1
2
3
table.select({
        view: 'Grid tasks view'
    }).firstPage();

If you want to use javascript, it needs to have a good field name. For… Read More »