How to extract media files from a anki flashcard package(*.apkg)

*.apkg

The .apkg file is a zip file (as you know). Inside, you'll find the collection (an sqlite3 database of notes/cards), the media file which you were trying to open, and a bunch of numbered files 0-whatever number(these are media files).

Just use 7zip tool open the apkg file and extract into a folder.
open the "media" file via a text editor tool to find the media file extension.

example of "media"

{"16486": "COCA_16486.mp3", }

rename "16486" file to a mp3 file, then you got the media file.

how media used in flash card

Export your flash cards into a plain text.
export_anki

[sound:COCA_16486.mp3]

spatially	<div style=''>英['speɪʃəlɪ]  美['speɪʃəlɪ]</div>	<div style=''>adv.空间地，存在于空间地；</div>	"<div><br /></div><div style='color:RosyBrown'>ADJ</div><div style='color:OrangeRed'>空间的;与空间有关的</div><div style=""font-weight:bold;"">Spatial is used to describe things relating to areas.</div><div style=''><b>例：</b>...the spatial distribution of black employment and population in South Africa.南非黑人就业与人口的空间分布</div><div style=''><b>例：</b>...spatial constraints.空间的限制</div><div><br /></div><div style='color:RosyBrown'>ADJ</div><div style='color:OrangeRed'>(能力)理解立体空间的</div><div style=""font-weight:bold;"">Your spatial ability is your ability to see and understand the relationships between shapes, spaces, and areas.</div><div style=''><b>例：</b>His manual dexterity and fine spatial skills were wasted on routine tasks.他灵巧的动手能力和杰出的空间识别能力都浪费在日常事务上了。</div><div style=''><b>例：</b>...spatial awareness.空间方位感</div>"	<div style='color:DarkOrange; font-style:italic;'>adj:spatial; </div>		[sound:COCA_16486.mp3]

example of web flash card

spatially

英['speɪʃəlɪ] 美['speɪʃəlɪ]
adv.空间地，存在于空间地；
"

ADJ
空间的;与空间有关的
<div style=""font-weight:bold;"">Spatial is used to describe things relating to areas.
例：...the spatial distribution of black employment and population in South Africa.南非黑人就业与人口的空间分布
例：...spatial constraints.空间的限制

ADJ
(能力)理解立体空间的
<div style=""font-weight:bold;"">Your spatial ability is your ability to see and understand the relationships between shapes, spaces, and areas.
例：His manual dexterity and fine spatial skills were wasted on routine tasks.他灵巧的动手能力和杰出的空间识别能力都浪费在日常事务上了。
例：...spatial awareness.空间方位感
"
adj:spatial;

at No comments:

fix up chromium m47 build error: unsupported reloc 42 against global symbol gmon_start

Error:
ld.gold: error: /usr/lib/gcc/x86_64-linux-gnu/5.3.1/../../../x86_64-linux-gnu/crti.o: unsupported reloc 42 against global symbol gmon_start

Solution:
export GYP_DEFINES="linux_use_bundled_gold=0"

at No comments:

bizcharts example: Line Chart

Chart UI

Line_Chart

Codes

ChartComponent.js
import React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;

export class LineChart extends Component {
  render() {
    const { data, width, height } = this.props;
    if (!data || data.length <= 0)
      return null;
    const ytitle = {
      autoRotate: true,
      offset: -10,
      textStyle: {
        fontSize: '22',
        textAlign: 'left',
        fill: 'rgb(75,83,87)',
        rotate: 0
      },
      position: 'end',
    };
    const xtitle = {
      autoRotate: true,
      offset: -20,
      textStyle: {
        fontSize: '22',
        textAlign: 'center',
        fill: 'rgb(75,83,87)',
        rotate: 0
      },
      position: 'end',
    };
    const line = {
      stroke: 'rgb(197,197,200)',
      lineWidth: 2
    };
    const axis = [];
    let i = 0;
    for (let key in data[0]) {
      axis[i++] = key;
    }
    let cols = {};
    cols[axis[1]] = { min: 0};
    cols[axis[0]] = { range: [ 0, 1 ] };
    const position = axis[0] + '*' + axis[1];
    return (
      <div style={{width:width,height:height}}>
      <Chart width={width} height={height} data={data} scale={cols} padding='auto'>
        <Axis name={axis[0]} title={xtitle} tickLine={null} line={line} label={null}/>
        <Axis name={axis[1]} title={ytitle} tickLine={null} line={line} label={null}/>
        <Tooltip/>
        <Geom type="line" position={position} size={2} color='rgb(82,63,91)'/>
        <Geom type='point' position={position} size={4} shape={'circle'}
          color='rgb(236,142,91)' style={{ stroke: 'rgb(236,142,91)', lineWidth: 2}}>
        </Geom>
      </Chart>
      </div>
   )
  }
};
 
App.js
import React, { Component } from 'react';
import {LineChart} from './ChartComponent';
import './App.css';

class App extends Component {
  render() {
    const data = [];
    let i = 0;
    for (i = 0; i < 10; i++) {
      let time = 1000*Math.random();
      let score = 10*Math.random();
      data.push({'Timeline':time, 'Score':score});
    }
    return (
      <div className="App">
        <LineChart data={data} width={400} height={400}>
        </LineChart>
      </div>
    );
  }
}

export default App;
 

Dependences

yarn add bizcharts yarn add @antv/data-set

Refers

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clock
https://github.com/alibaba/BizCharts/tree/master/doc/tutorial
 
at No comments:

bizcharts example : Doughnut Chart

Chart UI

chart_examples

key codes explaintion:

<Coord type='theta' innerRadius={0.45} />
without 'innerRadius={0.45}', UI will looks like:
chart_examples_full
without below codes, UI will looks like:
<Geom select={[false,{}]} type='intervalStack' position='percent' 
  color={['type', ['rgba(255, 255, 255, 0)']]} 
  style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}> 
</Geom>
chart_examples_null

Codes

ChartComponent.js
import React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;

export class ScoreChart extends Component {
  render() {
    const { width, height, score } = this.props;
    const scoreData = [
      { type: 'Score', value: score },
      { type: '', value: 10 - score },
    ];
    const scoreDv = new DataView();
    scoreDv.source(scoreData)
      .transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent'
    });
    const scoreColor = (type) => {
      if (type === 'Score')
        return 'rgb(152,191,182)';
      return 'white';
    };
    return (
      <Chart data={scoreDv} width={width} height={height} padding='auto'>
        <Coord type='theta' innerRadius={0.45} />
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', ['rgba(255, 255, 255, 0)']]}
          style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}>
        </Geom>
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', scoreColor]}>
        </Geom>
      </Chart>
    )
  }
};

export class StarChart extends Component {
  render() {
    let { width, height, situation, action, task, result } = this.props;
    if (width < 200)
      width = 200;
    if (height < 200)
      height = 200;
    const starData = [
      { type: 'Situation', value: situation },
      { type: 'Action', value: action },
      { type: 'Task', value: task },
      { type: 'Result', value: result },
    ];
    const starDv = new DataView();
    starDv.source(starData)
      .transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent'
    });
    const starColor = (type) => {
      if (type === 'Situation')
        return 'rgb(208,210,211)';
      if (type === 'Action')
        return 'rgb(151,191,182)';
      if (type === 'Task')
        return 'rgb(236,142,91)';
      if (type === 'Result')
        return 'rgb(64,43,74)';
      return 'transparent';
    };
    return (
      <Chart data={starDv} width={width} height={height} padding={['10%', '22%']}>
        <Coord type='theta' innerRadius={0.45} />
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', starColor]}>
          <Label content='type' offset={20}/>
        </Geom>
      </Chart>
    )
  }
}
App.js
import React, { Component } from 'react';
import {ScoreChart, StarChart} from './ChartComponent';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <StarChart width={200} height={200}
          situation={20} action={40} task={40} result={20}>
        </StarChart>
        <ScoreChart width={120} height={120}
          score={7}>
        </ScoreChart>
      </div>
    );
  }
}

export default App;

Dependences

yarn add bizcharts yarn add @antv/data-set

Refers

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clock
https://github.com/alibaba/BizCharts/tree/master/doc/tutorial
at No comments:

sed replace shell variable which include slash ('/')

Test content

cat test-sed.txt
aaa/bbb/ccc/ddd/eee
fff/ggg/ss

replace "ccc/ddd" to "CCC/DDD" via sed

NEW_STRING="CCC/DDD"
sed -i "s:ccc/ddd:${NEW_STRING}:" test-sed.txt

Notes:

  1. use ':' as seperate char rather than '/', which is default
  2. use "" include the replace command
at No comments:

Await is a reserved word error

Solution:

In order to use await, the function directly enclosing it needs to be async.
example codes:

async tryGetUserName() {   let session = await Auth.currentSession();   ...... }

async should be there, otherwise you will get the error.

at No comments:

Fix up: Can't Load URL: The domain of this URL isn't included in the app's domains.

Issue

cannotloadurl_fb_share
Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

Scenario

  1. create a facebook app to get an appid
  2. use that appid in website to initialized the facebook javascript SDK
  3. use FB.ui to share content to facebook

full source codes

<!-- init facebook js sdk via your appid -->
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'yourappid',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.1'
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<script>
function share() {
    // use FB.ui() to share content to facebook
    FB.ui(
      {
        method: 'share',
        href: 'urlyouwanttoshare',
      },
      // callback
      function(response) {
        if (response && !response.error_message) {
          alert('Posting completed.');
        } else {
          alert('Error while posting.');
        }
      }
    );
}
</script>

<button onclick="share()">share</button>

Solution

1.Go to your app in facebook developers page(Settings->Basic)
2.Scroll down and Click on Add platform, choose Web sites
addplatform_website
3.Input your website domain
if you are testing via http://localhost:8080 then input http://localhost:8080
4.Save the changes
Then test again. you will find everything goes well.
sharewell

Notes

App Domains is not working for web site share to facebook.
That might be used for mobile apps.
at No comments:
Subscribe to: Posts (Atom)

fixed: embedded-redis: Unable to run on macOS Sonoma

Issue you might see below error while trying to run embedded-redis for your testing on your macOS after you upgrade to Sonoma. java.la...